import { Head } from '@inertiajs/react'; import { Pencil, Plus, Search, Trash2 } from 'lucide-react'; import { useMemo, useState } from 'react'; import type { ReactNode } from 'react'; import { ConfirmDelete, FormDialog, FormField, NativeSelect, PageHeader, Textarea, } from '@/components/admin/form-controls'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { portfolio } from '@/data/projects'; import { optionsOf, programLabels, sectorLabels } from '@/lib/admin-labels'; import { destroy, index, store, update } from '@/routes/admin/projects'; import type { Project, ProjectSector } from '@/types'; export default function ProjectsIndex({ projects }: { projects: Project[] }) { const [query, setQuery] = useState(''); const [sector, setSector] = useState(''); const stats = portfolio(projects); const visible = useMemo(() => { const needle = query.trim().toLowerCase(); return projects.filter( (project) => (!sector || project.sector === sector) && (!needle || `${project.title} ${project.client} ${project.year}` .toLowerCase() .includes(needle)), ); }, [projects, query, sector]); return ( <>

Tambah Proyek } /> } />

setQuery(event.target.value)} placeholder="Cari judul, klien, atau tahun…" className="pl-9" />

setSector(event.target.value as ProjectSector | '') } options={[ { value: '', label: 'Semua sektor' }, ...optionsOf(sectorLabels), ]} className="sm:w-48" />

{visible.map((project) => ( ))} {visible.length === 0 && ( )}

Tahun	Proyek	Sektor
{project.year}	{project.title} {project.client} {project.scope && ( {project.scope} )}	{sectorLabels[project.sector]} {project.program && ( { programLabels[ project.program ] } )}	} /> } />
Tidak ada proyek yang cocok.

); } function ProjectDialog({ project, trigger, }: { project?: Project; trigger: ReactNode; }) { const id = (field: string) => `project-${project?.id ?? 'new'}-${field}`; return ( {(errors) => ( <>

</FormField>
                    <FormField
                        id={id('client')}
                        label="Klien"
                        error={errors.client}
                    >
                        <Input
                            id={id('client')}
                            name="client"
                            defaultValue={project?.client}
                            required
                        />
                    </FormField>
                    <div className="grid gap-4 sm:grid-cols-2">
                        <FormField
                            id={id('year')}
                            label="Tahun"
                            error={errors.year}
                        >
                            <Input
                                id={id('year')}
                                name="year"
                                type="number"
                                min={1985}
                                max={new Date().getFullYear() + 1}
                                defaultValue={
                                    project?.year ?? new Date().getFullYear()
                                }
                                required
                            />
                        </FormField>
                        <FormField
                            id={id('sector')}
                            label="Sektor"
                            error={errors.sector}
                        >
                            <NativeSelect
                                id={id('sector')}
                                name="sector"
                                defaultValue={project?.sector ?? 'government'}
                                options={optionsOf(sectorLabels)}
                            />
                        </FormField>
                    </div>
                    <FormField
                        id={id('program')}
                        label="Program unggulan (opsional)"
                        error={errors.program}
                    >
                        <NativeSelect
                            id={id('program')}
                            name="program"
                            defaultValue={project?.program ?? ''}
                            options={[
                                { value: '', label: '— Tidak ada —' },
                                ...optionsOf(programLabels),
                            ]}
                        />
                    </FormField>
                    <FormField
                        id={id('scope')}
                        label="Cakupan (opsional)"
                        error={errors.scope}
                    >
                        <Input
                            id={id('scope')}
                            name="scope"
                            defaultValue={project?.scope ?? ''}
                            placeholder="Mis. Odoo Enterprise → POS, Penjualan → Custom Development"
                        />
                    </FormField>
                </>
            )}
        </FormDialog>
    );
}

ProjectsIndex.layout = {
    breadcrumbs: [{ title: 'Portofolio', href: index() }],
};