'use client'; import React, { useState } from 'react'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { toast } from '@/hooks/use-toast'; import { Search, Loader2, Package, Phone, MapPin, CreditCard, Truck, MessageCircle, ClipboardList, CheckCircle2, ChefHat, Rocket, XCircle, FileText, } from 'lucide-react'; import { motion, AnimatePresence } from 'framer-motion'; interface OrderTrackingModalProps { open: boolean; onOpenChange: (open: boolean) => void; } interface InvoiceData { invoice: { id: string; invoiceNumber: string; buyerName: string; buyerPhone: string; buyerAddress: string; buyerNotes: string; paymentMethod: string; subtotal: number; shipping: number; total: number; status: string; createdAt: string; updatedAt: string; }; items: Array<{ id: string; name: string; price: number; quantity: number; variant?: string; note?: string; }>; statusHistory: Array<{ key: string; label: string; emoji: string; description: string; status: 'completed' | 'current' | 'upcoming' | 'cancelled'; }>; } function formatPrice(price: number): string { return new Intl.NumberFormat('id-ID').format(price); } function formatDate(dateStr: string): string { return new Date(dateStr).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit' }); } function getStepIcon(key: string, stepStatus: string) { const iconClass = stepStatus === 'completed' ? 'text-emerald-400' : stepStatus === 'current' ? 'text-[var(--accent-400)]' : stepStatus === 'cancelled' ? 'text-red-400' : 'text-[var(--text-quaternary)]'; const size = 'h-6 w-6'; switch (key) { case 'pending': return ; case 'confirmed': return ; case 'preparing': return ; case 'on_the_way': return ; case 'delivered': return ; case 'cancelled': return ; default: return ; } } function getPaymentLabel(method: string): string { return { whatsapp: 'WhatsApp Transfer', qris: 'QRIS', cod: 'Bayar di Tempat (COD)' }[method] || method.toUpperCase(); } export default function OrderTrackingModal({ open, onOpenChange }: OrderTrackingModalProps) { const [searchQuery, setSearchQuery] = useState(''); const [searchType, setSearchType] = useState<'invoice' | 'phone'>('invoice'); const [loading, setLoading] = useState(false); const [result, setResult] = useState(null); const [error, setError] = useState(''); const [whatsapp, setWhatsapp] = useState('6281234567890'); const handleSearch = async () => { if (!searchQuery.trim()) { toast({ title: 'Kolom pencarian kosong', description: 'Masukkan nomor invoice atau nomor HP', variant: 'destructive' }); return; } setLoading(true); setError(''); setResult(null); try { const params = new URLSearchParams(); if (searchType === 'invoice') params.set('invoiceNumber', searchQuery.trim()); else params.set('phone', searchQuery.trim()); const res = await fetch(`/api/order-tracking?${params.toString()}`); const data = await res.json(); if (!data.success) { setError(data.error || 'Pesanan tidak ditemukan'); return; } setResult(data.data); try { const sr = await fetch('/api/settings'); const sd = await sr.json(); if (sd.success) setWhatsapp(sd.data.whatsapp); } catch { /* */ } } catch { setError('Gagal terhubung ke server. Coba lagi.'); } finally { setLoading(false); } }; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter') handleSearch(); }; const handleReset = () => { setSearchQuery(''); setResult(null); setError(''); }; const waMessage = result ? `Halo, saya ingin menanyakan status pesanan saya:\n\nNo. Invoice: ${result.invoice.invoiceNumber}\nNama: ${result.invoice.buyerName}\nStatus: ${result.invoice.status}\n\nTerima kasih!` : ''; return ( ); }