251225:1703 On going update to 1.7.0: Refoctory drawing Module not finish

frontend/app/(dashboard)/drawings/page.tsx

@@ -1,19 +1,31 @@
 "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 { Upload } from "lucide-react";
+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 [selectedProjectId, setSelectedProjectId] = useState<number | 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 and shop drawings
+            Manage contract, shop, and as-built drawings
           </p>
         </div>
         <Link href="/drawings/upload">
@@ -24,25 +36,79 @@ export default function DrawingsPage() {
         </Link>
       </div>
 
-      <Tabs defaultValue="contract" className="w-full">
-        <TabsList className="grid w-full grid-cols-3 max-w-[600px]">
-          <TabsTrigger value="contract">Contract Drawings</TabsTrigger>
-          <TabsTrigger value="shop">Shop Drawings</TabsTrigger>
-          <TabsTrigger value="asbuilt">As Built Drawings</TabsTrigger>
-        </TabsList>
+      {/* Project Selector */}
+      <div className="flex items-center gap-4">
+        <span className="text-sm font-medium">Project:</span>
+        <Select
+          value={selectedProjectId?.toString() ?? ""}
+          onValueChange={(v) => setSelectedProjectId(v ? parseInt(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; projectName: string; projectCode: string }) => (
+              <SelectItem key={project.id} value={String(project.id)}>
+                {project.projectCode} - {project.projectName}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
 
-        <TabsContent value="contract" className="mt-6">
-          <DrawingList type="CONTRACT" />
-        </TabsContent>
-
-        <TabsContent value="shop" className="mt-6">
-          <DrawingList type="SHOP" />
-        </TabsContent>
-
-        <TabsContent value="asbuilt" className="mt-6">
-          <DrawingList type="AS_BUILT" />
-        </TabsContent>
-      </Tabs>
+      {!selectedProjectId ? (
+        <div className="text-center py-12 text-muted-foreground border rounded-lg border-dashed">
+          Please select a project to view drawings.
+        </div>
+      ) : (
+        <DrawingTabs projectId={selectedProjectId} />
+      )}
     </div>
   );
 }
+
+function DrawingTabs({ projectId }: { projectId: number }) {
+  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" projectId={projectId} filters={{ search }} />
+          </TabsContent>
+
+          <TabsContent value="shop" className="mt-0">
+            <DrawingList type="SHOP" projectId={projectId} filters={{ search }} />
+          </TabsContent>
+
+          <TabsContent value="asbuilt" className="mt-0">
+            <DrawingList type="AS_BUILT" projectId={projectId} filters={{ search }} />
+          </TabsContent>
+        </Tabs>
+  )
+}
+