import { Head, router, useForm } from '@inertiajs/react'; import { CalendarPlus, Check, Copy, ExternalLink, KeyRound, Link2, Power, ShieldAlert, ShieldCheck, Trash2, UserPlus, } from 'lucide-react'; import { useState } from 'react'; import { Callout, SectionCard } from '@/components/crm/page-header'; import { StatusPill } from '@/components/crm/status-badge'; import { FormField } from '@/components/crm/native-select'; import { Button } from '@/components/ui/button'; import { Checkbox } from '@/components/ui/checkbox'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Spinner } from '@/components/ui/spinner'; import { formatDateTime, formatRelative } from '@/lib/format'; import { cn } from '@/lib/utils'; import type { TicketStatusLink, TicketStatusLinksProps } from '@/types'; /** * Settings -> Status link. * * Issues the credential the office hands to a crew, and is the one place a link * is paused, extended, re-issued or deleted. The password exists in readable * form exactly once — on the screen the browser lands on after issuing it — so * the panel that shows it says so and offers nothing else. */ export default function TicketStatusLinks({ links, statuses, defaults, issued, board, staff_login: staffLogin, can, }: TicketStatusLinksProps) { const form = useForm<{ name: string; username: string; days: number; statuses: string[]; }>({ name: '', username: '', days: defaults.days, statuses: [defaults.landing_status], }); const submit = () => { form.post('/settings/status-links', { preserveScroll: true, onSuccess: () => form.reset('name', 'username'), }); }; return ( <> A status link is its own username and password, issued here and revoked here. It opens the installer-facing ticket queue — no prices and no customer history — where a crew can add a note or say the work is done. Completing a ticket stays with an Admin. The office can switch a link off at any moment, and every link expires on its own unless it is given a fresh date. {issued ? : null}
{ event.preventDefault(); submit(); }} >
form.setData('name', event.target.value) } /> form.setData('username', event.target.value) } />
form.setData( 'days', Number(event.target.value), ) } /> {form.data.days > 0 ? `Stops working ${new Date(Date.now() + form.data.days * 86400000).toLocaleDateString('en-AU', { day: 'numeric', month: 'short', year: 'numeric' })}` : 'No end date — pause it by hand'}

The board opens on the first one ticked. A crew link is meant to open on the installer queue.

{statuses.map((status) => { const checked = form.data.statuses.includes( status.value, ); return ( ); })}
{form.errors.statuses ? (

{form.errors.statuses}

) : null}
A password is generated and shown once, here, when the link is created.
{links.length === 0 ? (

No links issued yet. Create one above and hand the details to the crew.

) : ( )} {can.manage_board ? : null}

The board lives at{' '} {defaults.url} . Everybody signs in there with their own username, so a crew that loses its details gets a new link rather than somebody else's password.

); } /** * Whether the board's sign-in screen offers a staff door at all. * * Off is where it starts: the board is a link the office hands out, and a * password form for company accounts is not something to publish by default. * A colleague who is already signed in to the CRM still walks straight in, so * hiding it costs staff nothing — it only removes the second way of typing the * same details at the board. */ function StaffSignIn({ allowed }: { allowed: boolean }) { const form = useForm({ allowed }); return (
Switched off, the request is refused too, so a form left open in a tab stops working.
); } /** * What the board may do to a ticket, switched here rather than deployed. * * The board is read by crews outside the office, so the office needs a way to * stop them changing anything without having to revoke every link. These three * switches are Admin and Super Admin only. */ function BoardActions({ board, }: { board: { notes: boolean; review: boolean; complete: boolean }; }) { const form = useForm({ notes: board.notes, review: board.review, complete: board.complete, }); const rows = [ { key: 'notes' as const, title: 'Add a note', description: 'A crew or a colleague can add a note to a ticket from the board. It lands in the ticket\u2019s own history, with their name against it.', }, { key: 'review' as const, title: 'Send for review', description: 'A crew can say the work is done and ask for it to be checked. Nothing moves until an Admin or Super Admin approves it.', }, { key: 'complete' as const, title: 'Complete a reviewed ticket', description: 'An Admin or Super Admin can complete a ticket that is waiting on review, recording the outcome and who signed it.', }, ]; return (
{rows.map((row) => ( ))}
Admin and Super Admin only \u2014 a status link never has this screen.
); } /** * The one moment a password is readable. It is not stored anywhere the office * can open again, so the panel is loud about copying it now. */ function IssuedPanel({ issued, }: { issued: NonNullable; }) { const [copied, setCopied] = useState(null); const copy = (label: string, value: string) => { void navigator.clipboard?.writeText(value).then(() => { setCopied(label); window.setTimeout(() => setCopied(null), 1800); }); }; return (

{issued.name} is ready

This password is shown once. Copy it before you leave the page.
{[ { label: 'Board', value: issued.url }, { label: 'Username', value: issued.username }, { label: 'Password', value: issued.password }, ].map((item) => (
{item.label}
{item.value}
))}
); } function LinkRow({ link }: { link: TicketStatusLink }) { const [copied, setCopied] = useState(false); const [busy, setBusy] = useState(false); const patch = (data: Record) => { setBusy(true); router.put(`/settings/status-links/${link.id}`, data, { preserveScroll: true, onFinish: () => setBusy(false), }); }; const act = (run: (finish: () => void) => void) => { setBusy(true); run(() => setBusy(false)); }; return (
  • {link.name} {link.state.label} {link.username}
    {link.statuses.map((status) => ( {status.label} ))}

    {link.expires_at ? `Stops ${formatDateTime(link.expires_at)}` : 'No end date'} {' · '} {link.last_used_at ? `Last used ${formatRelative(link.last_used_at)}${link.last_used_ip ? ` from ${link.last_used_ip}` : ''}` : 'Never used'}

    • ); }