Cleanup

2025-02-08 01:56:42 +00:00
parent 468fd69cb5
commit 7374e56253
13 changed files with 297 additions and 411 deletions
--- a/components/modals/product-modal.tsx
+++ b/components/modals/product-modal.tsx
@@ -1,17 +1,18 @@
-"use client";
+"use client"

-import { useState, useEffect } from "react";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
-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 { ImageUpload } from "@/components/forms/image-upload";
-import { PricingTiers } from "@/components/forms/pricing-tiers";
-import { ProductModalProps, ProductData } from "@/lib/types";
-import { toast } from "sonner";
+import { useState, useEffect } from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+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 { ImageUpload } from "@/components/forms/image-upload"
+import { PricingTiers } from "@/components/forms/pricing-tiers"
+import type { ProductModalProps, ProductData } from "@/lib/types"
+import { toast } from "sonner"
+import type React from "react" // Import React

-export const ProductModal = ({
+export const ProductModal: React.FC<ProductModalProps> = ({
  open,
  onClose,
  onSave,
@@ -19,92 +20,64 @@ export const ProductModal = ({
  categories,
  editing,
  handleChange,
+  handleTieredPricingChange,
+  handleAddTier,
+  handleRemoveTier,
  setProductData,
-}: ProductModalProps) => {
-  const [imagePreview, setImagePreview] = useState<string | null>(null);
-  const [imageDimensions, setImageDimensions] = useState({ width: 300, height: 200 });
+}) => {
+  const [imagePreview, setImagePreview] = useState<string | null>(null)
+  const [imageDimensions, setImageDimensions] = useState({ width: 300, height: 200 })

  useEffect(() => {
    if (productData.image && typeof productData.image === "string") {
-      setImagePreview(productData.image);
+      setImagePreview(productData.image)
    }
-  }, [productData.image]);
+  }, [productData.image])

  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
+    const file = e.target.files?.[0]
    if (!file) {
-      setProductData({ ...productData, image: null });
-      setImagePreview(null);
-      return;
+      setProductData({ ...productData, image: null })
+      setImagePreview(null)
+      return
    }

-    const image = new Image();
-    const objectUrl = URL.createObjectURL(file);
+    const image = new Image()
+    const objectUrl = URL.createObjectURL(file)

    image.onload = () => {
-      const aspectRatio = image.naturalWidth / image.naturalHeight;
-      const width = aspectRatio > 1 ? 300 : 200 * aspectRatio;
-      const height = aspectRatio > 1 ? 300 / aspectRatio : 200;
+      const aspectRatio = image.naturalWidth / image.naturalHeight
+      const width = aspectRatio > 1 ? 300 : 200 * aspectRatio
+      const height = aspectRatio > 1 ? 300 / aspectRatio : 200

-      setProductData({ ...productData, image: file });
-      setImagePreview(objectUrl);
-      setImageDimensions({ width, height });
-    };
+      setProductData({ ...productData, image: file })
+      setImagePreview(objectUrl)
+      setImageDimensions({ width, height })
+    }

-    image.src = objectUrl;
-  };
-
-  const handleTierChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
-    const { name, valueAsNumber } = e.target;
-  
-    if (!["minQuantity", "pricePerUnit"].includes(name)) return; // ✅ Ensure valid keys
-  
-    const updatedPricing = [...productData.pricing];
-    (updatedPricing[index] as any)[name] = isNaN(valueAsNumber) ? 0 : valueAsNumber;
-    
-    setProductData({ ...productData, pricing: updatedPricing });
-  };
-
-
-  const handleAddTier = () => {
-    setProductData(prev => ({
-      ...prev,
-      pricing: [...prev.pricing, { minQuantity: 1, pricePerUnit: 0 }]
-    }));
-  };
-
-  const handleRemoveTier = (index: number) => {
-    const updatedPricing = productData.pricing.filter((_, i) => i !== index);
-    setProductData({ ...productData, pricing: updatedPricing });
-  };
+    image.src = objectUrl
+  }

  const handleSave = () => {
-    onSave(productData);
-    toast.success(editing ? "Product updated!" : "Product added!");
-    onClose();
-  };
+    onSave(productData)
+    toast.success(editing ? "Product updated!" : "Product added!")
+    onClose()
+  }

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="max-w-6xl">
        <DialogHeader>
