WOOHOO

components/layout/sidebar.tsx

@@ -7,11 +7,28 @@ import { ShoppingCart, LogOut } from "lucide-react"
 import { NavItem } from "./nav-item"
 import { Button } from "@/components/ui/button"
 import { sidebarConfig } from "@/config/sidebar"
+import { logoutUser } from "@/lib/auth-utils"
+import { toast } from "sonner"
 
 const Sidebar: React.FC = () => {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
   const router = useRouter()
 
+  const handleLogout = async () => {
+    try {
+      // Show toast notification for better user experience
+      toast.success("Logging out...");
+      
+      // Perform the logout
+      await logoutUser();
+      
+      // The logoutUser function will handle the redirect
+    } catch (error) {
+      console.error("Error during logout:", error);
+      toast.error("Failed to logout. Please try again.");
+    }
+  };
+
   return (
     <>
       <nav
@@ -48,7 +65,7 @@ const Sidebar: React.FC = () => {
 
           <div className="p-4 border-t border-border">
             <Button
-              onClick={() => {}}
+              onClick={handleLogout}
               variant="ghost"
               className="w-full justify-start text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 hover:bg-background"
             >

components/modals/shipping-modal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ChangeEvent } from "react";
+import { ChangeEvent, FormEvent } from "react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -25,6 +25,12 @@ export const ShippingModal = ({
   handleChange,
   setShippingData,
 }: ShippingModalProps) => {
+  
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    onSave(shippingData);
+  };
+  
   return (
     <Dialog open={open} onOpenChange={onClose}>
       <DialogContent className="sm:max-w-[600px]">
@@ -34,38 +40,42 @@ export const ShippingModal = ({
           </DialogTitle>
         </DialogHeader>
 
-        <div className="grid gap-4 py-4">
-          <div className="space-y-2">
-            <label className="text-sm font-medium">Method Name</label>
-            <Input
-              name="name"
-              placeholder="Shipping Method Name"
-              value={shippingData.name}
-              onChange={handleChange}
-            />
+        <form onSubmit={handleSubmit}>
+          <div className="grid gap-4 py-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Method Name</label>
+              <Input
+                name="name"
+                placeholder="Shipping Method Name"
+                value={shippingData.name}
+                onChange={handleChange}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Price</label>
+              <Input
+                name="price"
+                type="number"
+                step="0.01"
+                placeholder="Price (£)"
+                value={shippingData.price}
+                onChange={handleChange}
+                required
+              />
+            </div>
           </div>
 
-          <div className="space-y-2">
-            <label className="text-sm font-medium">Price</label>
-            <Input
-              name="price"
-              type="number"
-              step="0.01"
-              placeholder="Price (£)"
-              value={shippingData.price}
-              onChange={handleChange}
-            />
-          </div>
-        </div>
-
-        <DialogFooter className="flex justify-end gap-2">
-          <Button variant="outline" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button onClick={() => onSave(shippingData)}>
-            {editing ? "Update Shipping Method" : "Create Shipping Method"}
-          </Button>
-        </DialogFooter>
+          <DialogFooter className="flex justify-end gap-2">
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit">
+              {editing ? "Update Shipping Method" : "Create Shipping Method"}
+            </Button>
+          </DialogFooter>
+        </form>
       </DialogContent>
     </Dialog>
   );