import { useState } from 'react'; import { Form, Head, Link, usePage } from '@inertiajs/react'; import { ArrowRight, Check, CheckCheck, Clock, UserRound } from 'lucide-react'; import { PageHeader } from '@/components/crm/page-header'; import { StatusPill } from '@/components/crm/status-badge'; import { Button } from '@/components/ui/button'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { formatDate } from '@/lib/format'; import type { CustomerChangeRequest, CustomerChangeRow } from '@/types'; type Props = { pending: CustomerChangeRequest[]; recent: CustomerChangeRequest[]; pendingCount: number; can: { review: boolean; }; }; /** * The queue of changes customers asked for from the ticket portal. * * A customer can save a correction whenever they like; this is where somebody * here checks it against what we hold and accepts or declines it. Declining * needs a reason, because the customer is shown it in the portal. */ export default function CustomerChangeRequests({ pending, recent, pendingCount, can, }: Props) { return ( <>
{pendingCount === 0 ? 'Nothing waiting' : `${pendingCount} waiting for approval`} } title="Profile updates" description="Changes customers have saved from the ticket portal. Nothing reaches their record until somebody here approves it." actions={ } /> {pending.length === 0 ? (

Everything is up to date

When a customer saves a change to their details, it appears here for a person to check.

) : (
{pending.map((request) => ( ))}
)}

Recently reviewed

What was asked for, what was decided, and who decided it.

{recent.length === 0 ? (

No decisions yet.

) : ( Customer Changes Decision Reviewed {recent.map((request) => ( {request.customer ? ( {request.customer.name} ) : ( '—' )}

{request.customer ?.customer_number ?? ''}

{request.changes .map((change) => change.label) .join(', ') || '—'} {request.status.label} {request.review_note ? (

{request.review_note}

) : null} {request.reviewed_at ? formatDate(request.reviewed_at) : '—'} {request.reviewer ? ( {request.reviewer.name} ) : null} ))}
)}
); } /** * One change waiting on a decision: what the record says, what the customer * asked for, and the two answers available. */ function PendingCard({ request, canReview, }: { request: CustomerChangeRequest; canReview: boolean; }) { const [declining, setDeclining] = useState(false); // A failed approval (for example an address that another account took while // the request was waiting) comes back here rather than disappearing. const { errors } = usePage<{ errors: Record }>().props; return (
{request.customer ? ( {request.customer.name} ) : ( Customer removed )} {request.customer ? ( {request.customer.customer_number} ) : null} {request.status.label}

Saved {formatDate(request.submitted_at)} {request.submitted_by ? ` by ${request.submitted_by}` : ''} {request.customer?.phone ? ` · ${request.customer.phone}` : ''}

{request.customer_note ? (

Customer’s note:{' '} {request.customer_note}

) : null} {canReview ? (
{errors.review ? (

{errors.review}

) : null}
{({ processing }) => ( )}
{declining ? null : ( )}
{declining ? (
setDeclining(false)} className="rounded-xl border border-hairline p-3" > {({ processing, errors }) => (

The customer sees this in the portal. Say what we need from them if the change can be made a different way.