feat: add customer authentication and order dashboard

app/cart/page.tsx

@@ -1,8 +1,9 @@
 import type {Metadata} from 'next';
 import CartPage from '@/components/CartPage';
+import ProtectedPage from '@/components/auth/ProtectedPage';
 
 export const metadata: Metadata = {title: 'سبد خرید | روبات مارکت'};
 
 export default function Page() {
-    return <CartPage/>;
+    return <ProtectedPage><CartPage/></ProtectedPage>;
 }

app/context/AuthContext.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import type {ReactNode} from 'react';
+import type {AuthSession, CustomerProfile} from '@/types/account';
+import {createContext, useCallback, useContext, useEffect, useRef, useState} from 'react';
+import {AUTH_STORAGE_KEY, loginWithOtp, loginWithPassword, requestOtp} from '@/services/auth';
+import {saveProfile} from '@/services/profile';
+import AuthModal from '@/components/auth/AuthModal';
+
+interface AuthContextValue {
+    session: AuthSession | null;
+    isAuthenticated: boolean;
+    ready: boolean;
+    loginOpen: boolean;
+    openLogin: (onSuccess?: () => void) => void;
+    closeLogin: () => void;
+    sendOtp: (phone: string) => Promise<void>;
+    verifyOtp: (phone: string, code: string) => Promise<void>;
+    loginPassword: (phone: string, password: string) => Promise<void>;
+    updateProfile: (profile: CustomerProfile) => Promise<void>;
+    logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+export function AuthProvider({children}: {children: ReactNode}) {
+    const [session, setSession] = useState<AuthSession | null>(null);
+    const [ready, setReady] = useState(false);
+    const [loginOpen, setLoginOpen] = useState(false);
+    const successCallback = useRef<(() => void) | undefined>();
+
+    useEffect(() => {
+        try {
+            const saved = window.localStorage.getItem(AUTH_STORAGE_KEY);
+            if (saved) setSession(JSON.parse(saved) as AuthSession);
+        } catch {
+            window.localStorage.removeItem(AUTH_STORAGE_KEY);
+        } finally {
+            setReady(true);
+        }
+    }, []);
+
+    const persist = useCallback((next: AuthSession | null) => {
+        setSession(next);
+        if (next) {
+            window.localStorage.setItem(AUTH_STORAGE_KEY, JSON.stringify(next));
+            window.localStorage.setItem('rm-auth-token', next.accessToken);
+        } else {
+            window.localStorage.removeItem(AUTH_STORAGE_KEY);
+            window.localStorage.removeItem('rm-auth-token');
+        }
+    }, []);
+
+    const finishLogin = useCallback((next: AuthSession) => {
+        persist(next);
+        setLoginOpen(false);
+        const callback = successCallback.current;
+        successCallback.current = undefined;
+        callback?.();
+    }, [persist]);
+
+    const openLogin = useCallback((onSuccess?: () => void) => {
+        successCallback.current = onSuccess;
+        setLoginOpen(true);
+    }, []);
+
+    const closeLogin = useCallback(() => {
+        successCallback.current = undefined;
+        setLoginOpen(false);
+    }, []);
+
+    const value: AuthContextValue = {
+        session,
+        isAuthenticated: Boolean(session),
+        ready,
+        loginOpen,
+        openLogin,
+        closeLogin,
+        sendOtp: async phone => { await requestOtp(phone); },
+        verifyOtp: async (phone, code) => finishLogin(await loginWithOtp(phone, code)),
+        loginPassword: async (phone, password) => finishLogin(await loginWithPassword(phone, password)),
+        updateProfile: async profile => {
+            if (!session) return;
+            const saved = await saveProfile(profile);
+            persist({...session, profile: saved});
+        },
+        logout: () => persist(null),
+    };
+
+    return (
+        <AuthContext.Provider value={value}>
+            {children}
+            <AuthModal/>
+        </AuthContext.Provider>
+    );
+}
+
+export function useAuth() {
+    const value = useContext(AuthContext);
+    if (!value) throw new Error('useAuth must be used within AuthProvider');
+    return value;
+}

app/dashboard/layout.tsx

@@ -0,0 +1,7 @@
+import type {ReactNode} from 'react';
+import ProtectedPage from '@/components/auth/ProtectedPage';
+import DashboardShell from '@/components/dashboard/DashboardShell';
+
+export default function Layout({children}: {children: ReactNode}) {
+    return <ProtectedPage><DashboardShell>{children}</DashboardShell></ProtectedPage>;
+}

app/dashboard/orders/[id]/page.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import {useEffect, useRef, useState} from 'react';
+import Link from 'next/link';
+import {Alert, App, Button, Empty, Skeleton, Steps} from 'antd';
+import {DownloadOutlined, FileExcelOutlined, PrinterOutlined} from '@ant-design/icons';
+import type {CustomerOrder} from '@/types/account';
+import {useAuth} from '@/app/context/AuthContext';
+import {useLanguage} from '@/app/context/LanguageContext';
+import {accountCopy, orderStatusLabels, paymentStatusLabels} from '@/data/account';
+import {getOrder} from '@/services/orders';
+import {downloadInvoiceExcel, downloadInvoicePdf} from '@/lib/invoice';
+import OrderStatusTag from '@/components/dashboard/OrderStatusTag';
+import InvoiceDocument from '@/components/dashboard/InvoiceDocument';
+
+export default function OrderDetailsPage({params}: {params: {id: string}}) {
+    const auth = useAuth();
+    const {message} = App.useApp();
+    const {locale} = useLanguage();
+    const copy = accountCopy[locale];
+    const [order, setOrder] = useState<CustomerOrder | null | undefined>(null);
+    const [exporting, setExporting] = useState<'pdf' | 'excel' | null>(null);
+    const invoiceRef = useRef<HTMLDivElement>(null);
+    const numberLocale = locale === 'fa' ? 'fa-IR' : 'en-US';
+    const money = (value: number) => `${value.toLocaleString(numberLocale)} ${locale === 'fa' ? 'ریال' : 'Rials'}`;
+    useEffect(() => { if (auth.session) getOrder(params.id, auth.session.profile).then(setOrder); }, [auth.session, params.id]);
+    if (order === null) return <Skeleton active/>;
+    if (!order) return <div><Empty description={copy.notFound}/><Link href="/dashboard/orders" className="text-brand-400 block text-center mt-5">{copy.backToOrders}</Link></div>;
+    const exportPdf = async () => {
+        if (!invoiceRef.current) return;
+        setExporting('pdf');
+        try { await downloadInvoicePdf(invoiceRef.current, order.invoice!.number); }
+        catch { await message.error('ساخت فایل PDF انجام نشد. دوباره تلاش کنید.'); }
+        finally { setExporting(null); }
+    };
+    const exportExcel = async () => {
+        setExporting('excel');
+        try { await downloadInvoiceExcel(order, order.invoice!.number); }
+        catch { await message.error('ساخت فایل Excel انجام نشد. دوباره تلاش کنید.'); }
+        finally { setExporting(null); }
+    };
+    return <>
+        <Link href="/dashboard/orders" className="text-brand-400 hover:underline">{copy.backToOrders}</Link>
+        <div className="flex flex-wrap justify-between gap-4 items-center mt-5">
+            <div><p className="text-secondary">{copy.orderNumber}</p><h1 className="text-3xl font-extrabold text-primary" dir="ltr">{order.number}</h1></div>
+            <OrderStatusTag status={order.status}/>
+        </div>
+        <div className="grid sm:grid-cols-3 gap-4 mt-7">
+            <div className="rounded-xl border border-subtle bg-elevated p-4"><span className="text-sm text-secondary">{copy.orderDate}</span><strong className="block text-primary mt-1">{order.createdAt}</strong></div>
+            <div className="rounded-xl border border-subtle bg-elevated p-4"><span className="text-sm text-secondary">{copy.lastUpdate}</span><strong className="block text-primary mt-1">{order.updatedAt}</strong></div>
+            <div className="rounded-xl border border-subtle bg-elevated p-4"><span className="text-sm text-secondary">{copy.paymentStatus}</span><strong className="block text-primary mt-1">{paymentStatusLabels[locale][order.paymentStatus]}</strong></div>
+        </div>
+
+        <section className="rounded-2xl border border-subtle bg-elevated p-5 md:p-7 mt-7">
+            <h2 className="text-xl font-bold text-primary mb-6">{copy.timeline}</h2>
+            <Steps direction="vertical" current={order.events.length - 1} items={order.events.map(event => ({title: orderStatusLabels[locale][event.status], description: `${event.date} — ${event.note}`, status: event.completed ? 'finish' : 'wait'}))}/>
+        </section>
+
+        <section className="rounded-2xl border border-subtle bg-elevated p-5 md:p-7 mt-7">
+            <h2 className="text-xl font-bold text-primary mb-5">{copy.orderItems}</h2>
+            <div className="space-y-5">{order.items.map(item => <article key={item.id} className="flex flex-wrap sm:flex-nowrap gap-5 border-b border-subtle last:border-0 pb-5 last:pb-0">
+                <img src={item.image} alt={item.name} className="w-24 h-28 object-contain rounded-xl bg-surface"/>
+                <div className="flex-1"><h3 className="font-bold text-primary">{item.name}</h3><p className="text-sm text-secondary mt-1" dir="ltr">{item.model}</p><p className="text-secondary mt-3">{copy.modules}: {item.modules.join('، ')}</p><p className="text-primary mt-3">{copy.quantity}: {item.quantity.toLocaleString(numberLocale)} · {copy.total}: {money(item.quantity * item.unitPrice)}</p></div>
+            </article>)}</div>
+        </section>
+
+        <section className="mt-7">
+            <h2 className="text-xl font-bold text-primary mb-5">{copy.invoice}</h2>
+            {!order.invoice ? <Alert type="info" showIcon message={copy.invoicePending}/> : <>
+                <div className="flex flex-wrap gap-3 mb-5 invoice-actions">
+                    <Button type="primary" icon={<DownloadOutlined/>} loading={exporting === 'pdf'} onClick={exportPdf}>{copy.downloadPdf}</Button>
+                    <Button icon={<FileExcelOutlined/>} loading={exporting === 'excel'} onClick={exportExcel}>{copy.downloadExcel}</Button>
+                    <Button icon={<PrinterOutlined/>} onClick={() => window.print()}>{copy.print}</Button>
+                </div>
+                <div className="overflow-x-auto rounded-2xl border border-subtle"><InvoiceDocument ref={invoiceRef} order={order}/></div>
+            </>}
+        </section>
+    </>;
+}

app/dashboard/orders/page.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import {useEffect, useState} from 'react';
+import {Empty, Skeleton} from 'antd';
+import type {CustomerOrder} from '@/types/account';
+import {useAuth} from '@/app/context/AuthContext';
+import {useLanguage} from '@/app/context/LanguageContext';
+import {accountCopy} from '@/data/account';
+import {getOrders} from '@/services/orders';
+import OrderCard from '@/components/dashboard/OrderCard';
+
+export default function OrdersPage() {
+    const auth = useAuth();
+    const {locale} = useLanguage();
+    const copy = accountCopy[locale];
+    const [orders, setOrders] = useState<CustomerOrder[] | null>(null);
+    useEffect(() => { if (auth.session) getOrders(auth.session.profile).then(setOrders); }, [auth.session]);
+    return <>
+        <h1 className="text-3xl font-extrabold text-primary">{copy.orders}</h1>
+        <p className="text-secondary mt-3 mb-7">{copy.dashboardDescription}</p>
+        {!orders ? <Skeleton active/> : orders.length ? <div className="space-y-4">{orders.map(order => <OrderCard key={order.id} order={order}/>)}</div> : <Empty description={copy.emptyOrders}/>} 
+    </>;
+}

app/dashboard/page.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import {useEffect, useMemo, useState} from 'react';
+import Link from 'next/link';
+import {Progress, Skeleton} from 'antd';
+import {CheckCircleOutlined, ClockCircleOutlined, FileTextOutlined} from '@ant-design/icons';
+import type {CustomerOrder} from '@/types/account';
+import {useAuth} from '@/app/context/AuthContext';
+import {useLanguage} from '@/app/context/LanguageContext';
+import {accountCopy} from '@/data/account';
+import {getOrders} from '@/services/orders';
+import OrderCard from '@/components/dashboard/OrderCard';
+
+export default function DashboardPage() {
+    const auth = useAuth();
+    const {locale} = useLanguage();
+    const copy = accountCopy[locale];
+    const [orders, setOrders] = useState<CustomerOrder[] | null>(null);
+    useEffect(() => { if (auth.session) getOrders(auth.session.profile).then(setOrders); }, [auth.session]);
+    const completion = useMemo(() => {
+        if (!auth.session) return 0;
+        const profile = auth.session.profile;
+        const required = [profile.firstName, profile.lastName, profile.province, profile.city, profile.address, profile.postalCode];
+        return Math.round(required.filter(Boolean).length / required.length * 100);
+    }, [auth.session]);
+    if (!orders) return <Skeleton active/>;
+    const activeOrders = orders.filter(order => !['delivered', 'cancelled'].includes(order.status)).length;
+    const cards = [
+        {label: copy.profileCompletion, value: `${completion.toLocaleString(locale === 'fa' ? 'fa-IR' : 'en-US')}٪`, icon: <CheckCircleOutlined/>, extra: <Progress percent={completion} showInfo={false} size="small"/>},
+        {label: copy.activeOrders, value: activeOrders.toLocaleString(locale === 'fa' ? 'fa-IR' : 'en-US'), icon: <ClockCircleOutlined/>},
+        {label: copy.totalOrders, value: orders.length.toLocaleString(locale === 'fa' ? 'fa-IR' : 'en-US'), icon: <FileTextOutlined/>},
+    ];
+    return <>
+        <h1 className="text-3xl font-extrabold text-primary">{copy.welcome} {auth.session?.profile.firstName}</h1>
+        <p className="text-secondary mt-3">{copy.dashboardDescription}</p>
+        <div className="grid sm:grid-cols-3 gap-4 mt-8">{cards.map(card => <div key={card.label} className="rounded-2xl border border-subtle bg-elevated p-5">
+            <div className="text-brand-400 text-2xl">{card.icon}</div><p className="text-secondary text-sm mt-4">{card.label}</p><strong className="text-2xl text-primary block mt-1">{card.value}</strong>{card.extra && <div className="mt-3">{card.extra}</div>}
+        </div>)}</div>
+        <div className="flex items-center justify-between gap-4 mt-10 mb-5"><h2 className="text-xl font-bold text-primary">{copy.recentOrders}</h2><Link href="/dashboard/orders" className="text-brand-400">{copy.viewAll}</Link></div>
+        <div className="space-y-4">{orders.slice(0, 2).map(order => <OrderCard key={order.id} order={order}/>)}</div>
+    </>;
+}

app/dashboard/profile/page.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import {useEffect, useState} from 'react';
+import {Alert, App, Button, Form, Input, Radio} from 'antd';
+import type {CustomerProfile} from '@/types/account';
+import {useAuth} from '@/app/context/AuthContext';
+import {useLanguage} from '@/app/context/LanguageContext';
+import {accountCopy} from '@/data/account';
+
+export default function ProfilePage() {
+    const auth = useAuth();
+    const {message} = App.useApp();
+    const {locale} = useLanguage();
+    const copy = accountCopy[locale];
+    const [form] = Form.useForm<CustomerProfile>();
+    const [saving, setSaving] = useState(false);
+    const customerType = Form.useWatch('type', form);
+    useEffect(() => { if (auth.session) form.setFieldsValue(auth.session.profile); }, [auth.session, form]);
+    const submit = async (values: CustomerProfile) => {
+        setSaving(true);
+        try { await auth.updateProfile(values); message.success(copy.saved); } finally { setSaving(false); }
+    };
+    return <>
+        <h1 className="text-3xl font-extrabold text-primary">{copy.profile}</h1>
+        <p className="text-secondary mt-3 mb-7">{copy.invoicePending}</p>
+        <Form form={form} layout="vertical" onFinish={submit} className="rounded-2xl border border-subtle bg-elevated p-5 md:p-7">
+            <Form.Item name="type" label={copy.customerType} rules={[{required: true}]}><Radio.Group optionType="button" buttonStyle="solid" options={[{label: copy.individual, value: 'individual'}, {label: copy.corporate, value: 'corporate'}]}/></Form.Item>
+            <div className="grid md:grid-cols-2 gap-x-5">
+                <Form.Item name="firstName" label={copy.firstName} rules={[{required: true}]}><Input size="large"/></Form.Item>
+                <Form.Item name="lastName" label={copy.lastName} rules={[{required: true}]}><Input size="large"/></Form.Item>
+                <Form.Item name="phone" label={copy.phone}><Input size="large" dir="ltr" disabled/></Form.Item>
+                <Form.Item name="email" label={copy.email} rules={[{type: 'email'}]}><Input size="large" dir="ltr"/></Form.Item>
+                {customerType === 'corporate' && <>
+                    <Form.Item name="companyName" label={copy.companyName} rules={[{required: true}]}><Input size="large"/></Form.Item>
+                    <Form.Item name="nationalId" label={copy.nationalId} rules={[{required: true}]}><Input size="large" dir="ltr"/></Form.Item>
+                    <Form.Item name="economicCode" label={copy.economicCode}><Input size="large" dir="ltr"/></Form.Item>
+                </>}
+                <Form.Item name="province" label={copy.province} rules={[{required: true}]}><Input size="large"/></Form.Item>
+                <Form.Item name="city" label={copy.city} rules={[{required: true}]}><Input size="large"/></Form.Item>
+                <Form.Item name="postalCode" label={copy.postalCode} rules={[{required: true}]}><Input size="large" dir="ltr" maxLength={10}/></Form.Item>
+                <Form.Item name="preferredCallTime" label={copy.preferredCallTime}><Input size="large"/></Form.Item>
+            </div>
+            <Form.Item name="address" label={copy.address} rules={[{required: true}]}><Input.TextArea rows={4}/></Form.Item>
+            <Alert type="info" showIcon message={copy.verifiedPhone} className="mb-6"/>
+            <Button type="primary" htmlType="submit" size="large" loading={saving}>{copy.save}</Button>
+        </Form>
+    </>;
+}

app/globals.css

@@ -211,6 +211,49 @@ html[dir='rtl'] body {
     animation: caretBlink 0.9s steps(1) infinite;
 }
 
+.invoice-document {
+    width: 900px;
+    min-height: 1120px;
+    padding: 48px;
+    background: #ffffff;
+    color: #12332e;
+    font-family: var(--font-vazirmatn), Tahoma, sans-serif;
+}
+
+.invoice-head,
+.invoice-meta {
+    display: flex;
+    justify-content: space-between;
+    gap: 28px;
+}
+
+.invoice-head {
+    align-items: center;
+    padding-bottom: 24px;
+    border-bottom: 2px solid #00a693;
+}
+
+.invoice-head img { width: 150px; height: auto; }
+.invoice-head h2 { margin: 0 0 8px; font-size: 26px; }
+.invoice-head p, .invoice-meta p { margin: 4px 0; }
+.invoice-meta { margin: 28px 0; }
+.invoice-meta > div { flex: 1; line-height: 1.9; }
+.invoice-document table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.invoice-document th { background: #e9f8f5; }
+.invoice-document th, .invoice-document td { border: 1px solid #b9ded7; padding: 12px 9px; text-align: start; vertical-align: top; }
+.invoice-document td small { display: block; color: #55756f; margin-top: 5px; }
+.invoice-totals { width: 380px; margin-inline-start: auto; margin-top: 24px; }
+.invoice-totals p { display: flex; justify-content: space-between; gap: 20px; margin: 0; padding: 9px 0; border-bottom: 1px solid #dcebe8; }
+.invoice-totals .grand { color: #006d61; font-size: 16px; border-bottom: 2px solid #00a693; }
+.invoice-note { margin-top: 40px; padding: 16px; background: #f2faf8; border-radius: 10px; line-height: 2; }
+
+@media print {
+    body * { visibility: hidden !important; }
+    .invoice-document, .invoice-document * { visibility: visible !important; }
+    .invoice-document { position: absolute; inset: 0; width: 100%; min-height: auto; padding: 20px; }
+    .invoice-actions { display: none !important; }
+}
+
 @keyframes caretBlink {
     0%, 49% {
         opacity: 1;

app/login/page.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import {useEffect} from 'react';
+import {useRouter} from 'next/navigation';
+import {Button} from 'antd';
+import {useAuth} from '@/app/context/AuthContext';
+import {useLanguage} from '@/app/context/LanguageContext';
+import {accountCopy} from '@/data/account';
+
+export default function LoginPage() {
+    const auth = useAuth();
+    const router = useRouter();
+    const {locale} = useLanguage();
+    const copy = accountCopy[locale];
+    useEffect(() => {
+        if (auth.isAuthenticated) router.replace('/dashboard');
+        else if (auth.ready) auth.openLogin(() => router.replace('/dashboard'));
+    }, [auth.isAuthenticated, auth.ready, auth.openLogin, router]);
+    return <main className="max-w-2xl mx-auto min-h-[70vh] px-5 pt-32 pb-20 text-center">
+        <div className="rounded-3xl border border-subtle bg-elevated p-10"><h1 className="text-3xl font-extrabold text-primary">{copy.login}</h1><p className="text-secondary mt-3 mb-7">{copy.protectedDescription}</p><Button type="primary" size="large" onClick={() => auth.openLogin(() => router.replace('/dashboard'))}>{copy.openLogin}</Button></div>
+    </main>;
+}

app/products/[id]/page.tsx

@@ -2,6 +2,7 @@ import type {Metadata} from 'next';
 import {notFound} from 'next/navigation';
 import {content} from '@/data/content';
 import ProductDetails from '@/components/ProductDetails';
+import ProtectedPage from '@/components/auth/ProtectedPage';
 
 type Props = { params: { id: string } };
 
@@ -17,5 +18,5 @@ export function generateMetadata({params}: Props): Metadata {
 
 export default function ProductPage({params}: Props) {
     if (!content.fa.machines.some(machine => machine.id === params.id)) notFound();
-    return <ProductDetails id={params.id}/>;
+    return <ProtectedPage><ProductDetails id={params.id}/></ProtectedPage>;
 }

app/providers.tsx

@@ -5,13 +5,14 @@ import type {ReactNode} from 'react';
 
 import {Provider as ReduxProvider} from 'react-redux';
 import type {ThemeConfig} from 'antd';
-import {ConfigProvider, theme as antdThemeApi} from 'antd';
+import {App as AntdApp, ConfigProvider, theme as antdThemeApi} from 'antd';
 import faIR from 'antd/locale/fa_IR';
 import enUS from 'antd/locale/en_US';
 import {store} from '@/store/store';
 import {ThemeProvider, useTheme} from './context/ThemeContext';
 import {LanguageProvider, useLanguage} from './context/LanguageContext';
 import CartPersistence from '@/components/CartPersistence';
+import {AuthProvider} from './context/AuthContext';
 
 function AntdBridge({children}: {children: ReactNode}) {
     const {theme} = useTheme();
@@ -43,7 +44,7 @@ function AntdBridge({children}: {children: ReactNode}) {
 
     return (
         <ConfigProvider direction={dir} locale={locale === 'fa' ? faIR : enUS} theme={antdTheme}>
-            {children}
+            <AntdApp>{children}</AntdApp>
         </ConfigProvider>
     );
 }
@@ -54,7 +55,9 @@ export default function Providers({children}: {children: ReactNode}) {
             <CartPersistence/>
             <ThemeProvider>
                 <LanguageProvider>
-                    <AntdBridge>{children}</AntdBridge>
+                    <AntdBridge>
+                        <AuthProvider>{children}</AuthProvider>
+                    </AntdBridge>
                 </LanguageProvider>
             </ThemeProvider>
         </ReduxProvider>