-          <DialogTitle className="text-base">
-            {editing ? "Edit Product" : "Add Product"}
-          </DialogTitle>
+          <DialogTitle className="text-base">{editing ? "Edit Product" : "Add Product"}</DialogTitle>
        </DialogHeader>

        <div className="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-8 py-4">
-          {/* Left Column */}
-          <div className="space-y-6">
-            <ProductBasicInfo
-              productData={productData}
-              handleChange={handleChange}
-              categories={categories}
-              setProductData={setProductData}
-            />
-          </div>
-
-          {/* Right Column */}
+          <ProductBasicInfo
+            productData={productData}
+            handleChange={handleChange}
+            categories={categories}
+            setProductData={setProductData}
+          />
          <div className="space-y-6">
            <ImageUpload
              imagePreview={imagePreview}
@@ -113,7 +86,7 @@ export const ProductModal = ({
            />
            <PricingTiers
              pricing={productData.pricing}
-              handleTierChange={handleTierChange}
+              handleTierChange={handleTieredPricingChange}
              handleRemoveTier={handleRemoveTier}
              handleAddTier={handleAddTier}
            />
@@ -121,28 +94,23 @@ export const ProductModal = ({
        </div>

        <DialogFooter>
-          <Button variant="outline" onClick={onClose}>Cancel</Button>
-          <Button onClick={handleSave}>
-            {editing ? "Update" : "Create"}
+          <Button variant="outline" onClick={onClose}>
+            Cancel
          </Button>
+          <Button onClick={handleSave}>{editing ? "Update" : "Create"}</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
-  );
-};
+  )
+}

-const ProductBasicInfo = ({
-  productData,
-  handleChange,
-  categories,
-  setProductData,
-}: {
-  productData: ProductData;
-  handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-  categories: { _id: string; name: string }[];
-  setProductData: React.Dispatch<React.SetStateAction<ProductData>>;
-}) => (
-  <>
+const ProductBasicInfo: React.FC<{
+  productData: ProductData
+  handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
+  categories: { _id: string; name: string }[]
+  setProductData: React.Dispatch<React.SetStateAction<ProductData>>
+}> = ({ productData, handleChange, categories, setProductData }) => (
+  <div className="space-y-4">
    <div>
      <label className="text-sm font-medium">Product Name</label>
      <Input
@@ -166,28 +134,17 @@ const ProductBasicInfo = ({
      />
    </div>

-    <CategorySelect
-      categories={categories}
-      value={productData.category}
-      setProductData={setProductData}
-    />
+    <CategorySelect categories={categories} value={productData.category} setProductData={setProductData} />

-    <UnitTypeSelect
-      value={productData.unitType}
-      setProductData={setProductData}
-    />
-  </>
-);
+    <UnitTypeSelect value={productData.unitType} setProductData={setProductData} />
+  </div>
+)

-const CategorySelect = ({
-  categories,
-  value,
-  setProductData,
-}: {
-  categories: { _id: string; name: string }[];
-  value: string;
-  setProductData: React.Dispatch<React.SetStateAction<ProductData>>;
-}) => (
+const CategorySelect: React.FC<{
+  categories: { _id: string; name: string }[]
+  value: string
+  setProductData: React.Dispatch<React.SetStateAction<ProductData>>
+}> = ({ categories, value, setProductData }) => (
  <div>
    <label className="text-sm font-medium">Category</label>
    <Select
@@ -212,24 +169,21 @@ const CategorySelect = ({
      </SelectContent>
    </Select>
  </div>
-);
+)

-const UnitTypeSelect = ({
-  value,
-  setProductData,
-}: {
-  value: string;
-  setProductData: React.Dispatch<React.SetStateAction<ProductData>>;
-}) => (
+const UnitTypeSelect: React.FC<{
+  value: string
+  setProductData: React.Dispatch<React.SetStateAction<ProductData>>
+}> = ({ value, setProductData }) => (
  <div>
    <label className="text-sm font-medium">Unit Type</label>
    <Select
      value={value || "placeholder"}
      onValueChange={(val) =>
-        setProductData((prev: ProductData) => ({
+        setProductData((prev) => ({
          ...prev,
          unitType: val === "placeholder" ? "" : val,
-        })) 
+        }))
      }
    >
      <SelectTrigger className="h-9 text-sm">
@@ -245,4 +199,5 @@ const UnitTypeSelect = ({
      </SelectContent>
    </Select>
  </div>
-);
+)
+