257 lines
11 KiB
TypeScript
257 lines
11 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState, useEffect, type FC } from "react";
|
||
import {
|
||
fmtDate,
|
||
fmtAmount,
|
||
statusColor,
|
||
statusLabel,
|
||
clearSession,
|
||
type ClientSession,
|
||
type OrderStatus,
|
||
} from "@/utils/helperFun";
|
||
import { Spinner } from "../UI";
|
||
|
||
|
||
const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL!;
|
||
|
||
// ─── Types ───────────────────────────────────
|
||
export interface Order {
|
||
id: string;
|
||
createdAt: string;
|
||
status: OrderStatus;
|
||
totalAmount: number;
|
||
description: string;
|
||
}
|
||
|
||
// ─── Order Tracker ───────────────────────────
|
||
const STATUS_STEPS: OrderStatus[] = ["CREATED", "IN_TRANSIT", "DELIVERED"];
|
||
const STEP_LABELS = ["تم الإنشاء", "قيد التوصيل", "تم التسليم"];
|
||
const STEP_ICONS = [
|
||
<svg key="c" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<rect x="9" y="3" width="6" height="4" rx="1"/>
|
||
<path d="M4 7h16v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z"/>
|
||
</svg>,
|
||
<svg key="t" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<rect x="2" y="7" width="20" height="14" rx="2"/>
|
||
<path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/>
|
||
<line x1="12" y1="12" x2="12" y2="16"/>
|
||
<line x1="10" y1="14" x2="14" y2="14"/>
|
||
</svg>,
|
||
<svg key="d" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<polyline points="20 6 9 17 4 12"/>
|
||
</svg>,
|
||
];
|
||
|
||
const OrderTracker: FC<{ status: OrderStatus }> = ({ status }) => {
|
||
const idx = STATUS_STEPS.indexOf(status === "CANCELLED" ? "CREATED" : status);
|
||
return (
|
||
<div className="flex items-center gap-0 py-2" dir="rtl">
|
||
{STATUS_STEPS.map((s, i) => (
|
||
<React.Fragment key={s}>
|
||
<div className="flex flex-col items-center gap-1">
|
||
<div className={`w-9 h-9 rounded-full flex items-center justify-center transition-all ${
|
||
status === "CANCELLED"
|
||
? "bg-[#FEE2E2] text-red-500 border-2 border-red-200"
|
||
: i <= idx
|
||
? "bg-[#1A73E8] text-white"
|
||
: "bg-white border-2 border-[#E5E7EB] text-[#D1D5DB]"
|
||
}`}>
|
||
{STEP_ICONS[i]}
|
||
</div>
|
||
<span className={`text-[10px] font-semibold whitespace-nowrap ${
|
||
status === "CANCELLED"
|
||
? "text-red-400"
|
||
: i <= idx ? "text-[#1A73E8]" : "text-[#9CA3AF]"
|
||
}`}>
|
||
{STEP_LABELS[i]}
|
||
</span>
|
||
</div>
|
||
{i < STATUS_STEPS.length - 1 && (
|
||
<div className={`flex-1 h-0.5 mb-4 mx-1 ${
|
||
status === "CANCELLED" ? "bg-red-200" : i < idx ? "bg-[#1A73E8]" : "bg-[#E5E7EB]"
|
||
}`} />
|
||
)}
|
||
</React.Fragment>
|
||
))}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
|
||
|
||
|
||
// ─── DashboardStep ───────────────────────────
|
||
interface DashboardStepProps {
|
||
session: ClientSession;
|
||
}
|
||
|
||
const DashboardStep: FC<DashboardStepProps> = ({ session }) => {
|
||
const [orders, setOrders] = useState<Order[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState("");
|
||
|
||
// جلب الطلبات من الـ API
|
||
useEffect(() => {
|
||
(async () => {
|
||
try {
|
||
const res = await fetch(`${API_BASE}/client/${session.id}/orders`);
|
||
const data = await res.json();
|
||
if (!res.ok) throw new Error(data.message ?? "فشل جلب الطلبات");
|
||
|
||
// الـ API يُرجع: { orders: [...] } أو مصفوفة مباشرة
|
||
const list: Order[] = Array.isArray(data) ? data : (data.orders ?? []);
|
||
setOrders(list);
|
||
} catch (err: unknown) {
|
||
setError(err instanceof Error ? err.message : "تعذّر تحميل الطلبات");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
})();
|
||
}, [session.id]);
|
||
|
||
// أحدث طلب نشط (CREATED أو IN_TRANSIT)
|
||
const activeOrder = orders.find(
|
||
o => o.status === "CREATED" || o.status === "IN_TRANSIT"
|
||
);
|
||
const pastOrders = orders.filter(o => o !== activeOrder);
|
||
|
||
const summary = {
|
||
total: orders.length,
|
||
delivered: orders.filter(o => o.status === "DELIVERED").length,
|
||
pending: orders.filter(o => o.status === "CREATED" || o.status === "IN_TRANSIT").length,
|
||
};
|
||
|
||
return (
|
||
<div dir="rtl">
|
||
{/* الرأس */}
|
||
<div className="mb-6">
|
||
<div className="flex items-center justify-between mb-1">
|
||
<div>
|
||
<h2 className="text-[22px] font-bold text-[#111827] tracking-tight">لوحة الطلبات</h2>
|
||
<p className="text-[13px] text-[#6B7280] mt-0.5">
|
||
مرحبًا بعودتك، <strong className="text-[#111827]">{session.name}</strong>
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center gap-1.5 bg-[#D1FAE5] border border-[#A7F3D0] rounded-full px-3 py-1.5">
|
||
<span className="w-2 h-2 rounded-full bg-[#10B981] animate-pulse" />
|
||
<span className="text-[11px] font-bold text-[#065F46]">نشط</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* حالة التحميل أو الخطأ */}
|
||
{loading ? (
|
||
<div className="flex flex-col items-center justify-center py-14 gap-3 text-[#6B7280]">
|
||
<Spinner />
|
||
<p className="text-[13px]">جارٍ تحميل الطلبات…</p>
|
||
</div>
|
||
) : error ? (
|
||
<div className="flex flex-col items-center justify-center py-10 gap-3">
|
||
<p className="text-[13px] text-red-500">{error}</p>
|
||
<button
|
||
onClick={() => { setLoading(true); setError(""); }}
|
||
className="text-[12px] text-[#1A73E8] underline"
|
||
>
|
||
إعادة المحاولة
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<>
|
||
{/* إحصائيات */}
|
||
<div className="grid grid-cols-3 gap-3 mb-6">
|
||
{[
|
||
{ label: "إجمالي الطلبات", value: summary.total, color: "text-[#111827]" },
|
||
{ label: "مُسلَّمة", value: summary.delivered, color: "text-[#34A853]" },
|
||
{ label: "قيد التنفيذ", value: summary.pending, color: "text-[#1A73E8]" },
|
||
].map(s => (
|
||
<div key={s.label} className="bg-white border border-[#E5E7EB] rounded-xl p-3.5">
|
||
<p className="text-[10px] font-bold text-[#9CA3AF] mb-1">{s.label}</p>
|
||
<p className={`text-[26px] font-bold ${s.color}`}>{s.value}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* متتبع الطلب النشط */}
|
||
{activeOrder ? (
|
||
<div className="bg-gradient-to-bl from-[#0D47A1] to-[#1A73E8] rounded-xl p-4 mb-6">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<div>
|
||
<p className="text-[11px] font-bold text-white/60 tracking-wide">الطلب الحالي</p>
|
||
<p className="text-[14px] font-bold text-white font-mono">{activeOrder.id}</p>
|
||
</div>
|
||
<span className={`text-[11px] font-bold border px-2.5 py-1 rounded-full ${
|
||
activeOrder.status === "CREATED"
|
||
? "bg-white/15 border-white/30 text-white"
|
||
: "bg-[#D1FAE5] border-[#A7F3D0] text-[#065F46]"
|
||
}`}>
|
||
{statusLabel(activeOrder.status)}
|
||
</span>
|
||
</div>
|
||
<OrderTracker status={activeOrder.status} />
|
||
</div>
|
||
) : (
|
||
<div className="border border-dashed border-[#E5E7EB] rounded-xl p-5 mb-6 text-center">
|
||
<p className="text-[13px] text-[#9CA3AF]">لا يوجد طلب نشط حاليًا.</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* جدول الطلبات السابقة */}
|
||
{pastOrders.length > 0 && (
|
||
<div className="bg-white border border-[#E5E7EB] rounded-xl overflow-hidden">
|
||
<div className="px-4 py-3 border-b border-[#E5E7EB] flex items-center justify-between">
|
||
<p className="text-[13px] font-bold text-[#111827]">سجل الطلبات</p>
|
||
<span className="text-[11px] text-[#9CA3AF] font-medium">{pastOrders.length} طلبات</span>
|
||
</div>
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full" dir="rtl">
|
||
<thead>
|
||
<tr className="bg-[#F9FAFB]">
|
||
{["رقم الطلب", "التاريخ", "الوصف", "الحالة", "المبلغ"].map(h => (
|
||
<th key={h} className="px-4 py-2.5 text-right text-[10px] font-bold text-[#9CA3AF] uppercase tracking-wide">{h}</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{pastOrders.map((order, i) => (
|
||
<tr
|
||
key={order.id}
|
||
className={`border-t border-[#F3F4F6] hover:bg-[#FAFAFA] transition-colors ${i % 2 === 0 ? "" : "bg-[#FAFAFA]/30"}`}
|
||
>
|
||
<td className="px-4 py-3">
|
||
<span className="font-mono text-[12px] font-semibold text-[#1A73E8]">{order.id}</span>
|
||
</td>
|
||
<td className="px-4 py-3 text-[12px] text-[#6B7280] whitespace-nowrap">{fmtDate(order.createdAt)}</td>
|
||
<td className="px-4 py-3 text-[12px] text-[#374151]">{order.description}</td>
|
||
<td className="px-4 py-3">
|
||
<span className={`inline-flex items-center gap-1.5 text-[11px] font-bold border px-2.5 py-0.5 rounded-full whitespace-nowrap ${statusColor(order.status)}`}>
|
||
<span className="w-1.5 h-1.5 rounded-full bg-current" />
|
||
{statusLabel(order.status)}
|
||
</span>
|
||
</td>
|
||
<td className="px-4 py-3 text-[12px] font-semibold text-[#111827] font-mono whitespace-nowrap">
|
||
{fmtAmount(order.totalAmount)}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* مسح الجلسة */}
|
||
<button
|
||
type="button"
|
||
onClick={() => { clearSession(); window.location.reload(); }}
|
||
className="mt-4 text-[11px] text-[#9CA3AF] hover:text-red-400 underline transition-colors"
|
||
>
|
||
مسح الجلسة وإعادة البدء
|
||
</button>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default DashboardStep; |