103 lines
4.1 KiB
TypeScript
103 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { DrawingList } from '@/components/drawings/list';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Upload, Loader2 } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { useProjects } from '@/hooks/use-master-data';
|
|
|
|
export default function DrawingsPage() {
|
|
const [selectedProjectUuid, setSelectedProjectUuid] = useState<string | undefined>(undefined);
|
|
const { data: projects = [], isLoading: isLoadingProjects } = useProjects();
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">Drawings</h1>
|
|
<p className="text-muted-foreground mt-1">Manage contract, shop, and as-built drawings</p>
|
|
</div>
|
|
<Link href="/drawings/upload">
|
|
<Button>
|
|
<Upload className="mr-2 h-4 w-4" />
|
|
Upload Drawing
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Project Selector */}
|
|
<div className="flex items-center gap-4">
|
|
<span className="text-sm font-medium">Project:</span>
|
|
<Select value={selectedProjectUuid ?? ''} onValueChange={(v) => setSelectedProjectUuid(v || undefined)}>
|
|
<SelectTrigger className="w-[300px]">
|
|
{isLoadingProjects ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<SelectValue placeholder="Select Project" />
|
|
)}
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{projects.map((project: { id?: number; publicId?: string; projectName: string; projectCode: string }) => (
|
|
<SelectItem key={project.publicId || project.id} value={String(project.publicId || project.id)}>
|
|
{project.projectCode} - {project.projectName}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{!selectedProjectUuid ? (
|
|
<div className="text-center py-12 text-muted-foreground border rounded-lg border-dashed">
|
|
Please select a project to view drawings.
|
|
</div>
|
|
) : (
|
|
<DrawingTabs projectUuid={selectedProjectUuid} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DrawingTabs({ projectUuid }: { projectUuid: string }) {
|
|
const [search, setSearch] = useState('');
|
|
// We can add more specific filters here (e.g. category) later
|
|
|
|
return (
|
|
<Tabs defaultValue="contract" className="w-full">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<TabsList className="grid w-full grid-cols-3 max-w-[400px]">
|
|
<TabsTrigger value="contract">Contract</TabsTrigger>
|
|
<TabsTrigger value="shop">Shop</TabsTrigger>
|
|
<TabsTrigger value="asbuilt">As Built</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<div className="flex gap-2">
|
|
<div className="relative">
|
|
<input
|
|
type="text"
|
|
placeholder="Search drawings..."
|
|
className="h-10 w-[250px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<TabsContent value="contract" className="mt-0">
|
|
<DrawingList type="CONTRACT" projectUuid={projectUuid} filters={{ search }} />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="shop" className="mt-0">
|
|
<DrawingList type="SHOP" projectUuid={projectUuid} filters={{ search }} />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="asbuilt" className="mt-0">
|
|
<DrawingList type="AS_BUILT" projectUuid={projectUuid} filters={{ search }} />
|
|
</TabsContent>
|
|
</Tabs>
|
|
);
|
|
}
|