import { Head, router, useForm } from '@inertiajs/react'; import { CheckCircle2, Download, FileSpreadsheet, Link2, RefreshCw, ShieldAlert, Unplug, } from 'lucide-react'; import { FormField, NativeSelect } from '@/components/crm/native-select'; import { Callout, SectionCard } from '@/components/crm/page-header'; 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 { cn } from '@/lib/utils'; import { check as checkSheet, commit as importSheet, destroy as disconnectSheet, update as updateSheet, } from '@/routes/sheet-import/source'; import type { SheetImportProps, SheetImportReport, SheetImportSource, SheetImportSourceSettings, SheetImportStats, } from '@/types'; /** * Settings -> Sheet import. * * Three sheets can be read automatically: the client list, the job sheet and * the installer register. Each is its own card, because each is its own * spreadsheet with its own link, its own cadence and its own report — connecting * one must never disturb another. * * A card shows what the sheet holds before anything is written, then offers to * write it. Nothing is ever written back to a sheet. */ export default function SheetImportSettings({ sources, schedules, }: SheetImportProps) { const connected = sources.filter((source) => source.url !== null).length; return ( <> 0 ? 'success' : 'info'} icon={connected > 0 ? CheckCircle2 : Link2} title={ connected > 0 ? `${connected} of ${sources.length} sheets connected` : 'Connect a Google Sheet to each list you want kept in step' } > Paste the link you would send a colleague — the one with{' '} #gid= on the end — and the system reads it, says what it found, and offers to import it. The schedule reads the sheet and writes a report; it only imports when the second switch is on. Nothing is ever written back to the sheet. {sources.map((source) => ( ))} ); } /** * One sheet: its link, its switches and what the last read found. */ function SourceCard({ source, schedules, }: { source: SheetImportSourceSettings; schedules: Array<{ value: string; label: string }>; }) { const form = useForm({ url: source.url ?? '', sync: source.enabled, cron: source.cron, commit: source.commits, }); const isConnected = source.url !== null; const submit = () => { form.post(updateSheet(source.source).url, { preserveScroll: true }); }; const checkNow = () => { router.post( checkSheet(source.source).url, {}, { preserveScroll: true }, ); }; const importNow = () => { const ready = source.preview?.stats.ready ?? 0; if ( !window.confirm( `Import ${ready} ${noun(source.source, true)} from the sheet? A database backup is taken and verified first.`, ) ) { return; } router.post( importSheet(source.source).url, {}, { preserveScroll: true }, ); }; const disconnect = () => { if ( !window.confirm( `Disconnect the ${source.label.toLowerCase()} sheet and switch its sync off? Nothing already imported is removed.`, ) ) { return; } router.delete(disconnectSheet(source.source).url, { preserveScroll: true, }); }; return ( form.setData('url', event.target.value) } />
Sharing by link is what lets the import read the sheet without a Google sign-in. It also means anybody holding that link can read everything in it — so only connect a sheet whose contents are safe to share, and unshare it when the import is done.
{isConnected ? ( <> ) : null}
form.setData('sync', checked === true) } />

Each run writes a report of what the sheet now holds. Leave this off and the sheet is only read when you press Check now.

form.setData('commit', checked === true) } />

A scheduled run writes what it finds, after a verified backup. Leaving this off keeps the schedule read-only until you press Import.

form.setData('cron', event.target.value) } > {schedules.map((option) => ( ))}
{source.preview ? (
) : null} {source.import ? (
) : null} {source.last_run ? (

Last run {new Date(source.last_run.at).toLocaleString()} {source.last_run.committed ? ' (imported)' : ' (report only)'}

) : null}

{source.command}

); } /** * A report is the same shape whether it came from a dry run or a real import, * which is what lets the card look the same before and after. */ function Report({ title, source, report, onImport, }: { title: string; source: SheetImportSource; report: SheetImportReport; onImport?: () => void; }) { const stats = report.stats; const ready = stats.ready ?? 0; return (

{title}

{report.imported_at ? (

Read{' '} {new Date(report.imported_at).toLocaleString()} {report.sheet ? ` from ${report.sheet}` : ''} {report.committed ? '' : ' · nothing written'}

) : null}
{onImport && ready > 0 ? ( ) : null}
{statChips(source, stats).map((chip) => ( ))}
{report.rows.length > 0 ? (
{report.rows.some((row) => row.sheet) ? ( ) : null} {report.rows.map((row) => ( {report.rows.some((each) => each.sheet) ? ( ) : null} ))}
RowTabName Address Outcome
{row.row} {row.sheet ?? '—'} {row.name ?? '—'} {row.address ?? '—'}
) : (

The sheet has no rows the importer could read.

)} {report.row_count > report.rows.length ? (

Showing the first {report.rows.length} of {report.row_count}{' '} rows.

) : null}
); } /** * The counts worth showing for one source. A job sheet has no "updated" count * and a client sheet has no sites, so the chips follow the report rather than * a fixed list. */ function statChips(source: SheetImportSource, stats: SheetImportStats) { const chips: Array<{ label: string; value: number; tone?: 'good' }> = []; const add = (key: keyof SheetImportStats, label: string, tone?: 'good') => { const value = stats[key]; if (typeof value === 'number') { chips.push({ label, value, tone }); } }; add('rows', 'Rows read'); add('ready', readyLabel(source), 'good'); add('updates', 'To update'); add('duplicates', 'Duplicates'); add('missing_name', 'No name'); add('missing_contact', 'No contact'); add('missing_address', 'No address'); add('invalid_address', 'Address unusable'); add('inactive', 'Not used any more'); add('new_customers', 'New customers'); add('existing_customers', 'Existing customers'); add('new_sites', 'New sites'); return chips; } function readyLabel(source: SheetImportSource): string { return { clients: 'Clients to create', jobs: 'Jobs to create', installers: 'Installers to add', }[source]; } function noun(source: SheetImportSource, plural: boolean): string { const word = { clients: 'client', jobs: 'job', installers: 'installer', }[source]; return plural ? `${word}s` : word; } function Stat({ label, value, tone, }: { label: string; value: number; tone?: 'good'; }) { return (

{label}

{value}

); } function Outcome({ outcome, reason, }: { outcome: string | null; reason: string | null; }) { const label = { create: 'Will import', update: 'Will update', duplicate: 'Duplicate', missing_name: 'No name', missing_contact: 'No contact', missing_address: 'No address', invalid_address: 'Address not usable', }[outcome ?? ''] ?? 'Skipped'; return (
{label} {reason ? (

{reason}

) : null}
); } SheetImportSettings.layout = { breadcrumbs: [ { title: 'Sheet import', href: '/settings/sheet-import', }, ], };