Build create asset modal with form validation

frontend/app/(dashboard)/assets/[id]/page.tsx

@@ -9,7 +9,7 @@ import { StatusBadge } from "@/components/assets/status-badge";
 import { ConditionBadge } from "@/components/assets/condition-badge";
 import { useAsset, useAssetHistory } from "@/lib/query/hooks/useAsset";
 
-type Tab = "overview" | "history";
+type Tab = "overview" | "history" | "documents";
 
 export default function AssetDetailPage() {
   const { id } = useParams<{ id: string }>();
@@ -41,6 +41,7 @@ export default function AssetDetailPage() {
   const tabs: { key: Tab; label: string; icon: React.ReactNode }[] = [
     { key: "overview", label: "Overview", icon: <FileText size={15} /> },
     { key: "history", label: "History", icon: <Clock size={15} /> },
+    { key: "documents", label: "Documents", icon: <FileText size={15} /> },
   ];
 
   return (
@@ -232,6 +233,98 @@ export default function AssetDetailPage() {
           )}
         </div>
       )}
+
+      {tab === "documents" && <AssetDocumentsSection assetId={id} />}
+    </div>
+  );
+}
+
+// Asset Documents Section
+import {
+  useAssetDocuments,
+  useUploadDocument,
+  useDeleteDocument,
+} from "@/lib/query/hooks/useAsset";
+
+function AssetDocumentsSection({ assetId }: { assetId: string }) {
+  const { data: documents = [], isLoading } = useAssetDocuments(assetId);
+  const uploadMutation = useUploadDocument(assetId);
+  const deleteMutation = useDeleteDocument(assetId);
+  const [file, setFile] = useState<File | null>(null);
+  const [name, setName] = useState("");
+
+  const handleUpload = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (file) {
+      uploadMutation.mutate({ file, name: name || file.name });
+      setFile(null);
+      setName("");
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-5">
+      <h2 className="text-sm font-semibold text-gray-900 mb-4">
+        Asset Documents
+      </h2>
+      <form className="mb-6 flex gap-2 items-center" onSubmit={handleUpload}>
+        <input
+          type="file"
+          onChange={(e) => setFile(e.target.files?.[0] || null)}
+          className="border rounded px-2 py-1 text-sm"
+        />
+        <input
+          type="text"
+          placeholder="Document name (optional)"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="border rounded px-2 py-1 text-sm"
+        />
+        <Button type="submit" disabled={!file || uploadMutation.isLoading}>
+          {uploadMutation.isLoading ? "Uploading..." : "Upload"}
+        </Button>
+      </form>
+      {isLoading ? (
+        <div className="text-gray-400 text-sm">Loading documents...</div>
+      ) : documents.length === 0 ? (
+        <div className="text-gray-400 text-sm">No documents uploaded yet.</div>
+      ) : (
+        <ul className="divide-y divide-gray-200">
+          {documents.map((doc) => (
+            <li key={doc.id} className="py-3 flex items-center justify-between">
+              <div>
+                <a
+                  href={doc.url}
+                  target="_blank"
+                  rel="noopener"
+                  className="text-blue-600 hover:underline font-medium"
+                >
+                  {doc.name}
+                </a>
+                <span className="ml-2 text-xs text-gray-400">{doc.type}</span>
+                <span className="ml-2 text-xs text-gray-400">
+                  {(doc.size / 1024).toFixed(1)} KB
+                </span>
+                <span className="ml-2 text-xs text-gray-400">
+                  Uploaded by {doc.uploadedBy?.firstName}{" "}
+                  {doc.uploadedBy?.lastName}
+                </span>
+                <span className="ml-2 text-xs text-gray-400">
+                  {format(new Date(doc.createdAt), "MMM d, yyyy")}
+                </span>
+              </div>
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={() => deleteMutation.mutate(doc.id)}
+                disabled={deleteMutation.isLoading}
+              >
+                Delete
+              </Button>
+            </li>
+          ))}
+        </ul>
+      )}
     </div>
   );
 }

