feat: add customer authentication and order dashboard

2026-09-16 09:06:48 +03:30
parent f49ef11c9c
commit 7c55b3916c
31 changed files with 2193 additions and 53 deletions
@@ -0,0 +1,44 @@
+'use client';
+
+import type {ReactNode} from 'react';
+import Link from 'next/link';
+import {usePathname, useRouter} from 'next/navigation';
+import {Button} from 'antd';
+import {DashboardOutlined, FileTextOutlined, LogoutOutlined, UserOutlined} from '@ant-design/icons';
+import {useAuth} from '@/app/context/AuthContext';
+import {useLanguage} from '@/app/context/LanguageContext';
+import {accountCopy} from '@/data/account';
+
+export default function DashboardShell({children}: {children: ReactNode}) {
+    const pathname = usePathname();
+    const router = useRouter();
+    const auth = useAuth();
+    const {locale} = useLanguage();
+    const copy = accountCopy[locale];
+    const links = [
+        {href: '/dashboard', label: copy.dashboard, icon: <DashboardOutlined/>},
+        {href: '/dashboard/orders', label: copy.orders, icon: <FileTextOutlined/>},
+        {href: '/dashboard/profile', label: copy.profile, icon: <UserOutlined/>},
+    ];
+    const active = (href: string) => href === '/dashboard' ? pathname === href : pathname.startsWith(href);
+    return (
+        <main className="max-w-7xl mx-auto min-h-[75vh] px-5 md:px-8 pt-28 pb-20">
+            <div className="grid lg:grid-cols-[240px,minmax(0,1fr)] gap-7 items-start">
+                <aside className="lg:sticky lg:top-28 rounded-2xl border border-subtle bg-elevated p-4">
+                    <div className="px-3 py-3 border-b border-subtle mb-3">
+                        <p className="font-bold text-primary">{auth.session?.profile.firstName || copy.account}</p>
+                        <p className="text-sm text-secondary mt-1" dir="ltr">{auth.session?.profile.phone}</p>
+                    </div>
+                    <nav className="flex lg:flex-col gap-2 overflow-x-auto no-scrollbar">
+                        {links.map(link => <Link key={link.href} href={link.href}
+                            className={`flex items-center gap-2 whitespace-nowrap px-4 py-3 rounded-xl transition-colors ${active(link.href) ? 'bg-brand text-ink-950 font-bold' : 'text-secondary hover:bg-surface-strong hover:text-primary'}`}>
+                            {link.icon}{link.label}
+                        </Link>)}
+                    </nav>
+                    <Button className="mt-3" type="text" danger icon={<LogoutOutlined/>} onClick={() => {auth.logout(); router.push('/');}} block>{copy.logout}</Button>
+                </aside>
+                <section className="min-w-0">{children}</section>
+            </div>
+        </main>
+    );
+}