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,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>
+    </>;
+}
@@ -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}/>} 
+    </>;
+}