balls

app/dashboard/shipping/page.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { useState, useEffect, ChangeEvent } from "react";
+import Layout from "@/components/kokonutui/layout";
+import { Edit, Plus, Trash } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ShippingModal } from "@/components/shipping-modal";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  fetchShippingMethods,
+  addShippingMethod,
+  deleteShippingMethod,
+  updateShippingMethod,
+} from "@/lib/shippingHelper";
+
+interface ShippingMethod {
+  _id?: string; // Required after fetching
+  name: string;
+  price: number;
+}
+
+interface ShippingData {
+  _id?: string; // Optional for new entry
+  name: string;
+  price: number;
+}
+
+import { ShippingTable } from "@/components/shipping-table"
+
+export default function ShippingPage() {
+  const [shippingMethods, setShippingMethods] = useState<ShippingMethod[]>([]);
+  const [newShipping, setNewShipping] = useState<ShippingData>({
+    name: "",
+    price: 0,
+  });
+  const [loading, setLoading] = useState<boolean>(true);
+  const [modalOpen, setModalOpen] = useState<boolean>(false);
+  const [editing, setEditing] = useState<boolean>(false);
+
+  useEffect(() => {
+    const fetchShippingMethodsData = async () => {
+      try {
+        const authToken = document.cookie.split("Authorization=")[1];
+        const fetchedMethods: ShippingMethod[] = await fetchShippingMethods(authToken);
+  
+        setShippingMethods(
+          fetchedMethods.filter((method) => method._id) 
+        );
+      } catch (error) {
+        console.error("Error loading shipping options:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+  
+    fetchShippingMethodsData();
+  }, []);
+
+  const handleAddShipping = async () => {
+    if (!newShipping.name || !newShipping.price) return;
+  
+    try {
+      const authToken = document.cookie.split("Authorization=")[1];
+      const updatedMethods: ShippingMethod[] = await addShippingMethod(authToken, newShipping);
+  
+      setShippingMethods(updatedMethods);
+      setNewShipping({ name: "", price: 0 }); // No `_id` needed for new entry
+      setModalOpen(false);
+    } catch (error) {
+      console.error("Error adding shipping method:", error);
+    }
+  };
+  
+  const handleUpdateShipping = async () => {
+    if (!newShipping.name || !newShipping.price || !newShipping._id) return; // Ensure `_id` exists
+  
+    try {
+      const authToken = document.cookie.split("Authorization=")[1];
+      const updatedShipping: ShippingMethod = await updateShippingMethod(authToken, newShipping._id, newShipping);
+  
+      setShippingMethods((prevMethods) =>
+        prevMethods.map((method) => (method._id === updatedShipping._id ? updatedShipping : method))
+      );
+      setNewShipping({ name: "", price: 0 });
+      setEditing(false);
+      setModalOpen(false);
+    } catch (error) {
+      console.error("Error updating shipping method:", error);
+    }
+  };
+
+  const handleDeleteShipping = async (_id: string) => {
+    try {
+      const authToken = document.cookie.split("Authorization=")[1];
+      const response = await deleteShippingMethod(authToken, _id);
+      if (response.success) {
+        setShippingMethods((prevMethods) =>
+          prevMethods.filter((method) => method._id !== _id)
+        );
+      } else {
+        console.error("Deletion was not successful.");
+      }
+    } catch (error) {
+      console.error("Error deleting shipping method:", error);
+    }
+  };
+
+  const handleEditShipping = (shipping: ShippingMethod) => {
+    setNewShipping({ ...shipping, _id: shipping._id ?? "" }); // Ensure _id is always a string
+    setEditing(true);
+    setModalOpen(true);
+  };
+
+  return (
+    <Layout>
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
+            Manage Shipping Options
+          </h1>
+          <Button onClick={() => setModalOpen(true)}>
+            <Plus className="mr-2 h-5 w-5" />
+            Add Shipping Method
+          </Button>
+        </div>
+
+        {/* Shipping Methods Table */}
+        <ShippingTable
+        shippingMethods={shippingMethods}
+        loading={loading}
+        onEditShipping={handleEditShipping}
+        onDeleteShipping={handleDeleteShipping}
+      />
+      </div>
+
+      {/* Shipping Modal */}
+      <ShippingModal
+        open={modalOpen}
+        onClose={() => setModalOpen(false)}
+        onSave={editing ? handleUpdateShipping : handleAddShipping}
+        shippingData={newShipping}
+        editing={editing}
+        handleChange={(e) =>
+          setNewShipping({ ...newShipping, [e.target.name]: e.target.value })
+        }
+        setShippingData={setNewShipping}
+      />
+    </Layout>
+  );
+}