import { Head, useForm } from '@inertiajs/react'; import { ClipboardList, Eye, EyeOff, KeyRound, Lock, Mail, ShieldAlert, ShieldCheck, UserRound, Wrench, } from 'lucide-react'; import { useState } from 'react'; import { Callout } from '@/components/crm/page-header'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Spinner } from '@/components/ui/spinner'; import { cn } from '@/lib/utils'; import type { TicketStatusLoginProps } from '@/types'; type Mode = 'staff' | 'link'; /** * The front door of the shared status board. * * Two doors, clearly labelled. A colleague types the details they already use * for the CRM and gets the queues their ticket access covers. A crew, or anyone * else outside the company, types the username and password the office issued. * * Written for somebody holding a phone in a ute: one card, two fields, and the * plain statement that this is not the CRM and cannot be used to change * anything. * * The staff door is optional. The office switches it in Settings -> Status link, * and until they do the card is the issued link alone — a colleague who is * signed in to the CRM never sees this page, and one who is not signs in there * first. The switch is off by default, so nothing here assumes a form that just * arrived with a password field for company accounts. */ export default function TicketStatusLogin({ status, staff_account: staffAccount, staff_login: staffLogin, }: TicketStatusLoginProps) { const [mode, setMode] = useState(staffLogin ? 'staff' : 'link'); const [reveal, setReveal] = useState(false); const staff = useForm({ email: '', password: '' }); const link = useForm({ username: '', password: '' }); const submit = (event: React.FormEvent) => { event.preventDefault(); if (mode === 'staff') { staff.post('/ticket-status/staff', { onFinish: () => staff.reset('password'), }); return; } link.post('/ticket-status', { onFinish: () => link.reset('password'), }); }; const busy = mode === 'staff' ? staff.processing : link.processing; return ( <>

Installer-facing queue

Where the faults are up to

This board shows the support tickets that are waiting on an installer or on the install itself — the jobs that need somebody on site, not the ones the office is still working. It is read-only and it shows no prices, no contact details beyond a phone number, and no customer history.

    {[ ...(staffLogin ? [ { icon: ShieldCheck, title: 'Staff use their own login', body: 'Your CRM email and password. The queues follow the access you already have.', }, ] : []), { icon: KeyRound, title: 'Everyone else gets a link', body: 'A username and password from the office, with only the queues it was issued for.', }, { icon: Lock, title: 'Temporary', body: 'A shared link can be switched off, or left to run out on its own.', }, ].map((item) => (
  • {item.title}

    {item.body}

    • ))}
{( [ { value: 'staff', label: 'Staff login', icon: ShieldCheck, }, { value: 'link', label: 'Shared link', icon: KeyRound, }, ] as const ).map((tab) => ( ))}
{status ? ( {status} ) : null} {mode === 'staff' && staffAccount ? ( {staffAccount.name} is signed in, but that account cannot read support tickets. Use a shared link password, or ask an administrator for ticket access. ) : null} {mode === 'staff' ? ( <>
staff.setData( 'email', event.target.value, ) } />
{staff.errors.email ? (

{staff.errors.email}

) : null}
staff.setData( 'password', event.target.value, ) } />
{staff.errors.password ? (

{staff.errors.password}

) : null}
) : ( <>
link.setData( 'username', event.target.value, ) } />
{link.errors.username ? (

{link.errors.username}

) : null}
link.setData( 'password', event.target.value, ) } />
{link.errors.password ? (

{link.errors.password}

) : null}
)}

{mode === 'staff' ? 'The same email and password as the CRM. Nothing here can change a ticket.' : 'This is not the staff login. If these details are not working, ring the office — they can see whether the link is still switched on.'}

); }