import { Head, Link, router, usePage } from '@inertiajs/react'; import { Pencil, XCircle } from 'lucide-react'; import { useMemo, useState } from 'react'; import { toast } from 'sonner'; import { cancelItem as cancelCustomerOrderItem, editItem as customerOrderItemEdit, index as customerOrdersIndex, deliverItem, } from '@/actions/App/Http/Controllers/CustomerOrderController'; import { ConfirmActionDialog } from '@/components/confirm-action-dialog'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { formatAppDateOrDash, formatMoneyAmountOrDash } from '@/lib/dates'; import { customerOrderCanManage, customerOrderItemCanCancel, customerOrderItemCanEdit, } from '@/lib/customer-order-permissions'; import { firstInertiaErrorMessage } from '@/lib/inertia-errors'; import { useLanguage } from '@/contexts/language-context'; import AppLayout from '@/layouts/app-layout'; import { dashboard } from '@/routes'; export default function CustomerOrdersShow() { const { t, locale } = useLanguage(); const p = t.customerOrdersPage; const a = t.appActions; const auth = usePage().props.auth ?? {}; const canManage = customerOrderCanManage(auth); const canDeliver = canManage; const { order } = usePage().props; const [cancelTarget, setCancelTarget] = useState(null); const [cancelOpen, setCancelOpen] = useState(false); const [cancelProcessing, setCancelProcessing] = useState(false); const breadcrumbs = useMemo( () => [ { title: t.dashboard.breadcrumb, href: dashboard() }, { title: t.nav.customers, href: '#' }, { title: p.breadcrumb, href: customerOrdersIndex.url() }, { title: String(order?.id ?? ''), href: '#' }, ], [t.dashboard.breadcrumb, t.nav.customers, p.breadcrumb, order?.id], ); function handleDeliver(itemId) { router.post( deliverItem.url(itemId), {}, { preserveScroll: true, onError: (errors) => toast.error(firstInertiaErrorMessage(errors, a.requestFailed)), }, ); } function openCancelDialog(item) { setCancelTarget(item); setCancelOpen(true); } function commitCancelItem() { if (!cancelTarget) { return; } setCancelProcessing(true); router.post( cancelCustomerOrderItem.url(cancelTarget.id), {}, { preserveScroll: true, onSuccess: () => { setCancelOpen(false); setCancelTarget(null); }, onError: (errors) => toast.error(firstInertiaErrorMessage(errors, a.requestFailed)), onFinish: () => setCancelProcessing(false), }, ); } const orderIsCompleted = order?.status === 'completed'; return (

{p.showHeadTitle} {order?.order_number ?? `#${order?.id ?? ''}`} —{' '} {order?.customer_name} —{' '} {formatAppDateOrDash(order?.ordered_at, locale)} —{' '} {p.statusLabels[order?.status]}

{order?.notes ? (

{order.notes}

) : null} {p.colProduct} {p.colQuantity} {p.colFulfilled} {p.colStatus} {p.colAction} {(order?.items ?? []).map((item) => ( {item.product_name} {item.unit_name ? ` (${item.unit_name})` : ''} {formatMoneyAmountOrDash(item.quantity, locale)} {formatMoneyAmountOrDash( item.fulfilled_quantity, locale, )} {p.itemStatusLabels[item.status]}

{canManage && !orderIsCompleted && customerOrderItemCanEdit(item) ? ( ) : null} {canManage && !orderIsCompleted && customerOrderItemCanCancel(item) ? ( ) : null} {canDeliver && item.status === 'ready' ? ( ) : null}

))}

); }