From 3cda238813e03dacd5b30e021b97c42d8ae8b35b Mon Sep 17 00:00:00 2001
From: Cybervoid <mail@cybervoid.my>
Date: Sat, 23 Aug 2025 02:57:58 +0200
Subject: [PATCH 1/8] feat(database): add Document model and update relations
 in schema

- Introduced a new Document model with various fields for document management, including title, catalogue number, and related metadata.
- Updated existing models (Image, Barometer, Condition) to establish relationships with the new Document model, enhancing data structure and integrity.
---
 .../migration.sql                             | 63 +++++++++++++++++++
 prisma/schema.prisma                          | 33 ++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 prisma/migrations/20250823004407_add_document_model/migration.sql

diff --git a/prisma/migrations/20250823004407_add_document_model/migration.sql b/prisma/migrations/20250823004407_add_document_model/migration.sql
new file mode 100644
index 00000000..7ce7e403
--- /dev/null
+++ b/prisma/migrations/20250823004407_add_document_model/migration.sql
@@ -0,0 +1,63 @@
+-- CreateTable
+CREATE TABLE "Document" (
+    "id" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "catalogueNumber" TEXT NOT NULL,
+    "documentType" TEXT NOT NULL,
+    "subject" TEXT,
+    "creator" TEXT,
+    "date" TIMESTAMP(3),
+    "dateDescription" TEXT,
+    "placeOfOrigin" TEXT,
+    "language" TEXT,
+    "physicalDescription" TEXT,
+    "annotations" TEXT[],
+    "provenance" TEXT,
+    "acquisitionDate" TIMESTAMP(3),
+    "description" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "conditionId" TEXT,
+
+    CONSTRAINT "Document_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "_DocumentBarometers" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_DocumentBarometers_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateTable
+CREATE TABLE "_DocumentImages" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_DocumentImages_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Document_catalogueNumber_key" ON "Document"("catalogueNumber");
+
+-- CreateIndex
+CREATE INDEX "_DocumentBarometers_B_index" ON "_DocumentBarometers"("B");
+
+-- CreateIndex
+CREATE INDEX "_DocumentImages_B_index" ON "_DocumentImages"("B");
+
+-- AddForeignKey
+ALTER TABLE "Document" ADD CONSTRAINT "Document_conditionId_fkey" FOREIGN KEY ("conditionId") REFERENCES "Condition"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_DocumentBarometers" ADD CONSTRAINT "_DocumentBarometers_A_fkey" FOREIGN KEY ("A") REFERENCES "Barometer"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_DocumentBarometers" ADD CONSTRAINT "_DocumentBarometers_B_fkey" FOREIGN KEY ("B") REFERENCES "Document"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_DocumentImages" ADD CONSTRAINT "_DocumentImages_A_fkey" FOREIGN KEY ("A") REFERENCES "Document"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_DocumentImages" ADD CONSTRAINT "_DocumentImages_B_fkey" FOREIGN KEY ("B") REFERENCES "Image"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index b7ea168d..69310c6d 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -20,6 +20,7 @@ model Image {
   categories    Category[]     @relation("CategoryImages")
   barometers    Barometer[]    @relation("BarometerImages")
   manufacturers Manufacturer[] @relation("ManufacturerImages")
+  documents     Document[]     @relation("DocumentImages")
 }
 
 model Category {
@@ -82,6 +83,7 @@ model Barometer {
   images         Image[]            @relation("BarometerImages")
   reports        InaccuracyReport[]
   materials      Material[]         @relation("BarometerMaterials")
+  documents      Document[]         @relation("DocumentBarometers")
 }
 
 model Material {
@@ -143,6 +145,7 @@ model Condition {
   createdAt   DateTime    @default(now())
   updatedAt   DateTime    @updatedAt
   barometers  Barometer[]
+  documents   Document[]
 }
 
 model User {
@@ -156,6 +159,36 @@ model User {
   updatedAt DateTime   @updatedAt
 }
 
+model Document {
+  id                  String    @id @default(uuid())
+  title               String
+  catalogueNumber     String    @unique
+  documentType        String
+  subject             String?
+  creator             String?
+  /// Date for documents sorting
+  date                DateTime?
+  /// Date to display on pages, e.g. "c.1870", "mid 19th century"
+  dateDescription     String?
+  placeOfOrigin       String?
+  language            String?
+  physicalDescription String?
+  /// List of inscriptions, stamps, etc.
+  annotations         String[]
+  provenance          String?
+  acquisitionDate     DateTime?
+  description         String?
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  // Relations
+  conditionId       String?
+  condition         Condition?  @relation(fields: [conditionId], references: [id])
+  images            Image[]     @relation("DocumentImages")
+  relatedBarometers Barometer[] @relation("DocumentBarometers")
+}
+
 enum AccessRole {
   USER
   OWNER

From 1d9146aaac1eea4bdaf4139e054bcef2121b7029 Mon Sep 17 00:00:00 2001
From: Cybervoid <mail@cybervoid.my>
Date: Sat, 23 Aug 2025 07:20:19 +0200
Subject: [PATCH 2/8] feat(adding barometer): add purchase date field with
 validation to barometer form

- Introduced a new 'purchasedAt' field in the barometer form to capture purchase dates.
- Implemented validation for the purchase date to ensure it is a valid date and not set in the future.
- Enhanced form functionality with a date input and clear button for user convenience.
- Extended dayjs with UTC plugin for consistent date handling across the application.
---
 app/admin/add-barometer/page.tsx | 49 +++++++++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/app/admin/add-barometer/page.tsx b/app/admin/add-barometer/page.tsx
index a4e4e897..24089667 100644
--- a/app/admin/add-barometer/page.tsx
+++ b/app/admin/add-barometer/page.tsx
@@ -5,6 +5,7 @@ import { useForm, FormProvider } from 'react-hook-form'
 import { yupResolver } from '@hookform/resolvers/yup'
 import * as yup from 'yup'
 import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
@@ -29,11 +30,12 @@ import { useBarometers } from '@/hooks/useBarometers'
 import { FileUpload } from './file-upload'
 import { AddManufacturer } from './add-manufacturer'
 import { Dimensions } from './dimensions'
-
 import { createBarometer } from '@/services/fetch'
 import { getThumbnailBase64, slug } from '@/utils'
 import { imageStorage } from '@/constants/globals'
 
+dayjs.extend(utc)
+
 // Form data interface
 interface BarometerFormData {
   collectionId: string
@@ -46,6 +48,7 @@ interface BarometerFormData {
   description: string
   dimensions: Array<{ dim: string; value: string }>
   images: string[]
+  purchasedAt: string
 }
 
 // Yup validation schema
@@ -81,6 +84,17 @@ const barometerSchema = yup.object().shape({
     .of(yup.string().required())
     .min(1, 'At least one image is required')
     .default([]),
+  purchasedAt: yup
+    .string()
+    .test('valid-date', 'Must be a valid date', value => {
+      if (!value) return true // Allow empty string
+      return dayjs(value).isValid()
+    })
+    .test('not-future', 'Purchase date cannot be in the future', value => {
+      if (!value) return true
+      return dayjs(value).isBefore(dayjs(), 'day') || dayjs(value).isSame(dayjs(), 'day')
+    })
+    .default(''),
 })
 
 export default function AddCard() {
@@ -99,6 +113,7 @@ export default function AddCard() {
       description: '',
       dimensions: [],
       images: [],
+      purchasedAt: '',
     },
   })
 
@@ -110,6 +125,7 @@ export default function AddCard() {
       const barometerWithImages = {
         ...values,
         date: dayjs(`${values.date}-01-01`).toISOString(),
+        purchasedAt: values.purchasedAt ? dayjs.utc(values.purchasedAt).toISOString() : null,
         images: await Promise.all(
           (values.images || []).map(async (url, i) => ({
             url,
@@ -328,6 +344,37 @@ export default function AddCard() {
               )}
             />
 
+            <FormField
+              control={methods.control}
+              name="purchasedAt"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Purchase Date</FormLabel>
+                  <FormControl>
+                    <div className="flex gap-2">
+                      <Input
+                        {...field}
+                        value={field.value || ''}
+                        type="date"
+                        placeholder="YYYY-MM-DD"
+                        className="flex-1"
+                      />
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setValue('purchasedAt', '')}
+                        className="shrink-0"
+                      >
+                        Clear
+                      </Button>
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
             <Button type="submit" variant="outline" disabled={isPending} className="mt-6">
               {isPending ? 'Adding...' : 'Add new barometer'}
             </Button>

From 7efb921f3641e5390004f87dae344d0cc50fd7c4 Mon Sep 17 00:00:00 2001
From: Cybervoid <mail@cybervoid.my>
Date: Sat, 23 Aug 2025 07:42:14 +0200
Subject: [PATCH 3/8] feat(barometer): add serial number field and enhance form
 inputs

- Introduced a new 'serial' field in the barometer form to capture the serial number.
- Updated validation schema to include a maximum length for the serial number.
- Enhanced input fields with placeholders for better user guidance.
- Modified the purchase date input to include a clear button for improved usability.
- Improved layout and descriptions for various form fields to enhance user experience.
---
 app/admin/add-barometer/page.tsx | 98 +++++++++++++++++++-------------
 1 file changed, 60 insertions(+), 38 deletions(-)

diff --git a/app/admin/add-barometer/page.tsx b/app/admin/add-barometer/page.tsx
index 24089667..03b8d6bd 100644
--- a/app/admin/add-barometer/page.tsx
+++ b/app/admin/add-barometer/page.tsx
@@ -49,6 +49,7 @@ interface BarometerFormData {
   dimensions: Array<{ dim: string; value: string }>
   images: string[]
   purchasedAt: string
+  serial: string
 }
 
 // Yup validation schema
@@ -95,6 +96,7 @@ const barometerSchema = yup.object().shape({
       return dayjs(value).isBefore(dayjs(), 'day') || dayjs(value).isSame(dayjs(), 'day')
     })
     .default(''),
+  serial: yup.string().max(100, 'Serial number must be less than 100 characters').default(''),
 })
 
 export default function AddCard() {
@@ -106,7 +108,7 @@ export default function AddCard() {
       collectionId: '',
       name: '',
       categoryId: '',
-      date: '',
+      date: '1900',
       dateDescription: '',
       manufacturerId: '',
       conditionId: '',
@@ -114,6 +116,7 @@ export default function AddCard() {
       dimensions: [],
       images: [],
       purchasedAt: '',
+      serial: '',
     },
   })
 
@@ -179,7 +182,7 @@ export default function AddCard() {
 
   return (
     <div className="mx-auto max-w-lg">
-      <h3 className="mt-6">Add new barometer</h3>
+      <h3 className="mt-6 mb-10">Add new barometer</h3>
 
       <FormProvider {...methods}>
         <Form {...methods}>
@@ -191,7 +194,21 @@ export default function AddCard() {
                 <FormItem>
                   <FormLabel>Catalogue No. *</FormLabel>
                   <FormControl>
-                    <Input {...field} />
+                    <Input {...field} placeholder="Enter AWIF catalogue #" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={methods.control}
+              name="serial"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Serial Number</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder="Enter serial number" maxLength={100} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -205,7 +222,7 @@ export default function AddCard() {
                 <FormItem>
                   <FormLabel>Title *</FormLabel>
                   <FormControl>
-                    <Input {...field} id="barometer-name" />
+                    <Input {...field} id="barometer-name" placeholder="Enter barometer name" />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -221,7 +238,7 @@ export default function AddCard() {
                   <FormControl>
                     <Input
                       {...field}
-                      placeholder="YYYY"
+                      type="number"
                       maxLength={4}
                       onChange={e => {
                         const year = e.target.value.replace(/\D/g, '').slice(0, 4)
@@ -241,7 +258,38 @@ export default function AddCard() {
                 <FormItem>
                   <FormLabel>Date description *</FormLabel>
                   <FormControl>
-                    <Input {...field} />
+                    <Input {...field} placeholder="Enter date description" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={methods.control}
+              name="purchasedAt"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Purchase Date</FormLabel>
+                  <FormControl>
+                    <div className="flex gap-2">
+                      <Input
+                        {...field}
+                        value={field.value || ''}
+                        type="date"
+                        placeholder="YYYY-MM-DD"
+                        className="flex-1"
+                      />
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setValue('purchasedAt', '')}
+                        className="shrink-0"
+                      >
+                        Clear
+                      </Button>
+                    </div>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -337,38 +385,12 @@ export default function AddCard() {
                 <FormItem>
                   <FormLabel>Description</FormLabel>
                   <FormControl>
-                    <Textarea {...field} rows={3} autoResize />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={methods.control}
-              name="purchasedAt"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Purchase Date</FormLabel>
-                  <FormControl>
-                    <div className="flex gap-2">
-                      <Input
-                        {...field}
-                        value={field.value || ''}
-                        type="date"
-                        placeholder="YYYY-MM-DD"
-                        className="flex-1"
-                      />
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="sm"
-                        onClick={() => setValue('purchasedAt', '')}
-                        className="shrink-0"
-                      >
-                        Clear
-                      </Button>
-                    </div>
+                    <Textarea
+                      {...field}
+                      rows={3}
+                      autoResize
+                      placeholder="Enter barometer description"
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>

From 567d1d807a29712bc824f9c306341cf3bbc9d708 Mon Sep 17 00:00:00 2001
From: Cybervoid <mail@cybervoid.my>
Date: Sat, 23 Aug 2025 07:49:12 +0200
Subject: [PATCH 4/8] feat(barometer): add estimated price field with
 validation to barometer form

- Introduced a new 'estimatedPrice' field in the barometer form to capture the estimated price of the barometer.
- Implemented validation to ensure the estimated price is a positive number.
- Enhanced the form layout by adding an input field for estimated price with appropriate labels and placeholders for user guidance.
---
 app/admin/add-barometer/page.tsx | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/app/admin/add-barometer/page.tsx b/app/admin/add-barometer/page.tsx
index 03b8d6bd..91382413 100644
--- a/app/admin/add-barometer/page.tsx
+++ b/app/admin/add-barometer/page.tsx
@@ -50,6 +50,7 @@ interface BarometerFormData {
   images: string[]
   purchasedAt: string
   serial: string
+  estimatedPrice: string
 }
 
 // Yup validation schema
@@ -97,6 +98,14 @@ const barometerSchema = yup.object().shape({
     })
     .default(''),
   serial: yup.string().max(100, 'Serial number must be less than 100 characters').default(''),
+  estimatedPrice: yup
+    .string()
+    .test('is-positive-number', 'Must be a positive number', value => {
+      if (!value) return true // Allow empty string
+      const num = parseFloat(value)
+      return !isNaN(num) && num > 0
+    })
+    .default(''),
 })
 
 export default function AddCard() {
@@ -117,6 +126,7 @@ export default function AddCard() {
       images: [],
       purchasedAt: '',
       serial: '',
+      estimatedPrice: '',
     },
   })
 
@@ -129,6 +139,7 @@ export default function AddCard() {
         ...values,
         date: dayjs(`${values.date}-01-01`).toISOString(),
         purchasedAt: values.purchasedAt ? dayjs.utc(values.purchasedAt).toISOString() : null,
+        estimatedPrice: values.estimatedPrice ? parseFloat(values.estimatedPrice) : null,
         images: await Promise.all(
           (values.images || []).map(async (url, i) => ({
             url,
@@ -296,6 +307,26 @@ export default function AddCard() {
               )}
             />
 
+            <FormField
+              control={methods.control}
+              name="estimatedPrice"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Estimated Price, €</FormLabel>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      type="number"
+                      step="100"
+                      min="0"
+                      placeholder="Enter estimated price in Euro"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
             <FormField
               control={methods.control}
               name="categoryId"

From a5b38f922edca6bf3604f93c32731c501b14373c Mon Sep 17 00:00:00 2001
From: Cybervoid <mail@cybervoid.my>
Date: Sat, 23 Aug 2025 08:22:05 +0200
Subject: [PATCH 5/8] feat(barometer): add movement type selection to barometer
 form

- Introduced a new 'subCategoryId' field in the barometer form to allow selection of subcategories.
- Updated validation schema to include the new subcategory field.
- Enhanced form functionality by integrating subcategory selection with appropriate labels and default values.
- Improved user experience by ensuring default selections for categories and subcategories when available.
---
 app/admin/add-barometer/page.tsx | 75 ++++++++++++++++++++++++++++----
 1 file changed, 67 insertions(+), 8 deletions(-)

diff --git a/app/admin/add-barometer/page.tsx b/app/admin/add-barometer/page.tsx
index 91382413..30d73fa9 100644
--- a/app/admin/add-barometer/page.tsx
+++ b/app/admin/add-barometer/page.tsx
@@ -51,6 +51,7 @@ interface BarometerFormData {
   purchasedAt: string
   serial: string
   estimatedPrice: string
+  subCategoryId: string
 }
 
 // Yup validation schema
@@ -106,10 +107,11 @@ const barometerSchema = yup.object().shape({
       return !isNaN(num) && num > 0
     })
     .default(''),
+  subCategoryId: yup.string().default(''),
 })
 
 export default function AddCard() {
-  const { condition, categories, manufacturers } = useBarometers()
+  const { condition, categories, subcategories, manufacturers } = useBarometers()
 
   const methods = useForm<BarometerFormData>({
     resolver: yupResolver(barometerSchema),
@@ -127,10 +129,11 @@ export default function AddCard() {
       purchasedAt: '',
       serial: '',
       estimatedPrice: '',
+      subCategoryId: '',
     },
   })
 
-  const { handleSubmit, setValue, watch, reset } = methods
+  const { handleSubmit, setValue, reset } = methods
 
   const queryClient = useQueryClient()
   const { mutate, isPending } = useMutation({
@@ -140,6 +143,7 @@ export default function AddCard() {
         date: dayjs(`${values.date}-01-01`).toISOString(),
         purchasedAt: values.purchasedAt ? dayjs.utc(values.purchasedAt).toISOString() : null,
         estimatedPrice: values.estimatedPrice ? parseFloat(values.estimatedPrice) : null,
+        subCategoryId: values.subCategoryId ? parseInt(values.subCategoryId) : null,
         images: await Promise.all(
           (values.images || []).map(async (url, i) => ({
             url,
@@ -178,10 +182,16 @@ export default function AddCard() {
   }, [condition.data, setValue])
 
   useEffect(() => {
-    if (manufacturers.data.length > 0 && !watch('manufacturerId')) {
+    if (manufacturers.data.length > 0) {
       setValue('manufacturerId', String(manufacturers.data[0].id))
     }
-  }, [manufacturers.data, setValue, watch])
+  }, [manufacturers.data, setValue])
+
+  useEffect(() => {
+    if (subcategories.data.length > 0) {
+      setValue('subCategoryId', String(subcategories.data[0].id))
+    }
+  }, [subcategories.data, setValue])
 
   const handleAddManufacturer = (id: string) => {
     setValue('manufacturerId', id)
@@ -197,7 +207,7 @@ export default function AddCard() {
 
       <FormProvider {...methods}>
         <Form {...methods}>
-          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6" noValidate>
             <FormField
               control={methods.control}
               name="collectionId"
@@ -333,7 +343,13 @@ export default function AddCard() {
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Category *</FormLabel>
-                  <Select onValueChange={field.onChange} value={field.value}>
+                  <Select
+                    onValueChange={field.onChange}
+                    value={
+                      field.value ||
+                      (categories.data.length > 0 ? String(categories.data[0].id) : '')
+                    }
+                  >
                     <FormControl>
                       <SelectTrigger className="w-full">
                         <SelectValue placeholder="Select category" />
@@ -352,6 +368,37 @@ export default function AddCard() {
               )}
             />
 
+            <FormField
+              control={methods.control}
+              name="subCategoryId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Movement Type</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    value={
+                      field.value ||
+                      (subcategories.data.length > 0 ? String(subcategories.data[0].id) : '')
+                    }
+                  >
+                    <FormControl>
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Select movement type" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent className="max-h-60">
+                      {subcategories.data.map(({ name, id }) => (
+                        <SelectItem key={id} value={String(id)}>
+                          {name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
             <FormField
               control={methods.control}
               name="manufacturerId"
@@ -359,7 +406,13 @@ export default function AddCard() {
                 <FormItem>
                   <FormLabel>Manufacturer *</FormLabel>
                   <div className="flex gap-2">
-                    <Select onValueChange={field.onChange} value={field.value}>
+                    <Select
+                      onValueChange={field.onChange}
+                      value={
+                        field.value ||
+                        (manufacturers.data.length > 0 ? String(manufacturers.data[0].id) : '')
+                      }
+                    >
                       <FormControl>
                         <SelectTrigger className="w-full">
                           <SelectValue placeholder="Select manufacturer" />
@@ -386,7 +439,13 @@ export default function AddCard() {
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Condition *</FormLabel>
-                  <Select onValueChange={field.onChange} value={field.value}>
+                  <Select
+                    onValueChange={field.onChange}
+                    value={
+                      field.value ||
+                      (condition.data.length > 0 ? String(condition.data.at(-1)?.id) : '')
+                    }
+                  >
                     <FormControl>
                       <SelectTrigger className="w-full">
                         <SelectValue placeholder="Select condition" />

From 3941e1eddf689f5adf01b3ccdf75032c2c49785e Mon Sep 17 00:00:00 2001
From: Cybervoid <mail@cybervoid.my>
Date: Sat, 23 Aug 2025 08:50:47 +0200
Subject: [PATCH 6/8] feat(barometer): enhance barometer form with materials
 selection and validation

- Added a new 'materials' field to the barometer form for selecting associated materials.
- Updated validation schema to include the materials field, ensuring it defaults to an empty array.
- Integrated MaterialsMultiSelect component for improved user experience in selecting materials.
- Refactored file upload component to clear validation errors upon successful file uploads and deletions.
- Simplified the manufacturer form data type by inferring from the Yup validation schema.
---
 app/admin/add-barometer/add-manufacturer.tsx | 11 +--
 app/admin/add-barometer/add-materials.tsx    | 90 ++++++++++++++++++++
 app/admin/add-barometer/file-upload.tsx      |  7 +-
 app/admin/add-barometer/page.tsx             | 44 +++++-----
 app/api/v2/barometers/route.ts               | 10 ++-
 5 files changed, 132 insertions(+), 30 deletions(-)
 create mode 100644 app/admin/add-barometer/add-materials.tsx

diff --git a/app/admin/add-barometer/add-manufacturer.tsx b/app/admin/add-barometer/add-manufacturer.tsx
index 319ef198..bde73448 100644
--- a/app/admin/add-barometer/add-manufacturer.tsx
+++ b/app/admin/add-barometer/add-manufacturer.tsx
@@ -16,15 +16,6 @@ interface AddManufacturerProps {
   onAddManufacturer: (newId: string) => void
 }
 
-interface ManufacturerFormData {
-  firstName: string
-  name: string
-  city: string
-  countries: number[]
-  description: string
-  icon: string | null
-}
-
 // Yup validation schema
 const manufacturerSchema = yup.object().shape({
   firstName: yup.string().max(100, 'First name should be shorter than 100 characters').default(''),
@@ -39,6 +30,8 @@ const manufacturerSchema = yup.object().shape({
   icon: yup.string().nullable().default(null),
 })
 
+type ManufacturerFormData = yup.InferType<typeof manufacturerSchema>
+
 export function AddManufacturer({ onAddManufacturer }: AddManufacturerProps) {
   const { countries } = useBarometers()
   const [open, setOpen] = useState(false)
diff --git a/app/admin/add-barometer/add-materials.tsx b/app/admin/add-barometer/add-materials.tsx
new file mode 100644
index 00000000..a3d653ca
--- /dev/null
+++ b/app/admin/add-barometer/add-materials.tsx
@@ -0,0 +1,90 @@
+'use client'
+
+import { Check, X } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+
+interface MaterialsMultiSelectProps {
+  value: number[]
+  onChange: (value: number[]) => void
+  materials: Array<{ id: number; name: string }>
+}
+
+export function MaterialsMultiSelect({ value, onChange, materials }: MaterialsMultiSelectProps) {
+  const selectedMaterials = materials.filter(material => value.includes(material.id))
+
+  const handleSelect = (materialId: number) => {
+    if (value.includes(materialId)) {
+      onChange(value.filter(id => id !== materialId))
+    } else {
+      onChange([...value, materialId])
+    }
+  }
+
+  const handleRemove = (materialId: number) => {
+    onChange(value.filter(id => id !== materialId))
+  }
+
+  return (
+    <div className="space-y-2">
+      {selectedMaterials.length > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {selectedMaterials.map(material => (
+            <Badge key={material.id} variant="default" className="px-2 py-1">
+              {material.name}
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="ml-1 h-auto p-0"
+                onClick={() => handleRemove(material.id)}
+              >
+                <X className="h-3 w-3" />
+              </Button>
+            </Badge>
+          ))}
+        </div>
+      )}
+      <Popover modal>
+        <PopoverTrigger asChild>
+          <Button type="button" variant="outline" className="w-full justify-start">
+            {selectedMaterials.length === 0
+              ? 'Select materials...'
+              : `${selectedMaterials.length} material${selectedMaterials.length === 1 ? '' : 's'} selected`}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-full p-0" align="start">
+          <Command>
+            <CommandInput placeholder="Search materials..." />
+            <CommandList className="max-h-[200px]">
+              <CommandEmpty>No materials found.</CommandEmpty>
+              <CommandGroup>
+                {materials.map(material => (
+                  <CommandItem
+                    key={material.id}
+                    onSelect={() => handleSelect(material.id)}
+                    className="flex items-center space-x-2"
+                  >
+                    <div className="flex h-4 w-4 items-center justify-center">
+                      {value.includes(material.id) && <Check className="h-3 w-3" />}
+                    </div>
+                    <span>{material.name}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/app/admin/add-barometer/file-upload.tsx b/app/admin/add-barometer/file-upload.tsx
index efb04a7e..84912426 100644
--- a/app/admin/add-barometer/file-upload.tsx
+++ b/app/admin/add-barometer/file-upload.tsx
@@ -19,7 +19,7 @@ interface FileUploadProps {
 export function FileUpload({ name }: FileUploadProps) {
   const [isUploading, setIsUploading] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>(null)
-  const { control, watch, setValue } = useFormContext()
+  const { control, watch, setValue, clearErrors } = useFormContext()
 
   const fileNames: string[] = watch(name) || []
 
@@ -47,6 +47,7 @@ export function FileUpload({ name }: FileUploadProps) {
 
       const newFileNames = [...fileNames, ...urlsDto.urls.map(urlObj => urlObj.public)]
       setValue(name, newFileNames)
+      clearErrors(name) // Clear any validation errors after successful upload
     } catch (error) {
       toast.error(error instanceof Error ? error.message : 'Error uploading files')
     } finally {
@@ -62,6 +63,10 @@ export function FileUpload({ name }: FileUploadProps) {
       await deleteImage(fileName)
       const updatedFileNames = fileNames.filter((_, i) => i !== index)
       setValue(name, updatedFileNames)
+      // Clear errors if we still have images after deletion
+      if (updatedFileNames.length > 0) {
+        clearErrors(name)
+      }
     } catch (error) {
       toast.error(error instanceof Error ? error.message : 'Error deleting file')
     }
diff --git a/app/admin/add-barometer/page.tsx b/app/admin/add-barometer/page.tsx
index 30d73fa9..43661b06 100644
--- a/app/admin/add-barometer/page.tsx
+++ b/app/admin/add-barometer/page.tsx
@@ -30,30 +30,13 @@ import { useBarometers } from '@/hooks/useBarometers'
 import { FileUpload } from './file-upload'
 import { AddManufacturer } from './add-manufacturer'
 import { Dimensions } from './dimensions'
+import { MaterialsMultiSelect } from './add-materials'
 import { createBarometer } from '@/services/fetch'
 import { getThumbnailBase64, slug } from '@/utils'
 import { imageStorage } from '@/constants/globals'
 
 dayjs.extend(utc)
 
-// Form data interface
-interface BarometerFormData {
-  collectionId: string
-  name: string
-  categoryId: string
-  date: string
-  dateDescription: string
-  manufacturerId: string
-  conditionId: string
-  description: string
-  dimensions: Array<{ dim: string; value: string }>
-  images: string[]
-  purchasedAt: string
-  serial: string
-  estimatedPrice: string
-  subCategoryId: string
-}
-
 // Yup validation schema
 const barometerSchema = yup.object().shape({
   collectionId: yup
@@ -108,10 +91,14 @@ const barometerSchema = yup.object().shape({
     })
     .default(''),
   subCategoryId: yup.string().default(''),
+  materials: yup.array().of(yup.number().required()).default([]),
 })
 
+// Auto-generated TypeScript type from Yup schema
+type BarometerFormData = yup.InferType<typeof barometerSchema>
+
 export default function AddCard() {
-  const { condition, categories, subcategories, manufacturers } = useBarometers()
+  const { condition, categories, subcategories, manufacturers, materials } = useBarometers()
 
   const methods = useForm<BarometerFormData>({
     resolver: yupResolver(barometerSchema),
@@ -130,6 +117,7 @@ export default function AddCard() {
       serial: '',
       estimatedPrice: '',
       subCategoryId: '',
+      materials: [],
     },
   })
 
@@ -337,6 +325,24 @@ export default function AddCard() {
               )}
             />
 
+            <FormField
+              control={methods.control}
+              name="materials"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Materials</FormLabel>
+                  <FormControl>
+                    <MaterialsMultiSelect
+                      value={field.value}
+                      onChange={field.onChange}
+                      materials={materials.data ?? []}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
             <FormField
               control={methods.control}
               name="categoryId"
diff --git a/app/api/v2/barometers/route.ts b/app/api/v2/barometers/route.ts
index b1093d30..fba6b292 100644
--- a/app/api/v2/barometers/route.ts
+++ b/app/api/v2/barometers/route.ts
@@ -39,7 +39,8 @@ export async function GET(req: NextRequest) {
  */
 export const POST = withPrisma(async (prisma, req: NextRequest) => {
   try {
-    const barometerData = await req.json()
+    // extracting materials before cleaning object to keep empty array
+    const { materials, ...barometerData } = await req.json()
     const { images, ...barometer } = cleanObject(barometerData)
     const { id, categoryId } = await prisma.barometer.create({
       data: {
@@ -47,6 +48,13 @@ export const POST = withPrisma(async (prisma, req: NextRequest) => {
         images: {
           create: images,
         },
+        ...(materials && Array.isArray(materials)
+          ? {
+              materials: {
+                connect: materials.map((materialId: number) => ({ id: materialId })),
+              },
+            }
+          : {}),
         createdAt: new Date(),
         updatedAt: new Date(),
       },

From 84c3b0d23f165a9559a78618cfb05d0553162ae2 Mon Sep 17 00:00:00 2001
From: Cybervoid <mail@cybervoid.my>
Date: Sat, 23 Aug 2025 09:11:42 +0200
Subject: [PATCH 7/8] refactor(validation): simplify form data types by
 inferring from Yup validation schemas

- Removed explicit form data type definitions in various components.
- Updated validation schemas to infer types directly from Yup, enhancing type safety and reducing redundancy.
- Ensured consistent validation handling across components including InaccuracyReport, ConditionEdit, DateEdit, DimensionsEdit, EstimatedPriceEdit, ImagesEdit, MaterialsEdit, PurchasedAtEdit, TextAreaEdit, and TextFieldEdit.
---
 .../[slug]/components/edit-fields/condition-edit.tsx   |  6 ++----
 .../items/[slug]/components/edit-fields/date-edit.tsx  |  6 ++----
 .../[slug]/components/edit-fields/dimensions-edit.tsx  |  8 +++-----
 .../components/edit-fields/estimated-price-edit.tsx    |  8 +++-----
 .../[slug]/components/edit-fields/images-edit.tsx      |  8 +++-----
 .../[slug]/components/edit-fields/materials-edit.tsx   |  8 +++-----
 .../components/edit-fields/purchased-at-edit.tsx       |  8 +++-----
 .../[slug]/components/edit-fields/textarea-edit.tsx    |  8 +++-----
 .../[slug]/components/edit-fields/textfield-edit.tsx   |  6 ++----
 .../items/[slug]/components/inaccuracy-report.tsx      | 10 +++-------
 app/register/page.tsx                                  |  9 ++-------
 app/signin/components/signin-form.tsx                  |  7 ++-----
 12 files changed, 31 insertions(+), 61 deletions(-)

diff --git a/app/collection/items/[slug]/components/edit-fields/condition-edit.tsx b/app/collection/items/[slug]/components/edit-fields/condition-edit.tsx
index c6694286..3eb345ca 100644
--- a/app/collection/items/[slug]/components/edit-fields/condition-edit.tsx
+++ b/app/collection/items/[slug]/components/edit-fields/condition-edit.tsx
@@ -18,14 +18,12 @@ interface ConditionEditProps extends ComponentProps<'button'> {
   barometer: BarometerDTO
 }
 
-interface ConditionForm {
-  conditionId: string
-}
-
 const validationSchema = yup.object({
   conditionId: yup.string().required('Condition is required'),
 })
 
+type ConditionForm = yup.InferType<typeof validationSchema>
+
 export function ConditionEdit({ size = 18, barometer, className, ...props }: ConditionEditProps) {
   const { condition } = useBarometers()
 
diff --git a/app/collection/items/[slug]/components/edit-fields/date-edit.tsx b/app/collection/items/[slug]/components/edit-fields/date-edit.tsx
index b60ac3a9..944ebbe2 100644
--- a/app/collection/items/[slug]/components/edit-fields/date-edit.tsx
+++ b/app/collection/items/[slug]/components/edit-fields/date-edit.tsx
@@ -18,10 +18,6 @@ interface DateEditProps extends ComponentProps<'button'> {
   barometer: BarometerDTO
 }
 
-interface DateForm {
-  date: string
-}
-
 const validationSchema = yup.object({
   date: yup
     .string()
@@ -34,6 +30,8 @@ const validationSchema = yup.object({
     }),
 })
 
+type DateForm = yup.InferType<typeof validationSchema>
+
 export function DateEdit({ size = 18, barometer, className, ...props }: DateEditProps) {
   const form = useForm<DateForm>({
     resolver: yupResolver(validationSchema),
diff --git a/app/collection/items/[slug]/components/edit-fields/dimensions-edit.tsx b/app/collection/items/[slug]/components/edit-fields/dimensions-edit.tsx
index e704fa77..cae0b7e2 100644
--- a/app/collection/items/[slug]/components/edit-fields/dimensions-edit.tsx
+++ b/app/collection/items/[slug]/components/edit-fields/dimensions-edit.tsx
@@ -13,15 +13,11 @@ import { updateBarometer } from '@/services/fetch'
 import { cn } from '@/utils'
 import * as UI from '@/components/ui'
 
-interface DimensionsForm {
-  dimensions: Array<{ dim: string; value: string }>
-}
-
 interface DimensionEditProps extends ComponentProps<'button'> {
   barometer: BarometerDTO
 }
 
-const validationSchema: yup.ObjectSchema<DimensionsForm> = yup.object({
+const validationSchema = yup.object({
   dimensions: yup
     .array()
     .of(
@@ -34,6 +30,8 @@ const validationSchema: yup.ObjectSchema<DimensionsForm> = yup.object({
     .default([]),
 })
 
+type DimensionsForm = yup.InferType<typeof validationSchema>
+
 export function DimensionEdit({ barometer, className, ...props }: DimensionEditProps) {
   const form = useForm<DimensionsForm>({
     resolver: yupResolver(validationSchema),
diff --git a/app/collection/items/[slug]/components/edit-fields/estimated-price-edit.tsx b/app/collection/items/[slug]/components/edit-fields/estimated-price-edit.tsx
index 20b74823..b08dd6ef 100644
--- a/app/collection/items/[slug]/components/edit-fields/estimated-price-edit.tsx
+++ b/app/collection/items/[slug]/components/edit-fields/estimated-price-edit.tsx
@@ -17,11 +17,7 @@ interface EstimatedPriceEditProps extends ComponentProps<'button'> {
   barometer: BarometerDTO
 }
 
-interface EstimatedPriceForm {
-  estimatedPrice: string
-}
-
-const validationSchema: yup.ObjectSchema<EstimatedPriceForm> = yup.object({
+const validationSchema = yup.object({
   estimatedPrice: yup
     .string()
     .required('Price is required')
@@ -31,6 +27,8 @@ const validationSchema: yup.ObjectSchema<EstimatedPriceForm> = yup.object({
     }),
 })
 
+type EstimatedPriceForm = yup.InferType<typeof validationSchema>
+
 export function EstimatedPriceEdit({
   size = 18,
   barometer,
diff --git a/app/collection/items/[slug]/components/edit-fields/images-edit.tsx b/app/collection/items/[slug]/components/edit-fields/images-edit.tsx
index 59261934..419b2d35 100644
--- a/app/collection/items/[slug]/components/edit-fields/images-edit.tsx
+++ b/app/collection/items/[slug]/components/edit-fields/images-edit.tsx
@@ -24,19 +24,17 @@ import { customImageLoader } from '@/utils'
 import { cn, getThumbnailBase64 } from '@/utils'
 import * as UI from '@/components/ui'
 
-interface ImagesForm {
-  images: string[]
-}
-
 interface ImagesEditProps extends ComponentProps<'button'> {
   size?: string | number | undefined
   barometer: BarometerDTO
 }
 
-const validationSchema: yup.ObjectSchema<ImagesForm> = yup.object({
+const validationSchema = yup.object({
   images: yup.array().of(yup.string().required()).defined().default([]),
 })
 
+type ImagesForm = yup.InferType<typeof validationSchema>
+
 function SortableImage({
   image,
   handleDelete,
diff --git a/app/collection/items/[slug]/components/edit-fields/materials-edit.tsx b/app/collection/items/[slug]/components/edit-fields/materials-edit.tsx
index 35978d1d..7b96b6af 100644
--- a/app/collection/items/[slug]/components/edit-fields/materials-edit.tsx
+++ b/app/collection/items/[slug]/components/edit-fields/materials-edit.tsx
@@ -15,18 +15,16 @@ import { useBarometers } from '@/hooks/useBarometers'
 import { cn } from '@/utils'
 import * as UI from '@/components/ui'
 
-interface MaterialsForm {
-  materials: number[]
-}
-
 interface MaterialsEditProps extends ComponentProps<'button'> {
   barometer: BarometerDTO
 }
 
-const validationSchema: yup.ObjectSchema<MaterialsForm> = yup.object({
+const validationSchema = yup.object({
   materials: yup.array().of(yup.number().required()).defined().default([]),
 })
 
+type MaterialsForm = yup.InferType<typeof validationSchema>
+
 export function MaterialsEdit({ barometer, className, ...props }: MaterialsEditProps) {
   const { materials: materialList } = useBarometers()
 
diff --git a/app/collection/items/[slug]/components/edit-fields/purchased-at-edit.tsx b/app/collection/items/[slug]/components/edit-fields/purchased-at-edit.tsx
index 20b1b7a3..28b7248f 100644
--- a/app/collection/items/[slug]/components/edit-fields/purchased-at-edit.tsx
+++ b/app/collection/items/[slug]/components/edit-fields/purchased-at-edit.tsx
@@ -20,11 +20,7 @@ interface PurchasedAtEditProps extends ComponentProps<'button'> {
   barometer: BarometerDTO
 }
 
-interface PurchasedAtForm {
-  purchasedAt: string
-}
-
-const validationSchema: yup.ObjectSchema<PurchasedAtForm> = yup.object({
+const validationSchema = yup.object({
   purchasedAt: yup
     .string()
     .test('valid-date', 'Must be a valid date', value => {
@@ -38,6 +34,8 @@ const validationSchema: yup.ObjectSchema<PurchasedAtForm> = yup.object({
     .defined(),
 })
 
+type PurchasedAtForm = yup.InferType<typeof validationSchema>
+
 export function PurchasedAtEdit({
   size = 18,
   barometer,
diff --git a/app/collection/items/[slug]/components/edit-fields/textarea-edit.tsx b/app/collection/items/[slug]/components/edit-fields/textarea-edit.tsx
index 5913f2db..83c4006c 100644
--- a/app/collection/items/[slug]/components/edit-fields/textarea-edit.tsx
+++ b/app/collection/items/[slug]/components/edit-fields/textarea-edit.tsx
@@ -13,10 +13,6 @@ import { updateBarometer } from '@/services/fetch'
 import { cn } from '@/utils'
 import * as UI from '@/components/ui'
 
-interface TextAreaForm {
-  value: string
-}
-
 interface TextAreaEditProps extends ComponentProps<'button'> {
   size?: string | number | undefined
   barometer: BarometerDTO
@@ -24,10 +20,12 @@ interface TextAreaEditProps extends ComponentProps<'button'> {
   label?: string
 }
 
-const validationSchema: yup.ObjectSchema<TextAreaForm> = yup.object({
+const validationSchema = yup.object({
   value: yup.string().required('This field is required'),
 })
 
+type TextAreaForm = yup.InferType<typeof validationSchema>
+
 export function TextAreaEdit({
   size = 18,
   barometer,
diff --git a/app/collection/items/[slug]/components/edit-fields/textfield-edit.tsx b/app/collection/items/[slug]/components/edit-fields/textfield-edit.tsx
index 36883fbd..3cb33807 100644
--- a/app/collection/items/[slug]/components/edit-fields/textfield-edit.tsx
+++ b/app/collection/items/[slug]/components/edit-fields/textfield-edit.tsx
@@ -19,14 +19,12 @@ interface TextFieldEditProps {
   className?: string
 }
 
-interface FormData {
-  value: string
-}
-
 const textFieldSchema = yup.object().shape({
   value: yup.string().required('Field is required').max(200, 'Must be less than 200 characters'),
 })
 
+type FormData = yup.InferType<typeof textFieldSchema>
+
 export function TextFieldEdit({ size = 18, barometer, property, className }: TextFieldEditProps) {
   const [open, setOpen] = useState(false)
   const [isUpdating, setIsUpdating] = useState(false)
diff --git a/app/collection/items/[slug]/components/inaccuracy-report.tsx b/app/collection/items/[slug]/components/inaccuracy-report.tsx
index 70a4783e..a7c00b28 100644
--- a/app/collection/items/[slug]/components/inaccuracy-report.tsx
+++ b/app/collection/items/[slug]/components/inaccuracy-report.tsx
@@ -14,15 +14,9 @@ interface Props extends React.ComponentProps<'button'> {
   barometer: BarometerDTO
 }
 
-interface ReportForm {
-  reporterName: string
-  reporterEmail: string
-  description: string
-}
-
 const maxFeedbackLen = 1000
 
-const validationSchema: yup.ObjectSchema<ReportForm> = yup.object({
+const validationSchema = yup.object({
   reporterName: yup
     .string()
     .required('Name is required')
@@ -39,6 +33,8 @@ const validationSchema: yup.ObjectSchema<ReportForm> = yup.object({
     .max(maxFeedbackLen, `Description must be less than ${maxFeedbackLen} characters`),
 })
 
+type ReportForm = yup.InferType<typeof validationSchema>
+
 export function InaccuracyReport({ barometer, ...props }: Props) {
   const queryClient = useQueryClient()
   const [isOpened, setIsOpened] = React.useState<boolean>(false)
diff --git a/app/register/page.tsx b/app/register/page.tsx
index 9972ebc8..ede280df 100644
--- a/app/register/page.tsx
+++ b/app/register/page.tsx
@@ -10,13 +10,6 @@ import { AtSign, User, Eye, EyeOff } from 'lucide-react'
 import * as UI from '@/components/ui'
 import { register } from '@/actions/register'
 
-interface RegisterFormData {
-  name: string
-  email: string
-  password: string
-  repeatPassword: string
-}
-
 const registerSchema = yup.object().shape({
   name: yup
     .string()
@@ -34,6 +27,8 @@ const registerSchema = yup.object().shape({
     .oneOf([yup.ref('password')], 'Passwords are not identical'),
 })
 
+type RegisterFormData = yup.InferType<typeof registerSchema>
+
 export default function Register() {
   const router = useRouter()
   const [showPassword, setShowPassword] = useState(false)
diff --git a/app/signin/components/signin-form.tsx b/app/signin/components/signin-form.tsx
index 2dd0c06f..f576f252 100644
--- a/app/signin/components/signin-form.tsx
+++ b/app/signin/components/signin-form.tsx
@@ -10,11 +10,6 @@ import { toast } from 'sonner'
 import { AtSign, Eye, EyeOff } from 'lucide-react'
 import * as UI from '@/components/ui'
 
-interface SignInFormData {
-  email: string
-  password: string
-}
-
 // Yup validation schema
 const signInSchema = yup.object().shape({
   email: yup.string().required('Email is required').email('Invalid email address'),
@@ -24,6 +19,8 @@ const signInSchema = yup.object().shape({
     .min(8, 'Password must be at least 8 characters'),
 })
 
+type SignInFormData = yup.InferType<typeof signInSchema>
+
 export function SignInForm() {
   const router = useRouter()
   const [showPassword, setShowPassword] = useState(false)

From 97613eaf39bf6069177e05c13a8eb958d715433f Mon Sep 17 00:00:00 2001
From: Cybervoid <mail@cybervoid.my>
Date: Sat, 23 Aug 2025 09:40:12 +0200
Subject: [PATCH 8/8] feat(documents): add document management features to
 admin page

- Introduced a new link in the admin page for adding documents, enhancing the admin interface.
- Updated routing constants to include a new route for document management.
- Implemented API functions for creating and updating documents, improving document handling capabilities.
---
 app/admin/add-document/page.tsx | 467 ++++++++++++++++++++++++++++++++
 app/admin/page.tsx              |   9 +-
 app/api/v2/documents/route.ts   | 158 +++++++++++
 constants/routes-back.ts        |   1 +
 constants/routes-front.ts       |   1 +
 services/fetch.ts               |  25 ++
 6 files changed, 660 insertions(+), 1 deletion(-)
 create mode 100644 app/admin/add-document/page.tsx
 create mode 100644 app/api/v2/documents/route.ts

diff --git a/app/admin/add-document/page.tsx b/app/admin/add-document/page.tsx
new file mode 100644
index 00000000..da3e3a3d
--- /dev/null
+++ b/app/admin/add-document/page.tsx
@@ -0,0 +1,467 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useForm, FormProvider } from 'react-hook-form'
+import { yupResolver } from '@hookform/resolvers/yup'
+import * as yup from 'yup'
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { useBarometers } from '@/hooks/useBarometers'
+import { FileUpload } from '../add-barometer/file-upload'
+import { createDocument } from '@/services/fetch'
+import { getThumbnailBase64 } from '@/utils'
+import { imageStorage } from '@/constants/globals'
+
+dayjs.extend(utc)
+
+// Yup validation schema
+const documentSchema = yup.object().shape({
+  title: yup
+    .string()
+    .required('Title is required')
+    .max(200, 'Title must be less than 200 characters'),
+  catalogueNumber: yup
+    .string()
+    .required('Catalogue Number is required')
+    .max(100, 'Catalogue Number must be less than 100 characters'),
+  documentType: yup
+    .string()
+    .required('Document Type is required')
+    .max(100, 'Document Type must be less than 100 characters'),
+  subject: yup.string().max(200, 'Subject must be less than 200 characters').default(''),
+  creator: yup.string().max(200, 'Creator must be less than 200 characters').default(''),
+  date: yup
+    .string()
+    .test('valid-date', 'Must be a valid date', value => {
+      if (!value) return true // Allow empty string
+      return dayjs(value).isValid()
+    })
+    .test('not-future', 'Date cannot be in the future', value => {
+      if (!value) return true
+      return dayjs(value).isBefore(dayjs(), 'day') || dayjs(value).isSame(dayjs(), 'day')
+    })
+    .default(''),
+  dateDescription: yup
+    .string()
+    .max(200, 'Date description must be less than 200 characters')
+    .default(''),
+  placeOfOrigin: yup
+    .string()
+    .max(200, 'Place of origin must be less than 200 characters')
+    .default(''),
+  language: yup.string().max(100, 'Language must be less than 100 characters').default(''),
+  physicalDescription: yup.string().default(''),
+  annotations: yup.string().default(''), // Will be split into array before sending
+  provenance: yup.string().default(''),
+  acquisitionDate: yup
+    .string()
+    .test('valid-date', 'Must be a valid date', value => {
+      if (!value) return true // Allow empty string
+      return dayjs(value).isValid()
+    })
+    .test('not-future', 'Acquisition date cannot be in the future', value => {
+      if (!value) return true
+      return dayjs(value).isBefore(dayjs(), 'day') || dayjs(value).isSame(dayjs(), 'day')
+    })
+    .default(''),
+  description: yup.string().default(''),
+  conditionId: yup.string().default(''),
+  images: yup.array().of(yup.string().required()).default([]),
+  relatedBarometers: yup.array().of(yup.string().required()).default([]),
+})
+
+// Auto-generated TypeScript type from Yup schema
+type DocumentFormData = yup.InferType<typeof documentSchema>
+
+export default function AddDocument() {
+  const { condition } = useBarometers()
+
+  const methods = useForm<DocumentFormData>({
+    resolver: yupResolver(documentSchema),
+    defaultValues: {
+      title: '',
+      catalogueNumber: '',
+      documentType: '',
+      subject: '',
+      creator: '',
+      date: '',
+      dateDescription: '',
+      placeOfOrigin: '',
+      language: '',
+      physicalDescription: '',
+      annotations: '',
+      provenance: '',
+      acquisitionDate: '',
+      description: '',
+      conditionId: '',
+      images: [],
+      relatedBarometers: [],
+    },
+  })
+
+  const { handleSubmit, setValue, reset } = methods
+
+  const queryClient = useQueryClient()
+  const { mutate, isPending } = useMutation({
+    mutationFn: async (values: DocumentFormData) => {
+      const documentWithImages = {
+        ...values,
+        date: values.date ? dayjs.utc(values.date).toISOString() : null,
+        acquisitionDate: values.acquisitionDate
+          ? dayjs.utc(values.acquisitionDate).toISOString()
+          : null,
+        conditionId: values.conditionId || null,
+        annotations: values.annotations
+          ? values.annotations.split('\n').filter(line => line.trim())
+          : [],
+        images: await Promise.all(
+          (values.images || []).map(async (url, i) => ({
+            url,
+            order: i,
+            name: values.title,
+            blurData: await getThumbnailBase64(imageStorage + url),
+          })),
+        ),
+      }
+      return createDocument(documentWithImages)
+    },
+    onSuccess: ({ id }) => {
+      queryClient.invalidateQueries({
+        queryKey: ['documents'],
+      })
+      reset()
+      toast.success(`Added document ${id} to the database`)
+    },
+    onError: error => {
+      toast.error(error.message || 'Error adding document')
+    },
+  })
+
+  // Set default condition when data loads
+  useEffect(() => {
+    if (condition.data.length > 0) {
+      setValue('conditionId', String(condition.data.at(-1)?.id))
+    }
+  }, [condition.data, setValue])
+
+  const onSubmit = (data: DocumentFormData) => {
+    mutate(data)
+  }
+
+  return (
+    <div className="mx-auto max-w-lg">
+      <h3 className="mt-6 mb-10">Add new document</h3>
+
+      <FormProvider {...methods}>
+        <Form {...methods}>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6" noValidate>
+            <FormField
+              control={methods.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Title *</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder="Enter document title" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={methods.control}
+              name="catalogueNumber"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Catalogue Number *</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder="Enter catalogue number" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={methods.control}
+              name="documentType"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Document Type *</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder="e.g. Manual, Patent, Advertisement" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={methods.control}
+              name="subject"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Subject</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder="Enter document subject" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={methods.control}
+              name="creator"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Creator/Author</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder="Enter creator or author name" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={methods.control}
+              name="date"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Date</FormLabel>
+                  <FormControl>
+                    <div className="flex gap-2">
+                      <Input
+                        {...field}
+                        value={field.value || ''}
+                        type="date"
+                        placeholder="YYYY-MM-DD"
+                        className="flex-1"
+                      />
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setValue('date', '')}
+                        className="shrink-0"
+                      >
+                        Clear
+                      </Button>
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={methods.control}
+              name="dateDescription"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Date Description</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder="e.g. c.1870, mid 19th century" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={methods.control}
+              name="placeOfOrigin"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Place of Origin</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder="Enter place of origin" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={methods.control}
+              name="language"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Language</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder="e.g. English, German, French" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={methods.control}
+              name="physicalDescription"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Physical Description</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      {...field}
+                      rows={3}
+                      autoResize
+                      placeholder="Describe physical characteristics, dimensions, materials, etc."
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={methods.control}
+              name="annotations"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Annotations</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      {...field}
+                      rows={3}
+                      autoResize
+                      placeholder="Enter inscriptions, stamps, etc. (one per line)"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={methods.control}
+              name="provenance"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Provenance</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      {...field}
+                      rows={3}
+                      autoResize
+                      placeholder="Enter history of ownership and origin"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={methods.control}
+              name="acquisitionDate"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Acquisition Date</FormLabel>
+                  <FormControl>
+                    <div className="flex gap-2">
+                      <Input
+                        {...field}
+                        value={field.value || ''}
+                        type="date"
+                        placeholder="YYYY-MM-DD"
+                        className="flex-1"
+                      />
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setValue('acquisitionDate', '')}
+                        className="shrink-0"
+                      >
+                        Clear
+                      </Button>
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={methods.control}
+              name="conditionId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Condition</FormLabel>
+                  <Select
+                    onValueChange={value => field.onChange(value === 'none' ? '' : value)}
+                    value={field.value || 'none'}
+                  >
+                    <FormControl>
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Select condition" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent className="max-h-60">
+                      <SelectItem value="none">No condition specified</SelectItem>
+                      {condition.data.map(({ name, id }) => (
+                        <SelectItem key={id} value={String(id)}>
+                          {name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FileUpload name="images" />
+
+            <FormField
+              control={methods.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      {...field}
+                      rows={3}
+                      autoResize
+                      placeholder="Enter document description"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <Button type="submit" variant="outline" disabled={isPending} className="mt-6">
+              {isPending ? 'Adding...' : 'Add new document'}
+            </Button>
+          </form>
+        </Form>
+      </FormProvider>
+    </div>
+  )
+}
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index e0ddef63..6ccba6f2 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import { Plus, AlertTriangle } from 'lucide-react'
+import { Plus, AlertTriangle, FileText } from 'lucide-react'
 import { FrontRoutes } from '@/constants/routes-front'
 
 export default function Admin() {
@@ -13,6 +13,13 @@ export default function Admin() {
           <Plus className="h-4 w-4" />
           Add new barometer
         </Link>
+        <Link
+          href={FrontRoutes.AddDocument}
+          className="text-foreground hover:text-primary flex w-fit items-center gap-2 transition-colors"
+        >
+          <FileText className="h-4 w-4" />
+          Add new document
+        </Link>
         <Link
           href={FrontRoutes.Reports}
           className="text-foreground hover:text-primary flex w-fit items-center gap-2 transition-colors"
diff --git a/app/api/v2/documents/route.ts b/app/api/v2/documents/route.ts
new file mode 100644
index 00000000..8486c3b9
--- /dev/null
+++ b/app/api/v2/documents/route.ts
@@ -0,0 +1,158 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { Prisma } from '@prisma/client'
+import { withPrisma } from '@/prisma/prismaClient'
+import { cleanObject } from '@/utils'
+import { DEFAULT_PAGE_SIZE } from '../parameters'
+
+/**
+ * Get document list
+ *
+ * GET /api/documents
+ */
+export async function GET(req: NextRequest) {
+  try {
+    const { searchParams } = req.nextUrl
+    const size = Math.max(Number(searchParams.get('size') ?? DEFAULT_PAGE_SIZE), 0)
+    const page = Math.max(Number(searchParams.get('page') || 1), 1)
+
+    const documents = await withPrisma(async prisma => {
+      const [data, total] = await Promise.all([
+        prisma.document.findMany({
+          skip: (page - 1) * size,
+          take: size,
+          include: {
+            condition: true,
+            images: true,
+            relatedBarometers: {
+              select: {
+                id: true,
+                name: true,
+                slug: true,
+              },
+            },
+          },
+          orderBy: {
+            createdAt: 'desc',
+          },
+        }),
+        prisma.document.count(),
+      ])
+
+      return {
+        documents: data,
+        pagination: {
+          page,
+          size,
+          total,
+          totalPages: Math.ceil(total / size),
+        },
+      }
+    })()
+
+    return NextResponse.json(documents, { status: documents.documents.length > 0 ? 200 : 404 })
+  } catch (error) {
+    return NextResponse.json(
+      { message: error instanceof Error ? error.message : 'Could not retrieve document list' },
+      { status: 500 },
+    )
+  }
+}
+
+//! Protect this function
+/**
+ * Add new document
+ *
+ * POST /api/documents
+ */
+export const POST = withPrisma(async (prisma, req: NextRequest) => {
+  try {
+    const { relatedBarometers, ...documentData } = await req.json()
+    const { images, ...document } = cleanObject(documentData)
+
+    const { id } = await prisma.document.create({
+      data: {
+        ...document,
+        images: {
+          create: images || [],
+        },
+        ...(relatedBarometers && Array.isArray(relatedBarometers)
+          ? {
+              relatedBarometers: {
+                connect: relatedBarometers.map((barometerId: string) => ({ id: barometerId })),
+              },
+            }
+          : {}),
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      },
+    })
+
+    return NextResponse.json({ id }, { status: 201 })
+  } catch (error) {
+    if (error instanceof Prisma.PrismaClientKnownRequestError) {
+      return NextResponse.json({ message: error.message }, { status: 400 })
+    }
+
+    return NextResponse.json(
+      { message: error instanceof Error ? error.message : 'Error adding new document' },
+      { status: 500 },
+    )
+  }
+})
+
+//! Protect this function
+/**
+ * Update document data
+ *
+ * PUT /api/documents
+ */
+export const PUT = withPrisma(async (prisma, req: NextRequest) => {
+  try {
+    const { relatedBarometers, ...documentData } = await req.json()
+    const { images, id, ...document } = cleanObject(documentData)
+
+    // transaction will prevent deleting images in case document update fails
+    await prisma.$transaction(async tx => {
+      await Promise.all([
+        // delete old images if the new ones are provided
+        images
+          ? tx.image.deleteMany({ where: { documents: { some: { id } } } })
+          : Promise.resolve(),
+        tx.document.update({
+          where: { id },
+          data: {
+            ...document,
+            // attach new images if provided
+            ...(images
+              ? {
+                  images: {
+                    create: images,
+                  },
+                }
+              : {}),
+            ...(relatedBarometers && Array.isArray(relatedBarometers)
+              ? {
+                  relatedBarometers: {
+                    // `set` replaces all previously connected barometers
+                    set: relatedBarometers.map((barometerId: string) => ({ id: barometerId })),
+                  },
+                }
+              : {}),
+            updatedAt: new Date(),
+          },
+        }),
+      ])
+    })
+
+    return NextResponse.json({ id }, { status: 200 })
+  } catch (error) {
+    console.error(error)
+    return NextResponse.json(
+      {
+        message:
+          error instanceof Error ? error.message : '/api/v2/documents PUT: Error updating document',
+      },
+      { status: 500 },
+    )
+  }
+})
diff --git a/constants/routes-back.ts b/constants/routes-back.ts
index c3f9a185..d20ff7fa 100644
--- a/constants/routes-back.ts
+++ b/constants/routes-back.ts
@@ -8,6 +8,7 @@ export const ApiRoutes = {
   ImageUpload: `${base}upload/images/`,
   BarometerSearch: `${base}search/`,
   Reports: `${base}report/`,
+  Documents: `${base}documents/`,
   Subcategories: `${base}subcategories/`,
   Materials: `${base}materials/`,
   Countries: `${base}countries/`,
diff --git a/constants/routes-front.ts b/constants/routes-front.ts
index 3172e30c..0dd914e7 100644
--- a/constants/routes-front.ts
+++ b/constants/routes-front.ts
@@ -11,6 +11,7 @@ export const FrontRoutes = {
   NewArrivals: '/collection/new-arrivals/',
   Admin: '/admin/',
   AddBarometer: '/admin/add-barometer/',
+  AddDocument: '/admin/add-document/',
   Reports: '/admin/reports/',
 } as const
 
diff --git a/services/fetch.ts b/services/fetch.ts
index 1476b9ec..c4c432ee 100644
--- a/services/fetch.ts
+++ b/services/fetch.ts
@@ -212,3 +212,28 @@ export async function fetchCountryList(): Promise<CountryListDTO> {
   const res = await fetch(ApiRoutes.Countries)
   return res.json()
 }
+
+/******* Documents ********/
+export async function createDocument<T>(document: T): Promise<{ id: string }> {
+  const res = await fetch(ApiRoutes.Documents, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(document),
+  })
+  if (!res.ok) await handleApiError(res)
+  return res.json()
+}
+
+export async function updateDocument<T>(document: T): Promise<{ id: string }> {
+  const res = await fetch(ApiRoutes.Documents, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(document),
+  })
+  if (!res.ok) await handleApiError(res)
+  return res.json()
+}