171 lines
8.9 KiB
TypeScript
171 lines
8.9 KiB
TypeScript
"use client";
|
||
import React, { useState } from "react";
|
||
import {
|
||
Package,
|
||
Truck,
|
||
CheckCircle2,
|
||
MapPin,
|
||
Search,
|
||
ChevronRight,
|
||
ChevronLeft,
|
||
Clock,
|
||
ExternalLink
|
||
} from "lucide-react";
|
||
import { useCartStore } from "../lib/store/cartStore";
|
||
|
||
import { useRouter } from 'next/navigation';
|
||
|
||
export default function OrderTracking() {
|
||
const router = useRouter();
|
||
const { orders } = useCartStore();
|
||
const [searchId, setSearchId] = useState("");
|
||
const [activeOrder, setActiveOrder] = useState(orders[0] || null);
|
||
|
||
const handleSearch = () => {
|
||
const found = orders.find(o => o.id === searchId || o.trackingNumber === searchId);
|
||
if (found) {
|
||
setActiveOrder(found);
|
||
}
|
||
};
|
||
|
||
const steps = [
|
||
{ label: 'ثبت سفارش', sub: 'تایید شده', status: 'completed', icon: <Clock className="w-5 h-5" /> },
|
||
{ label: 'آمادهسازی در انبار', sub: 'در حال بستهبندی', status: 'active', icon: <Package className="w-5 h-5" /> },
|
||
{ label: 'تحویل به پست/کوریر', sub: 'ارسال شده', status: 'pending', icon: <Truck className="w-5 h-5" /> },
|
||
{ label: 'تحویل نهایی', sub: 'در مقصد', status: 'pending', icon: <CheckCircle2 className="w-5 h-5" /> },
|
||
];
|
||
|
||
return (
|
||
<div className="min-h-screen bg-medical-gray-50 py-12 px-6 font-vazir" dir="rtl">
|
||
<div className="max-w-5xl mx-auto">
|
||
|
||
{/* Mobile Navigation & Breadcrumbs */}
|
||
<div className="lg:hidden mb-12 space-y-4">
|
||
<button
|
||
onClick={() => router.back()}
|
||
className="flex items-center gap-2 text-medical-gray-500 font-bold hover:text-canina-blue transition-colors"
|
||
>
|
||
<ChevronRight className="w-5 h-5 font-vazir" />
|
||
<span>بازگشت</span>
|
||
</button>
|
||
|
||
<div className="flex items-center gap-2 text-[10px] font-black text-medical-gray-400 uppercase tracking-widest overflow-x-auto whitespace-nowrap pb-2">
|
||
<span className="cursor-pointer hover:text-canina-blue" onClick={() => router.push('/')}>کنینا</span>
|
||
<ChevronLeft className="w-2.5 h-2.5" />
|
||
<span className="text-canina-blue">پیگیری سفارش</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Desktop Breadcrumbs */}
|
||
<div className="hidden lg:flex items-center gap-2 text-[10px] font-black text-medical-gray-400 uppercase tracking-widest mb-12">
|
||
<span className="cursor-pointer hover:text-canina-blue" onClick={() => router.push('/')}>خانه</span>
|
||
<ChevronLeft className="w-2.5 h-2.5" />
|
||
<span className="text-canina-blue">رهگیری هوشمند محموله</span>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between mb-12">
|
||
<h2 className="text-3xl font-black text-medical-gray-900 italic">وضعیت لحظهای سفارش</h2>
|
||
</div>
|
||
|
||
{/* Search Bar */}
|
||
<div className="bg-white rounded-[2.5rem] p-8 border border-medical-gray-200 shadow-sm mb-10">
|
||
<div className="flex flex-col md:flex-row gap-4">
|
||
<div className="flex-1 relative">
|
||
<Search className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-medical-gray-400" />
|
||
<input
|
||
type="text"
|
||
placeholder="شماره سفارش (CN-XXXXX) یا کد رهگیری پستی را وارد کنید..."
|
||
value={searchId}
|
||
onChange={(e) => setSearchId(e.target.value)}
|
||
className="w-full bg-medical-gray-50 border border-medical-gray-200 rounded-2xl py-4 pr-12 pl-6 text-sm focus:ring-2 focus:ring-canina-blue/20 outline-none font-mono"
|
||
/>
|
||
</div>
|
||
<button
|
||
onClick={handleSearch}
|
||
className="bg-medical-gray-900 text-white px-10 py-4 rounded-2xl font-black italic hover:bg-canina-blue transition-all"
|
||
>
|
||
رهگیری آنی
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{activeOrder ? (
|
||
<div className="grid lg:grid-cols-12 gap-10">
|
||
{/* Status Timeline */}
|
||
<div className="lg:col-span-8 bg-white rounded-[3rem] p-10 border border-medical-gray-200 shadow-sm">
|
||
<div className="flex items-center justify-between mb-12">
|
||
<div>
|
||
<p className="text-[10px] font-black text-medical-gray-400 uppercase tracking-widest mb-1">کد رهگیری پستی</p>
|
||
<p className="text-sm font-mono font-bold text-canina-blue">{activeOrder.trackingNumber}</p>
|
||
</div>
|
||
<div className="text-left">
|
||
<p className="text-[10px] font-black text-medical-gray-400 uppercase tracking-widest mb-1">تاریخ ثبت</p>
|
||
<p className="text-sm font-bold text-medical-gray-900">{new Date(activeOrder.date).toLocaleDateString('fa-IR')}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative space-y-12 pr-6">
|
||
<div className="absolute top-0 right-[23px] bottom-0 w-0.5 bg-medical-gray-100" />
|
||
|
||
{steps.map((step, i) => (
|
||
<div key={i} className={`relative flex items-center gap-8 ${step.status === 'pending' ? 'opacity-30' : ''}`}>
|
||
<div className={`w-12 h-12 rounded-2xl flex items-center justify-center z-10 shadow-sm transition-all ${step.status === 'completed' ? 'bg-green-600 text-white' : step.status === 'active' ? 'bg-canina-blue text-white ring-8 ring-canina-blue/10 scale-110' : 'bg-medical-gray-50 text-medical-gray-300 border border-medical-gray-100'}`}>
|
||
{step.status === 'completed' ? <CheckCircle2 className="w-6 h-6" /> : step.icon}
|
||
</div>
|
||
<div>
|
||
<h4 className="font-black text-medical-gray-900">{step.label}</h4>
|
||
<p className="text-xs font-bold text-medical-gray-500">{step.sub}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Sidebar Details */}
|
||
<div className="lg:col-span-4 space-y-6">
|
||
<div className="bg-medical-gray-900 rounded-[2.5rem] p-8 text-white">
|
||
<h3 className="text-lg font-black italic mb-6 border-b border-white/10 pb-4">محتویات محموله</h3>
|
||
<div className="space-y-4">
|
||
{activeOrder.items.map(item => (
|
||
<div key={item.product.id} className="flex justify-between items-center text-xs font-bold">
|
||
<span className="text-white/60">{item.product.name}</span>
|
||
<span>{item.quantity} عدد</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="mt-8 pt-6 border-t border-white/10 flex justify-between items-center font-black">
|
||
<span className="text-xs italic">مجموع فاکتور</span>
|
||
<span className="text-lg text-canina-blue">{activeOrder.total.toLocaleString()} تومان</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-[2rem] p-6 border border-medical-gray-200">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="w-10 h-10 bg-canina-blue/10 text-canina-blue rounded-xl flex items-center justify-center">
|
||
<MapPin className="w-5 h-5" />
|
||
</div>
|
||
<h4 className="text-xs font-black italic">آدرس تحویل</h4>
|
||
</div>
|
||
<p className="text-[10px] font-bold text-medical-gray-500 leading-relaxed mb-4">
|
||
تهران، خیابان ولیعصر، بالاتر از میدان ونک، بنبست آفتاب، پلاک ۱۲، واحد ۳
|
||
</p>
|
||
<button className="w-full py-3 bg-medical-gray-50 text-medical-gray-900 rounded-xl text-[10px] font-black flex items-center justify-center gap-2 hover:bg-medical-gray-100 transition-all">
|
||
<ExternalLink className="w-3 h-3" />
|
||
مشاهده در نقشه
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="text-center py-20 bg-white rounded-[3rem] border border-dashed border-medical-gray-200">
|
||
<div className="w-20 h-20 bg-medical-gray-50 rounded-full flex items-center justify-center mx-auto mb-6 text-medical-gray-300">
|
||
<Package className="w-10 h-10" />
|
||
</div>
|
||
<p className="text-medical-gray-500 font-bold">سفارشی یافت نشد. لطفاً شماره سفارش صحیح را وارد کنید.</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|