WOOHOO

app/dashboard/shipping/page.tsx

@@ -27,12 +27,18 @@ export default function ShippingPage() {
   const [loading, setLoading] = useState<boolean>(true);
   const [modalOpen, setModalOpen] = useState<boolean>(false);
   const [editing, setEditing] = useState<boolean>(false);
+  const [refreshTrigger, setRefreshTrigger] = useState<number>(0);
 
   const router = useRouter();
 
+  const refreshShippingMethods = () => {
+    setRefreshTrigger(prev => prev + 1);
+  };
+
   useEffect(() => {
     const fetchShippingMethodsData = async () => {
       try {
+        setLoading(true);
         const authToken = document.cookie
           .split("; ")
           .find((row) => row.startsWith("Authorization="))
@@ -65,23 +71,41 @@ export default function ShippingPage() {
     };
 
     fetchShippingMethodsData();
-  }, []);
+  }, [refreshTrigger]); // Add refreshTrigger as a dependency
 
   const handleAddShipping = async () => {
     if (!newShipping.name || !newShipping.price) return;
 
     try {
-      const authToken = document.cookie.split("Authorization=")[1];
-      const updatedMethods: ShippingMethod[] = await addShippingMethod(
+      setLoading(true);
+      const authToken = document.cookie
+        .split("; ")
+        .find((row) => row.startsWith("Authorization="))
+        ?.split("=")[1];
+        
+      if (!authToken) {
+        console.error("No auth token found");
+        return;
+      }
+      
+      await addShippingMethod(
         authToken,
         newShipping
       );
 
-      setShippingMethods(updatedMethods);
-      setNewShipping({ name: "", price: 0 }); // No `_id` needed for new entry
+      // Close modal and reset form before refreshing to avoid UI delays
       setModalOpen(false);
+      setNewShipping({ name: "", price: 0 });
+      
+      // Refresh the list after adding
+      refreshShippingMethods();
+      
+      console.log("Shipping method added successfully");
     } catch (error) {
       console.error("Error adding shipping method:", error);
+      alert("Failed to add shipping method. Please try again.");
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -89,23 +113,37 @@ export default function ShippingPage() {
     if (!newShipping.name || !newShipping.price || !newShipping._id) return; // Ensure `_id` exists
 
     try {
-      const authToken = document.cookie.split("Authorization=")[1];
-      const updatedShipping: ShippingMethod = await updateShippingMethod(
+      setLoading(true);
+      const authToken = document.cookie
+        .split("; ")
+        .find((row) => row.startsWith("Authorization="))
+        ?.split("=")[1];
+        
+      if (!authToken) {
+        console.error("No auth token found");
+        return;
+      }
+      
+      await updateShippingMethod(
         authToken,
         newShipping._id,
         newShipping
       );
 
-      setShippingMethods((prevMethods) =>
-        prevMethods.map((method) =>
-          method._id === updatedShipping._id ? updatedShipping : method
-        )
-      );
+      // Close modal and reset form before refreshing to avoid UI delays
+      setModalOpen(false);
       setNewShipping({ name: "", price: 0 });
       setEditing(false);
-      setModalOpen(false);
+      
+      // Refresh the list after updating
+      refreshShippingMethods();
+      
+      console.log("Shipping method updated successfully");
     } catch (error) {
       console.error("Error updating shipping method:", error);
+      alert("Failed to update shipping method. Please try again.");
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -114,9 +152,7 @@ export default function ShippingPage() {
       const authToken = document.cookie.split("Authorization=")[1];
       const response = await deleteShippingMethod(authToken, _id);
       if (response.success) {
-        setShippingMethods((prevMethods) =>
-          prevMethods.filter((method) => method._id !== _id)
-        );
+        refreshShippingMethods(); // Refresh the list after deleting
       } else {
         console.error("Deletion was not successful.");
       }
@@ -141,7 +177,11 @@ export default function ShippingPage() {
           <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
             Manage Shipping Options
           </h1>
-          <Button onClick={() => setModalOpen(true)}>
+          <Button onClick={() => {
+            setNewShipping({ name: "", price: 0 });
+            setEditing(false);
+            setModalOpen(true);
+          }}>
             <Plus className="mr-2 h-5 w-5" />
             Add Shipping Method
           </Button>
@@ -159,7 +199,11 @@ export default function ShippingPage() {
       {/* Shipping Modal */}
       <ShippingModal
         open={modalOpen}
-        onClose={() => setModalOpen(false)}
+        onClose={() => {
+          setNewShipping({ name: "", price: 0 });
+          setEditing(false);
+          setModalOpen(false);
+        }}
         onSave={editing ? handleUpdateShipping : handleAddShipping}
         shippingData={newShipping}
         editing={editing}