frontend/components/assets/create-asset-modal.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { useCreateAsset } from '@/lib/query/hooks/useAssets';
+import { useDepartments } from '@/lib/query/hooks/useAsset';
+import { useCategories } from '@/lib/query/hooks/useAssets';
+import { AssetStatus, AssetCondition } from '@/lib/query/types/asset';
+
+const schema = z.object({
+  name: z.string().min(1, 'Asset name is required'),
+  categoryId: z.string().min(1, 'Category is required'),
+  departmentId: z.string().min(1, 'Department is required'),
+  serialNumber: z.string().optional(),
+  manufacturer: z.string().optional(),
+  model: z.string().optional(),
+  location: z.string().optional(),
+  condition: z.nativeEnum(AssetCondition).optional(),
+  status: z.nativeEnum(AssetStatus).optional(),
+  purchasePrice: z.string().optional(),
+  notes: z.string().optional(),
+});
+
+type FormValues = z.infer<typeof schema>;
+
+interface Props {
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export function CreateAssetModal({ onClose, onSuccess }: Props) {
+  const { data: departments = [] } = useDepartments();
+  const { data: categories = [] } = useCategories();
+  const createAsset = useCreateAsset();
+
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors },
+  } = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: { condition: AssetCondition.NEW, status: AssetStatus.ACTIVE },
+  });
+
+  const onSubmit = async (values: FormValues) => {
+    try {
+      await createAsset.mutateAsync({
+        name: values.name,
+        categoryId: values.categoryId,
+        departmentId: values.departmentId,
+        serialNumber: values.serialNumber || undefined,
+        manufacturer: values.manufacturer || undefined,
+        model: values.model || undefined,
+        location: values.location || undefined,
+        condition: values.condition,
+        status: values.status,
+        purchasePrice: values.purchasePrice ? Number(values.purchasePrice) : undefined,
+        notes: values.notes || undefined,
+      });
+      onSuccess?.();
+      onClose();
+    } catch (err: unknown) {
+      const message =
+        (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+        'Failed to register asset.';
+      setError('root', { message });
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/40" onClick={onClose} />
+
+      {/* Modal */}
+      <div className="relative bg-white rounded-2xl shadow-xl w-full max-w-xl max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 sticky top-0 bg-white">
+          <h2 className="text-base font-semibold text-gray-900">Register New Asset</h2>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
+            <X size={20} />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit(onSubmit)} className="px-6 py-5 space-y-4">
+          <Input id="name" label="Asset Name *" placeholder='e.g. MacBook Pro 16"' {...register('name')} error={errors.name?.message} />
+
+          <div className="grid grid-cols-2 gap-3">
+            {/* Category */}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-gray-700">Category *</label>
+              <select
+                {...register('categoryId')}
+                className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-900"
+              >
+                <option value="">Select category</option>
+                {categories.map((c) => (
+                  <option key={c.id} value={c.id}>{c.name}</option>
+                ))}
+              </select>
+              {errors.categoryId && <p className="text-xs text-red-500">{errors.categoryId.message}</p>}
+            </div>
+
+            {/* Department */}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-gray-700">Department *</label>
+              <select
+                {...register('departmentId')}
+                className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-900"
+              >
+                <option value="">Select department</option>
+                {departments.map((d) => (
+                  <option key={d.id} value={d.id}>{d.name}</option>
+                ))}
+              </select>
+              {errors.departmentId && <p className="text-xs text-red-500">{errors.departmentId.message}</p>}
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <Input id="serialNumber" label="Serial Number" placeholder="SN-12345" {...register('serialNumber')} />
+            <Input id="location" label="Location" placeholder="Floor 2, Room 204" {...register('location')} />
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <Input id="manufacturer" label="Manufacturer" placeholder="Apple" {...register('manufacturer')} />
+            <Input id="model" label="Model" placeholder="MacBook Pro" {...register('model')} />
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            {/* Condition */}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-gray-700">Condition</label>
+              <select
+                {...register('condition')}
+                className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-900"
+              >
+                {Object.values(AssetCondition).map((c) => (
+                  <option key={c} value={c}>{c.charAt(0) + c.slice(1).toLowerCase()}</option>
+                ))}
+              </select>
+            </div>
+
+            <Input id="purchasePrice" label="Purchase Price ($)" type="number" placeholder="0.00" {...register('purchasePrice')} />
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <label htmlFor="notes" className="text-sm font-medium text-gray-700">Notes</label>
+            <textarea
+              id="notes"
+              rows={3}
+              placeholder="Any additional notes..."
+              {...register('notes')}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-900 resize-none"
+            />
+          </div>
+
+          {errors.root && (
+            <p className="text-sm text-red-500 bg-red-50 border border-red-200 rounded-lg px-3 py-2">
+              {errors.root.message}
+            </p>
+          )}
+
+          <div className="flex gap-3 pt-2">
+            <Button type="button" variant="outline" className="flex-1" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" className="flex-1" loading={createAsset.isPending}>
+              Register Asset
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@tanstack/react-query": "^5.90.21"
+  }
+}