import { useState } from "react"; import { Form, Head, Link } from "@inertiajs/react"; import { ArrowUpRight, BriefcaseBusiness, Building2, CalendarDays, CircleAlert, Clock, FileText, KeyRound, Mail, MapPin, ShieldCheck, Sparkles, Target, UserRound, } from "lucide-react"; import CustomerController from "@/actions/App/Http/Controllers/CustomerController"; import { DetailRow, EmptyState, MetaStrip, PageHeader, SectionCard, } from "@/components/crm/page-header"; import { FormField, NativeSelect } from "@/components/crm/native-select"; import { StatusPill } from "@/components/crm/status-badge"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { useInitials } from "@/hooks/use-initials"; import { formatAddress, formatDate, formatDateTime, formatRelative, } from "@/lib/format"; import { index as accountsIndex } from "@/routes/customer-accounts"; import { index as customersIndex, show as customerShow, } from "@/routes/customers"; import { create as jobCreate } from "@/routes/jobs"; import { create as ticketCreate } from "@/routes/tickets"; import type { CustomerChangeRequest, CustomerDetail, CustomerPortalAccount, OptionsBundle, ProfileHealth, } from "@/types"; type Props = { customer: CustomerDetail; account: CustomerPortalAccount | null; pendingChange: CustomerChangeRequest | null; health: ProfileHealth; options: OptionsBundle; ticketCounts: { open: number; total: number }; can: { update: boolean; delete: boolean; createJob: boolean; createTicket: boolean; manageAccounts: boolean; reviewChanges: boolean; }; }; /** * The client profile. * * The customer detail page answers "what work is there for this customer?". * This page answers "who is this customer?" — so it is built in a different * shape: a summary at the top, the person's details laid out as a form someone * can read straight through, and the relationship (sign-in, sites, pending * corrections, history) down the side where it is visible but out of the way. */ export default function CustomerProfile({ customer, account, pendingChange, health, options, ticketCounts, can, }: Props) { const getInitials = useInitials(); const [type, setType] = useState(customer.type.value); const isOrganisation = type !== "residential"; const billingAddress = formatAddress([ customer.billing.line1, customer.billing.line2, customer.billing.suburb, customer.billing.state_label, customer.billing.postcode, ]); return ( <>
{({ processing, errors }) => ( <> {customer.customer_number} · {customer.type.label} {customer.abn ? ( <> · ABN {customer.abn} ) : null} } title="Client profile" description="The person or business behind the jobs. Keep their details, their sign-in and their sites in one place." actions={ <> {can.createJob ? ( ) : null} {can.update ? ( ) : null} } /> {/* The identity card. It reads like a contact card rather than a form, so the person is recognisable before any field is touched. */}
{getInitials(customer.name)}

{customer.name}

{customer.type.label} {customer.is_active ? "Active" : "Inactive"}

{billingAddress || "No postal address recorded yet"}

setType(event.target.value) } > {options.customerTypes.map( (option) => ( ), )} {isOrganisation ? ( <> ) : null} <>
{options.contactMethods.map( (option) => ( ), )}
{options.states.map( (option) => ( ), )}
{options.staff.map((option) => ( ))} {options.leadSources.map( (option) => ( ), )}