Files
office_translator/office-translator-landing-page/components/dashboard-sidebar.tsx
Sepehr Ramezani 26bd096a06 feat: production deployment - full update with providers, admin, glossaries, pricing, tests
Major changes across backend, frontend, infrastructure:
- Provider system with model selection (Google, DeepL, OpenAI, Ollama, Google Cloud)
- Admin panel: user management, pricing, settings
- Glossary system with CSV import/export
- Subscription and tier quota management
- Security hardening (rate limiting, API key auth, path traversal fixes)
- Docker compose for dev, prod, and IONOS deployment
- Alembic migrations for new tables
- Frontend: dashboard, pricing page, landing page, i18n (en/fr)
- Test suite and verification scripts

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-04-25 15:01:47 +02:00

94 lines
2.9 KiB
TypeScript

"use client"
import Link from "next/link"
import { usePathname } from "next/navigation"
import {
LayoutDashboard,
Key,
BookText,
CreditCard,
Languages,
ChevronLeft,
} from "lucide-react"
import { cn } from "@/lib/utils"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Button } from "@/components/ui/button"
const navItems = [
{ label: "Overview", href: "/dashboard", icon: LayoutDashboard },
{ label: "API Keys", href: "/dashboard/api-keys", icon: Key },
{ label: "Glossaries & Context", href: "/dashboard/glossaries", icon: BookText },
{ label: "Billing", href: "/dashboard/billing", icon: CreditCard },
]
export function DashboardSidebar() {
const pathname = usePathname()
return (
<aside className="hidden w-64 shrink-0 border-r border-border bg-card lg:flex lg:flex-col">
{/* Brand */}
<div className="flex h-14 items-center gap-2.5 px-5">
<div className="flex size-7 items-center justify-center rounded-md bg-foreground">
<Languages className="size-3.5 text-background" />
</div>
<span className="text-sm font-semibold tracking-tight text-foreground">
Office Translator
</span>
</div>
<Separator />
{/* Navigation */}
<nav className="flex flex-1 flex-col gap-1 px-3 py-4">
{navItems.map((item) => {
const isActive = pathname === item.href
return (
<Link
key={item.href}
href={item.href}
className={cn(
"flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
isActive
? "bg-secondary text-foreground"
: "text-muted-foreground hover:bg-secondary/60 hover:text-foreground"
)}
>
<item.icon className="size-4 shrink-0" />
{item.label}
</Link>
)
})}
</nav>
<Separator />
{/* User section */}
<div className="flex items-center gap-3 px-5 py-4">
<Avatar className="size-8">
<AvatarFallback className="bg-accent text-accent-foreground text-xs font-semibold">
JD
</AvatarFallback>
</Avatar>
<div className="flex flex-col gap-0.5">
<span className="text-sm font-medium leading-none text-foreground">Jane Doe</span>
<span className="text-xs leading-none text-muted-foreground">jane@acme.com</span>
</div>
</div>
<Separator />
{/* Back to homepage */}
<div className="px-3 py-3">
<Button variant="ghost" size="sm" className="w-full justify-start gap-2 text-muted-foreground" asChild>
<Link href="/">
<ChevronLeft className="size-3.5" />
Back to home
</Link>
</Button>
</div>
</aside>
)
}