251205:0000 Just start debug backend/frontend

frontend/components/drawings/card.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { Drawing } from "@/types/drawing";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { FileText, Download, Eye, GitCompare } from "lucide-react";
+import Link from "next/link";
+import { format } from "date-fns";
+
+export function DrawingCard({ drawing }: { drawing: Drawing }) {
+  return (
+    <Card className="p-6 hover:shadow-md transition-shadow">
+      <div className="flex gap-4">
+        {/* Thumbnail Placeholder */}
+        <div className="w-24 h-24 bg-muted rounded flex items-center justify-center shrink-0">
+          <FileText className="h-10 w-10 text-muted-foreground" />
+        </div>
+
+        {/* Info */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between mb-2">
+            <div>
+              <h3 className="text-lg font-semibold truncate" title={drawing.drawing_number}>
+                {drawing.drawing_number}
+              </h3>
+              <p className="text-sm text-muted-foreground truncate" title={drawing.title}>
+                {drawing.title}
+              </p>
+            </div>
+            <Badge variant="outline">{drawing.discipline?.discipline_code}</Badge>
+          </div>
+
+          <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-sm text-muted-foreground mb-3">
+            <div>
+              <span className="font-medium text-foreground">Sheet:</span> {drawing.sheet_number}
+            </div>
+            <div>
+              <span className="font-medium text-foreground">Rev:</span> {drawing.current_revision}
+            </div>
+            <div>
+              <span className="font-medium text-foreground">Scale:</span> {drawing.scale || "N/A"}
+            </div>
+            <div>
+              <span className="font-medium text-foreground">Date:</span>{" "}
+              {format(new Date(drawing.issue_date), "dd/MM/yyyy")}
+            </div>
+          </div>
+
+          <div className="flex gap-2 flex-wrap">
+            <Link href={`/drawings/${drawing.drawing_id}`}>
+              <Button variant="outline" size="sm">
+                <Eye className="mr-2 h-4 w-4" />
+                View
+              </Button>
+            </Link>
+            <Button variant="outline" size="sm">
+              <Download className="mr-2 h-4 w-4" />
+              Download
+            </Button>
+            {drawing.revision_count > 1 && (
+              <Button variant="outline" size="sm">
+                <GitCompare className="mr-2 h-4 w-4" />
+                Compare
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}

frontend/components/drawings/list.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { Drawing } from "@/types/drawing";
+import { DrawingCard } from "@/components/drawings/card";
+import { drawingApi } from "@/lib/api/drawings";
+import { useEffect, useState } from "react";
+import { Loader2 } from "lucide-react";
+
+interface DrawingListProps {
+  type: "CONTRACT" | "SHOP";
+}
+
+export function DrawingList({ type }: DrawingListProps) {
+  const [drawings, setDrawings] = useState<Drawing[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchDrawings = async () => {
+      setLoading(true);
+      try {
+        const data = await drawingApi.getAll({ type });
+        setDrawings(data);
+      } catch (error) {
+        console.error("Failed to fetch drawings", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchDrawings();
+  }, [type]);
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-12">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (drawings.length === 0) {
+    return (
+      <div className="text-center py-12 text-muted-foreground border rounded-lg border-dashed">
+        No drawings found.
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+      {drawings.map((drawing) => (
+        <DrawingCard key={drawing.drawing_id} drawing={drawing} />
+      ))}
+    </div>
+  );
+}

frontend/components/drawings/revision-history.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { DrawingRevision } from "@/types/drawing";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Download, FileText } from "lucide-react";
+import { format } from "date-fns";
+
+export function RevisionHistory({ revisions }: { revisions: DrawingRevision[] }) {
+  return (
+    <Card className="p-6">
+      <h3 className="text-lg font-semibold mb-4">Revision History</h3>
+
+      <div className="space-y-3">
+        {revisions.map((rev) => (
+          <div
+            key={rev.revision_id}
+            className="flex items-center justify-between p-3 bg-muted/30 rounded-lg border"
+          >
+            <div className="flex-1">
+              <div className="flex items-center gap-3 mb-1">
+                <Badge variant={rev.is_current ? "default" : "outline"}>
+                  Rev. {rev.revision_number}
+                </Badge>
+                {rev.is_current && (
+                  <span className="text-xs text-green-600 font-medium flex items-center gap-1">
+                    <div className="h-1.5 w-1.5 rounded-full bg-green-600" />
+                    CURRENT
+                  </span>
+                )}
+              </div>
+              <p className="text-sm text-foreground font-medium">
+                {rev.revision_description || "No description"}
+              </p>
+              <p className="text-xs text-muted-foreground mt-1">
+                {format(new Date(rev.revision_date), "dd MMM yyyy")} by{" "}
+                {rev.revised_by_name}
+              </p>
+            </div>
+
+            <Button variant="ghost" size="sm" title="Download">
+              <Download className="h-4 w-4" />
+            </Button>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+}

frontend/components/drawings/upload-form.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Card } from "@/components/ui/card";
+import { useRouter } from "next/navigation";
+import { drawingApi } from "@/lib/api/drawings";
+import { useState } from "react";
+import { Loader2 } from "lucide-react";
+
+const drawingSchema = z.object({
+  drawing_type: z.enum(["CONTRACT", "SHOP"], { required_error: "Type is required" }),
+  drawing_number: z.string().min(1, "Drawing Number is required"),
+  title: z.string().min(5, "Title must be at least 5 characters"),
+  discipline_id: z.number({ required_error: "Discipline is required" }),
+  sheet_number: z.string().min(1, "Sheet Number is required"),
+  scale: z.string().optional(),
+  file: z.instanceof(File, { message: "File is required" }),
+});
+
+type DrawingFormData = z.infer<typeof drawingSchema>;
+
+export function DrawingUploadForm() {
+  const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<DrawingFormData>({
+    resolver: zodResolver(drawingSchema),
+  });
+
+  const onSubmit = async (data: DrawingFormData) => {
+    setIsSubmitting(true);
+    try {
+      await drawingApi.create(data as any);
+      router.push("/drawings");
+      router.refresh();
+    } catch (error) {
+      console.error(error);
+      alert("Failed to upload drawing");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="max-w-2xl space-y-6">
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold mb-4">Drawing Information</h3>
+
+        <div className="space-y-4">
+          <div>
+            <Label>Drawing Type *</Label>
+            <Select onValueChange={(v) => setValue("drawing_type", v as any)}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="CONTRACT">Contract Drawing</SelectItem>
+                <SelectItem value="SHOP">Shop Drawing</SelectItem>
+              </SelectContent>
+            </Select>
+            {errors.drawing_type && (
+              <p className="text-sm text-destructive mt-1">{errors.drawing_type.message}</p>
+            )}
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="drawing_number">Drawing Number *</Label>
+              <Input id="drawing_number" {...register("drawing_number")} placeholder="e.g. A-101" />
+              {errors.drawing_number && (
+                <p className="text-sm text-destructive mt-1">{errors.drawing_number.message}</p>
+              )}
+            </div>
+            <div>
+              <Label htmlFor="sheet_number">Sheet Number *</Label>
+              <Input id="sheet_number" {...register("sheet_number")} placeholder="e.g. 01" />
+              {errors.sheet_number && (
+                <p className="text-sm text-destructive mt-1">{errors.sheet_number.message}</p>
+              )}
+            </div>
+          </div>
+
+          <div>
+            <Label htmlFor="title">Title *</Label>
+            <Input id="title" {...register("title")} placeholder="Drawing Title" />
+            {errors.title && (
+              <p className="text-sm text-destructive mt-1">{errors.title.message}</p>
+            )}
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <Label>Discipline *</Label>
+              <Select
+                onValueChange={(v) => setValue("discipline_id", parseInt(v))}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select Discipline" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1">STR - Structure</SelectItem>
+                  <SelectItem value="2">ARC - Architecture</SelectItem>
+                  <SelectItem value="3">ELE - Electrical</SelectItem>
+                  <SelectItem value="4">MEC - Mechanical</SelectItem>
+                </SelectContent>
+              </Select>
+              {errors.discipline_id && (
+                <p className="text-sm text-destructive mt-1">{errors.discipline_id.message}</p>
+              )}
+            </div>
+            <div>
+              <Label htmlFor="scale">Scale</Label>
+              <Input id="scale" {...register("scale")} placeholder="e.g. 1:100" />
+            </div>
+          </div>
+
+          <div>
+            <Label htmlFor="file">Drawing File *</Label>
+            <Input
+              id="file"
+              type="file"
+              accept=".pdf,.dwg"
+              className="cursor-pointer"
+              onChange={(e) => {
+                const file = e.target.files?.[0];
+                if (file) setValue("file", file);
+              }}
+            />
+            <p className="text-xs text-muted-foreground mt-1">
+              Accepted: PDF, DWG (Max 50MB)
+            </p>
+            {errors.file && (
+              <p className="text-sm text-destructive mt-1">{errors.file.message}</p>
+            )}
+          </div>
+        </div>
+      </Card>
+
+      <div className="flex justify-end gap-3">
+        <Button type="button" variant="outline" onClick={() => router.back()}>
+          Cancel
+        </Button>
+        <Button type="submit" disabled={isSubmitting}>
+          {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          Upload Drawing
+        </Button>
+      </div>
+    </form>
+  );
+}