commit

src/features/crm/quotations/components/quotation-detail.tsx

@@ -33,7 +33,13 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Textarea } from "@/components/ui/textarea";
+import {
+  CrmCurrencyInput,
+  CrmDateInput,
+  CrmNumberInput,
+  CrmPercentageInput,
+  CrmTextarea,
+} from "@/features/crm/components/crm-form-controls";
 import {
   createQuotationAttachmentMutation,
   createQuotationCustomerMutation,
@@ -168,12 +174,11 @@ function ItemDialog({
             placeholder="Description"
           />
           <div className="grid gap-4 md:grid-cols-2">
-            <Input
+            <CrmNumberInput
               value={values.quantity}
-              onChange={(e) =>
-                setValues((s) => ({ ...s, quantity: e.target.value }))
+              onChange={(value) =>
+                setValues((s) => ({ ...s, quantity: value }))
               }
-              type="number"
               placeholder="Quantity"
             />
             <Select
@@ -199,21 +204,21 @@ function ItemDialog({
             </Select>
           </div>
           <div className="grid gap-4 md:grid-cols-2">
-            <Input
+            <CrmCurrencyInput
               value={values.unitPrice}
-              onChange={(e) =>
-                setValues((s) => ({ ...s, unitPrice: e.target.value }))
+              onChange={(value) =>
+                setValues((s) => ({ ...s, unitPrice: value }))
               }
-              type="number"
               placeholder="Unit price"
+              currencyLabel="THB"
             />
-            <Input
+            <CrmCurrencyInput
               value={values.discount}
-              onChange={(e) =>
-                setValues((s) => ({ ...s, discount: e.target.value }))
+              onChange={(value) =>
+                setValues((s) => ({ ...s, discount: value }))
               }
-              type="number"
               placeholder="Discount"
+              currencyLabel="THB"
             />
           </div>
           <div className="grid gap-4 md:grid-cols-2">
@@ -238,21 +243,21 @@ function ItemDialog({
                 ))}
               </SelectContent>
             </Select>
-            <Input
+            <CrmPercentageInput
               value={values.taxRate}
-              onChange={(e) =>
-                setValues((s) => ({ ...s, taxRate: e.target.value }))
+              onChange={(value) =>
+                setValues((s) => ({ ...s, taxRate: value }))
               }
-              type="number"
               placeholder="Tax rate %"
             />
           </div>
-          <Textarea
+          <CrmTextarea
             value={values.notes}
             onChange={(e) =>
               setValues((s) => ({ ...s, notes: e.target.value }))
             }
             placeholder="Notes"
+            size="md"
           />
         </div>
         <DialogFooter>
@@ -418,11 +423,11 @@ function TopicDialog({
             onChange={(e) => setTitle(e.target.value)}
             placeholder="Topic title"
           />
-          <Textarea
+          <CrmTextarea
             value={itemsText}
             onChange={(e) => setItemsText(e.target.value)}
             placeholder="One line per topic item"
-            rows={6}
+            size="lg"
           />
         </div>
         <DialogFooter>
@@ -500,12 +505,12 @@ function FollowupDialog({
           </DialogDescription>
         </DialogHeader>
         <div className="grid gap-4">
-          <Input
-            type="date"
+          <CrmDateInput
             value={values.followupDate}
             onChange={(e) =>
-              setValues((s) => ({ ...s, followupDate: e.target.value }))
+              setValues((s) => ({ ...s, followupDate: e }))
             }
+            className="w-full"
           />
           <Select
             value={values.followupType}
@@ -552,12 +557,12 @@ function FollowupDialog({
             }
             placeholder="Outcome"
           />
-          <Input
-            type="date"
+          <CrmDateInput
             value={values.nextFollowupDate}
             onChange={(e) =>
-              setValues((s) => ({ ...s, nextFollowupDate: e.target.value }))
+              setValues((s) => ({ ...s, nextFollowupDate: e }))
             }
+            className="w-full"
           />
           <Input
             value={values.nextAction}
@@ -566,12 +571,13 @@ function FollowupDialog({
             }
             placeholder="Next action"
           />
-          <Textarea
+          <CrmTextarea
             value={values.notes}
             onChange={(e) =>
               setValues((s) => ({ ...s, notes: e.target.value }))
             }
             placeholder="Notes"
+            size="md"
           />
         </div>
         <DialogFooter>
@@ -668,21 +674,21 @@ function AttachmentDialog({
               }
               placeholder="application/pdf"
             />
-            <Input
+            <CrmNumberInput
               value={values.fileSize}
-              onChange={(e) =>
-                setValues((s) => ({ ...s, fileSize: e.target.value }))
+              onChange={(value) =>
+                setValues((s) => ({ ...s, fileSize: value }))
               }
-              type="number"
               placeholder="File size bytes"
             />
           </div>
-          <Textarea
+          <CrmTextarea
             value={values.description}
             onChange={(e) =>
               setValues((s) => ({ ...s, description: e.target.value }))
             }
             placeholder="Description"
+            size="md"
           />
         </div>
         <DialogFooter>