diff --git a/nextjs_space/app/auth/forgot-password/page.tsx b/nextjs_space/app/auth/forgot-password/page.tsx
index 8ae87b6..2b1164b 100644
--- a/nextjs_space/app/auth/forgot-password/page.tsx
+++ b/nextjs_space/app/auth/forgot-password/page.tsx
@@ -1,14 +1,20 @@
-'use client';
+"use client";
 
-import React, { useState } from 'react';
-import Link from 'next/link';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import React, { useState } from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 
 export default function ForgotPasswordPage() {
-  const [email, setEmail] = useState('');
+  const [email, setEmail] = useState("");
   const [submitted, setSubmitted] = useState(false);
   const [loading, setLoading] = useState(false);
 
@@ -17,9 +23,9 @@ export default function ForgotPasswordPage() {
     setLoading(true);
 
     try {
-      const response = await fetch('/api/auth/reset-password', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+      const response = await fetch("/api/auth/reset-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ email }),
       });
 
@@ -28,11 +34,11 @@ export default function ForgotPasswordPage() {
       if (response.ok) {
         setSubmitted(true);
       } else {
-        alert(data.error || 'Failed to send reset email');
+        alert(data.error || "Failed to send reset email");
       }
     } catch (error) {
-      console.error('Password reset error:', error);
-      alert('Failed to send reset email');
+      console.error("Password reset error:", error);
+      alert("Failed to send reset email");
     } finally {
       setLoading(false);
     }
@@ -45,7 +51,8 @@ export default function ForgotPasswordPage() {
           <CardHeader>
             <CardTitle>Check Your Email</CardTitle>
             <CardDescription>
-              If an account exists with {email}, you will receive password reset instructions shortly.
+              If an account exists with {email}, you will receive password reset
+              instructions shortly.
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -66,7 +73,8 @@ export default function ForgotPasswordPage() {
         <CardHeader>
           <CardTitle>Forgot Password</CardTitle>
           <CardDescription>
-            Enter your email address and we'll send you instructions to reset your password.
+            Enter your email address and we'll send you instructions to reset
+            your password.
           </CardDescription>
         </CardHeader>
         <CardContent>
@@ -88,7 +96,7 @@ export default function ForgotPasswordPage() {
               className="w-full bg-green-600 hover:bg-green-700"
               disabled={loading}
             >
-              {loading ? 'Sending...' : 'Send Reset Instructions'}
+              {loading ? "Sending..." : "Send Reset Instructions"}
             </Button>
 
             <div className="text-center">
diff --git a/nextjs_space/app/auth/login/page.tsx b/nextjs_space/app/auth/login/page.tsx
index a498052..6c6c0cc 100644
--- a/nextjs_space/app/auth/login/page.tsx
+++ b/nextjs_space/app/auth/login/page.tsx
@@ -1,12 +1,11 @@
-
-'use client';
-
-import { useState, Suspense, useEffect } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { signIn, getSession } from 'next-auth/react';
-import Link from 'next/link';
-import Image from 'next/image';
-import { motion } from 'framer-motion';
+"use client";
+
+import { useState, Suspense, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { signIn, getSession } from "next-auth/react";
+import Link from "next/link";
+import Image from "next/image";
+import { motion } from "framer-motion";
 import {
   LogIn,
   Mail,
@@ -18,13 +17,13 @@ import {
   AlertCircle,
   Chrome,
   ArrowRight,
-  Store
-} from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Checkbox } from '@/components/ui/checkbox';
-import { toast } from '@/components/ui/sonner';
+  Store,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { toast } from "@/components/ui/sonner";
 
 interface TenantSettings {
   businessName: string;
@@ -35,48 +34,48 @@ interface TenantSettings {
 
 function LoginForm() {
   const [tenantSettings, setTenantSettings] = useState<TenantSettings>({
-    businessName: 'BudStack',
-    primaryColor: '#16a34a'
+    businessName: "BudStack",
+    primaryColor: "#16a34a",
   });
 
   useEffect(() => {
     // Get tenant from hostname/subdomain
     const hostname = window.location.hostname;
-    const parts = hostname.split('.');
+    const parts = hostname.split(".");
     const subdomain = parts.length >= 2 ? parts[0] : null;
 
     // Fetch tenant settings based on subdomain
-    if (subdomain && subdomain !== 'localhost' && subdomain !== 'www') {
+    if (subdomain && subdomain !== "localhost" && subdomain !== "www") {
       fetch(`/api/tenant/${subdomain}`)
-        .then(res => res.json())
-        .then(data => {
+        .then((res) => res.json())
+        .then((data) => {
           if (data && data.tenant) {
             setTenantSettings({
-              businessName: data.tenant.businessName || 'BudStack',
-              primaryColor: data.tenant.branding?.primaryColor || '#16a34a',
+              businessName: data.tenant.businessName || "BudStack",
+              primaryColor: data.tenant.branding?.primaryColor || "#16a34a",
               logoUrl: data.tenant.branding?.logoUrl,
-              subdomain: data.tenant.subdomain
+              subdomain: data.tenant.subdomain,
             });
           }
         })
-        .catch(err => {
-          console.error('Failed to fetch tenant settings:', err);
+        .catch((err) => {
+          console.error("Failed to fetch tenant settings:", err);
         });
     } else {
       // Fallback to platform settings for non-tenant domains
-      fetch('/api/super-admin/platform-settings')
-        .then(res => res.json())
-        .then(data => {
+      fetch("/api/super-admin/platform-settings")
+        .then((res) => res.json())
+        .then((data) => {
           if (data) {
             setTenantSettings({
-              businessName: data.businessName || 'BudStack',
-              primaryColor: data.primaryColor || '#16a34a',
-              logoUrl: data.logoUrl
+              businessName: data.businessName || "BudStack",
+              primaryColor: data.primaryColor || "#16a34a",
+              logoUrl: data.logoUrl,
             });
           }
         })
-        .catch(err => {
-          console.error('Failed to fetch platform settings:', err);
+        .catch((err) => {
+          console.error("Failed to fetch platform settings:", err);
         });
     }
   }, []);
@@ -86,31 +85,32 @@ function LoginForm() {
   const [showPassword, setShowPassword] = useState(false);
   const [rememberMe, setRememberMe] = useState(false);
   const [formData, setFormData] = useState({
-    email: '',
-    password: ''
+    email: "",
+    password: "",
   });
   const [errors, setErrors] = useState<Record<string, string>>({});
 
   // Check for messages from signup or other redirects
-  const message = searchParams?.get('message');
-  const error = searchParams?.get('error');
+  const message = searchParams?.get("message");
+  const error = searchParams?.get("error");
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
-    setFormData(prev => ({ ...prev, [name]: value }));
+    setFormData((prev) => ({ ...prev, [name]: value }));
 
     // Clear error when user starts typing
     if (errors[name]) {
-      setErrors(prev => ({ ...prev, [name]: '' }));
+      setErrors((prev) => ({ ...prev, [name]: "" }));
     }
   };
 
   const validateForm = () => {
     const newErrors: Record<string, string> = {};
 
-    if (!formData.email.trim()) newErrors.email = 'Email is required';
-    if (!/\S+@\S+\.\S+/.test(formData.email)) newErrors.email = 'Invalid email format';
-    if (!formData.password) newErrors.password = 'Password is required';
+    if (!formData.email.trim()) newErrors.email = "Email is required";
+    if (!/\S+@\S+\.\S+/.test(formData.email))
+      newErrors.email = "Invalid email format";
+    if (!formData.password) newErrors.password = "Password is required";
 
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
@@ -120,25 +120,25 @@ function LoginForm() {
     e.preventDefault();
 
     if (!validateForm()) {
-      toast.error('Please fix the errors in the form');
+      toast.error("Please fix the errors in the form");
       return;
     }
 
     setIsLoading(true);
 
     try {
-      const result = await signIn('credentials', {
+      const result = await signIn("credentials", {
         email: formData.email,
         password: formData.password,
         redirect: false,
       });
 
       if (result?.error) {
-        throw new Error('Invalid email or password');
+        throw new Error("Invalid email or password");
       }
 
       if (result?.ok) {
-        toast.success('Signed in successfully!');
+        toast.success("Signed in successfully!");
 
         // Get fresh session and redirect based on role
         const session = await getSession();
@@ -146,18 +146,17 @@ function LoginForm() {
           const userRole = (session.user as any).role;
 
           // Redirect based on user role
-          if (userRole === 'SUPER_ADMIN') {
-            router.replace('/super-admin');
-          } else if (userRole === 'TENANT_ADMIN') {
-            router.replace('/tenant-admin');
+          if (userRole === "SUPER_ADMIN") {
+            router.replace("/super-admin");
+          } else if (userRole === "TENANT_ADMIN") {
+            router.replace("/tenant-admin");
           } else {
-            router.replace('/dashboard');
+            router.replace("/dashboard");
           }
         }
       }
-
     } catch (error: any) {
-      toast.error(error.message || 'An error occurred during sign in');
+      toast.error(error.message || "An error occurred during sign in");
     } finally {
       setIsLoading(false);
     }
@@ -165,9 +164,9 @@ function LoginForm() {
 
   const handleGoogleSignIn = async () => {
     try {
-      await signIn('google', { callbackUrl: '/dashboard' });
+      await signIn("google", { callbackUrl: "/dashboard" });
     } catch (error) {
-      toast.error('Google sign in failed');
+      toast.error("Google sign in failed");
     }
   };
 
@@ -209,7 +208,9 @@ function LoginForm() {
                 </span>
               </div>
             </Link>
-            <h2 className="text-3xl font-bold text-gray-900 font-serif">Welcome Back</h2>
+            <h2 className="text-3xl font-bold text-gray-900 font-serif">
+              Welcome Back
+            </h2>
             <p className="mt-2 text-sm text-gray-600">
               Sign in to access your account
             </p>
@@ -238,9 +239,9 @@ function LoginForm() {
               <div className="flex items-center space-x-2">
                 <AlertCircle className="w-4 h-4 text-red-600" />
                 <p className="text-sm text-red-800">
-                  {error === 'CredentialsSignin'
-                    ? 'Invalid email or password'
-                    : 'An error occurred during sign in'}
+                  {error === "CredentialsSignin"
+                    ? "Invalid email or password"
+                    : "An error occurred during sign in"}
                 </p>
               </div>
             </motion.div>
@@ -262,7 +263,9 @@ function LoginForm() {
               <div className="w-full border-t border-gray-300" />
             </div>
             <div className="relative flex justify-center text-sm">
-              <span className="px-2 bg-white text-gray-500">Or sign in with email</span>
+              <span className="px-2 bg-white text-gray-500">
+                Or sign in with email
+              </span>
             </div>
           </div>
 
@@ -280,7 +283,7 @@ function LoginForm() {
                   required
                   value={formData.email}
                   onChange={handleChange}
-                  className={`pl-10 ${errors.email ? 'border-red-500' : ''}`}
+                  className={`pl-10 ${errors.email ? "border-red-500" : ""}`}
                   placeholder="joao@example.com"
                 />
               </div>
@@ -300,11 +303,11 @@ function LoginForm() {
                 <Input
                   id="password"
                   name="password"
-                  type={showPassword ? 'text' : 'password'}
+                  type={showPassword ? "text" : "password"}
                   required
                   value={formData.password}
                   onChange={handleChange}
-                  className={`pl-10 pr-10 ${errors.password ? 'border-red-500' : ''}`}
+                  className={`pl-10 pr-10 ${errors.password ? "border-red-500" : ""}`}
                   placeholder="••••••••"
                 />
                 <button
@@ -312,7 +315,11 @@ function LoginForm() {
                   className="absolute right-3 top-3 h-4 w-4 text-gray-400 hover:text-gray-600"
                   onClick={() => setShowPassword(!showPassword)}
                 >
-                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                  {showPassword ? (
+                    <EyeOff className="h-4 w-4" />
+                  ) : (
+                    <Eye className="h-4 w-4" />
+                  )}
                 </button>
               </div>
               {errors.password && (
@@ -329,7 +336,9 @@ function LoginForm() {
                 <Checkbox
                   id="rememberMe"
                   checked={rememberMe}
-                  onCheckedChange={(checked) => setRememberMe(checked as boolean)}
+                  onCheckedChange={(checked) =>
+                    setRememberMe(checked as boolean)
+                  }
                 />
                 <Label htmlFor="rememberMe" className="text-sm text-gray-700">
                   Remember me
@@ -368,7 +377,7 @@ function LoginForm() {
           {/* Sign up link */}
           <div className="mt-6 text-center">
             <p className="text-sm text-gray-600">
-              Don't have an account?{' '}
+              Don't have an account?{" "}
               <Link
                 href="/auth/signup"
                 className="font-medium hover:opacity-80 transition-opacity"
@@ -404,7 +413,11 @@ function LoginForm() {
 
           {/* Back to home */}
           <Link href="/">
-            <Button variant="ghost" size="sm" className="text-gray-600 hover:text-gray-800">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-gray-600 hover:text-gray-800"
+            >
               <ArrowRight className="w-4 h-4 mr-2 rotate-180" />
               Back to Homepage
             </Button>
@@ -417,7 +430,13 @@ function LoginForm() {
 
 export default function LoginPage() {
   return (
-    <Suspense fallback={<div className="min-h-screen bg-gradient-to-br from-green-50 to-gray-50 flex items-center justify-center"><div className="animate-spin rounded-full h-32 w-32 border-b-2 border-green-600"></div></div>}>
+    <Suspense
+      fallback={
+        <div className="min-h-screen bg-gradient-to-br from-green-50 to-gray-50 flex items-center justify-center">
+          <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-green-600"></div>
+        </div>
+      }
+    >
       <LoginForm />
     </Suspense>
   );
diff --git a/nextjs_space/app/auth/reset-password/[token]/page.tsx b/nextjs_space/app/auth/reset-password/[token]/page.tsx
index f0002c3..a9f5cf0 100644
--- a/nextjs_space/app/auth/reset-password/[token]/page.tsx
+++ b/nextjs_space/app/auth/reset-password/[token]/page.tsx
@@ -1,48 +1,57 @@
-
-'use client';
-
-import React, { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Eye, EyeOff, Lock, CheckCircle } from 'lucide-react';
-
-export default function ResetPasswordPage({ params }: { params: { token: string } }) {
+"use client";
+
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Eye, EyeOff, Lock, CheckCircle } from "lucide-react";
+
+export default function ResetPasswordPage({
+  params,
+}: {
+  params: { token: string };
+}) {
   const router = useRouter();
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [loading, setLoading] = useState(false);
   const [success, setSuccess] = useState(false);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    setError('');
+    setError("");
 
     if (password.length < 8) {
-      setError('Password must be at least 8 characters');
+      setError("Password must be at least 8 characters");
       return;
     }
 
     if (password !== confirmPassword) {
-      setError('Passwords do not match');
+      setError("Passwords do not match");
       return;
     }
 
     setLoading(true);
 
     try {
-      const response = await fetch('/api/auth/reset-password/confirm', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ 
-          token: params.token, 
-          password 
+      const response = await fetch("/api/auth/reset-password/confirm", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          token: params.token,
+          password,
         }),
       });
 
@@ -51,14 +60,14 @@ export default function ResetPasswordPage({ params }: { params: { token: string
       if (response.ok) {
         setSuccess(true);
         setTimeout(() => {
-          router.push('/auth/login');
+          router.push("/auth/login");
         }, 2000);
       } else {
-        setError(data.error || 'Failed to reset password');
+        setError(data.error || "Failed to reset password");
       }
     } catch (error) {
-      console.error('Password reset error:', error);
-      setError('Failed to reset password. Please try again.');
+      console.error("Password reset error:", error);
+      setError("Failed to reset password. Please try again.");
     } finally {
       setLoading(false);
     }
@@ -87,9 +96,7 @@ export default function ResetPasswordPage({ params }: { params: { token: string
       <Card className="w-full max-w-md">
         <CardHeader>
           <CardTitle>Reset Your Password</CardTitle>
-          <CardDescription>
-            Enter your new password below.
-          </CardDescription>
+          <CardDescription>Enter your new password below.</CardDescription>
         </CardHeader>
         <CardContent>
           <form onSubmit={handleSubmit} className="space-y-4">
@@ -105,7 +112,7 @@ export default function ResetPasswordPage({ params }: { params: { token: string
                 <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                 <Input
                   id="password"
-                  type={showPassword ? 'text' : 'password'}
+                  type={showPassword ? "text" : "password"}
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
                   className="pl-10 pr-10"
@@ -118,10 +125,16 @@ export default function ResetPasswordPage({ params }: { params: { token: string
                   onClick={() => setShowPassword(!showPassword)}
                   className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
                 >
-                  {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                  {showPassword ? (
+                    <EyeOff className="w-4 h-4" />
+                  ) : (
+                    <Eye className="w-4 h-4" />
+                  )}
                 </button>
               </div>
-              <p className="text-xs text-gray-500">Must be at least 8 characters</p>
+              <p className="text-xs text-gray-500">
+                Must be at least 8 characters
+              </p>
             </div>
 
             <div className="space-y-2">
@@ -130,7 +143,7 @@ export default function ResetPasswordPage({ params }: { params: { token: string
                 <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                 <Input
                   id="confirmPassword"
-                  type={showConfirmPassword ? 'text' : 'password'}
+                  type={showConfirmPassword ? "text" : "password"}
                   value={confirmPassword}
                   onChange={(e) => setConfirmPassword(e.target.value)}
                   className="pl-10 pr-10"
@@ -142,21 +155,24 @@ export default function ResetPasswordPage({ params }: { params: { token: string
                   onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                   className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
                 >
-                  {showConfirmPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                  {showConfirmPassword ? (
+                    <EyeOff className="w-4 h-4" />
+                  ) : (
+                    <Eye className="w-4 h-4" />
+                  )}
                 </button>
               </div>
             </div>
 
-            <Button 
-              type="submit" 
-              className="w-full" 
-              disabled={loading}
-            >
-              {loading ? 'Resetting Password...' : 'Reset Password'}
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading ? "Resetting Password..." : "Reset Password"}
             </Button>
 
             <div className="text-center">
-              <Link href="/auth/login" className="text-sm text-green-600 hover:text-green-700">
+              <Link
+                href="/auth/login"
+                className="text-sm text-green-600 hover:text-green-700"
+              >
                 Back to Login
               </Link>
             </div>
diff --git a/nextjs_space/app/auth/signup/page.tsx b/nextjs_space/app/auth/signup/page.tsx
index 514e468..4147c8e 100644
--- a/nextjs_space/app/auth/signup/page.tsx
+++ b/nextjs_space/app/auth/signup/page.tsx
@@ -1,11 +1,11 @@
-import { redirect } from 'next/navigation';
+import { redirect } from "next/navigation";
 
 /**
  * Old Signup Route - Deprecated
- * 
+ *
  * All customer signups must go through tenant-specific consultation forms for KYC compliance.
  * This route redirects users to the homepage.
  */
 export default function SignupPage() {
-  redirect('/?message=Please visit your store to check eligibility');
+  redirect("/?message=Please visit your store to check eligibility");
 }
diff --git a/nextjs_space/app/onboarding/onboarding-form.tsx b/nextjs_space/app/onboarding/onboarding-form.tsx
index ac179a1..f3bf4d5 100644
--- a/nextjs_space/app/onboarding/onboarding-form.tsx
+++ b/nextjs_space/app/onboarding/onboarding-form.tsx
@@ -1,469 +1,562 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import { Badge } from '@/components/ui/badge';
-import { toast } from '@/components/ui/sonner';
-import { CheckCircle2, Store, Mail, Lock, Hash, Globe, MessageSquare, Loader2, ArrowRight, ArrowLeft, Palette, Eye, Check } from 'lucide-react';
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import { toast } from "@/components/ui/sonner";
+import {
+  CheckCircle2,
+  Store,
+  Mail,
+  Lock,
+  Hash,
+  Globe,
+  MessageSquare,
+  Loader2,
+  ArrowRight,
+  ArrowLeft,
+  Palette,
+  Eye,
+  Check,
+} from "lucide-react";
 
 interface Template {
-    id: string;
-    name: string;
-    description: string | null;
-    thumbnailUrl: string | null;
-    previewUrl: string | null;
+  id: string;
+  name: string;
+  description: string | null;
+  thumbnailUrl: string | null;
+  previewUrl: string | null;
 }
 
 // Fallback templates in case DB is empty
 const DEFAULT_TEMPLATES = [
-    {
-        id: 'modern',
-        name: 'Modern Green',
-        description: 'Clean and professional with green accents',
-        thumbnailUrl: null,
-        previewUrl: null,
-    }
+  {
+    id: "modern",
+    name: "Modern Green",
+    description: "Clean and professional with green accents",
+    thumbnailUrl: null,
+    previewUrl: null,
+  },
 ];
 
 interface OnboardingFormProps {
-    initialTemplates: Template[];
+  initialTemplates: Template[];
 }
 
-export default function OnboardingForm({ initialTemplates = [] }: OnboardingFormProps) {
-    const router = useRouter();
-    const [isLoading, setIsLoading] = useState(false);
-    const [currentStep, setCurrentStep] = useState(1);
-    const [formData, setFormData] = useState({
-        businessName: '',
-        email: '',
-        password: '',
-        subdomain: '',
-        nftTokenId: '',
-        countryCode: 'PT',
-        contactInfo: '',
-        templateId: initialTemplates[0]?.id || 'modern',
-    });
+export default function OnboardingForm({
+  initialTemplates = [],
+}: OnboardingFormProps) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentStep, setCurrentStep] = useState(1);
+  const [formData, setFormData] = useState({
+    businessName: "",
+    email: "",
+    password: "",
+    subdomain: "",
+    nftTokenId: "",
+    countryCode: "PT",
+    contactInfo: "",
+    templateId: initialTemplates[0]?.id || "modern",
+  });
+
+  const templates =
+    initialTemplates.length > 0 ? initialTemplates : DEFAULT_TEMPLATES;
+
+  const totalSteps = 4;
+
+  const handleSubmit = async () => {
+    setIsLoading(true);
+
+    try {
+      const res = await fetch("/api/onboarding", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(formData),
+      });
+
+      if (!res.ok) {
+        let errorMessage = "Failed to submit application";
+        try {
+          const error = await res.json();
+          errorMessage = error.error || errorMessage;
+        } catch (parseError) {
+          errorMessage = `Server error: ${res.status} ${res.statusText}`;
+        }
+        throw new Error(errorMessage);
+      }
+
+      const result = await res.json();
+      toast.success(
+        "Application submitted! We'll review your NFT and get back to you soon.",
+      );
+      router.push("/");
+    } catch (error: any) {
+      toast.error(error.message || "An unexpected error occurred");
+      console.error("Onboarding error:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const generateSubdomain = (name: string) => {
+    return name
+      .toLowerCase()
+      .replace(/[^a-z0-9]/g, "")
+      .slice(0, 20);
+  };
+
+  const validateStep = (step: number) => {
+    switch (step) {
+      case 1:
+        return formData.businessName && formData.subdomain;
+      case 2:
+        return formData.email && formData.password.length >= 6;
+      case 3:
+        return formData.nftTokenId && formData.countryCode;
+      case 4:
+        return formData.templateId;
+      default:
+        return false;
+    }
+  };
 
-    const templates = initialTemplates.length > 0 ? initialTemplates : DEFAULT_TEMPLATES;
+  const nextStep = () => {
+    if (validateStep(currentStep)) {
+      setCurrentStep(Math.min(currentStep + 1, totalSteps));
+    } else {
+      toast.error("Please fill in all required fields");
+    }
+  };
 
-    const totalSteps = 4;
+  const prevStep = () => {
+    setCurrentStep(Math.max(currentStep - 1, 1));
+  };
 
-    const handleSubmit = async () => {
-        setIsLoading(true);
+  const renderStepIndicator = () => {
+    const steps = [
+      { number: 1, title: "Business Info", icon: Store },
+      { number: 2, title: "Account Setup", icon: Mail },
+      { number: 3, title: "Verification", icon: Hash },
+      { number: 4, title: "Choose Template", icon: Palette },
+    ];
 
-        try {
-            const res = await fetch('/api/onboarding', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(formData),
-            });
-
-            if (!res.ok) {
-                let errorMessage = 'Failed to submit application';
-                try {
-                    const error = await res.json();
-                    errorMessage = error.error || errorMessage;
-                } catch (parseError) {
-                    errorMessage = `Server error: ${res.status} ${res.statusText}`;
-                }
-                throw new Error(errorMessage);
-            }
-
-            const result = await res.json();
-            toast.success('Application submitted! We\'ll review your NFT and get back to you soon.');
-            router.push('/');
-        } catch (error: any) {
-            toast.error(error.message || 'An unexpected error occurred');
-            console.error('Onboarding error:', error);
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const generateSubdomain = (name: string) => {
-        return name
-            .toLowerCase()
-            .replace(/[^a-z0-9]/g, '')
-            .slice(0, 20);
-    };
-
-    const validateStep = (step: number) => {
-        switch (step) {
-            case 1:
-                return formData.businessName && formData.subdomain;
-            case 2:
-                return formData.email && formData.password.length >= 6;
-            case 3:
-                return formData.nftTokenId && formData.countryCode;
-            case 4:
-                return formData.templateId;
-            default:
-                return false;
-        }
-    };
+    return (
+      <div className="mb-8">
+        <div className="flex items-center justify-between">
+          {steps.map((step, index) => {
+            const StepIcon = step.icon;
+            const isActive = currentStep === step.number;
+            const isCompleted = currentStep > step.number;
+
+            return (
+              <div key={step.number} className="flex items-center flex-1">
+                <div className="flex flex-col items-center">
+                  <div
+                    className={`flex items-center justify-center w-12 h-12 rounded-full border-2 transition-all ${
+                      isActive
+                        ? "bg-primary border-primary text-white"
+                        : isCompleted
+                          ? "bg-green-500 border-green-500 text-white"
+                          : "bg-gray-100 border-gray-300 text-gray-400"
+                    }`}
+                  >
+                    {isCompleted ? (
+                      <Check className="h-6 w-6" />
+                    ) : (
+                      <StepIcon className="h-6 w-6" />
+                    )}
+                  </div>
+                  <div className="mt-2 text-center">
+                    <div
+                      className={`text-sm font-medium ${
+                        isActive
+                          ? "text-primary"
+                          : isCompleted
+                            ? "text-green-600"
+                            : "text-gray-500"
+                      }`}
+                    >
+                      {step.title}
+                    </div>
+                  </div>
+                </div>
+                {index < steps.length - 1 && (
+                  <div
+                    className={`flex-1 h-0.5 mx-2 ${
+                      isCompleted ? "bg-green-500" : "bg-gray-300"
+                    }`}
+                  />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
 
-    const nextStep = () => {
-        if (validateStep(currentStep)) {
-            setCurrentStep(Math.min(currentStep + 1, totalSteps));
-        } else {
-            toast.error('Please fill in all required fields');
-        }
-    };
+  const renderStep = () => {
+    switch (currentStep) {
+      case 1:
+        return (
+          <div className="space-y-6">
+            <div>
+              <Label htmlFor="businessName" className="flex items-center gap-2">
+                <Store className="h-4 w-4" />
+                Business Name *
+              </Label>
+              <Input
+                id="businessName"
+                value={formData.businessName}
+                onChange={(e) => {
+                  const name = e.target.value;
+                  setFormData({
+                    ...formData,
+                    businessName: name,
+                    subdomain: generateSubdomain(name),
+                  });
+                }}
+                placeholder="e.g., Green Leaf Dispensary"
+                className="mt-2"
+              />
+              <p className="text-xs text-gray-500 mt-1">
+                The name of your dispensary
+              </p>
+            </div>
 
-    const prevStep = () => {
-        setCurrentStep(Math.max(currentStep - 1, 1));
-    };
+            <div>
+              <Label htmlFor="subdomain" className="flex items-center gap-2">
+                <Globe className="h-4 w-4" />
+                Store URL *
+              </Label>
+              <div className="flex items-center mt-2">
+                <Input
+                  id="subdomain"
+                  value={formData.subdomain}
+                  onChange={(e) =>
+                    setFormData({ ...formData, subdomain: e.target.value })
+                  }
+                  placeholder="yourstore"
+                  className="flex-1"
+                />
+                <span className="ml-2 text-gray-500 font-medium">
+                  .budstack.to
+                </span>
+              </div>
+              <p className="text-xs text-gray-500 mt-1">
+                Your unique store address:{" "}
+                <span className="font-mono text-primary">
+                  {formData.subdomain || "yourstore"}.budstack.to
+                </span>
+              </p>
+            </div>
 
-    const renderStepIndicator = () => {
-        const steps = [
-            { number: 1, title: 'Business Info', icon: Store },
-            { number: 2, title: 'Account Setup', icon: Mail },
-            { number: 3, title: 'Verification', icon: Hash },
-            { number: 4, title: 'Choose Template', icon: Palette },
-        ];
+            <div>
+              <Label htmlFor="contactInfo" className="flex items-center gap-2">
+                <MessageSquare className="h-4 w-4" />
+                Tell Us About Your Business
+              </Label>
+              <Textarea
+                id="contactInfo"
+                value={formData.contactInfo}
+                onChange={(e) =>
+                  setFormData({ ...formData, contactInfo: e.target.value })
+                }
+                placeholder="Location, specialties, target customers, etc."
+                rows={4}
+                className="mt-2"
+              />
+            </div>
+          </div>
+        );
 
+      case 2:
         return (
-            <div className="mb-8">
-                <div className="flex items-center justify-between">
-                    {steps.map((step, index) => {
-                        const StepIcon = step.icon;
-                        const isActive = currentStep === step.number;
-                        const isCompleted = currentStep > step.number;
-
-                        return (
-                            <div key={step.number} className="flex items-center flex-1">
-                                <div className="flex flex-col items-center">
-                                    <div
-                                        className={`flex items-center justify-center w-12 h-12 rounded-full border-2 transition-all ${isActive
-                                                ? 'bg-primary border-primary text-white'
-                                                : isCompleted
-                                                    ? 'bg-green-500 border-green-500 text-white'
-                                                    : 'bg-gray-100 border-gray-300 text-gray-400'
-                                            }`}
-                                    >
-                                        {isCompleted ? <Check className="h-6 w-6" /> : <StepIcon className="h-6 w-6" />}
-                                    </div>
-                                    <div className="mt-2 text-center">
-                                        <div
-                                            className={`text-sm font-medium ${isActive ? 'text-primary' : isCompleted ? 'text-green-600' : 'text-gray-500'
-                                                }`}
-                                        >
-                                            {step.title}
-                                        </div>
-                                    </div>
-                                </div>
-                                {index < steps.length - 1 && (
-                                    <div
-                                        className={`flex-1 h-0.5 mx-2 ${isCompleted ? 'bg-green-500' : 'bg-gray-300'
-                                            }`}
-                                    />
-                                )}
-                            </div>
-                        );
-                    })}
+          <div className="space-y-6">
+            <div>
+              <Label htmlFor="email" className="flex items-center gap-2">
+                <Mail className="h-4 w-4" />
+                Admin Email *
+              </Label>
+              <Input
+                id="email"
+                type="email"
+                value={formData.email}
+                onChange={(e) =>
+                  setFormData({ ...formData, email: e.target.value })
+                }
+                placeholder="admin@yourdispensary.com"
+                className="mt-2"
+              />
+              <p className="text-xs text-gray-500 mt-1">
+                You'll use this to sign in to your admin dashboard
+              </p>
+            </div>
+
+            <div>
+              <Label htmlFor="password" className="flex items-center gap-2">
+                <Lock className="h-4 w-4" />
+                Create Password *
+              </Label>
+              <Input
+                id="password"
+                type="password"
+                value={formData.password}
+                onChange={(e) =>
+                  setFormData({ ...formData, password: e.target.value })
+                }
+                minLength={6}
+                placeholder="Minimum 6 characters"
+                className="mt-2"
+              />
+              <div className="mt-2 space-y-1">
+                <div
+                  className={`text-xs flex items-center gap-2 ${formData.password.length >= 6 ? "text-green-600" : "text-gray-400"}`}
+                >
+                  <CheckCircle2 className="h-3 w-3" />
+                  At least 6 characters
                 </div>
+              </div>
             </div>
+          </div>
         );
-    };
-
-    const renderStep = () => {
-        switch (currentStep) {
-            case 1:
-                return (
-                    <div className="space-y-6">
-                        <div>
-                            <Label htmlFor="businessName" className="flex items-center gap-2">
-                                <Store className="h-4 w-4" />
-                                Business Name *
-                            </Label>
-                            <Input
-                                id="businessName"
-                                value={formData.businessName}
-                                onChange={(e) => {
-                                    const name = e.target.value;
-                                    setFormData({
-                                        ...formData,
-                                        businessName: name,
-                                        subdomain: generateSubdomain(name),
-                                    });
-                                }}
-                                placeholder="e.g., Green Leaf Dispensary"
-                                className="mt-2"
-                            />
-                            <p className="text-xs text-gray-500 mt-1">The name of your dispensary</p>
-                        </div>
-
-                        <div>
-                            <Label htmlFor="subdomain" className="flex items-center gap-2">
-                                <Globe className="h-4 w-4" />
-                                Store URL *
-                            </Label>
-                            <div className="flex items-center mt-2">
-                                <Input
-                                    id="subdomain"
-                                    value={formData.subdomain}
-                                    onChange={(e) => setFormData({ ...formData, subdomain: e.target.value })}
-                                    placeholder="yourstore"
-                                    className="flex-1"
-                                />
-                                <span className="ml-2 text-gray-500 font-medium">.budstack.to</span>
-                            </div>
-                            <p className="text-xs text-gray-500 mt-1">
-                                Your unique store address: <span className="font-mono text-primary">{formData.subdomain || 'yourstore'}.budstack.to</span>
-                            </p>
-                        </div>
 
-                        <div>
-                            <Label htmlFor="contactInfo" className="flex items-center gap-2">
-                                <MessageSquare className="h-4 w-4" />
-                                Tell Us About Your Business
-                            </Label>
-                            <Textarea
-                                id="contactInfo"
-                                value={formData.contactInfo}
-                                onChange={(e) => setFormData({ ...formData, contactInfo: e.target.value })}
-                                placeholder="Location, specialties, target customers, etc."
-                                rows={4}
-                                className="mt-2"
-                            />
-                        </div>
-                    </div>
-                );
-
-            case 2:
-                return (
-                    <div className="space-y-6">
-                        <div>
-                            <Label htmlFor="email" className="flex items-center gap-2">
-                                <Mail className="h-4 w-4" />
-                                Admin Email *
-                            </Label>
-                            <Input
-                                id="email"
-                                type="email"
-                                value={formData.email}
-                                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-                                placeholder="admin@yourdispensary.com"
-                                className="mt-2"
-                            />
-                            <p className="text-xs text-gray-500 mt-1">You'll use this to sign in to your admin dashboard</p>
-                        </div>
+      case 3:
+        return (
+          <div className="space-y-6">
+            <div>
+              <Label htmlFor="nftTokenId" className="flex items-center gap-2">
+                <Hash className="h-4 w-4" />
+                NFT Token ID *
+              </Label>
+              <Input
+                id="nftTokenId"
+                value={formData.nftTokenId}
+                onChange={(e) =>
+                  setFormData({ ...formData, nftTokenId: e.target.value })
+                }
+                placeholder="Enter your NFT token ID"
+                className="mt-2"
+              />
+              <div className="mt-3 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+                <h4 className="text-sm font-semibold text-blue-900 mb-2">
+                  📝 About NFT Verification
+                </h4>
+                <ul className="text-xs text-blue-800 space-y-1">
+                  <li>
+                    ✓ We'll verify your NFT ownership to activate your store
+                  </li>
+                  <li>
+                    ✓ This ensures only licensed operators use the platform
+                  </li>
+                  <li>
+                    ✓ Your store will be ready once verification is complete
+                  </li>
+                </ul>
+              </div>
+            </div>
 
-                        <div>
-                            <Label htmlFor="password" className="flex items-center gap-2">
-                                <Lock className="h-4 w-4" />
-                                Create Password *
-                            </Label>
-                            <Input
-                                id="password"
-                                type="password"
-                                value={formData.password}
-                                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
-                                minLength={6}
-                                placeholder="Minimum 6 characters"
-                                className="mt-2"
-                            />
-                            <div className="mt-2 space-y-1">
-                                <div className={`text-xs flex items-center gap-2 ${formData.password.length >= 6 ? 'text-green-600' : 'text-gray-400'}`}>
-                                    <CheckCircle2 className="h-3 w-3" />
-                                    At least 6 characters
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                );
-
-            case 3:
-                return (
-                    <div className="space-y-6">
-                        <div>
-                            <Label htmlFor="nftTokenId" className="flex items-center gap-2">
-                                <Hash className="h-4 w-4" />
-                                NFT Token ID *
-                            </Label>
-                            <Input
-                                id="nftTokenId"
-                                value={formData.nftTokenId}
-                                onChange={(e) => setFormData({ ...formData, nftTokenId: e.target.value })}
-                                placeholder="Enter your NFT token ID"
-                                className="mt-2"
-                            />
-                            <div className="mt-3 p-4 bg-blue-50 border border-blue-200 rounded-lg">
-                                <h4 className="text-sm font-semibold text-blue-900 mb-2">📝 About NFT Verification</h4>
-                                <ul className="text-xs text-blue-800 space-y-1">
-                                    <li>✓ We'll verify your NFT ownership to activate your store</li>
-                                    <li>✓ This ensures only licensed operators use the platform</li>
-                                    <li>✓ Your store will be ready once verification is complete</li>
-                                </ul>
-                            </div>
-                        </div>
+            <div>
+              <Label htmlFor="countryCode" className="flex items-center gap-2">
+                <Globe className="h-4 w-4" />
+                Operating Country *
+              </Label>
+              <select
+                id="countryCode"
+                value={formData.countryCode}
+                onChange={(e) =>
+                  setFormData({ ...formData, countryCode: e.target.value })
+                }
+                className="w-full px-3 py-2 mt-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent bg-white"
+              >
+                <option value="PT">Portugal 🇵🇹</option>
+                <option value="SA">South Africa 🇿🇦</option>
+                <option value="UK">United Kingdom 🇬🇧</option>
+                <option value="DE">Germany 🇩🇪</option>
+                <option value="ES">Spain 🇪🇸</option>
+                <option value="FR">France 🇫🇷</option>
+                <option value="IT">Italy 🇮🇹</option>
+                <option value="NL">Netherlands 🇳🇱</option>
+                <option value="BE">Belgium 🇧🇪</option>
+                <option value="AT">Austria 🇦🇹</option>
+                <option value="IE">Ireland 🇮🇪</option>
+                <option value="CH">Switzerland 🇨🇭</option>
+                <option value="US">United States 🇺🇸</option>
+                <option value="CA">Canada 🇨🇦</option>
+                <option value="AU">Australia 🇦🇺</option>
+              </select>
+              <p className="text-xs text-gray-500 mt-1">
+                This affects currency, regulations, and localization
+              </p>
+            </div>
+          </div>
+        );
 
-                        <div>
-                            <Label htmlFor="countryCode" className="flex items-center gap-2">
-                                <Globe className="h-4 w-4" />
-                                Operating Country *
-                            </Label>
-                            <select
-                                id="countryCode"
-                                value={formData.countryCode}
-                                onChange={(e) => setFormData({ ...formData, countryCode: e.target.value })}
-                                className="w-full px-3 py-2 mt-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent bg-white"
-                            >
-                                <option value="PT">Portugal 🇵🇹</option>
-                                <option value="SA">South Africa 🇿🇦</option>
-                                <option value="UK">United Kingdom 🇬🇧</option>
-                                <option value="DE">Germany 🇩🇪</option>
-                                <option value="ES">Spain 🇪🇸</option>
-                                <option value="FR">France 🇫🇷</option>
-                                <option value="IT">Italy 🇮🇹</option>
-                                <option value="NL">Netherlands 🇳🇱</option>
-                                <option value="BE">Belgium 🇧🇪</option>
-                                <option value="AT">Austria 🇦🇹</option>
-                                <option value="IE">Ireland 🇮🇪</option>
-                                <option value="CH">Switzerland 🇨🇭</option>
-                                <option value="US">United States 🇺🇸</option>
-                                <option value="CA">Canada 🇨🇦</option>
-                                <option value="AU">Australia 🇦🇺</option>
-                            </select>
-                            <p className="text-xs text-gray-500 mt-1">This affects currency, regulations, and localization</p>
-                        </div>
-                    </div>
-                );
-
-            case 4:
-                const selectedTemplate = templates.find((t) => t.id === formData.templateId);
-                return (
-                    <div className="space-y-6">
-                        <div>
-                            <h3 className="text-lg font-semibold mb-4">Choose Your Store Template</h3>
-                            <div className="grid grid-cols-2 gap-4">
-                                {templates.map((template) => (
-                                    <button
-                                        key={template.id}
-                                        type="button"
-                                        onClick={() => setFormData({ ...formData, templateId: template.id })}
-                                        className={`p-4 border-2 rounded-lg text-left transition-all hover:shadow-lg ${formData.templateId === template.id
-                                                ? 'border-primary bg-primary/5'
-                                                : 'border-gray-200 hover:border-gray-300'
-                                            }`}
-                                    >
-                                        <div className="flex items-center gap-3 mb-3">
-                                            {template.thumbnailUrl ? (
-                                                <img
-                                                    src={template.thumbnailUrl}
-                                                    alt={template.name}
-                                                    className="w-12 h-12 object-cover rounded-lg"
-                                                />
-                                            ) : (
-                                                <div className="w-12 h-12 rounded-lg bg-slate-100 flex items-center justify-center">
-                                                    <Palette className="h-6 w-6 text-slate-400" />
-                                                </div>
-                                            )}
-                                            <div className="flex-1">
-                                                <div className="font-semibold">{template.name}</div>
-                                                {formData.templateId === template.id && (
-                                                    <Badge className="mt-1">Selected</Badge>
-                                                )}
-                                            </div>
-                                        </div>
-                                        <p className="text-sm text-gray-600 line-clamp-2">{template.description}</p>
-                                    </button>
-                                ))}
-                            </div>
+      case 4:
+        const selectedTemplate = templates.find(
+          (t) => t.id === formData.templateId,
+        );
+        return (
+          <div className="space-y-6">
+            <div>
+              <h3 className="text-lg font-semibold mb-4">
+                Choose Your Store Template
+              </h3>
+              <div className="grid grid-cols-2 gap-4">
+                {templates.map((template) => (
+                  <button
+                    key={template.id}
+                    type="button"
+                    onClick={() =>
+                      setFormData({ ...formData, templateId: template.id })
+                    }
+                    className={`p-4 border-2 rounded-lg text-left transition-all hover:shadow-lg ${
+                      formData.templateId === template.id
+                        ? "border-primary bg-primary/5"
+                        : "border-gray-200 hover:border-gray-300"
+                    }`}
+                  >
+                    <div className="flex items-center gap-3 mb-3">
+                      {template.thumbnailUrl ? (
+                        <img
+                          src={template.thumbnailUrl}
+                          alt={template.name}
+                          className="w-12 h-12 object-cover rounded-lg"
+                        />
+                      ) : (
+                        <div className="w-12 h-12 rounded-lg bg-slate-100 flex items-center justify-center">
+                          <Palette className="h-6 w-6 text-slate-400" />
                         </div>
-
-                        {selectedTemplate && (
-                            <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
-                                <h4 className="text-sm font-semibold text-green-900 mb-2 flex items-center gap-2">
-                                    <Eye className="h-4 w-4" />
-                                    Preview: {selectedTemplate.name}
-                                </h4>
-                                {selectedTemplate.previewUrl && (
-                                    <div className="mt-2 aspect-video rounded-lg overflow-hidden border border-green-100">
-                                        <img src={selectedTemplate.previewUrl} alt="Preview" className="w-full h-full object-cover" />
-                                    </div>
-                                )}
-                                <p className="text-xs text-green-800 mt-3">
-                                    You can customize everything later from your admin dashboard.
-                                </p>
-                            </div>
+                      )}
+                      <div className="flex-1">
+                        <div className="font-semibold">{template.name}</div>
+                        {formData.templateId === template.id && (
+                          <Badge className="mt-1">Selected</Badge>
                         )}
+                      </div>
                     </div>
-                );
+                    <p className="text-sm text-gray-600 line-clamp-2">
+                      {template.description}
+                    </p>
+                  </button>
+                ))}
+              </div>
+            </div>
 
-            default:
-                return null;
-        }
-    };
+            {selectedTemplate && (
+              <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
+                <h4 className="text-sm font-semibold text-green-900 mb-2 flex items-center gap-2">
+                  <Eye className="h-4 w-4" />
+                  Preview: {selectedTemplate.name}
+                </h4>
+                {selectedTemplate.previewUrl && (
+                  <div className="mt-2 aspect-video rounded-lg overflow-hidden border border-green-100">
+                    <img
+                      src={selectedTemplate.previewUrl}
+                      alt="Preview"
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                )}
+                <p className="text-xs text-green-800 mt-3">
+                  You can customize everything later from your admin dashboard.
+                </p>
+              </div>
+            )}
+          </div>
+        );
 
-    return (
-        <div className="min-h-screen bg-gradient-to-b from-green-50 to-white py-12 px-4">
-            <div className="max-w-3xl mx-auto">
-                <div className="text-center mb-8">
-                    <h1 className="text-4xl font-bold text-gray-900 mb-2">Join BudStack</h1>
-                    <p className="text-lg text-gray-600">Launch your medical cannabis dispensary in minutes</p>
-                </div>
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-green-50 to-white py-12 px-4">
+      <div className="max-w-3xl mx-auto">
+        <div className="text-center mb-8">
+          <h1 className="text-4xl font-bold text-gray-900 mb-2">
+            Join BudStack
+          </h1>
+          <p className="text-lg text-gray-600">
+            Launch your medical cannabis dispensary in minutes
+          </p>
+        </div>
 
-                <Card>
-                    <CardHeader>
-                        <CardTitle>New Tenant Application</CardTitle>
-                        <CardDescription>
-                            Complete the steps below to create your dispensary store
-                        </CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                        {renderStepIndicator()}
-                        <div className="min-h-[400px]">{renderStep()}</div>
-                        <div className="flex justify-between mt-8 pt-6 border-t">
-                            <Button
-                                type="button"
-                                variant="outline"
-                                onClick={prevStep}
-                                disabled={currentStep === 1 || isLoading}
-                            >
-                                <ArrowLeft className="mr-2 h-4 w-4" />
-                                Previous
-                            </Button>
-
-                            {currentStep < totalSteps ? (
-                                <Button type="button" onClick={nextStep} disabled={!validateStep(currentStep)}>
-                                    Next Step
-                                    <ArrowRight className="ml-2 h-4 w-4" />
-                                </Button>
-                            ) : (
-                                <Button onClick={handleSubmit} disabled={isLoading}>
-                                    {isLoading ? (
-                                        <>
-                                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                                            Submitting...
-                                        </>
-                                    ) : (
-                                        <>
-                                            <CheckCircle2 className="mr-2 h-4 w-4" />
-                                            Submit Application
-                                        </>
-                                    )}
-                                </Button>
-                            )}
-                        </div>
-                    </CardContent>
-                </Card>
-
-                <div className="mt-6 text-center">
-                    <p className="text-sm text-gray-600">
-                        Already have an account?{' '}
-                        <Link href="/auth/login" className="text-primary hover:underline font-medium">
-                            Sign in
-                        </Link>
-                    </p>
-                </div>
+        <Card>
+          <CardHeader>
+            <CardTitle>New Tenant Application</CardTitle>
+            <CardDescription>
+              Complete the steps below to create your dispensary store
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {renderStepIndicator()}
+            <div className="min-h-[400px]">{renderStep()}</div>
+            <div className="flex justify-between mt-8 pt-6 border-t">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={prevStep}
+                disabled={currentStep === 1 || isLoading}
+              >
+                <ArrowLeft className="mr-2 h-4 w-4" />
+                Previous
+              </Button>
+
+              {currentStep < totalSteps ? (
+                <Button
+                  type="button"
+                  onClick={nextStep}
+                  disabled={!validateStep(currentStep)}
+                >
+                  Next Step
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Button>
+              ) : (
+                <Button onClick={handleSubmit} disabled={isLoading}>
+                  {isLoading ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Submitting...
+                    </>
+                  ) : (
+                    <>
+                      <CheckCircle2 className="mr-2 h-4 w-4" />
+                      Submit Application
+                    </>
+                  )}
+                </Button>
+              )}
             </div>
+          </CardContent>
+        </Card>
+
+        <div className="mt-6 text-center">
+          <p className="text-sm text-gray-600">
+            Already have an account?{" "}
+            <Link
+              href="/auth/login"
+              className="text-primary hover:underline font-medium"
+            >
+              Sign in
+            </Link>
+          </p>
         </div>
-    );
+      </div>
+    </div>
+  );
 }
diff --git a/nextjs_space/app/onboarding/page.tsx b/nextjs_space/app/onboarding/page.tsx
index d4ee146..79279f4 100644
--- a/nextjs_space/app/onboarding/page.tsx
+++ b/nextjs_space/app/onboarding/page.tsx
@@ -1,8 +1,8 @@
-import { prisma } from '@/lib/db';
-import OnboardingForm from './onboarding-form';
+import { prisma } from "@/lib/db";
+import OnboardingForm from "./onboarding-form";
 
 // Force dynamic rendering to ensure fresh template data
-export const dynamic = 'force-dynamic';
+export const dynamic = "force-dynamic";
 
 export default async function OnboardingPage() {
   // Fetch active, public templates from the database
@@ -19,7 +19,7 @@ export default async function OnboardingPage() {
       previewUrl: true,
     },
     orderBy: {
-      name: 'asc',
+      name: "asc",
     },
   });
 
diff --git a/nextjs_space/app/tenant-admin/analytics/page.tsx b/nextjs_space/app/tenant-admin/analytics/page.tsx
index 5bc7221..f512519 100644
--- a/nextjs_space/app/tenant-admin/analytics/page.tsx
+++ b/nextjs_space/app/tenant-admin/analytics/page.tsx
@@ -1,12 +1,18 @@
-'use client';
-
-import { useSession } from 'next-auth/react';
-import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import dynamic from 'next/dynamic';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
+"use client";
+
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import dynamic from "next/dynamic";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
 import {
   TrendingUp,
   DollarSign,
@@ -17,11 +23,11 @@ import {
   Leaf,
   Calendar,
   ArrowUpRight,
-  ShoppingBag
-} from 'lucide-react';
-import { Breadcrumbs } from '@/components/admin/shared';
-import Link from 'next/link';
-import { cn } from '@/lib/utils';
+  ShoppingBag,
+} from "lucide-react";
+import { Breadcrumbs } from "@/components/admin/shared";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
 import {
   LineChart,
   Line,
@@ -36,11 +42,13 @@ import {
   PieChart,
   Pie,
   Cell,
-} from 'recharts';
+} from "recharts";
 
 // Dynamic import for Plotly to avoid SSR issues
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Plot = dynamic(() => import('react-plotly.js') as any, { ssr: false }) as any;
+const Plot = dynamic(() => import("react-plotly.js") as any, {
+  ssr: false,
+}) as any;
 
 interface AnalyticsData {
   totalProducts: number;
@@ -70,7 +78,7 @@ interface RecentOrder {
   orderNumber: string;
   customer: string;
   total: number;
-  status: 'PENDING' | 'PROCESSING' | 'COMPLETED' | 'CANCELLED';
+  status: "PENDING" | "PROCESSING" | "COMPLETED" | "CANCELLED";
   createdAt: Date;
 }
 
@@ -94,59 +102,136 @@ const generateSalesTrendData = () => {
     const weekendBoost = [0, 6].includes(date.getDay()) ? 200 : 0;
     baseValue += Math.random() * 100 - 50;
     data.push({
-      date: date.toISOString().split('T')[0],
-      sales: Math.max(200, baseValue + variance + weekendBoost)
+      date: date.toISOString().split("T")[0],
+      sales: Math.max(200, baseValue + variance + weekendBoost),
     });
   }
 
   return data;
 };
 
-const getRevenueMetrics = (analytics: AnalyticsData | null): RevenueMetric[] => {
+const getRevenueMetrics = (
+  analytics: AnalyticsData | null,
+): RevenueMetric[] => {
   if (!analytics) {
     return [
-      { label: "Today's Revenue", value: 0, change: 0, period: 'vs yesterday' },
-      { label: "This Week", value: 0, change: 0, period: 'vs last week' },
-      { label: "This Month", value: 0, change: 0, period: 'vs last month' }
+      { label: "Today's Revenue", value: 0, change: 0, period: "vs yesterday" },
+      { label: "This Week", value: 0, change: 0, period: "vs last week" },
+      { label: "This Month", value: 0, change: 0, period: "vs last month" },
     ];
   }
 
   return [
-    { label: "Today's Revenue", value: analytics.recentRevenue * 0.1, change: 12.5, period: 'vs yesterday' },
-    { label: "This Week", value: analytics.recentRevenue * 0.7, change: 8.3, period: 'vs last week' },
-    { label: "This Month", value: analytics.totalRevenue, change: 15.7, period: 'vs last month' }
+    {
+      label: "Today's Revenue",
+      value: analytics.recentRevenue * 0.1,
+      change: 12.5,
+      period: "vs yesterday",
+    },
+    {
+      label: "This Week",
+      value: analytics.recentRevenue * 0.7,
+      change: 8.3,
+      period: "vs last week",
+    },
+    {
+      label: "This Month",
+      value: analytics.totalRevenue,
+      change: 15.7,
+      period: "vs last month",
+    },
   ];
 };
 
 const generateRecentOrders = (): RecentOrder[] => [
-  { id: '1', orderNumber: 'ORD-1247', customer: 'Sarah Chen', total: 85.50, status: 'COMPLETED', createdAt: new Date(Date.now() - 1000 * 60 * 15) },
-  { id: '2', orderNumber: 'ORD-1246', customer: 'Marcus Johnson', total: 120.00, status: 'PROCESSING', createdAt: new Date(Date.now() - 1000 * 60 * 45) },
-  { id: '3', orderNumber: 'ORD-1245', customer: 'Emma Williams', total: 65.75, status: 'COMPLETED', createdAt: new Date(Date.now() - 1000 * 60 * 120) },
-  { id: '4', orderNumber: 'ORD-1244', customer: 'David Park', total: 95.25, status: 'PENDING', createdAt: new Date(Date.now() - 1000 * 60 * 180) },
-  { id: '5', orderNumber: 'ORD-1243', customer: 'Lisa Anderson', total: 110.00, status: 'COMPLETED', createdAt: new Date(Date.now() - 1000 * 60 * 240) }
+  {
+    id: "1",
+    orderNumber: "ORD-1247",
+    customer: "Sarah Chen",
+    total: 85.5,
+    status: "COMPLETED",
+    createdAt: new Date(Date.now() - 1000 * 60 * 15),
+  },
+  {
+    id: "2",
+    orderNumber: "ORD-1246",
+    customer: "Marcus Johnson",
+    total: 120.0,
+    status: "PROCESSING",
+    createdAt: new Date(Date.now() - 1000 * 60 * 45),
+  },
+  {
+    id: "3",
+    orderNumber: "ORD-1245",
+    customer: "Emma Williams",
+    total: 65.75,
+    status: "COMPLETED",
+    createdAt: new Date(Date.now() - 1000 * 60 * 120),
+  },
+  {
+    id: "4",
+    orderNumber: "ORD-1244",
+    customer: "David Park",
+    total: 95.25,
+    status: "PENDING",
+    createdAt: new Date(Date.now() - 1000 * 60 * 180),
+  },
+  {
+    id: "5",
+    orderNumber: "ORD-1243",
+    customer: "Lisa Anderson",
+    total: 110.0,
+    status: "COMPLETED",
+    createdAt: new Date(Date.now() - 1000 * 60 * 240),
+  },
 ];
 
 const generateRecentCustomers = (): RecentCustomer[] => [
-  { id: '1', name: 'Alex Thompson', email: 'alex.t@email.com', createdAt: new Date(Date.now() - 1000 * 60 * 30) },
-  { id: '2', name: 'Jordan Lee', email: 'jordan.lee@email.com', createdAt: new Date(Date.now() - 1000 * 60 * 120) },
-  { id: '3', name: 'Taylor Martinez', email: 'taylor.m@email.com', createdAt: new Date(Date.now() - 1000 * 60 * 360) },
-  { id: '4', name: 'Morgan Davis', email: 'morgan.d@email.com', createdAt: new Date(Date.now() - 1000 * 60 * 480) },
-  { id: '5', name: 'Casey Wilson', email: 'casey.w@email.com', createdAt: new Date(Date.now() - 1000 * 60 * 720) }
+  {
+    id: "1",
+    name: "Alex Thompson",
+    email: "alex.t@email.com",
+    createdAt: new Date(Date.now() - 1000 * 60 * 30),
+  },
+  {
+    id: "2",
+    name: "Jordan Lee",
+    email: "jordan.lee@email.com",
+    createdAt: new Date(Date.now() - 1000 * 60 * 120),
+  },
+  {
+    id: "3",
+    name: "Taylor Martinez",
+    email: "taylor.m@email.com",
+    createdAt: new Date(Date.now() - 1000 * 60 * 360),
+  },
+  {
+    id: "4",
+    name: "Morgan Davis",
+    email: "morgan.d@email.com",
+    createdAt: new Date(Date.now() - 1000 * 60 * 480),
+  },
+  {
+    id: "5",
+    name: "Casey Wilson",
+    email: "casey.w@email.com",
+    createdAt: new Date(Date.now() - 1000 * 60 * 720),
+  },
 ];
 
 const formatCurrency = (amount: number) => {
-  return new Intl.NumberFormat('pt-PT', {
-    style: 'currency',
-    currency: 'EUR'
+  return new Intl.NumberFormat("pt-PT", {
+    style: "currency",
+    currency: "EUR",
   }).format(amount);
 };
 
 const getStatusColor = (status: string) => {
   const colors = {
-    COMPLETED: 'bg-emerald-100 text-emerald-800 border-emerald-200',
-    PROCESSING: 'bg-cyan-100 text-cyan-800 border-cyan-200',
-    PENDING: 'bg-amber-100 text-amber-800 border-amber-200',
-    CANCELLED: 'bg-slate-100 text-slate-800 border-slate-200'
+    COMPLETED: "bg-emerald-100 text-emerald-800 border-emerald-200",
+    PROCESSING: "bg-cyan-100 text-cyan-800 border-cyan-200",
+    PENDING: "bg-amber-100 text-amber-800 border-amber-200",
+    CANCELLED: "bg-slate-100 text-slate-800 border-slate-200",
   };
   return colors[status as keyof typeof colors] || colors.PENDING;
 };
@@ -154,7 +239,7 @@ const getStatusColor = (status: string) => {
 const formatTimeAgo = (date: Date) => {
   const seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000);
 
-  if (seconds < 60) return 'just now';
+  if (seconds < 60) return "just now";
   if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
   if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
   return `${Math.floor(seconds / 86400)}d ago`;
@@ -162,9 +247,9 @@ const formatTimeAgo = (date: Date) => {
 
 const getInitials = (name: string) => {
   return name
-    .split(' ')
-    .map(n => n[0])
-    .join('')
+    .split(" ")
+    .map((n) => n[0])
+    .join("")
     .toUpperCase()
     .slice(0, 2);
 };
@@ -176,18 +261,18 @@ export default function TenantAnalyticsPage() {
   const router = useRouter();
   const [loading, setLoading] = useState(true);
   const [analytics, setAnalytics] = useState<AnalyticsData | null>(null);
-  const [timeRange, setTimeRange] = useState<'7d' | '30d' | '90d'>('30d');
+  const [timeRange, setTimeRange] = useState<"7d" | "30d" | "90d">("30d");
   const [salesTrendData, setSalesTrendData] = useState<any[]>([]);
   const [recentOrders, setRecentOrders] = useState<RecentOrder[]>([]);
   const [recentCustomers, setRecentCustomers] = useState<RecentCustomer[]>([]);
   const [pendingConsultations] = useState(7);
 
   useEffect(() => {
-    if (status === 'unauthenticated') {
-      router.push('/auth/login');
+    if (status === "unauthenticated") {
+      router.push("/auth/login");
     }
-    if (status === 'authenticated' && session?.user?.role !== 'TENANT_ADMIN') {
-      router.push('/');
+    if (status === "authenticated" && session?.user?.role !== "TENANT_ADMIN") {
+      router.push("/");
     }
   }, [status, session, router]);
 
@@ -206,91 +291,111 @@ export default function TenantAnalyticsPage() {
 
   const fetchAnalytics = async () => {
     try {
-      const response = await fetch(`/api/tenant-admin/analytics?timeRange=${timeRange}`);
+      const response = await fetch(
+        `/api/tenant-admin/analytics?timeRange=${timeRange}`,
+      );
       if (response.ok) {
         const data = await response.json();
         setAnalytics(data);
       } else {
-        console.error('API error:', response.status, response.statusText);
+        console.error("API error:", response.status, response.statusText);
         // Use mock data if API fails
         setAnalytics({
           totalProducts: 10,
           totalOrders: 25,
           totalCustomers: 15,
-          totalRevenue: 2500.00,
+          totalRevenue: 2500.0,
           recentOrders: 8,
           recentCustomers: 5,
-          recentRevenue: 850.00,
-          avgOrderValue: 100.00,
+          recentRevenue: 850.0,
+          avgOrderValue: 100.0,
           revenueByDay: Array.from({ length: 7 }, (_, i) => ({
             date: `Day ${i + 1}`,
-            revenue: Math.random() * 500 + 200
+            revenue: Math.random() * 500 + 200,
           })),
           ordersByDay: Array.from({ length: 7 }, (_, i) => ({
             date: `Day ${i + 1}`,
-            orders: Math.floor(Math.random() * 10) + 1
+            orders: Math.floor(Math.random() * 10) + 1,
           })),
           topProducts: [
-            { id: '1', name: 'Product 1', quantity: 15, revenue: 450, orders: 8 },
-            { id: '2', name: 'Product 2', quantity: 12, revenue: 360, orders: 6 },
-            { id: '3', name: 'Product 3', quantity: 10, revenue: 300, orders: 5 },
+            {
+              id: "1",
+              name: "Product 1",
+              quantity: 15,
+              revenue: 450,
+              orders: 8,
+            },
+            {
+              id: "2",
+              name: "Product 2",
+              quantity: 12,
+              revenue: 360,
+              orders: 6,
+            },
+            {
+              id: "3",
+              name: "Product 3",
+              quantity: 10,
+              revenue: 300,
+              orders: 5,
+            },
           ],
           customerGrowth: Array.from({ length: 7 }, (_, i) => ({
             date: `Day ${i + 1}`,
-            customers: Math.floor(Math.random() * 5)
+            customers: Math.floor(Math.random() * 5),
           })),
           ordersByStatus: [
-            { name: 'COMPLETED', value: 15 },
-            { name: 'PROCESSING', value: 5 },
-            { name: 'PENDING', value: 3 },
-            { name: 'CANCELLED', value: 2 }
-          ]
+            { name: "COMPLETED", value: 15 },
+            { name: "PROCESSING", value: 5 },
+            { name: "PENDING", value: 3 },
+            { name: "CANCELLED", value: 2 },
+          ],
         });
       }
     } catch (error) {
-      console.error('Error fetching analytics:', error);
+      console.error("Error fetching analytics:", error);
       // Use mock data on error
       setAnalytics({
         totalProducts: 10,
         totalOrders: 25,
         totalCustomers: 15,
-        totalRevenue: 2500.00,
+        totalRevenue: 2500.0,
         recentOrders: 8,
         recentCustomers: 5,
-        recentRevenue: 850.00,
-        avgOrderValue: 100.00,
+        recentRevenue: 850.0,
+        avgOrderValue: 100.0,
         revenueByDay: Array.from({ length: 7 }, (_, i) => ({
           date: `Day ${i + 1}`,
-          revenue: Math.random() * 500 + 200
+          revenue: Math.random() * 500 + 200,
         })),
         ordersByDay: Array.from({ length: 7 }, (_, i) => ({
           date: `Day ${i + 1}`,
-          orders: Math.floor(Math.random() * 10) + 1
+          orders: Math.floor(Math.random() * 10) + 1,
         })),
         topProducts: [
-          { id: '1', name: 'Product 1', quantity: 15, revenue: 450, orders: 8 },
-          { id: '2', name: 'Product 2', quantity: 12, revenue: 360, orders: 6 },
-          { id: '3', name: 'Product 3', quantity: 10, revenue: 300, orders: 5 },
+          { id: "1", name: "Product 1", quantity: 15, revenue: 450, orders: 8 },
+          { id: "2", name: "Product 2", quantity: 12, revenue: 360, orders: 6 },
+          { id: "3", name: "Product 3", quantity: 10, revenue: 300, orders: 5 },
         ],
         customerGrowth: Array.from({ length: 7 }, (_, i) => ({
           date: `Day ${i + 1}`,
-          customers: Math.floor(Math.random() * 5)
+          customers: Math.floor(Math.random() * 5),
         })),
         ordersByStatus: [
-          { name: 'COMPLETED', value: 15 },
-          { name: 'PROCESSING', value: 5 },
-          { name: 'PENDING', value: 3 },
-          { name: 'CANCELLED', value: 2 }
-        ]
+          { name: "COMPLETED", value: 15 },
+          { name: "PROCESSING", value: 5 },
+          { name: "PENDING", value: 3 },
+          { name: "CANCELLED", value: 2 },
+        ],
       });
     } finally {
       setLoading(false);
     }
   };
 
-  const COLORS = ['#10b981', '#3b82f6', '#f59e0b', '#ef4444', '#8b5cf6'];
+  const COLORS = ["#10b981", "#3b82f6", "#f59e0b", "#ef4444", "#8b5cf6"];
 
-  if (status === 'loading' || loading) {
+  if (status === "loading" || loading) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-emerald-50 via-white to-cyan-50">
         <div className="text-center">
@@ -298,7 +403,9 @@ export default function TenantAnalyticsPage() {
             <div className="absolute inset-0 border-4 border-emerald-200 rounded-full"></div>
             <div className="absolute inset-0 border-4 border-emerald-600 border-t-transparent rounded-full animate-spin"></div>
           </div>
-          <p className="text-emerald-800 font-medium">Loading your garden of insights...</p>
+          <p className="text-emerald-800 font-medium">
+            Loading your garden of insights...
+          </p>
         </div>
       </div>
     );
@@ -312,104 +419,110 @@ export default function TenantAnalyticsPage() {
 
   // Plotly chart configurations
   const salesTrendTrace = {
-    x: salesTrendData.map(d => d.date),
-    y: salesTrendData.map(d => d.sales),
-    type: 'scatter' as const,
-    mode: 'lines' as const,
+    x: salesTrendData.map((d) => d.date),
+    y: salesTrendData.map((d) => d.sales),
+    type: "scatter" as const,
+    mode: "lines" as const,
     line: {
-      color: '#10b981',
+      color: "#10b981",
       width: 3,
-      shape: 'spline' as const
+      shape: "spline" as const,
     },
-    fill: 'tozeroy' as const,
-    fillcolor: 'rgba(16, 185, 129, 0.1)',
-    hovertemplate: '<b>%{x}</b><br>€%{y:.2f}<extra></extra>'
+    fill: "tozeroy" as const,
+    fillcolor: "rgba(16, 185, 129, 0.1)",
+    hovertemplate: "<b>%{x}</b><br>€%{y:.2f}<extra></extra>",
   };
 
   const salesTrendLayout = {
     autosize: true,
     margin: { l: 50, r: 20, t: 20, b: 40 },
-    paper_bgcolor: 'rgba(0,0,0,0)',
-    plot_bgcolor: 'rgba(0,0,0,0)',
+    paper_bgcolor: "rgba(0,0,0,0)",
+    plot_bgcolor: "rgba(0,0,0,0)",
     xaxis: {
       showgrid: false,
       zeroline: false,
-      tickfont: { size: 11, color: '#64748b' },
-      tickformat: '%b %d'
+      tickfont: { size: 11, color: "#64748b" },
+      tickformat: "%b %d",
     },
     yaxis: {
       showgrid: true,
-      gridcolor: 'rgba(148, 163, 184, 0.1)',
+      gridcolor: "rgba(148, 163, 184, 0.1)",
       zeroline: false,
-      tickfont: { size: 11, color: '#64748b' },
-      tickprefix: '€'
+      tickfont: { size: 11, color: "#64748b" },
+      tickprefix: "€",
     },
-    hovermode: 'x unified' as const
+    hovermode: "x unified" as const,
   };
 
   const topProductsTrace = {
     x: analytics.topProducts.slice(0, 5).map((p: any) => p.revenue),
     y: analytics.topProducts.slice(0, 5).map((p: any) => p.name),
-    type: 'bar' as const,
-    orientation: 'h' as const,
+    type: "bar" as const,
+    orientation: "h" as const,
     marker: {
-      color: ['#10b981', '#14b8a6', '#06b6d4', '#0ea5e9', '#3b82f6'],
-      cornerradius: 8
+      color: ["#10b981", "#14b8a6", "#06b6d4", "#0ea5e9", "#3b82f6"],
+      cornerradius: 8,
     },
-    hovertemplate: '<b>%{y}</b><br>Revenue: €%{x:.2f}<extra></extra>'
+    hovertemplate: "<b>%{y}</b><br>Revenue: €%{x:.2f}<extra></extra>",
   };
 
   const topProductsLayout = {
     autosize: true,
     margin: { l: 150, r: 20, t: 20, b: 40 },
-    paper_bgcolor: 'rgba(0,0,0,0)',
-    plot_bgcolor: 'rgba(0,0,0,0)',
+    paper_bgcolor: "rgba(0,0,0,0)",
+    plot_bgcolor: "rgba(0,0,0,0)",
     xaxis: {
       showgrid: true,
-      gridcolor: 'rgba(148, 163, 184, 0.1)',
+      gridcolor: "rgba(148, 163, 184, 0.1)",
       zeroline: false,
-      tickfont: { size: 11, color: '#64748b' },
-      tickprefix: '€'
+      tickfont: { size: 11, color: "#64748b" },
+      tickprefix: "€",
     },
     yaxis: {
       showgrid: false,
       zeroline: false,
-      tickfont: { size: 11, color: '#64748b' }
-    }
+      tickfont: { size: 11, color: "#64748b" },
+    },
   };
 
   const orderStatusTrace = {
     labels: analytics.ordersByStatus.map((s: any) => s.name),
     values: analytics.ordersByStatus.map((s: any) => s.value),
-    type: 'pie' as const,
+    type: "pie" as const,
     hole: 0.5,
     marker: {
-      colors: ['#10b981', '#06b6d4', '#f59e0b', '#94a3b8']
+      colors: ["#10b981", "#06b6d4", "#f59e0b", "#94a3b8"],
     },
-    textinfo: 'label+percent' as const,
-    textfont: { size: 12, color: '#1e293b' },
-    hovertemplate: '<b>%{label}</b><br>%{value} orders<br>%{percent}<extra></extra>'
+    textinfo: "label+percent" as const,
+    textfont: { size: 12, color: "#1e293b" },
+    hovertemplate:
+      "<b>%{label}</b><br>%{value} orders<br>%{percent}<extra></extra>",
   };
 
   const orderStatusLayout = {
     autosize: true,
     margin: { l: 20, r: 20, t: 20, b: 20 },
-    paper_bgcolor: 'rgba(0,0,0,0)',
-    plot_bgcolor: 'rgba(0,0,0,0)',
+    paper_bgcolor: "rgba(0,0,0,0)",
+    plot_bgcolor: "rgba(0,0,0,0)",
     showlegend: false,
-    annotations: [{
-      font: { size: 24, color: '#10b981', family: 'system-ui', weight: 700 },
-      showarrow: false,
-      text: String(analytics.ordersByStatus.reduce((a: any, b: any) => a + b.value, 0)),
-      x: 0.5,
-      y: 0.55
-    }, {
-      font: { size: 12, color: '#64748b', family: 'system-ui' },
-      showarrow: false,
-      text: 'Total Orders',
-      x: 0.5,
-      y: 0.42
-    }]
+    annotations: [
+      {
+        font: { size: 24, color: "#10b981", family: "system-ui", weight: 700 },
+        showarrow: false,
+        text: String(
+          analytics.ordersByStatus.reduce((a: any, b: any) => a + b.value, 0),
+        ),
+        x: 0.5,
+        y: 0.55,
+      },
+      {
+        font: { size: 12, color: "#64748b", family: "system-ui" },
+        showarrow: false,
+        text: "Total Orders",
+        x: 0.5,
+        y: 0.42,
+      },
+    ],
   };
 
   return (
@@ -417,8 +530,8 @@ export default function TenantAnalyticsPage() {
       {/* Breadcrumbs */}
       <Breadcrumbs
         items={[
-          { label: 'Dashboard', href: '/tenant-admin' },
-          { label: 'Analytics' },
+          { label: "Dashboard", href: "/tenant-admin" },
+          { label: "Analytics" },
         ]}
         className="mb-4"
       />
@@ -436,30 +549,47 @@ export default function TenantAnalyticsPage() {
                 Store Analytics
               </h1>
             </div>
-            <p className="text-sm sm:text-base text-slate-600 mt-1 sm:mt-2 ml-9 sm:ml-11">Your garden of insights and performance metrics</p>
+            <p className="text-sm sm:text-base text-slate-600 mt-1 sm:mt-2 ml-9 sm:ml-11">
+              Your garden of insights and performance metrics
+            </p>
           </div>
           <div className="flex gap-2 overflow-x-auto pb-2 lg:pb-0">
             <Button
-              variant={timeRange === '7d' ? 'default' : 'outline'}
+              variant={timeRange === "7d" ? "default" : "outline"}
               size="sm"
-              onClick={() => setTimeRange('7d')}
-              className={cn("flex-shrink-0", timeRange === '7d' ? 'bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700' : 'border-emerald-300 text-emerald-700 hover:bg-emerald-50')}
+              onClick={() => setTimeRange("7d")}
+              className={cn(
+                "flex-shrink-0",
+                timeRange === "7d"
+                  ? "bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700"
+                  : "border-emerald-300 text-emerald-700 hover:bg-emerald-50",
+              )}
             >
               7 Days
             </Button>
             <Button
-              variant={timeRange === '30d' ? 'default' : 'outline'}
+              variant={timeRange === "30d" ? "default" : "outline"}
               size="sm"
-              onClick={() => setTimeRange('30d')}
-              className={cn("flex-shrink-0", timeRange === '30d' ? 'bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700' : 'border-emerald-300 text-emerald-700 hover:bg-emerald-50')}
+              onClick={() => setTimeRange("30d")}
+              className={cn(
+                "flex-shrink-0",
+                timeRange === "30d"
+                  ? "bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700"
+                  : "border-emerald-300 text-emerald-700 hover:bg-emerald-50",
+              )}
             >
               30 Days
             </Button>
             <Button
-              variant={timeRange === '90d' ? 'default' : 'outline'}
+              variant={timeRange === "90d" ? "default" : "outline"}
               size="sm"
-              onClick={() => setTimeRange('90d')}
-              className={cn("flex-shrink-0", timeRange === '90d' ? 'bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700' : 'border-emerald-300 text-emerald-700 hover:bg-emerald-50')}
+              onClick={() => setTimeRange("90d")}
+              className={cn(
+                "flex-shrink-0",
+                timeRange === "90d"
+                  ? "bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700"
+                  : "border-emerald-300 text-emerald-700 hover:bg-emerald-50",
+              )}
             >
               90 Days
             </Button>
@@ -478,14 +608,20 @@ export default function TenantAnalyticsPage() {
             <Card className="border-none shadow-lg bg-gradient-to-br from-emerald-500 to-teal-500 text-white overflow-hidden relative group hover:shadow-xl transition-all duration-300 hover:scale-[1.02]">
               <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 group-hover:scale-110 transition-transform duration-300" />
               <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
-                <CardTitle className="text-sm font-medium text-emerald-50">Total Revenue</CardTitle>
+                <CardTitle className="text-sm font-medium text-emerald-50">
+                  Total Revenue
+                </CardTitle>
                 <DollarSign className="h-5 w-5 text-emerald-100" />
               </CardHeader>
               <CardContent className="relative z-10">
-                <div className="text-3xl font-bold">€{analytics.totalRevenue.toFixed(2)}</div>
+                <div className="text-3xl font-bold">
+                  €{analytics.totalRevenue.toFixed(2)}
+                </div>
                 <div className="flex items-center gap-1 text-xs mt-2">
                   <TrendingUp className="w-3 h-3" />
-                  <span>+€{analytics.recentRevenue.toFixed(2)} this period</span>
+                  <span>
+                    +€{analytics.recentRevenue.toFixed(2)} this period
+                  </span>
                 </div>
               </CardContent>
             </Card>
@@ -493,36 +629,54 @@ export default function TenantAnalyticsPage() {
             <Card className="border-none shadow-lg bg-gradient-to-br from-amber-500 to-orange-500 text-white overflow-hidden relative group hover:shadow-xl transition-all duration-300 hover:scale-[1.02]">
               <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 group-hover:scale-110 transition-transform duration-300" />
               <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
-                <CardTitle className="text-sm font-medium text-amber-50">Total Orders</CardTitle>
+                <CardTitle className="text-sm font-medium text-amber-50">
+                  Total Orders
+                </CardTitle>
                 <ShoppingCart className="h-5 w-5 text-amber-100" />
               </CardHeader>
               <CardContent className="relative z-10">
-                <div className="text-3xl font-bold">{analytics.totalOrders}</div>
-                <p className="text-xs mt-2">+{analytics.recentOrders} this period</p>
+                <div className="text-3xl font-bold">
+                  {analytics.totalOrders}
+                </div>
+                <p className="text-xs mt-2">
+                  +{analytics.recentOrders} this period
+                </p>
               </CardContent>
             </Card>
 
             <Card className="border-none shadow-lg bg-gradient-to-br from-purple-500 to-pink-500 text-white overflow-hidden relative group hover:shadow-xl transition-all duration-300 hover:scale-[1.02]">
               <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 group-hover:scale-110 transition-transform duration-300" />
               <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
-                <CardTitle className="text-sm font-medium text-purple-50">Total Customers</CardTitle>
+                <CardTitle className="text-sm font-medium text-purple-50">
+                  Total Customers
+                </CardTitle>
                 <Users className="h-5 w-5 text-purple-100" />
               </CardHeader>
               <CardContent className="relative z-10">
-                <div className="text-3xl font-bold">{analytics.totalCustomers}</div>
-                <p className="text-xs mt-2">+{analytics.recentCustomers} this period</p>
+                <div className="text-3xl font-bold">
+                  {analytics.totalCustomers}
+                </div>
+                <p className="text-xs mt-2">
+                  +{analytics.recentCustomers} this period
+                </p>
               </CardContent>
             </Card>
 
             <Card className="border-none shadow-lg bg-gradient-to-br from-cyan-500 to-blue-500 text-white overflow-hidden relative group hover:shadow-xl transition-all duration-300 hover:scale-[1.02]">
               <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 group-hover:scale-110 transition-transform duration-300" />
               <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
-                <CardTitle className="text-sm font-medium text-cyan-50">Avg Order Value</CardTitle>
+                <CardTitle className="text-sm font-medium text-cyan-50">
+                  Avg Order Value
+                </CardTitle>
                 <Package className="h-5 w-5 text-cyan-100" />
               </CardHeader>
               <CardContent className="relative z-10">
-                <div className="text-3xl font-bold">€{analytics.avgOrderValue.toFixed(2)}</div>
-                <p className="text-xs mt-2">{analytics.totalProducts} products</p>
+                <div className="text-3xl font-bold">
+                  €{analytics.avgOrderValue.toFixed(2)}
+                </div>
+                <p className="text-xs mt-2">
+                  {analytics.totalProducts} products
+                </p>
               </CardContent>
             </Card>
           </div>
@@ -546,7 +700,9 @@ export default function TenantAnalyticsPage() {
 
                 <div className="relative p-6 space-y-2">
                   <div className="flex items-center justify-between">
-                    <span className="text-sm font-medium text-emerald-900">{metric.label}</span>
+                    <span className="text-sm font-medium text-emerald-900">
+                      {metric.label}
+                    </span>
                     <DollarSign className="h-4 w-4 text-emerald-700 opacity-70" />
                   </div>
 
@@ -557,12 +713,19 @@ export default function TenantAnalyticsPage() {
                   </div>
 
                   <div className="flex items-center gap-2 text-xs">
-                    <div className={cn(
-                      "flex items-center gap-1 px-2 py-0.5 rounded-full",
-                      metric.change > 0 ? "bg-emerald-100 text-emerald-800" : "bg-amber-100 text-amber-800"
-                    )}>
+                    <div
+                      className={cn(
+                        "flex items-center gap-1 px-2 py-0.5 rounded-full",
+                        metric.change > 0
+                          ? "bg-emerald-100 text-emerald-800"
+                          : "bg-amber-100 text-amber-800",
+                      )}
+                    >
                       <TrendingUp className="h-3 w-3" />
-                      <span className="font-semibold">{metric.change > 0 ? '+' : ''}{metric.change}%</span>
+                      <span className="font-semibold">
+                        {metric.change > 0 ? "+" : ""}
+                        {metric.change}%
+                      </span>
                     </div>
                     <span className="text-slate-600">{metric.period}</span>
                   </div>
@@ -585,25 +748,35 @@ export default function TenantAnalyticsPage() {
                   <TrendingUp className="h-5 w-5 text-emerald-600" />
                   Revenue Trend
                 </CardTitle>
-                <CardDescription>Daily revenue over the selected period</CardDescription>
+                <CardDescription>
+                  Daily revenue over the selected period
+                </CardDescription>
               </CardHeader>
               <CardContent>
                 <ResponsiveContainer width="100%" height={300}>
                   <LineChart data={analytics.revenueByDay}>
                     <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
-                    <XAxis dataKey="date" stroke="#64748b" style={{ fontSize: '12px' }} />
-                    <YAxis stroke="#64748b" style={{ fontSize: '12px' }} />
+                    <XAxis
+                      dataKey="date"
+                      stroke="#64748b"
+                      style={{ fontSize: "12px" }}
+                    />
+                    <YAxis stroke="#64748b" style={{ fontSize: "12px" }} />
                     <Tooltip
                       formatter={(value: any) => `€${value.toFixed(2)}`}
                       labelFormatter={(label) => `Date: ${label}`}
-                      contentStyle={{ backgroundColor: '#fff', border: '1px solid #e5e7eb', borderRadius: '8px' }}
+                      contentStyle={{
+                        backgroundColor: "#fff",
+                        border: "1px solid #e5e7eb",
+                        borderRadius: "8px",
+                      }}
                     />
                     <Line
                       type="monotone"
                       dataKey="revenue"
                       stroke="#10b981"
                       strokeWidth={3}
-                      dot={{ fill: '#10b981', r: 4 }}
+                      dot={{ fill: "#10b981", r: 4 }}
                       activeDot={{ r: 6 }}
                     />
                   </LineChart>
@@ -617,19 +790,33 @@ export default function TenantAnalyticsPage() {
                   <ShoppingCart className="h-5 w-5 text-cyan-600" />
                   Order Volume
                 </CardTitle>
-                <CardDescription>Daily orders over the selected period</CardDescription>
+                <CardDescription>
+                  Daily orders over the selected period
+                </CardDescription>
               </CardHeader>
               <CardContent>
                 <ResponsiveContainer width="100%" height={300}>
                   <BarChart data={analytics.ordersByDay}>
                     <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
-                    <XAxis dataKey="date" stroke="#64748b" style={{ fontSize: '12px' }} />
-                    <YAxis stroke="#64748b" style={{ fontSize: '12px' }} />
+                    <XAxis
+                      dataKey="date"
+                      stroke="#64748b"
+                      style={{ fontSize: "12px" }}
+                    />
+                    <YAxis stroke="#64748b" style={{ fontSize: "12px" }} />
                     <Tooltip
                       labelFormatter={(label) => `Date: ${label}`}
-                      contentStyle={{ backgroundColor: '#fff', border: '1px solid #e5e7eb', borderRadius: '8px' }}
+                      contentStyle={{
+                        backgroundColor: "#fff",
+                        border: "1px solid #e5e7eb",
+                        borderRadius: "8px",
+                      }}
+                    />
+                    <Bar
+                      dataKey="orders"
+                      fill="#06b6d4"
+                      radius={[8, 8, 0, 0]}
                     />
-                    <Bar dataKey="orders" fill="#06b6d4" radius={[8, 8, 0, 0]} />
                   </BarChart>
                 </ResponsiveContainer>
               </CardContent>
@@ -649,8 +836,13 @@ export default function TenantAnalyticsPage() {
               <div className="p-6">
                 <div className="flex items-center gap-2 mb-4">
                   <TrendingUp className="h-5 w-5 text-emerald-600" />
-                  <h3 className="text-lg font-semibold text-slate-800">Sales Trend</h3>
-                  <Badge variant="outline" className="ml-auto text-xs bg-emerald-50 text-emerald-800 border-emerald-200">
+                  <h3 className="text-lg font-semibold text-slate-800">
+                    Sales Trend
+                  </h3>
+                  <Badge
+                    variant="outline"
+                    className="ml-auto text-xs bg-emerald-50 text-emerald-800 border-emerald-200"
+                  >
                     Last 30 days
                   </Badge>
                 </div>
@@ -671,7 +863,9 @@ export default function TenantAnalyticsPage() {
               <div className="p-6">
                 <div className="flex items-center gap-2 mb-4">
                   <ShoppingBag className="h-5 w-5 text-emerald-600" />
-                  <h3 className="text-lg font-semibold text-slate-800">Order Distribution</h3>
+                  <h3 className="text-lg font-semibold text-slate-800">
+                    Order Distribution
+                  </h3>
                 </div>
                 <div className="h-[280px]">
                   <Plot
@@ -690,8 +884,13 @@ export default function TenantAnalyticsPage() {
               <div className="p-6">
                 <div className="flex items-center gap-2 mb-4">
                   <Package className="h-5 w-5 text-cyan-600" />
-                  <h3 className="text-lg font-semibold text-slate-800">Top Products by Revenue</h3>
-                  <Badge variant="outline" className="ml-auto text-xs bg-cyan-50 text-cyan-800 border-cyan-200">
+                  <h3 className="text-lg font-semibold text-slate-800">
+                    Top Products by Revenue
+                  </h3>
+                  <Badge
+                    variant="outline"
+                    className="ml-auto text-xs bg-cyan-50 text-cyan-800 border-cyan-200"
+                  >
                     Best Sellers
                   </Badge>
                 </div>
@@ -722,24 +921,34 @@ export default function TenantAnalyticsPage() {
                   <Users className="h-5 w-5 text-purple-600" />
                   Customer Growth
                 </CardTitle>
-                <CardDescription>New customer registrations over time</CardDescription>
+                <CardDescription>
+                  New customer registrations over time
+                </CardDescription>
               </CardHeader>
               <CardContent>
                 <ResponsiveContainer width="100%" height={300}>
                   <LineChart data={analytics.customerGrowth}>
                     <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
-                    <XAxis dataKey="date" stroke="#64748b" style={{ fontSize: '12px' }} />
-                    <YAxis stroke="#64748b" style={{ fontSize: '12px' }} />
+                    <XAxis
+                      dataKey="date"
+                      stroke="#64748b"
+                      style={{ fontSize: "12px" }}
+                    />
+                    <YAxis stroke="#64748b" style={{ fontSize: "12px" }} />
                     <Tooltip
                       labelFormatter={(label) => `Date: ${label}`}
-                      contentStyle={{ backgroundColor: '#fff', border: '1px solid #e5e7eb', borderRadius: '8px' }}
+                      contentStyle={{
+                        backgroundColor: "#fff",
+                        border: "1px solid #e5e7eb",
+                        borderRadius: "8px",
+                      }}
                     />
                     <Line
                       type="monotone"
                       dataKey="customers"
                       stroke="#8b5cf6"
                       strokeWidth={3}
-                      dot={{ fill: '#8b5cf6', r: 4 }}
+                      dot={{ fill: "#8b5cf6", r: 4 }}
                       activeDot={{ r: 6 }}
                     />
                   </LineChart>
@@ -753,10 +962,15 @@ export default function TenantAnalyticsPage() {
                 <div className="flex items-center justify-between mb-4">
                   <div className="flex items-center gap-2">
                     <Users className="h-5 w-5 text-cyan-600" />
-                    <h3 className="text-lg font-semibold text-slate-800">Recent Customers</h3>
+                    <h3 className="text-lg font-semibold text-slate-800">
+                      Recent Customers
+                    </h3>
                   </div>
                   <Button variant="ghost" size="sm" asChild>
-                    <Link href="/tenant-admin/customers" className="text-cyan-600 hover:text-cyan-700">
+                    <Link
+                      href="/tenant-admin/customers"
+                      className="text-cyan-600 hover:text-cyan-700"
+                    >
                       View All
                     </Link>
                   </Button>
@@ -776,7 +990,9 @@ export default function TenantAnalyticsPage() {
                         <p className="font-medium text-slate-800 truncate group-hover:text-cyan-700 transition-colors">
                           {customer.name}
                         </p>
-                        <p className="text-sm text-slate-500 truncate">{customer.email}</p>
+                        <p className="text-sm text-slate-500 truncate">
+                          {customer.email}
+                        </p>
                       </div>
 
                       <span className="text-xs text-slate-500 flex-shrink-0">
@@ -803,10 +1019,15 @@ export default function TenantAnalyticsPage() {
                 <div className="flex items-center justify-between mb-4">
                   <div className="flex items-center gap-2">
                     <ShoppingBag className="h-5 w-5 text-purple-600" />
-                    <h3 className="text-lg font-semibold text-slate-800">Recent Orders</h3>
+                    <h3 className="text-lg font-semibold text-slate-800">
+                      Recent Orders
+                    </h3>
                   </div>
                   <Button variant="ghost" size="sm" asChild>
-                    <Link href="/tenant-admin/orders" className="text-purple-600 hover:text-purple-700">
+                    <Link
+                      href="/tenant-admin/orders"
+                      className="text-purple-600 hover:text-purple-700"
+                    >
                       View All
                     </Link>
                   </Button>
@@ -822,15 +1043,26 @@ export default function TenantAnalyticsPage() {
                         <p className="font-medium text-slate-800 truncate group-hover:text-purple-700 transition-colors">
                           {order.orderNumber}
                         </p>
-                        <p className="text-sm text-slate-500 truncate">{order.customer}</p>
+                        <p className="text-sm text-slate-500 truncate">
+                          {order.customer}
+                        </p>
                       </div>
 
                       <div className="flex items-center gap-3 ml-4">
                         <div className="text-right">
-                          <p className="font-semibold text-slate-800">{formatCurrency(order.total)}</p>
-                          <p className="text-xs text-slate-500">{formatTimeAgo(order.createdAt)}</p>
+                          <p className="font-semibold text-slate-800">
+                            {formatCurrency(order.total)}
+                          </p>
+                          <p className="text-xs text-slate-500">
+                            {formatTimeAgo(order.createdAt)}
+                          </p>
                         </div>
-                        <Badge className={cn("text-xs border", getStatusColor(order.status))}>
+                        <Badge
+                          className={cn(
+                            "text-xs border",
+                            getStatusColor(order.status),
+                          )}
+                        >
                           {order.status}
                         </Badge>
                       </div>
@@ -845,14 +1077,20 @@ export default function TenantAnalyticsPage() {
               <div className="p-6">
                 <div className="flex items-center gap-2 mb-6">
                   <Calendar className="h-5 w-5 text-amber-600" />
-                  <h3 className="text-lg font-semibold text-slate-800">Consultations</h3>
+                  <h3 className="text-lg font-semibold text-slate-800">
+                    Consultations
+                  </h3>
                 </div>
 
                 <div className="space-y-4">
                   <div className="flex items-center justify-between p-4 bg-white/70 rounded-lg border border-amber-200/50">
                     <div>
-                      <p className="text-sm text-slate-600 mb-1">Pending Requests</p>
-                      <p className="text-3xl font-bold text-amber-600">{pendingConsultations}</p>
+                      <p className="text-sm text-slate-600 mb-1">
+                        Pending Requests
+                      </p>
+                      <p className="text-3xl font-bold text-amber-600">
+                        {pendingConsultations}
+                      </p>
                     </div>
                     <div className="w-16 h-16 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
                       <Calendar className="h-8 w-8 text-white" />
@@ -886,7 +1124,9 @@ export default function TenantAnalyticsPage() {
                 <ShoppingBag className="h-5 w-5 text-emerald-600" />
                 Orders by Status
               </CardTitle>
-              <CardDescription>Distribution of order statuses in the selected period</CardDescription>
+              <CardDescription>
+                Distribution of order statuses in the selected period
+              </CardDescription>
             </CardHeader>
             <CardContent>
               <ResponsiveContainer width="100%" height={350}>
@@ -902,10 +1142,19 @@ export default function TenantAnalyticsPage() {
                     dataKey="value"
                   >
                     {analytics.ordersByStatus.map((entry, index) => (
-                      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                      <Cell
+                        key={`cell-${index}`}
+                        fill={COLORS[index % COLORS.length]}
+                      />
                     ))}
                   </Pie>
-                  <Tooltip contentStyle={{ backgroundColor: '#fff', border: '1px solid #e5e7eb', borderRadius: '8px' }} />
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: "#fff",
+                      border: "1px solid #e5e7eb",
+                      borderRadius: "8px",
+                    }}
+                  />
                 </PieChart>
               </ResponsiveContainer>
             </CardContent>
@@ -924,19 +1173,29 @@ export default function TenantAnalyticsPage() {
                 <Package className="h-5 w-5 text-emerald-600" />
                 Best Performers
               </CardTitle>
-              <CardDescription>Products ranked by quantity sold and revenue generated</CardDescription>
+              <CardDescription>
+                Products ranked by quantity sold and revenue generated
+              </CardDescription>
             </CardHeader>
             <CardContent>
               <div className="space-y-4">
                 {analytics.topProducts.map((product: any, index: number) => (
-                  <div key={product.id} className="flex items-center justify-between p-4 bg-gradient-to-r from-emerald-50/50 to-cyan-50/50 rounded-lg border border-emerald-100 hover:border-emerald-300 hover:shadow-md transition-all group">
+                  <div
+                    key={product.id}
+                    className="flex items-center justify-between p-4 bg-gradient-to-r from-emerald-50/50 to-cyan-50/50 rounded-lg border border-emerald-100 hover:border-emerald-300 hover:shadow-md transition-all group"
+                  >
                     <div className="flex items-center gap-4">
                       <div className="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center font-bold text-white text-xl shadow-lg group-hover:scale-110 transition-transform">
                         {index + 1}
                       </div>
                       <div>
-                        <p className="font-semibold text-lg text-slate-900">{product.name}</p>
-                        <p className="text-sm text-slate-600">{product.orders} orders • {product.quantity} units sold</p>
+                        <p className="font-semibold text-lg text-slate-900">
+                          {product.name}
+                        </p>
+                        <p className="text-sm text-slate-600">
+                          {product.orders} orders • {product.quantity} units
+                          sold
+                        </p>
                       </div>
                     </div>
                     <div className="text-right">
@@ -952,8 +1211,12 @@ export default function TenantAnalyticsPage() {
                 {analytics.topProducts.length === 0 && (
                   <div className="text-center py-12">
                     <Package className="h-16 w-16 text-slate-300 mx-auto mb-4" />
-                    <p className="text-slate-500 text-lg">No product sales yet</p>
-                    <p className="text-slate-400 text-sm mt-2">Start adding products to see analytics</p>
+                    <p className="text-slate-500 text-lg">
+                      No product sales yet
+                    </p>
+                    <p className="text-slate-400 text-sm mt-2">
+                      Start adding products to see analytics
+                    </p>
                   </div>
                 )}
               </div>
diff --git a/nextjs_space/app/tenant-admin/audit-logs/page.tsx b/nextjs_space/app/tenant-admin/audit-logs/page.tsx
index 28bbce5..4921e89 100644
--- a/nextjs_space/app/tenant-admin/audit-logs/page.tsx
+++ b/nextjs_space/app/tenant-admin/audit-logs/page.tsx
@@ -1,16 +1,34 @@
+"use client";
 
-'use client';
-
-import { useState, useEffect } from 'react';
-import { useSession } from 'next-auth/react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { format } from 'date-fns';
-import { Shield, ChevronLeft, ChevronRight, Filter } from 'lucide-react';
-import { Breadcrumbs } from '@/components/admin/shared';
+import { useState, useEffect } from "react";
+import { useSession } from "next-auth/react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { format } from "date-fns";
+import { Shield, ChevronLeft, ChevronRight, Filter } from "lucide-react";
+import { Breadcrumbs } from "@/components/admin/shared";
 
 interface AuditLog {
   id: string;
@@ -40,8 +58,8 @@ export default function TenantAuditLogsPage() {
     totalPages: 0,
   });
   const [loading, setLoading] = useState(true);
-  const [actionFilter, setActionFilter] = useState<string>('');
-  const [entityFilter, setEntityFilter] = useState<string>('');
+  const [actionFilter, setActionFilter] = useState<string>("");
+  const [entityFilter, setEntityFilter] = useState<string>("");
 
   useEffect(() => {
     fetchLogs();
@@ -55,8 +73,8 @@ export default function TenantAuditLogsPage() {
         limit: pagination.limit.toString(),
       });
 
-      if (actionFilter) params.append('action', actionFilter);
-      if (entityFilter) params.append('entityType', entityFilter);
+      if (actionFilter) params.append("action", actionFilter);
+      if (entityFilter) params.append("entityType", entityFilter);
 
       const response = await fetch(`/api/tenant-admin/audit-logs?${params}`);
       const data = await response.json();
@@ -66,18 +84,18 @@ export default function TenantAuditLogsPage() {
         setPagination(data.pagination);
       }
     } catch (error) {
-      console.error('Failed to fetch audit logs:', error);
+      console.error("Failed to fetch audit logs:", error);
     } finally {
       setLoading(false);
     }
   };
 
   const getActionBadgeColor = (action: string) => {
-    if (action.includes('created')) return 'default';
-    if (action.includes('updated')) return 'secondary';
-    if (action.includes('deleted')) return 'destructive';
-    if (action.includes('login')) return 'default';
-    return 'secondary';
+    if (action.includes("created")) return "default";
+    if (action.includes("updated")) return "secondary";
+    if (action.includes("deleted")) return "destructive";
+    if (action.includes("login")) return "default";
+    return "secondary";
   };
 
   return (
@@ -85,15 +103,19 @@ export default function TenantAuditLogsPage() {
       {/* Breadcrumbs */}
       <Breadcrumbs
         items={[
-          { label: 'Dashboard', href: '/tenant-admin' },
-          { label: 'Audit Logs' },
+          { label: "Dashboard", href: "/tenant-admin" },
+          { label: "Audit Logs" },
         ]}
         className="mb-4"
       />
 
       <div className="mb-6 sm:mb-8">
-        <h1 className="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">Audit Logs</h1>
-        <p className="text-sm sm:text-base text-slate-600 mt-1 sm:mt-2">Track all actions and changes in your dispensary</p>
+        <h1 className="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">
+          Audit Logs
+        </h1>
+        <p className="text-sm sm:text-base text-slate-600 mt-1 sm:mt-2">
+          Track all actions and changes in your dispensary
+        </p>
       </div>
 
       <Card className="shadow-lg border-slate-200">
@@ -112,12 +134,22 @@ export default function TenantAuditLogsPage() {
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="all">All Actions</SelectItem>
-                  <SelectItem value="product.created">Product Created</SelectItem>
-                  <SelectItem value="product.updated">Product Updated</SelectItem>
-                  <SelectItem value="product.deleted">Product Deleted</SelectItem>
+                  <SelectItem value="product.created">
+                    Product Created
+                  </SelectItem>
+                  <SelectItem value="product.updated">
+                    Product Updated
+                  </SelectItem>
+                  <SelectItem value="product.deleted">
+                    Product Deleted
+                  </SelectItem>
                   <SelectItem value="order.created">Order Created</SelectItem>
-                  <SelectItem value="order.status_changed">Order Status Changed</SelectItem>
-                  <SelectItem value="branding.updated">Branding Updated</SelectItem>
+                  <SelectItem value="order.status_changed">
+                    Order Status Changed
+                  </SelectItem>
+                  <SelectItem value="branding.updated">
+                    Branding Updated
+                  </SelectItem>
                 </SelectContent>
               </Select>
               <Select value={entityFilter} onValueChange={setEntityFilter}>
@@ -150,21 +182,31 @@ export default function TenantAuditLogsPage() {
                     <TableRow>
                       <TableHead>Timestamp</TableHead>
                       <TableHead>Action</TableHead>
-                      <TableHead className="hidden sm:table-cell">Entity</TableHead>
-                      <TableHead className="hidden md:table-cell">User</TableHead>
-                      <TableHead className="hidden lg:table-cell">IP Address</TableHead>
-                      <TableHead className="hidden lg:table-cell">Details</TableHead>
+                      <TableHead className="hidden sm:table-cell">
+                        Entity
+                      </TableHead>
+                      <TableHead className="hidden md:table-cell">
+                        User
+                      </TableHead>
+                      <TableHead className="hidden lg:table-cell">
+                        IP Address
+                      </TableHead>
+                      <TableHead className="hidden lg:table-cell">
+                        Details
+                      </TableHead>
                     </TableRow>
                   </TableHeader>
                   <TableBody>
                     {logs.map((log) => (
                       <TableRow key={log.id}>
                         <TableCell className="font-mono text-xs">
-                          {format(new Date(log.createdAt), 'MMM dd, HH:mm:ss')}
+                          {format(new Date(log.createdAt), "MMM dd, HH:mm:ss")}
                         </TableCell>
                         <TableCell>
                           <div>
-                            <Badge variant={getActionBadgeColor(log.action) as any}>
+                            <Badge
+                              variant={getActionBadgeColor(log.action) as any}
+                            >
                               {log.action}
                             </Badge>
                             {/* Show entity inline on mobile */}
@@ -173,15 +215,19 @@ export default function TenantAuditLogsPage() {
                             </span>
                           </div>
                         </TableCell>
-                        <TableCell className="hidden sm:table-cell">{log.entityType}</TableCell>
+                        <TableCell className="hidden sm:table-cell">
+                          {log.entityType}
+                        </TableCell>
                         <TableCell className="text-sm hidden md:table-cell">
-                          {log.userEmail || 'System'}
+                          {log.userEmail || "System"}
                         </TableCell>
                         <TableCell className="font-mono text-xs hidden lg:table-cell">
-                          {log.ipAddress || 'N/A'}
+                          {log.ipAddress || "N/A"}
                         </TableCell>
                         <TableCell className="text-sm text-muted-foreground truncate max-w-[200px] hidden lg:table-cell">
-                          {log.metadata ? JSON.stringify(log.metadata) : 'No details'}
+                          {log.metadata
+                            ? JSON.stringify(log.metadata)
+                            : "No details"}
                         </TableCell>
                       </TableRow>
                     ))}
@@ -192,16 +238,22 @@ export default function TenantAuditLogsPage() {
               {/* Pagination */}
               <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mt-4">
                 <div className="text-sm text-muted-foreground">
-                  Showing {(pagination.page - 1) * pagination.limit + 1} to{' '}
-                  {Math.min(pagination.page * pagination.limit, pagination.total)} of{' '}
-                  {pagination.total} results
+                  Showing {(pagination.page - 1) * pagination.limit + 1} to{" "}
+                  {Math.min(
+                    pagination.page * pagination.limit,
+                    pagination.total,
+                  )}{" "}
+                  of {pagination.total} results
                 </div>
                 <div className="flex gap-2 w-full sm:w-auto justify-between sm:justify-end">
                   <Button
                     variant="outline"
                     size="sm"
                     onClick={() =>
-                      setPagination((prev) => ({ ...prev, page: prev.page - 1 }))
+                      setPagination((prev) => ({
+                        ...prev,
+                        page: prev.page - 1,
+                      }))
                     }
                     disabled={pagination.page === 1}
                   >
@@ -215,7 +267,10 @@ export default function TenantAuditLogsPage() {
                     variant="outline"
                     size="sm"
                     onClick={() =>
-                      setPagination((prev) => ({ ...prev, page: prev.page + 1 }))
+                      setPagination((prev) => ({
+                        ...prev,
+                        page: prev.page + 1,
+                      }))
                     }
                     disabled={pagination.page >= pagination.totalPages}
                   >
diff --git a/nextjs_space/app/tenant-admin/branding/branding-form.tsx b/nextjs_space/app/tenant-admin/branding/branding-form.tsx
index b585d5b..ab7c9f5 100644
--- a/nextjs_space/app/tenant-admin/branding/branding-form.tsx
+++ b/nextjs_space/app/tenant-admin/branding/branding-form.tsx
@@ -1,19 +1,39 @@
-
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { toast } from '@/components/ui/sonner';
-import { Upload, Check, Palette, Type, Layout, FileText, Settings, Image as ImageIcon } from 'lucide-react';
-import { TenantSettings } from '@/lib/types';
-import { tenant_templates } from '@prisma/client';
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { toast } from "@/components/ui/sonner";
+import {
+  Upload,
+  Check,
+  Palette,
+  Type,
+  Layout,
+  FileText,
+  Settings,
+  Image as ImageIcon,
+} from "lucide-react";
+import { TenantSettings } from "@/lib/types";
+import { tenant_templates } from "@prisma/client";
 
 interface BrandingFormProps {
   tenant: {
@@ -27,21 +47,24 @@ interface BrandingFormProps {
 }
 
 const TEMPLATES = [
-  { id: 'modern', name: 'Modern', description: 'Clean and professional' },
-  { id: 'minimalist', name: 'Minimalist', description: 'Simple and elegant' },
-  { id: 'bold', name: 'Bold', description: 'Vibrant and eye-catching' },
+  { id: "modern", name: "Modern", description: "Clean and professional" },
+  { id: "minimalist", name: "Minimalist", description: "Simple and elegant" },
+  { id: "bold", name: "Bold", description: "Vibrant and eye-catching" },
 ];
 
 const FONTS = [
-  { id: 'inter', name: 'Inter', description: 'Modern sans-serif' },
-  { id: 'roboto', name: 'Roboto', description: 'Classic sans-serif' },
-  { id: 'lato', name: 'Lato', description: 'Friendly sans-serif' },
-  { id: 'montserrat', name: 'Montserrat', description: 'Geometric sans-serif' },
-  { id: 'poppins', name: 'Poppins', description: 'Rounded sans-serif' },
-  { id: 'playfair', name: 'Playfair Display', description: 'Elegant serif' },
+  { id: "inter", name: "Inter", description: "Modern sans-serif" },
+  { id: "roboto", name: "Roboto", description: "Classic sans-serif" },
+  { id: "lato", name: "Lato", description: "Friendly sans-serif" },
+  { id: "montserrat", name: "Montserrat", description: "Geometric sans-serif" },
+  { id: "poppins", name: "Poppins", description: "Rounded sans-serif" },
+  { id: "playfair", name: "Playfair Display", description: "Elegant serif" },
 ];
 
-export default function BrandingForm({ tenant, activeTemplate }: BrandingFormProps) {
+export default function BrandingForm({
+  tenant,
+  activeTemplate,
+}: BrandingFormProps) {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   const [logo, setLogo] = useState<File | null>(null);
@@ -69,50 +92,106 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
   const [formData, setFormData] = useState({
     // Business
     businessName: tenant.businessName,
-    tagline: settings.tagline || '',
+    tagline: settings.tagline || "",
 
     // Colors
-    primaryColor: getVal(['colors', 'primary'], settings.primaryColor || '#059669'),
-    secondaryColor: getVal(['colors', 'secondary'], settings.secondaryColor || '#34d399'),
-    accentColor: getVal(['colors', 'accent'], settings.accentColor || '#10b981'),
-    backgroundColor: getVal(['colors', 'background'], settings.backgroundColor || '#ffffff'),
-    textColor: getVal(['colors', 'text'], settings.textColor || '#1f2937'),
-    headingColor: getVal(['colors', 'heading'], settings.headingColor || '#111827'),
+    primaryColor: getVal(
+      ["colors", "primary"],
+      settings.primaryColor || "#059669",
+    ),
+    secondaryColor: getVal(
+      ["colors", "secondary"],
+      settings.secondaryColor || "#34d399",
+    ),
+    accentColor: getVal(
+      ["colors", "accent"],
+      settings.accentColor || "#10b981",
+    ),
+    backgroundColor: getVal(
+      ["colors", "background"],
+      settings.backgroundColor || "#ffffff",
+    ),
+    textColor: getVal(["colors", "text"], settings.textColor || "#1f2937"),
+    headingColor: getVal(
+      ["colors", "heading"],
+      settings.headingColor || "#111827",
+    ),
 
     // Typography
-    fontFamily: getVal(['typography', 'fontFamily', 'body'], settings.fontFamily || 'inter'),
-    headingFontFamily: getVal(['typography', 'fontFamily', 'heading'], settings.headingFontFamily || settings.fontFamily || 'inter'),
-    fontSize: getVal(['typography', 'fontSize', 'base'], settings.fontSize || 'medium'),
+    fontFamily: getVal(
+      ["typography", "fontFamily", "body"],
+      settings.fontFamily || "inter",
+    ),
+    headingFontFamily: getVal(
+      ["typography", "fontFamily", "heading"],
+      settings.headingFontFamily || settings.fontFamily || "inter",
+    ),
+    fontSize: getVal(
+      ["typography", "fontSize", "base"],
+      settings.fontSize || "medium",
+    ),
 
     // Layout
-    template: settings.template || 'modern', // Template styling preference
-    buttonStyle: getVal(['borderRadius', 'button'], settings.buttonStyle || 'rounded'),
-    buttonSize: settings.buttonSize || 'medium', // Not strictly part of new DS yet
-    borderRadius: getVal(['borderRadius', 'container'], settings.borderRadius || 'medium'),
-    spacing: getVal(['spacing', 'scale'], settings.spacing || 'normal'),
-    shadowStyle: getVal(['shadows', 'card'], settings.shadowStyle || 'soft'),
+    template: settings.template || "modern", // Template styling preference
+    buttonStyle: getVal(
+      ["borderRadius", "button"],
+      settings.buttonStyle || "rounded",
+    ),
+    buttonSize: settings.buttonSize || "medium", // Not strictly part of new DS yet
+    borderRadius: getVal(
+      ["borderRadius", "container"],
+      settings.borderRadius || "medium",
+    ),
+    spacing: getVal(["spacing", "scale"], settings.spacing || "normal"),
+    shadowStyle: getVal(["shadows", "card"], settings.shadowStyle || "soft"),
 
     // Hero
-    heroType: settings.heroType || 'gradient',
+    heroType: settings.heroType || "gradient",
 
     // Page Content - Home
-    homeHeroTitle: templateContent.home?.heroTitle || settingsContent.home?.heroTitle || 'Welcome to Your Medical Cannabis Journey',
-    homeHeroSubtitle: templateContent.home?.heroSubtitle || settingsContent.home?.heroSubtitle || 'Premium medical cannabis products delivered with care',
-    homeHeroCtaText: templateContent.home?.heroCtaText || settingsContent.home?.heroCtaText || 'Get Started',
+    homeHeroTitle:
+      templateContent.home?.heroTitle ||
+      settingsContent.home?.heroTitle ||
+      "Welcome to Your Medical Cannabis Journey",
+    homeHeroSubtitle:
+      templateContent.home?.heroSubtitle ||
+      settingsContent.home?.heroSubtitle ||
+      "Premium medical cannabis products delivered with care",
+    homeHeroCtaText:
+      templateContent.home?.heroCtaText ||
+      settingsContent.home?.heroCtaText ||
+      "Get Started",
 
     // Page Content - About
-    aboutTitle: templateContent.about?.title || settingsContent.about?.title || 'About Us',
-    aboutContent: templateContent.about?.content || settingsContent.about?.content || 'We are dedicated to providing high-quality medical cannabis products...',
+    aboutTitle:
+      templateContent.about?.title ||
+      settingsContent.about?.title ||
+      "About Us",
+    aboutContent:
+      templateContent.about?.content ||
+      settingsContent.about?.content ||
+      "We are dedicated to providing high-quality medical cannabis products...",
 
     // Page Content - Contact
-    contactTitle: templateContent.contact?.title || settingsContent.contact?.title || 'Get in Touch',
-    contactDescription: templateContent.contact?.description || settingsContent.contact?.description || 'Have questions? We are here to help.',
-    contactEmail: templateContent.contact?.email || settingsContent.contact?.email || '',
-    contactPhone: templateContent.contact?.phone || settingsContent.contact?.phone || '',
-    contactAddress: templateContent.contact?.address || settingsContent.contact?.address || '',
+    contactTitle:
+      templateContent.contact?.title ||
+      settingsContent.contact?.title ||
+      "Get in Touch",
+    contactDescription:
+      templateContent.contact?.description ||
+      settingsContent.contact?.description ||
+      "Have questions? We are here to help.",
+    contactEmail:
+      templateContent.contact?.email || settingsContent.contact?.email || "",
+    contactPhone:
+      templateContent.contact?.phone || settingsContent.contact?.phone || "",
+    contactAddress:
+      templateContent.contact?.address ||
+      settingsContent.contact?.address ||
+      "",
 
     // Advanced
-    customCSS: activeTemplate?.customCss || settings.customCSS || '',
+    customCSS: activeTemplate?.customCss || settings.customCSS || "",
   });
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -126,84 +205,111 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
       const { businessName, ...settings } = formData;
 
       // Append business name
-      formDataToSend.append('businessName', businessName);
+      formDataToSend.append("businessName", businessName);
 
       // Append settings as JSON string
-      formDataToSend.append('settings', JSON.stringify({
-        ...settings,
-        pageContent: {
-          home: {
-            heroTitle: formData.homeHeroTitle,
-            heroSubtitle: formData.homeHeroSubtitle,
-            heroCtaText: formData.homeHeroCtaText,
-          },
-          about: {
-            title: formData.aboutTitle,
-            content: formData.aboutContent,
+      formDataToSend.append(
+        "settings",
+        JSON.stringify({
+          ...settings,
+          pageContent: {
+            home: {
+              heroTitle: formData.homeHeroTitle,
+              heroSubtitle: formData.homeHeroSubtitle,
+              heroCtaText: formData.homeHeroCtaText,
+            },
+            about: {
+              title: formData.aboutTitle,
+              content: formData.aboutContent,
+            },
+            contact: {
+              title: formData.contactTitle,
+              description: formData.contactDescription,
+              email: formData.contactEmail,
+              phone: formData.contactPhone,
+              address: formData.contactAddress,
+            },
           },
-          contact: {
-            title: formData.contactTitle,
-            description: formData.contactDescription,
-            email: formData.contactEmail,
-            phone: formData.contactPhone,
-            address: formData.contactAddress,
-          },
-        },
-        // Remove the flattened page content fields from root level
-        homeHeroTitle: undefined,
-        homeHeroSubtitle: undefined,
-        homeHeroCtaText: undefined,
-        aboutTitle: undefined,
-        aboutContent: undefined,
-        contactTitle: undefined,
-        contactDescription: undefined,
-        contactEmail: undefined,
-        contactPhone: undefined,
-        contactAddress: undefined,
-      }));
+          // Remove the flattened page content fields from root level
+          homeHeroTitle: undefined,
+          homeHeroSubtitle: undefined,
+          homeHeroCtaText: undefined,
+          aboutTitle: undefined,
+          aboutContent: undefined,
+          contactTitle: undefined,
+          contactDescription: undefined,
+          contactEmail: undefined,
+          contactPhone: undefined,
+          contactAddress: undefined,
+        }),
+      );
 
       // Append files
-      if (logo) formDataToSend.append('logo', logo);
-      if (heroImage) formDataToSend.append('heroImage', heroImage);
-      if (favicon) formDataToSend.append('favicon', favicon);
+      if (logo) formDataToSend.append("logo", logo);
+      if (heroImage) formDataToSend.append("heroImage", heroImage);
+      if (favicon) formDataToSend.append("favicon", favicon);
 
       const res = await fetch(`/api/tenant-admin/branding`, {
-        method: 'POST',
+        method: "POST",
         body: formDataToSend,
       });
 
       if (!res.ok) {
         const errorData = await res.json();
-        throw new Error(errorData.message || 'Failed to update branding');
+        throw new Error(errorData.message || "Failed to update branding");
       }
 
-      toast.success('✅ Branding updated successfully! Changes applied to all pages.');
+      toast.success(
+        "✅ Branding updated successfully! Changes applied to all pages.",
+      );
       router.refresh();
     } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : 'Failed to update branding';
+      const errorMessage =
+        error instanceof Error ? error.message : "Failed to update branding";
       toast.error(errorMessage);
-      console.error('Branding update error:', error);
+      console.error("Branding update error:", error);
     } finally {
       setIsLoading(false);
     }
   };
 
-  const handleFileChange = (file: File | null, type: 'logo' | 'heroImage' | 'favicon') => {
-    if (type === 'logo') setLogo(file);
-    if (type === 'heroImage') setHeroImage(file);
-    if (type === 'favicon') setFavicon(file);
+  const handleFileChange = (
+    file: File | null,
+    type: "logo" | "heroImage" | "favicon",
+  ) => {
+    if (type === "logo") setLogo(file);
+    if (type === "heroImage") setHeroImage(file);
+    if (type === "favicon") setFavicon(file);
   };
 
   return (
     <form onSubmit={handleSubmit}>
       <Tabs defaultValue="design" className="space-y-6">
         <TabsList className="grid grid-cols-6 w-full">
-          <TabsTrigger value="design"><Layout className="w-4 h-4 mr-2" />Design</TabsTrigger>
-          <TabsTrigger value="colors"><Palette className="w-4 h-4 mr-2" />Colors</TabsTrigger>
-          <TabsTrigger value="typography"><Type className="w-4 h-4 mr-2" />Typography</TabsTrigger>
-          <TabsTrigger value="layout"><Settings className="w-4 h-4 mr-2" />Layout</TabsTrigger>
-          <TabsTrigger value="content"><FileText className="w-4 h-4 mr-2" />Content</TabsTrigger>
-          <TabsTrigger value="advanced"><Settings className="w-4 h-4 mr-2" />Advanced</TabsTrigger>
+          <TabsTrigger value="design">
+            <Layout className="w-4 h-4 mr-2" />
+            Design
+          </TabsTrigger>
+          <TabsTrigger value="colors">
+            <Palette className="w-4 h-4 mr-2" />
+            Colors
+          </TabsTrigger>
+          <TabsTrigger value="typography">
+            <Type className="w-4 h-4 mr-2" />
+            Typography
+          </TabsTrigger>
+          <TabsTrigger value="layout">
+            <Settings className="w-4 h-4 mr-2" />
+            Layout
+          </TabsTrigger>
+          <TabsTrigger value="content">
+            <FileText className="w-4 h-4 mr-2" />
+            Content
+          </TabsTrigger>
+          <TabsTrigger value="advanced">
+            <Settings className="w-4 h-4 mr-2" />
+            Advanced
+          </TabsTrigger>
         </TabsList>
 
         {/* DESIGN TAB */}
@@ -219,7 +325,9 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                 <Input
                   id="businessName"
                   value={formData.businessName}
-                  onChange={(e) => setFormData({ ...formData, businessName: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, businessName: e.target.value })
+                  }
                   required
                 />
               </div>
@@ -228,7 +336,9 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                 <Textarea
                   id="tagline"
                   value={formData.tagline}
-                  onChange={(e) => setFormData({ ...formData, tagline: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, tagline: e.target.value })
+                  }
                   placeholder="Your trusted medical cannabis partner"
                   rows={2}
                 />
@@ -239,24 +349,31 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
           <Card>
             <CardHeader>
               <CardTitle>Template Style</CardTitle>
-              <CardDescription>Choose the overall design aesthetic</CardDescription>
+              <CardDescription>
+                Choose the overall design aesthetic
+              </CardDescription>
             </CardHeader>
             <CardContent>
               <div className="grid grid-cols-3 gap-4">
                 {TEMPLATES.map((template) => (
                   <div
                     key={template.id}
-                    onClick={() => setFormData({ ...formData, template: template.id as any })}
-                    className={`relative p-4 border-2 rounded-lg cursor-pointer transition-all ${formData.template === template.id
-                      ? 'border-green-500 bg-green-50'
-                      : 'border-gray-200 hover:border-gray-300'
-                      }`}
+                    onClick={() =>
+                      setFormData({ ...formData, template: template.id as any })
+                    }
+                    className={`relative p-4 border-2 rounded-lg cursor-pointer transition-all ${
+                      formData.template === template.id
+                        ? "border-green-500 bg-green-50"
+                        : "border-gray-200 hover:border-gray-300"
+                    }`}
                   >
                     {formData.template === template.id && (
                       <Check className="absolute top-2 right-2 w-5 h-5 text-green-500" />
                     )}
                     <h3 className="font-semibold">{template.name}</h3>
-                    <p className="text-sm text-gray-600">{template.description}</p>
+                    <p className="text-sm text-gray-600">
+                      {template.description}
+                    </p>
                   </div>
                 ))}
               </div>
@@ -266,14 +383,16 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
           <Card>
             <CardHeader>
               <CardTitle>Brand Images</CardTitle>
-              <CardDescription>Upload your logo, hero image, and favicon</CardDescription>
+              <CardDescription>
+                Upload your logo, hero image, and favicon
+              </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
               <FileUpload
                 label="Logo"
                 description="Recommended: PNG/SVG, transparent background"
                 accept="image/*"
-                onChange={(file) => handleFileChange(file, 'logo')}
+                onChange={(file) => handleFileChange(file, "logo")}
                 file={logo}
               />
 
@@ -281,25 +400,29 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                 <Label>Hero Section Type</Label>
                 <Select
                   value={formData.heroType}
-                  onValueChange={(value) => setFormData({ ...formData, heroType: value as any })}
+                  onValueChange={(value) =>
+                    setFormData({ ...formData, heroType: value as any })
+                  }
                 >
                   <SelectTrigger>
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="gradient">Gradient Background</SelectItem>
+                    <SelectItem value="gradient">
+                      Gradient Background
+                    </SelectItem>
                     <SelectItem value="image">Image Background</SelectItem>
                     <SelectItem value="video">Video Background</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
 
-              {formData.heroType === 'image' && (
+              {formData.heroType === "image" && (
                 <FileUpload
                   label="Hero Image"
                   description="Recommended: 1920x1080px, JPG/PNG"
                   accept="image/*"
-                  onChange={(file) => handleFileChange(file, 'heroImage')}
+                  onChange={(file) => handleFileChange(file, "heroImage")}
                   file={heroImage}
                 />
               )}
@@ -308,7 +431,7 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                 label="Favicon"
                 description="Recommended: 32x32px or 64x64px, PNG/ICO"
                 accept="image/*"
-                onChange={(file) => handleFileChange(file, 'favicon')}
+                onChange={(file) => handleFileChange(file, "favicon")}
                 file={favicon}
               />
             </CardContent>
@@ -320,7 +443,9 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
           <Card>
             <CardHeader>
               <CardTitle>Brand Colors</CardTitle>
-              <CardDescription>Define your color palette (applies to ALL pages)</CardDescription>
+              <CardDescription>
+                Define your color palette (applies to ALL pages)
+              </CardDescription>
             </CardHeader>
             <CardContent>
               <div className="grid grid-cols-2 gap-6">
@@ -328,37 +453,49 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                   label="Primary Color"
                   description="Main brand color (buttons, headers)"
                   value={formData.primaryColor}
-                  onChange={(value) => setFormData({ ...formData, primaryColor: value })}
+                  onChange={(value) =>
+                    setFormData({ ...formData, primaryColor: value })
+                  }
                 />
                 <ColorPicker
                   label="Secondary Color"
                   description="Secondary elements, links"
                   value={formData.secondaryColor}
-                  onChange={(value) => setFormData({ ...formData, secondaryColor: value })}
+                  onChange={(value) =>
+                    setFormData({ ...formData, secondaryColor: value })
+                  }
                 />
                 <ColorPicker
                   label="Accent Color"
                   description="Call-to-action highlights"
                   value={formData.accentColor}
-                  onChange={(value) => setFormData({ ...formData, accentColor: value })}
+                  onChange={(value) =>
+                    setFormData({ ...formData, accentColor: value })
+                  }
                 />
                 <ColorPicker
                   label="Background Color"
                   description="Page background"
                   value={formData.backgroundColor}
-                  onChange={(value) => setFormData({ ...formData, backgroundColor: value })}
+                  onChange={(value) =>
+                    setFormData({ ...formData, backgroundColor: value })
+                  }
                 />
                 <ColorPicker
                   label="Text Color"
                   description="Body text"
                   value={formData.textColor}
-                  onChange={(value) => setFormData({ ...formData, textColor: value })}
+                  onChange={(value) =>
+                    setFormData({ ...formData, textColor: value })
+                  }
                 />
                 <ColorPicker
                   label="Heading Color"
                   description="Heading text"
                   value={formData.headingColor}
-                  onChange={(value) => setFormData({ ...formData, headingColor: value })}
+                  onChange={(value) =>
+                    setFormData({ ...formData, headingColor: value })
+                  }
                 />
               </div>
             </CardContent>
@@ -370,14 +507,18 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
           <Card>
             <CardHeader>
               <CardTitle>Typography</CardTitle>
-              <CardDescription>Font styles (applies to ALL pages)</CardDescription>
+              <CardDescription>
+                Font styles (applies to ALL pages)
+              </CardDescription>
             </CardHeader>
             <CardContent className="space-y-6">
               <div>
                 <Label>Body Font</Label>
                 <Select
                   value={formData.fontFamily}
-                  onValueChange={(value) => setFormData({ ...formData, fontFamily: value as any })}
+                  onValueChange={(value) =>
+                    setFormData({ ...formData, fontFamily: value as any })
+                  }
                 >
                   <SelectTrigger>
                     <SelectValue />
@@ -387,7 +528,9 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                       <SelectItem key={font.id} value={font.id}>
                         <div>
                           <div className="font-semibold">{font.name}</div>
-                          <div className="text-xs text-gray-500">{font.description}</div>
+                          <div className="text-xs text-gray-500">
+                            {font.description}
+                          </div>
                         </div>
                       </SelectItem>
                     ))}
@@ -399,7 +542,12 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                 <Label>Heading Font</Label>
                 <Select
                   value={formData.headingFontFamily}
-                  onValueChange={(value) => setFormData({ ...formData, headingFontFamily: value as any })}
+                  onValueChange={(value) =>
+                    setFormData({
+                      ...formData,
+                      headingFontFamily: value as any,
+                    })
+                  }
                 >
                   <SelectTrigger>
                     <SelectValue />
@@ -410,7 +558,9 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                       <SelectItem key={font.id} value={font.id}>
                         <div>
                           <div className="font-semibold">{font.name}</div>
-                          <div className="text-xs text-gray-500">{font.description}</div>
+                          <div className="text-xs text-gray-500">
+                            {font.description}
+                          </div>
                         </div>
                       </SelectItem>
                     ))}
@@ -422,7 +572,9 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                 <Label>Font Size</Label>
                 <Select
                   value={formData.fontSize}
-                  onValueChange={(value) => setFormData({ ...formData, fontSize: value as any })}
+                  onValueChange={(value) =>
+                    setFormData({ ...formData, fontSize: value as any })
+                  }
                 >
                   <SelectTrigger>
                     <SelectValue />
@@ -443,14 +595,18 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
           <Card>
             <CardHeader>
               <CardTitle>Button Styles</CardTitle>
-              <CardDescription>Customize button appearance (applies to ALL pages)</CardDescription>
+              <CardDescription>
+                Customize button appearance (applies to ALL pages)
+              </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
               <div>
                 <Label>Button Shape</Label>
                 <Select
                   value={formData.buttonStyle}
-                  onValueChange={(value) => setFormData({ ...formData, buttonStyle: value as any })}
+                  onValueChange={(value) =>
+                    setFormData({ ...formData, buttonStyle: value as any })
+                  }
                 >
                   <SelectTrigger>
                     <SelectValue />
@@ -467,7 +623,9 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                 <Label>Button Size</Label>
                 <Select
                   value={formData.buttonSize}
-                  onValueChange={(value) => setFormData({ ...formData, buttonSize: value as any })}
+                  onValueChange={(value) =>
+                    setFormData({ ...formData, buttonSize: value as any })
+                  }
                 >
                   <SelectTrigger>
                     <SelectValue />
@@ -492,7 +650,9 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                 <Label>Border Radius</Label>
                 <Select
                   value={formData.borderRadius}
-                  onValueChange={(value) => setFormData({ ...formData, borderRadius: value as any })}
+                  onValueChange={(value) =>
+                    setFormData({ ...formData, borderRadius: value as any })
+                  }
                 >
                   <SelectTrigger>
                     <SelectValue />
@@ -510,7 +670,9 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                 <Label>Spacing</Label>
                 <Select
                   value={formData.spacing}
-                  onValueChange={(value) => setFormData({ ...formData, spacing: value as any })}
+                  onValueChange={(value) =>
+                    setFormData({ ...formData, spacing: value as any })
+                  }
                 >
                   <SelectTrigger>
                     <SelectValue />
@@ -527,7 +689,9 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                 <Label>Shadow Style</Label>
                 <Select
                   value={formData.shadowStyle}
-                  onValueChange={(value) => setFormData({ ...formData, shadowStyle: value as any })}
+                  onValueChange={(value) =>
+                    setFormData({ ...formData, shadowStyle: value as any })
+                  }
                 >
                   <SelectTrigger>
                     <SelectValue />
@@ -549,14 +713,18 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
           <Card>
             <CardHeader>
               <CardTitle>Home Page Content</CardTitle>
-              <CardDescription>Customize your homepage text (editable by you)</CardDescription>
+              <CardDescription>
+                Customize your homepage text (editable by you)
+              </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
               <div>
                 <Label>Hero Title</Label>
                 <Input
                   value={formData.homeHeroTitle}
-                  onChange={(e) => setFormData({ ...formData, homeHeroTitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, homeHeroTitle: e.target.value })
+                  }
                   placeholder="Welcome to Your Medical Cannabis Journey"
                 />
               </div>
@@ -564,7 +732,12 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                 <Label>Hero Subtitle</Label>
                 <Textarea
                   value={formData.homeHeroSubtitle}
-                  onChange={(e) => setFormData({ ...formData, homeHeroSubtitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      homeHeroSubtitle: e.target.value,
+                    })
+                  }
                   placeholder="Premium medical cannabis products delivered with care"
                   rows={2}
                 />
@@ -573,7 +746,12 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                 <Label>Hero Button Text</Label>
                 <Input
                   value={formData.homeHeroCtaText}
-                  onChange={(e) => setFormData({ ...formData, homeHeroCtaText: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      homeHeroCtaText: e.target.value,
+                    })
+                  }
                   placeholder="Get Started"
                 />
               </div>
@@ -583,14 +761,18 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
           <Card>
             <CardHeader>
               <CardTitle>About Page Content</CardTitle>
-              <CardDescription>Tell your story (editable by you)</CardDescription>
+              <CardDescription>
+                Tell your story (editable by you)
+              </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
               <div>
                 <Label>Page Title</Label>
                 <Input
                   value={formData.aboutTitle}
-                  onChange={(e) => setFormData({ ...formData, aboutTitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, aboutTitle: e.target.value })
+                  }
                   placeholder="About Us"
                 />
               </div>
@@ -598,7 +780,9 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                 <Label>About Content</Label>
                 <Textarea
                   value={formData.aboutContent}
-                  onChange={(e) => setFormData({ ...formData, aboutContent: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, aboutContent: e.target.value })
+                  }
                   placeholder="We are dedicated to providing high-quality medical cannabis products..."
                   rows={6}
                 />
@@ -609,14 +793,18 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
           <Card>
             <CardHeader>
               <CardTitle>Contact Page Content</CardTitle>
-              <CardDescription>Your contact information (editable by you)</CardDescription>
+              <CardDescription>
+                Your contact information (editable by you)
+              </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
               <div>
                 <Label>Page Title</Label>
                 <Input
                   value={formData.contactTitle}
-                  onChange={(e) => setFormData({ ...formData, contactTitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, contactTitle: e.target.value })
+                  }
                   placeholder="Get in Touch"
                 />
               </div>
@@ -624,7 +812,12 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                 <Label>Description</Label>
                 <Textarea
                   value={formData.contactDescription}
-                  onChange={(e) => setFormData({ ...formData, contactDescription: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      contactDescription: e.target.value,
+                    })
+                  }
                   placeholder="Have questions? We're here to help."
                   rows={2}
                 />
@@ -634,7 +827,9 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                 <Input
                   type="email"
                   value={formData.contactEmail}
-                  onChange={(e) => setFormData({ ...formData, contactEmail: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, contactEmail: e.target.value })
+                  }
                   placeholder="info@yourstore.com"
                 />
               </div>
@@ -642,7 +837,9 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                 <Label>Phone</Label>
                 <Input
                   value={formData.contactPhone}
-                  onChange={(e) => setFormData({ ...formData, contactPhone: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, contactPhone: e.target.value })
+                  }
                   placeholder="+351 123 456 789"
                 />
               </div>
@@ -650,7 +847,9 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
                 <Label>Address</Label>
                 <Textarea
                   value={formData.contactAddress}
-                  onChange={(e) => setFormData({ ...formData, contactAddress: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, contactAddress: e.target.value })
+                  }
                   placeholder="123 Medical Lane, Lisbon, Portugal"
                   rows={2}
                 />
@@ -659,10 +858,17 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
           </Card>
 
           <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
-            <h4 className="font-semibold text-blue-900 mb-2">ℹ️ Content Management Note</h4>
+            <h4 className="font-semibold text-blue-900 mb-2">
+              ℹ️ Content Management Note
+            </h4>
             <p className="text-sm text-blue-800">
-              <strong>Personal Pages (You Control):</strong> Home, About, Contact - Edit text here.<br />
-              <strong>Country-Based Pages (API Control):</strong> Products, Medical Conditions, How It Works, Consultation, Education - Content comes from your country's regulations and our CRM. You can only customize the theme/colors for these pages.
+              <strong>Personal Pages (You Control):</strong> Home, About,
+              Contact - Edit text here.
+              <br />
+              <strong>Country-Based Pages (API Control):</strong> Products,
+              Medical Conditions, How It Works, Consultation, Education -
+              Content comes from your country's regulations and our CRM. You can
+              only customize the theme/colors for these pages.
             </p>
           </div>
         </TabsContent>
@@ -672,18 +878,23 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
           <Card>
             <CardHeader>
               <CardTitle>Custom CSS</CardTitle>
-              <CardDescription>Add custom CSS for advanced styling (applies to ALL pages)</CardDescription>
+              <CardDescription>
+                Add custom CSS for advanced styling (applies to ALL pages)
+              </CardDescription>
             </CardHeader>
             <CardContent>
               <Textarea
                 value={formData.customCSS}
-                onChange={(e) => setFormData({ ...formData, customCSS: e.target.value })}
+                onChange={(e) =>
+                  setFormData({ ...formData, customCSS: e.target.value })
+                }
                 placeholder=".my-custom-class { color: red; }"
                 rows={10}
                 className="font-mono text-sm"
               />
               <p className="text-sm text-gray-500 mt-2">
-                Advanced users only. Use CSS selectors to override default styles.
+                Advanced users only. Use CSS selectors to override default
+                styles.
               </p>
             </CardContent>
           </Card>
@@ -717,8 +928,13 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
           <p className="text-sm text-gray-600">
             ✨ Changes apply to <strong>ALL pages</strong> in your store
           </p>
-          <Button type="submit" disabled={isLoading} size="lg" className="min-w-[200px]">
-            {isLoading ? 'Saving...' : 'Save All Changes'}
+          <Button
+            type="submit"
+            disabled={isLoading}
+            size="lg"
+            className="min-w-[200px]"
+          >
+            {isLoading ? "Saving..." : "Save All Changes"}
           </Button>
         </div>
       </div>
@@ -727,7 +943,12 @@ export default function BrandingForm({ tenant, activeTemplate }: BrandingFormPro
 }
 
 // Color Picker Component
-function ColorPicker({ label, description, value, onChange }: {
+function ColorPicker({
+  label,
+  description,
+  value,
+  onChange,
+}: {
   label: string;
   description: string;
   value: string;
@@ -757,7 +978,13 @@ function ColorPicker({ label, description, value, onChange }: {
 }
 
 // File Upload Component
-function FileUpload({ label, description, accept, onChange, file }: {
+function FileUpload({
+  label,
+  description,
+  accept,
+  onChange,
+  file,
+}: {
   label: string;
   description: string;
   accept: string;
@@ -781,7 +1008,9 @@ function FileUpload({ label, description, accept, onChange, file }: {
           {file ? (
             <p className="text-sm text-green-600 font-medium">{file.name}</p>
           ) : (
-            <p className="text-sm text-gray-600">Click to upload or drag and drop</p>
+            <p className="text-sm text-gray-600">
+              Click to upload or drag and drop
+            </p>
           )}
         </label>
       </div>
diff --git a/nextjs_space/app/tenant-admin/branding/comprehensive-branding-form.tsx b/nextjs_space/app/tenant-admin/branding/comprehensive-branding-form.tsx
index f4bd925..e392036 100644
--- a/nextjs_space/app/tenant-admin/branding/comprehensive-branding-form.tsx
+++ b/nextjs_space/app/tenant-admin/branding/comprehensive-branding-form.tsx
@@ -1,24 +1,56 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Separator } from '@/components/ui/separator';
-import { Switch } from '@/components/ui/switch';
-import { toast } from '@/components/ui/sonner';
-import { 
-  Upload, Check, Palette, Type, Layout, FileText, Settings, 
-  Image as ImageIcon, Clock, MapPin, Mail, Phone, Globe, 
-  Facebook, Twitter, Instagram, Linkedin, BookOpen, ShoppingBag,
-  Stethoscope, Info, MessageCircle, FileQuestion, Newspaper
-} from 'lucide-react';
-import { TenantSettings } from '@/lib/types';
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
+import { toast } from "@/components/ui/sonner";
+import {
+  Upload,
+  Check,
+  Palette,
+  Type,
+  Layout,
+  FileText,
+  Settings,
+  Image as ImageIcon,
+  Clock,
+  MapPin,
+  Mail,
+  Phone,
+  Globe,
+  Facebook,
+  Twitter,
+  Instagram,
+  Linkedin,
+  BookOpen,
+  ShoppingBag,
+  Stethoscope,
+  Info,
+  MessageCircle,
+  FileQuestion,
+  Newspaper,
+} from "lucide-react";
+import { TenantSettings } from "@/lib/types";
 
 interface ComprehensiveBrandingFormProps {
   tenant: {
@@ -30,138 +62,216 @@ interface ComprehensiveBrandingFormProps {
   };
 }
 
-const DAYS = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'] as const;
+const DAYS = [
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+  "sunday",
+] as const;
 const DAY_LABELS = {
-  monday: 'Monday',
-  tuesday: 'Tuesday',
-  wednesday: 'Wednesday',
-  thursday: 'Thursday',
-  friday: 'Friday',
-  saturday: 'Saturday',
-  sunday: 'Sunday',
+  monday: "Monday",
+  tuesday: "Tuesday",
+  wednesday: "Wednesday",
+  thursday: "Thursday",
+  friday: "Friday",
+  saturday: "Saturday",
+  sunday: "Sunday",
 };
 
-export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrandingFormProps) {
+export default function ComprehensiveBrandingForm({
+  tenant,
+}: ComprehensiveBrandingFormProps) {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   const [logo, setLogo] = useState<File | null>(null);
   const [heroImage, setHeroImage] = useState<File | null>(null);
   const [favicon, setFavicon] = useState<File | null>(null);
-  
+
   const settings = (tenant.settings as TenantSettings) || {};
-  
+
   // Initialize form data with all fields
   const [formData, setFormData] = useState({
     businessName: tenant.businessName,
-    tagline: settings.tagline || '',
-    
+    tagline: settings.tagline || "",
+
     // Business Info
-    businessPhone: settings.businessInfo?.phone || '',
-    businessEmail: settings.businessInfo?.email || '',
-    businessAddress: settings.businessInfo?.address || '',
-    businessCity: settings.businessInfo?.city || '',
-    businessCountry: settings.businessInfo?.country || 'Portugal',
-    emergencyLine: settings.businessInfo?.emergencyLine || '',
-    supportHours: settings.businessInfo?.supportHours || 'Mon-Fri: 9AM-6PM',
-    
+    businessPhone: settings.businessInfo?.phone || "",
+    businessEmail: settings.businessInfo?.email || "",
+    businessAddress: settings.businessInfo?.address || "",
+    businessCity: settings.businessInfo?.city || "",
+    businessCountry: settings.businessInfo?.country || "Portugal",
+    emergencyLine: settings.businessInfo?.emergencyLine || "",
+    supportHours: settings.businessInfo?.supportHours || "Mon-Fri: 9AM-6PM",
+
     // Business Hours
     ...Object.fromEntries(
-      DAYS.flatMap(day => [
-        [`${day}Open`, settings.businessHours?.[day]?.open || '09:00'],
-        [`${day}Close`, settings.businessHours?.[day]?.close || '18:00'],
-        [`${day}Closed`, settings.businessHours?.[day]?.closed || (day === 'sunday')],
-      ])
+      DAYS.flatMap((day) => [
+        [`${day}Open`, settings.businessHours?.[day]?.open || "09:00"],
+        [`${day}Close`, settings.businessHours?.[day]?.close || "18:00"],
+        [
+          `${day}Closed`,
+          settings.businessHours?.[day]?.closed || day === "sunday",
+        ],
+      ]),
     ),
-    
+
     // Footer
-    footerDescription: settings.footer?.description || 'Safe, legal access to medical cannabis in Portugal. Providing personalized treatment plans through licensed healthcare professionals.',
-    footerCopyrightText: settings.footer?.copyrightText || `© ${new Date().getFullYear()} ${tenant.businessName}. All rights reserved.`,
-    footerServingArea: settings.footer?.servingArea || 'Serving All of Portugal',
-    footerServingDetails: settings.footer?.servingDetails || 'From Lisbon to Porto, Algarve to Braga',
-    footerFacebook: settings.footer?.socialMedia?.facebook || '',
-    footerTwitter: settings.footer?.socialMedia?.twitter || '',
-    footerInstagram: settings.footer?.socialMedia?.instagram || '',
-    footerLinkedin: settings.footer?.socialMedia?.linkedin || '',
-    
+    footerDescription:
+      settings.footer?.description ||
+      "Safe, legal access to medical cannabis in Portugal. Providing personalized treatment plans through licensed healthcare professionals.",
+    footerCopyrightText:
+      settings.footer?.copyrightText ||
+      `© ${new Date().getFullYear()} ${tenant.businessName}. All rights reserved.`,
+    footerServingArea:
+      settings.footer?.servingArea || "Serving All of Portugal",
+    footerServingDetails:
+      settings.footer?.servingDetails ||
+      "From Lisbon to Porto, Algarve to Braga",
+    footerFacebook: settings.footer?.socialMedia?.facebook || "",
+    footerTwitter: settings.footer?.socialMedia?.twitter || "",
+    footerInstagram: settings.footer?.socialMedia?.instagram || "",
+    footerLinkedin: settings.footer?.socialMedia?.linkedin || "",
+
     // Colors
-    primaryColor: settings.primaryColor || '#059669',
-    secondaryColor: settings.secondaryColor || '#34d399',
-    accentColor: settings.accentColor || '#10b981',
-    backgroundColor: settings.backgroundColor || '#ffffff',
-    textColor: settings.textColor || '#1f2937',
-    headingColor: settings.headingColor || '#111827',
-    
+    primaryColor: settings.primaryColor || "#059669",
+    secondaryColor: settings.secondaryColor || "#34d399",
+    accentColor: settings.accentColor || "#10b981",
+    backgroundColor: settings.backgroundColor || "#ffffff",
+    textColor: settings.textColor || "#1f2937",
+    headingColor: settings.headingColor || "#111827",
+
     // Typography
-    fontFamily: settings.fontFamily || 'inter',
-    headingFontFamily: settings.headingFontFamily || settings.fontFamily || 'inter',
-    fontSize: settings.fontSize || 'medium',
-    
+    fontFamily: settings.fontFamily || "inter",
+    headingFontFamily:
+      settings.headingFontFamily || settings.fontFamily || "inter",
+    fontSize: settings.fontSize || "medium",
+
     // Layout
-    template: settings.template || 'modern',
-    buttonStyle: settings.buttonStyle || 'rounded',
-    buttonSize: settings.buttonSize || 'medium',
-    borderRadius: settings.borderRadius || 'medium',
-    spacing: settings.spacing || 'normal',
-    shadowStyle: settings.shadowStyle || 'soft',
-    heroType: settings.heroType || 'gradient',
-    
+    template: settings.template || "modern",
+    buttonStyle: settings.buttonStyle || "rounded",
+    buttonSize: settings.buttonSize || "medium",
+    borderRadius: settings.borderRadius || "medium",
+    spacing: settings.spacing || "normal",
+    shadowStyle: settings.shadowStyle || "soft",
+    heroType: settings.heroType || "gradient",
+
     // Home Page
-    homeHeroTitle: settings.pageContent?.home?.heroTitle || 'Welcome to Your Medical Cannabis Journey',
-    homeHeroSubtitle: settings.pageContent?.home?.heroSubtitle || 'Premium medical cannabis products delivered with care',
-    homeHeroCtaText: settings.pageContent?.home?.heroCtaText || 'Get Started',
-    
+    homeHeroTitle:
+      settings.pageContent?.home?.heroTitle ||
+      "Welcome to Your Medical Cannabis Journey",
+    homeHeroSubtitle:
+      settings.pageContent?.home?.heroSubtitle ||
+      "Premium medical cannabis products delivered with care",
+    homeHeroCtaText: settings.pageContent?.home?.heroCtaText || "Get Started",
+
     // About Page
-    aboutTitle: settings.pageContent?.about?.title || 'About Us',
-    aboutSubtitle: settings.pageContent?.about?.subtitle || 'Your trusted partner in medical cannabis',
-    aboutContent: settings.pageContent?.about?.content || 'We are dedicated to providing high-quality medical cannabis products...',
-    
+    aboutTitle: settings.pageContent?.about?.title || "About Us",
+    aboutSubtitle:
+      settings.pageContent?.about?.subtitle ||
+      "Your trusted partner in medical cannabis",
+    aboutContent:
+      settings.pageContent?.about?.content ||
+      "We are dedicated to providing high-quality medical cannabis products...",
+
     // Contact Page
-    contactTitle: settings.pageContent?.contact?.title || 'Contact Us',
-    contactSubtitle: settings.pageContent?.contact?.subtitle || 'Have questions? We are here to help. Reach out to our team anytime.',
-    contactFormTitle: settings.pageContent?.contact?.formTitle || 'Send us a message',
-    contactEmergencyNote: settings.pageContent?.contact?.emergencyNote || 'For urgent medical concerns, please contact your healthcare provider or emergency services.',
-    
+    contactTitle: settings.pageContent?.contact?.title || "Contact Us",
+    contactSubtitle:
+      settings.pageContent?.contact?.subtitle ||
+      "Have questions? We are here to help. Reach out to our team anytime.",
+    contactFormTitle:
+      settings.pageContent?.contact?.formTitle || "Send us a message",
+    contactEmergencyNote:
+      settings.pageContent?.contact?.emergencyNote ||
+      "For urgent medical concerns, please contact your healthcare provider or emergency services.",
+
     // Products Page
-    productsTitle: settings.pageContent?.products?.title || 'Medical Cannabis Products',
-    productsSubtitle: settings.pageContent?.products?.subtitle || 'Browse our curated selection of EU-GMP certified medical cannabis strains. All products require a valid prescription.',
-    productsSearchPlaceholder: settings.pageContent?.products?.searchPlaceholder || 'Search products...',
-    
+    productsTitle:
+      settings.pageContent?.products?.title || "Medical Cannabis Products",
+    productsSubtitle:
+      settings.pageContent?.products?.subtitle ||
+      "Browse our curated selection of EU-GMP certified medical cannabis strains. All products require a valid prescription.",
+    productsSearchPlaceholder:
+      settings.pageContent?.products?.searchPlaceholder || "Search products...",
+
     // How It Works Page
-    howItWorksTitle: settings.pageContent?.howItWorks?.title || 'How It Works',
-    howItWorksSubtitle: settings.pageContent?.howItWorks?.subtitle || 'Your path to legal medical cannabis in four simple steps',
-    howItWorksDescription: settings.pageContent?.howItWorks?.description || 'Getting started with medical cannabis is straightforward, safe, and legal',
-    howItWorksStep1Title: settings.pageContent?.howItWorks?.steps?.[0]?.title || 'Book Your Consultation',
-    howItWorksStep1Desc: settings.pageContent?.howItWorks?.steps?.[0]?.description || 'Schedule an online consultation with one of our licensed medical professionals.',
-    howItWorksStep2Title: settings.pageContent?.howItWorks?.steps?.[1]?.title || 'Medical Assessment',
-    howItWorksStep2Desc: settings.pageContent?.howItWorks?.steps?.[1]?.description || 'Discuss your medical history and conditions during a confidential video consultation.',
-    howItWorksStep3Title: settings.pageContent?.howItWorks?.steps?.[2]?.title || 'Receive Your Prescription',
-    howItWorksStep3Desc: settings.pageContent?.howItWorks?.steps?.[2]?.description || 'If approved, receive your medical cannabis prescription and product recommendations.',
-    howItWorksStep4Title: settings.pageContent?.howItWorks?.steps?.[3]?.title || 'Order Your Products',
-    howItWorksStep4Desc: settings.pageContent?.howItWorks?.steps?.[3]?.description || 'Browse our catalog and order your prescribed products with secure delivery.',
-    howItWorksComplianceTitle: settings.pageContent?.howItWorks?.complianceTitle || 'Legal & Regulatory Compliance',
-    
+    howItWorksTitle: settings.pageContent?.howItWorks?.title || "How It Works",
+    howItWorksSubtitle:
+      settings.pageContent?.howItWorks?.subtitle ||
+      "Your path to legal medical cannabis in four simple steps",
+    howItWorksDescription:
+      settings.pageContent?.howItWorks?.description ||
+      "Getting started with medical cannabis is straightforward, safe, and legal",
+    howItWorksStep1Title:
+      settings.pageContent?.howItWorks?.steps?.[0]?.title ||
+      "Book Your Consultation",
+    howItWorksStep1Desc:
+      settings.pageContent?.howItWorks?.steps?.[0]?.description ||
+      "Schedule an online consultation with one of our licensed medical professionals.",
+    howItWorksStep2Title:
+      settings.pageContent?.howItWorks?.steps?.[1]?.title ||
+      "Medical Assessment",
+    howItWorksStep2Desc:
+      settings.pageContent?.howItWorks?.steps?.[1]?.description ||
+      "Discuss your medical history and conditions during a confidential video consultation.",
+    howItWorksStep3Title:
+      settings.pageContent?.howItWorks?.steps?.[2]?.title ||
+      "Receive Your Prescription",
+    howItWorksStep3Desc:
+      settings.pageContent?.howItWorks?.steps?.[2]?.description ||
+      "If approved, receive your medical cannabis prescription and product recommendations.",
+    howItWorksStep4Title:
+      settings.pageContent?.howItWorks?.steps?.[3]?.title ||
+      "Order Your Products",
+    howItWorksStep4Desc:
+      settings.pageContent?.howItWorks?.steps?.[3]?.description ||
+      "Browse our catalog and order your prescribed products with secure delivery.",
+    howItWorksComplianceTitle:
+      settings.pageContent?.howItWorks?.complianceTitle ||
+      "Legal & Regulatory Compliance",
+
     // Consultation Page
-    consultationTitle: settings.pageContent?.consultation?.title || 'Book a Consultation',
-    consultationSubtitle: settings.pageContent?.consultation?.subtitle || 'Schedule your video consultation with a licensed medical professional',
-    consultationDescription: settings.pageContent?.consultation?.description || 'Our licensed healthcare professionals are here to evaluate your condition and determine if medical cannabis is right for you.',
-    
+    consultationTitle:
+      settings.pageContent?.consultation?.title || "Book a Consultation",
+    consultationSubtitle:
+      settings.pageContent?.consultation?.subtitle ||
+      "Schedule your video consultation with a licensed medical professional",
+    consultationDescription:
+      settings.pageContent?.consultation?.description ||
+      "Our licensed healthcare professionals are here to evaluate your condition and determine if medical cannabis is right for you.",
+
     // Conditions Page
-    conditionsTitle: settings.pageContent?.conditions?.title || 'Medical Conditions',
-    conditionsSubtitle: settings.pageContent?.conditions?.subtitle || 'Conditions treatable with medical cannabis',
-    conditionsDescription: settings.pageContent?.conditions?.description || 'Medical cannabis may be effective for various conditions. Consult with our healthcare professionals to learn more.',
-    
+    conditionsTitle:
+      settings.pageContent?.conditions?.title || "Medical Conditions",
+    conditionsSubtitle:
+      settings.pageContent?.conditions?.subtitle ||
+      "Conditions treatable with medical cannabis",
+    conditionsDescription:
+      settings.pageContent?.conditions?.description ||
+      "Medical cannabis may be effective for various conditions. Consult with our healthcare professionals to learn more.",
+
     // FAQ Page
-    faqTitle: settings.pageContent?.faq?.title || 'Frequently Asked Questions',
-    faqSubtitle: settings.pageContent?.faq?.subtitle || 'Find answers to common questions about medical cannabis',
-    faqDescription: settings.pageContent?.faq?.description || 'Have questions? Find answers to the most common questions about medical cannabis, our services, and the legal framework.',
-    
+    faqTitle: settings.pageContent?.faq?.title || "Frequently Asked Questions",
+    faqSubtitle:
+      settings.pageContent?.faq?.subtitle ||
+      "Find answers to common questions about medical cannabis",
+    faqDescription:
+      settings.pageContent?.faq?.description ||
+      "Have questions? Find answers to the most common questions about medical cannabis, our services, and the legal framework.",
+
     // Blog Page
-    blogTitle: settings.pageContent?.blog?.title || 'Education & News',
-    blogSubtitle: settings.pageContent?.blog?.subtitle || 'Latest updates and educational content',
-    blogDescription: settings.pageContent?.blog?.description || 'Stay informed with the latest news, research, and educational content about medical cannabis.',
-    
+    blogTitle: settings.pageContent?.blog?.title || "Education & News",
+    blogSubtitle:
+      settings.pageContent?.blog?.subtitle ||
+      "Latest updates and educational content",
+    blogDescription:
+      settings.pageContent?.blog?.description ||
+      "Stay informed with the latest news, research, and educational content about medical cannabis.",
+
     // Advanced
-    customCSS: settings.customCSS || '',
+    customCSS: settings.customCSS || "",
   });
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -170,12 +280,12 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
 
     try {
       const submitFormData = new FormData();
-      submitFormData.append('businessName', formData.businessName);
-      
+      submitFormData.append("businessName", formData.businessName);
+
       // Construct the settings object
       const settingsData: TenantSettings = {
         tagline: formData.tagline,
-        
+
         // Business Info
         businessInfo: {
           phone: formData.businessPhone,
@@ -186,19 +296,21 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
           emergencyLine: formData.emergencyLine,
           supportHours: formData.supportHours,
         },
-        
+
         // Business Hours
         businessHours: Object.fromEntries(
-          DAYS.map(day => [
+          DAYS.map((day) => [
             day,
             {
               open: formData[`${day}Open` as keyof typeof formData] as string,
               close: formData[`${day}Close` as keyof typeof formData] as string,
-              closed: formData[`${day}Closed` as keyof typeof formData] as boolean,
-            }
-          ])
+              closed: formData[
+                `${day}Closed` as keyof typeof formData
+              ] as boolean,
+            },
+          ]),
         ),
-        
+
         // Footer
         footer: {
           description: formData.footerDescription,
@@ -212,7 +324,7 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
             linkedin: formData.footerLinkedin,
           },
         },
-        
+
         // Colors
         primaryColor: formData.primaryColor,
         secondaryColor: formData.secondaryColor,
@@ -220,12 +332,12 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
         backgroundColor: formData.backgroundColor,
         textColor: formData.textColor,
         headingColor: formData.headingColor,
-        
+
         // Typography
         fontFamily: formData.fontFamily as any,
         headingFontFamily: formData.headingFontFamily as any,
         fontSize: formData.fontSize as any,
-        
+
         // Layout
         template: formData.template as any,
         buttonStyle: formData.buttonStyle as any,
@@ -234,7 +346,7 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
         spacing: formData.spacing as any,
         shadowStyle: formData.shadowStyle as any,
         heroType: formData.heroType as any,
-        
+
         // Page Content
         pageContent: {
           home: {
@@ -263,10 +375,26 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
             subtitle: formData.howItWorksSubtitle,
             description: formData.howItWorksDescription,
             steps: [
-              { number: 1, title: formData.howItWorksStep1Title, description: formData.howItWorksStep1Desc },
-              { number: 2, title: formData.howItWorksStep2Title, description: formData.howItWorksStep2Desc },
-              { number: 3, title: formData.howItWorksStep3Title, description: formData.howItWorksStep3Desc },
-              { number: 4, title: formData.howItWorksStep4Title, description: formData.howItWorksStep4Desc },
+              {
+                number: 1,
+                title: formData.howItWorksStep1Title,
+                description: formData.howItWorksStep1Desc,
+              },
+              {
+                number: 2,
+                title: formData.howItWorksStep2Title,
+                description: formData.howItWorksStep2Desc,
+              },
+              {
+                number: 3,
+                title: formData.howItWorksStep3Title,
+                description: formData.howItWorksStep3Desc,
+              },
+              {
+                number: 4,
+                title: formData.howItWorksStep4Title,
+                description: formData.howItWorksStep4Desc,
+              },
             ],
             complianceTitle: formData.howItWorksComplianceTitle,
           },
@@ -291,38 +419,38 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
             description: formData.blogDescription,
           },
         },
-        
+
         // Advanced
         customCSS: formData.customCSS,
-        
+
         // Preserve existing paths
         logoPath: settings.logoPath,
         heroImagePath: settings.heroImagePath,
         faviconPath: settings.faviconPath,
       };
 
-      submitFormData.append('settings', JSON.stringify(settingsData));
-      
+      submitFormData.append("settings", JSON.stringify(settingsData));
+
       // Add files if selected
-      if (logo) submitFormData.append('logo', logo);
-      if (heroImage) submitFormData.append('heroImage', heroImage);
-      if (favicon) submitFormData.append('favicon', favicon);
+      if (logo) submitFormData.append("logo", logo);
+      if (heroImage) submitFormData.append("heroImage", heroImage);
+      if (favicon) submitFormData.append("favicon", favicon);
 
       const response = await fetch(`/api/tenant-admin/branding`, {
-        method: 'PUT',
+        method: "PUT",
         body: submitFormData,
       });
 
       if (!response.ok) {
         const error = await response.json();
-        throw new Error(error.message || 'Failed to update branding');
+        throw new Error(error.message || "Failed to update branding");
       }
 
-      toast.success('Branding updated successfully!');
+      toast.success("Branding updated successfully!");
       router.refresh();
     } catch (error: any) {
-      console.error('Error updating branding:', error);
-      toast.error(error.message || 'Failed to update branding');
+      console.error("Error updating branding:", error);
+      toast.error(error.message || "Failed to update branding");
     } finally {
       setIsLoading(false);
     }
@@ -332,18 +460,54 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
     <form onSubmit={handleSubmit} className="space-y-6">
       <Tabs defaultValue="business" className="space-y-6">
         <TabsList className="grid w-full grid-cols-6 lg:grid-cols-12">
-          <TabsTrigger value="business" className="text-xs"><MapPin className="w-3 h-3 mr-1" />Business</TabsTrigger>
-          <TabsTrigger value="hours" className="text-xs"><Clock className="w-3 h-3 mr-1" />Hours</TabsTrigger>
-          <TabsTrigger value="footer" className="text-xs"><Globe className="w-3 h-3 mr-1" />Footer</TabsTrigger>
-          <TabsTrigger value="design" className="text-xs"><Palette className="w-3 h-3 mr-1" />Design</TabsTrigger>
-          <TabsTrigger value="home" className="text-xs"><Layout className="w-3 h-3 mr-1" />Home</TabsTrigger>
-          <TabsTrigger value="about" className="text-xs"><Info className="w-3 h-3 mr-1" />About</TabsTrigger>
-          <TabsTrigger value="contact" className="text-xs"><Mail className="w-3 h-3 mr-1" />Contact</TabsTrigger>
-          <TabsTrigger value="products" className="text-xs"><ShoppingBag className="w-3 h-3 mr-1" />Products</TabsTrigger>
-          <TabsTrigger value="how-it-works" className="text-xs"><FileText className="w-3 h-3 mr-1" />How It Works</TabsTrigger>
-          <TabsTrigger value="consultation" className="text-xs"><Stethoscope className="w-3 h-3 mr-1" />Consultation</TabsTrigger>
-          <TabsTrigger value="other-pages" className="text-xs"><BookOpen className="w-3 h-3 mr-1" />Other</TabsTrigger>
-          <TabsTrigger value="advanced" className="text-xs"><Settings className="w-3 h-3 mr-1" />Advanced</TabsTrigger>
+          <TabsTrigger value="business" className="text-xs">
+            <MapPin className="w-3 h-3 mr-1" />
+            Business
+          </TabsTrigger>
+          <TabsTrigger value="hours" className="text-xs">
+            <Clock className="w-3 h-3 mr-1" />
+            Hours
+          </TabsTrigger>
+          <TabsTrigger value="footer" className="text-xs">
+            <Globe className="w-3 h-3 mr-1" />
+            Footer
+          </TabsTrigger>
+          <TabsTrigger value="design" className="text-xs">
+            <Palette className="w-3 h-3 mr-1" />
+            Design
+          </TabsTrigger>
+          <TabsTrigger value="home" className="text-xs">
+            <Layout className="w-3 h-3 mr-1" />
+            Home
+          </TabsTrigger>
+          <TabsTrigger value="about" className="text-xs">
+            <Info className="w-3 h-3 mr-1" />
+            About
+          </TabsTrigger>
+          <TabsTrigger value="contact" className="text-xs">
+            <Mail className="w-3 h-3 mr-1" />
+            Contact
+          </TabsTrigger>
+          <TabsTrigger value="products" className="text-xs">
+            <ShoppingBag className="w-3 h-3 mr-1" />
+            Products
+          </TabsTrigger>
+          <TabsTrigger value="how-it-works" className="text-xs">
+            <FileText className="w-3 h-3 mr-1" />
+            How It Works
+          </TabsTrigger>
+          <TabsTrigger value="consultation" className="text-xs">
+            <Stethoscope className="w-3 h-3 mr-1" />
+            Consultation
+          </TabsTrigger>
+          <TabsTrigger value="other-pages" className="text-xs">
+            <BookOpen className="w-3 h-3 mr-1" />
+            Other
+          </TabsTrigger>
+          <TabsTrigger value="advanced" className="text-xs">
+            <Settings className="w-3 h-3 mr-1" />
+            Advanced
+          </TabsTrigger>
         </TabsList>
 
         {/* BUSINESS INFO TAB */}
@@ -365,24 +529,28 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                   <Input
                     id="businessName"
                     value={formData.businessName}
-                    onChange={(e) => setFormData({ ...formData, businessName: e.target.value })}
+                    onChange={(e) =>
+                      setFormData({ ...formData, businessName: e.target.value })
+                    }
                     required
                   />
                 </div>
-                
+
                 <div className="space-y-2">
                   <Label htmlFor="tagline">Tagline</Label>
                   <Input
                     id="tagline"
                     placeholder="Your business tagline"
                     value={formData.tagline}
-                    onChange={(e) => setFormData({ ...formData, tagline: e.target.value })}
+                    onChange={(e) =>
+                      setFormData({ ...formData, tagline: e.target.value })
+                    }
                   />
                 </div>
               </div>
-              
+
               <Separator />
-              
+
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div className="space-y-2">
                   <Label htmlFor="businessPhone">Phone Number</Label>
@@ -390,10 +558,15 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                     id="businessPhone"
                     placeholder="+351 XXX XXX XXX"
                     value={formData.businessPhone}
-                    onChange={(e) => setFormData({ ...formData, businessPhone: e.target.value })}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        businessPhone: e.target.value,
+                      })
+                    }
                   />
                 </div>
-                
+
                 <div className="space-y-2">
                   <Label htmlFor="businessEmail">Email Address</Label>
                   <Input
@@ -401,11 +574,16 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                     type="email"
                     placeholder="info@example.com"
                     value={formData.businessEmail}
-                    onChange={(e) => setFormData({ ...formData, businessEmail: e.target.value })}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        businessEmail: e.target.value,
+                      })
+                    }
                   />
                 </div>
               </div>
-              
+
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div className="space-y-2">
                   <Label htmlFor="emergencyLine">Emergency Line (24/7)</Label>
@@ -413,33 +591,45 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                     id="emergencyLine"
                     placeholder="+351 XXX XXX XXX"
                     value={formData.emergencyLine}
-                    onChange={(e) => setFormData({ ...formData, emergencyLine: e.target.value })}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        emergencyLine: e.target.value,
+                      })
+                    }
                   />
                 </div>
-                
+
                 <div className="space-y-2">
                   <Label htmlFor="supportHours">Support Hours</Label>
                   <Input
                     id="supportHours"
                     placeholder="Mon-Fri: 9AM-6PM"
                     value={formData.supportHours}
-                    onChange={(e) => setFormData({ ...formData, supportHours: e.target.value })}
+                    onChange={(e) =>
+                      setFormData({ ...formData, supportHours: e.target.value })
+                    }
                   />
                 </div>
               </div>
-              
+
               <Separator />
-              
+
               <div className="space-y-2">
                 <Label htmlFor="businessAddress">Street Address</Label>
                 <Input
                   id="businessAddress"
                   placeholder="123 Main Street"
                   value={formData.businessAddress}
-                  onChange={(e) => setFormData({ ...formData, businessAddress: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      businessAddress: e.target.value,
+                    })
+                  }
                 />
               </div>
-              
+
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div className="space-y-2">
                   <Label htmlFor="businessCity">City</Label>
@@ -447,17 +637,24 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                     id="businessCity"
                     placeholder="Lisbon"
                     value={formData.businessCity}
-                    onChange={(e) => setFormData({ ...formData, businessCity: e.target.value })}
+                    onChange={(e) =>
+                      setFormData({ ...formData, businessCity: e.target.value })
+                    }
                   />
                 </div>
-                
+
                 <div className="space-y-2">
                   <Label htmlFor="businessCountry">Country</Label>
                   <Input
                     id="businessCountry"
                     placeholder="Portugal"
                     value={formData.businessCountry}
-                    onChange={(e) => setFormData({ ...formData, businessCountry: e.target.value })}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        businessCountry: e.target.value,
+                      })
+                    }
                   />
                 </div>
               </div>
@@ -478,15 +675,17 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
               </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
-              {DAYS.map(day => (
+              {DAYS.map((day) => (
                 <div key={day} className="flex items-center gap-4">
                   <div className="w-32">
                     <Label>{DAY_LABELS[day]}</Label>
                   </div>
                   <div className="flex items-center gap-2 flex-1">
                     <Switch
-                      checked={!formData[`${day}Closed` as keyof typeof formData]}
-                      onCheckedChange={(checked) => 
+                      checked={
+                        !formData[`${day}Closed` as keyof typeof formData]
+                      }
+                      onCheckedChange={(checked) =>
                         setFormData({ ...formData, [`${day}Closed`]: !checked })
                       }
                     />
@@ -494,15 +693,33 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                       <>
                         <Input
                           type="time"
-                          value={formData[`${day}Open` as keyof typeof formData] as string}
-                          onChange={(e) => setFormData({ ...formData, [`${day}Open`]: e.target.value })}
+                          value={
+                            formData[
+                              `${day}Open` as keyof typeof formData
+                            ] as string
+                          }
+                          onChange={(e) =>
+                            setFormData({
+                              ...formData,
+                              [`${day}Open`]: e.target.value,
+                            })
+                          }
                           className="w-32"
                         />
                         <span>to</span>
                         <Input
                           type="time"
-                          value={formData[`${day}Close` as keyof typeof formData] as string}
-                          onChange={(e) => setFormData({ ...formData, [`${day}Close`]: e.target.value })}
+                          value={
+                            formData[
+                              `${day}Close` as keyof typeof formData
+                            ] as string
+                          }
+                          onChange={(e) =>
+                            setFormData({
+                              ...formData,
+                              [`${day}Close`]: e.target.value,
+                            })
+                          }
                           className="w-32"
                         />
                       </>
@@ -536,39 +753,59 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                   rows={3}
                   placeholder="A brief description about your business"
                   value={formData.footerDescription}
-                  onChange={(e) => setFormData({ ...formData, footerDescription: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      footerDescription: e.target.value,
+                    })
+                  }
                 />
               </div>
-              
+
               <Separator />
-              
+
               <div className="space-y-2">
                 <Label htmlFor="footerServingArea">Serving Area Title</Label>
                 <Input
                   id="footerServingArea"
                   placeholder="Serving All of Portugal"
                   value={formData.footerServingArea}
-                  onChange={(e) => setFormData({ ...formData, footerServingArea: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      footerServingArea: e.target.value,
+                    })
+                  }
                 />
               </div>
-              
+
               <div className="space-y-2">
-                <Label htmlFor="footerServingDetails">Serving Area Details</Label>
+                <Label htmlFor="footerServingDetails">
+                  Serving Area Details
+                </Label>
                 <Input
                   id="footerServingDetails"
                   placeholder="From Lisbon to Porto, Algarve to Braga"
                   value={formData.footerServingDetails}
-                  onChange={(e) => setFormData({ ...formData, footerServingDetails: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      footerServingDetails: e.target.value,
+                    })
+                  }
                 />
               </div>
-              
+
               <Separator />
-              
+
               <div className="space-y-4">
                 <Label>Social Media Links</Label>
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div className="space-y-2">
-                    <Label htmlFor="footerFacebook" className="flex items-center gap-2">
+                    <Label
+                      htmlFor="footerFacebook"
+                      className="flex items-center gap-2"
+                    >
                       <Facebook className="w-4 h-4" />
                       Facebook
                     </Label>
@@ -576,12 +813,20 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                       id="footerFacebook"
                       placeholder="https://facebook.com/yourpage"
                       value={formData.footerFacebook}
-                      onChange={(e) => setFormData({ ...formData, footerFacebook: e.target.value })}
+                      onChange={(e) =>
+                        setFormData({
+                          ...formData,
+                          footerFacebook: e.target.value,
+                        })
+                      }
                     />
                   </div>
-                  
+
                   <div className="space-y-2">
-                    <Label htmlFor="footerTwitter" className="flex items-center gap-2">
+                    <Label
+                      htmlFor="footerTwitter"
+                      className="flex items-center gap-2"
+                    >
                       <Twitter className="w-4 h-4" />
                       Twitter
                     </Label>
@@ -589,12 +834,20 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                       id="footerTwitter"
                       placeholder="https://twitter.com/yourhandle"
                       value={formData.footerTwitter}
-                      onChange={(e) => setFormData({ ...formData, footerTwitter: e.target.value })}
+                      onChange={(e) =>
+                        setFormData({
+                          ...formData,
+                          footerTwitter: e.target.value,
+                        })
+                      }
                     />
                   </div>
-                  
+
                   <div className="space-y-2">
-                    <Label htmlFor="footerInstagram" className="flex items-center gap-2">
+                    <Label
+                      htmlFor="footerInstagram"
+                      className="flex items-center gap-2"
+                    >
                       <Instagram className="w-4 h-4" />
                       Instagram
                     </Label>
@@ -602,12 +855,20 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                       id="footerInstagram"
                       placeholder="https://instagram.com/yourhandle"
                       value={formData.footerInstagram}
-                      onChange={(e) => setFormData({ ...formData, footerInstagram: e.target.value })}
+                      onChange={(e) =>
+                        setFormData({
+                          ...formData,
+                          footerInstagram: e.target.value,
+                        })
+                      }
                     />
                   </div>
-                  
+
                   <div className="space-y-2">
-                    <Label htmlFor="footerLinkedin" className="flex items-center gap-2">
+                    <Label
+                      htmlFor="footerLinkedin"
+                      className="flex items-center gap-2"
+                    >
                       <Linkedin className="w-4 h-4" />
                       LinkedIn
                     </Label>
@@ -615,21 +876,31 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                       id="footerLinkedin"
                       placeholder="https://linkedin.com/company/yourcompany"
                       value={formData.footerLinkedin}
-                      onChange={(e) => setFormData({ ...formData, footerLinkedin: e.target.value })}
+                      onChange={(e) =>
+                        setFormData({
+                          ...formData,
+                          footerLinkedin: e.target.value,
+                        })
+                      }
                     />
                   </div>
                 </div>
               </div>
-              
+
               <Separator />
-              
+
               <div className="space-y-2">
                 <Label htmlFor="footerCopyrightText">Copyright Text</Label>
                 <Input
                   id="footerCopyrightText"
                   placeholder="© 2025 Your Business. All rights reserved."
                   value={formData.footerCopyrightText}
-                  onChange={(e) => setFormData({ ...formData, footerCopyrightText: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      footerCopyrightText: e.target.value,
+                    })
+                  }
                 />
               </div>
             </CardContent>
@@ -652,7 +923,9 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                     id="primaryColor"
                     type="color"
                     value={formData.primaryColor}
-                    onChange={(e) => setFormData({ ...formData, primaryColor: e.target.value })}
+                    onChange={(e) =>
+                      setFormData({ ...formData, primaryColor: e.target.value })
+                    }
                   />
                 </div>
                 <div className="space-y-2">
@@ -661,7 +934,12 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                     id="secondaryColor"
                     type="color"
                     value={formData.secondaryColor}
-                    onChange={(e) => setFormData({ ...formData, secondaryColor: e.target.value })}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        secondaryColor: e.target.value,
+                      })
+                    }
                   />
                 </div>
                 <div className="space-y-2">
@@ -670,19 +948,23 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                     id="accentColor"
                     type="color"
                     value={formData.accentColor}
-                    onChange={(e) => setFormData({ ...formData, accentColor: e.target.value })}
+                    onChange={(e) =>
+                      setFormData({ ...formData, accentColor: e.target.value })
+                    }
                   />
                 </div>
               </div>
-              
+
               <Separator />
-              
+
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div className="space-y-2">
                   <Label htmlFor="fontFamily">Body Font</Label>
                   <Select
                     value={formData.fontFamily}
-                    onValueChange={(value) => setFormData({ ...formData, fontFamily: value })}
+                    onValueChange={(value) =>
+                      setFormData({ ...formData, fontFamily: value })
+                    }
                   >
                     <SelectTrigger>
                       <SelectValue />
@@ -695,12 +977,14 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                     </SelectContent>
                   </Select>
                 </div>
-                
+
                 <div className="space-y-2">
                   <Label htmlFor="headingFontFamily">Heading Font</Label>
                   <Select
                     value={formData.headingFontFamily}
-                    onValueChange={(value) => setFormData({ ...formData, headingFontFamily: value })}
+                    onValueChange={(value) =>
+                      setFormData({ ...formData, headingFontFamily: value })
+                    }
                   >
                     <SelectTrigger>
                       <SelectValue />
@@ -722,7 +1006,9 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
           <Card>
             <CardHeader>
               <CardTitle>Home Page Content</CardTitle>
-              <CardDescription>Customize your homepage hero section</CardDescription>
+              <CardDescription>
+                Customize your homepage hero section
+              </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
               <div className="space-y-2">
@@ -730,26 +1016,40 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                 <Input
                   id="homeHeroTitle"
                   value={formData.homeHeroTitle}
-                  onChange={(e) => setFormData({ ...formData, homeHeroTitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, homeHeroTitle: e.target.value })
+                  }
                 />
               </div>
-              
+
               <div className="space-y-2">
                 <Label htmlFor="homeHeroSubtitle">Hero Subtitle</Label>
                 <Textarea
                   id="homeHeroSubtitle"
                   rows={2}
                   value={formData.homeHeroSubtitle}
-                  onChange={(e) => setFormData({ ...formData, homeHeroSubtitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      homeHeroSubtitle: e.target.value,
+                    })
+                  }
                 />
               </div>
-              
+
               <div className="space-y-2">
-                <Label htmlFor="homeHeroCtaText">Call-to-Action Button Text</Label>
+                <Label htmlFor="homeHeroCtaText">
+                  Call-to-Action Button Text
+                </Label>
                 <Input
                   id="homeHeroCtaText"
                   value={formData.homeHeroCtaText}
-                  onChange={(e) => setFormData({ ...formData, homeHeroCtaText: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      homeHeroCtaText: e.target.value,
+                    })
+                  }
                 />
               </div>
             </CardContent>
@@ -769,26 +1069,32 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                 <Input
                   id="aboutTitle"
                   value={formData.aboutTitle}
-                  onChange={(e) => setFormData({ ...formData, aboutTitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, aboutTitle: e.target.value })
+                  }
                 />
               </div>
-              
+
               <div className="space-y-2">
                 <Label htmlFor="aboutSubtitle">Page Subtitle</Label>
                 <Input
                   id="aboutSubtitle"
                   value={formData.aboutSubtitle}
-                  onChange={(e) => setFormData({ ...formData, aboutSubtitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, aboutSubtitle: e.target.value })
+                  }
                 />
               </div>
-              
+
               <div className="space-y-2">
                 <Label htmlFor="aboutContent">About Content</Label>
                 <Textarea
                   id="aboutContent"
                   rows={6}
                   value={formData.aboutContent}
-                  onChange={(e) => setFormData({ ...formData, aboutContent: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, aboutContent: e.target.value })
+                  }
                 />
               </div>
             </CardContent>
@@ -808,36 +1114,55 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                 <Input
                   id="contactTitle"
                   value={formData.contactTitle}
-                  onChange={(e) => setFormData({ ...formData, contactTitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, contactTitle: e.target.value })
+                  }
                 />
               </div>
-              
+
               <div className="space-y-2">
                 <Label htmlFor="contactSubtitle">Page Subtitle</Label>
                 <Textarea
                   id="contactSubtitle"
                   rows={2}
                   value={formData.contactSubtitle}
-                  onChange={(e) => setFormData({ ...formData, contactSubtitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      contactSubtitle: e.target.value,
+                    })
+                  }
                 />
               </div>
-              
+
               <div className="space-y-2">
                 <Label htmlFor="contactFormTitle">Contact Form Title</Label>
                 <Input
                   id="contactFormTitle"
                   value={formData.contactFormTitle}
-                  onChange={(e) => setFormData({ ...formData, contactFormTitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      contactFormTitle: e.target.value,
+                    })
+                  }
                 />
               </div>
-              
+
               <div className="space-y-2">
-                <Label htmlFor="contactEmergencyNote">Emergency Support Note</Label>
+                <Label htmlFor="contactEmergencyNote">
+                  Emergency Support Note
+                </Label>
                 <Textarea
                   id="contactEmergencyNote"
                   rows={2}
                   value={formData.contactEmergencyNote}
-                  onChange={(e) => setFormData({ ...formData, contactEmergencyNote: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      contactEmergencyNote: e.target.value,
+                    })
+                  }
                 />
               </div>
             </CardContent>
@@ -849,7 +1174,9 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
           <Card>
             <CardHeader>
               <CardTitle>Products Page Content</CardTitle>
-              <CardDescription>Product catalog header and description</CardDescription>
+              <CardDescription>
+                Product catalog header and description
+              </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
               <div className="space-y-2">
@@ -857,26 +1184,40 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                 <Input
                   id="productsTitle"
                   value={formData.productsTitle}
-                  onChange={(e) => setFormData({ ...formData, productsTitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, productsTitle: e.target.value })
+                  }
                 />
               </div>
-              
+
               <div className="space-y-2">
                 <Label htmlFor="productsSubtitle">Page Subtitle</Label>
                 <Textarea
                   id="productsSubtitle"
                   rows={2}
                   value={formData.productsSubtitle}
-                  onChange={(e) => setFormData({ ...formData, productsSubtitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      productsSubtitle: e.target.value,
+                    })
+                  }
                 />
               </div>
-              
+
               <div className="space-y-2">
-                <Label htmlFor="productsSearchPlaceholder">Search Placeholder Text</Label>
+                <Label htmlFor="productsSearchPlaceholder">
+                  Search Placeholder Text
+                </Label>
                 <Input
                   id="productsSearchPlaceholder"
                   value={formData.productsSearchPlaceholder}
-                  onChange={(e) => setFormData({ ...formData, productsSearchPlaceholder: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      productsSearchPlaceholder: e.target.value,
+                    })
+                  }
                 />
               </div>
             </CardContent>
@@ -888,7 +1229,9 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
           <Card>
             <CardHeader>
               <CardTitle>How It Works Page</CardTitle>
-              <CardDescription>Process steps and compliance information</CardDescription>
+              <CardDescription>
+                Process steps and compliance information
+              </CardDescription>
             </CardHeader>
             <CardContent className="space-y-6">
               <div className="space-y-2">
@@ -896,62 +1239,104 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                 <Input
                   id="howItWorksTitle"
                   value={formData.howItWorksTitle}
-                  onChange={(e) => setFormData({ ...formData, howItWorksTitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      howItWorksTitle: e.target.value,
+                    })
+                  }
                 />
               </div>
-              
+
               <div className="space-y-2">
                 <Label htmlFor="howItWorksSubtitle">Page Subtitle</Label>
                 <Input
                   id="howItWorksSubtitle"
                   value={formData.howItWorksSubtitle}
-                  onChange={(e) => setFormData({ ...formData, howItWorksSubtitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      howItWorksSubtitle: e.target.value,
+                    })
+                  }
                 />
               </div>
-              
+
               <div className="space-y-2">
                 <Label htmlFor="howItWorksDescription">Page Description</Label>
                 <Textarea
                   id="howItWorksDescription"
                   rows={2}
                   value={formData.howItWorksDescription}
-                  onChange={(e) => setFormData({ ...formData, howItWorksDescription: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      howItWorksDescription: e.target.value,
+                    })
+                  }
                 />
               </div>
-              
+
               <Separator />
-              
-              {[1, 2, 3, 4].map(num => (
+
+              {[1, 2, 3, 4].map((num) => (
                 <div key={num} className="space-y-4 p-4 border rounded-lg">
                   <h4 className="font-semibold">Step {num}</h4>
                   <div className="space-y-2">
                     <Label htmlFor={`howItWorksStep${num}Title`}>Title</Label>
                     <Input
                       id={`howItWorksStep${num}Title`}
-                      value={formData[`howItWorksStep${num}Title` as keyof typeof formData] as string}
-                      onChange={(e) => setFormData({ ...formData, [`howItWorksStep${num}Title`]: e.target.value })}
+                      value={
+                        formData[
+                          `howItWorksStep${num}Title` as keyof typeof formData
+                        ] as string
+                      }
+                      onChange={(e) =>
+                        setFormData({
+                          ...formData,
+                          [`howItWorksStep${num}Title`]: e.target.value,
+                        })
+                      }
                     />
                   </div>
                   <div className="space-y-2">
-                    <Label htmlFor={`howItWorksStep${num}Desc`}>Description</Label>
+                    <Label htmlFor={`howItWorksStep${num}Desc`}>
+                      Description
+                    </Label>
                     <Textarea
                       id={`howItWorksStep${num}Desc`}
                       rows={2}
-                      value={formData[`howItWorksStep${num}Desc` as keyof typeof formData] as string}
-                      onChange={(e) => setFormData({ ...formData, [`howItWorksStep${num}Desc`]: e.target.value })}
+                      value={
+                        formData[
+                          `howItWorksStep${num}Desc` as keyof typeof formData
+                        ] as string
+                      }
+                      onChange={(e) =>
+                        setFormData({
+                          ...formData,
+                          [`howItWorksStep${num}Desc`]: e.target.value,
+                        })
+                      }
                     />
                   </div>
                 </div>
               ))}
-              
+
               <Separator />
-              
+
               <div className="space-y-2">
-                <Label htmlFor="howItWorksComplianceTitle">Compliance Section Title</Label>
+                <Label htmlFor="howItWorksComplianceTitle">
+                  Compliance Section Title
+                </Label>
                 <Input
                   id="howItWorksComplianceTitle"
                   value={formData.howItWorksComplianceTitle}
-                  onChange={(e) => setFormData({ ...formData, howItWorksComplianceTitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      howItWorksComplianceTitle: e.target.value,
+                    })
+                  }
                 />
               </div>
             </CardContent>
@@ -971,26 +1356,43 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                 <Input
                   id="consultationTitle"
                   value={formData.consultationTitle}
-                  onChange={(e) => setFormData({ ...formData, consultationTitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      consultationTitle: e.target.value,
+                    })
+                  }
                 />
               </div>
-              
+
               <div className="space-y-2">
                 <Label htmlFor="consultationSubtitle">Page Subtitle</Label>
                 <Input
                   id="consultationSubtitle"
                   value={formData.consultationSubtitle}
-                  onChange={(e) => setFormData({ ...formData, consultationSubtitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      consultationSubtitle: e.target.value,
+                    })
+                  }
                 />
               </div>
-              
+
               <div className="space-y-2">
-                <Label htmlFor="consultationDescription">Page Description</Label>
+                <Label htmlFor="consultationDescription">
+                  Page Description
+                </Label>
                 <Textarea
                   id="consultationDescription"
                   rows={3}
                   value={formData.consultationDescription}
-                  onChange={(e) => setFormData({ ...formData, consultationDescription: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      consultationDescription: e.target.value,
+                    })
+                  }
                 />
               </div>
             </CardContent>
@@ -1009,16 +1411,26 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                 <Input
                   id="conditionsTitle"
                   value={formData.conditionsTitle}
-                  onChange={(e) => setFormData({ ...formData, conditionsTitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      conditionsTitle: e.target.value,
+                    })
+                  }
                 />
               </div>
-              
+
               <div className="space-y-2">
                 <Label htmlFor="conditionsSubtitle">Page Subtitle</Label>
                 <Input
                   id="conditionsSubtitle"
                   value={formData.conditionsSubtitle}
-                  onChange={(e) => setFormData({ ...formData, conditionsSubtitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      conditionsSubtitle: e.target.value,
+                    })
+                  }
                 />
               </div>
             </CardContent>
@@ -1034,16 +1446,20 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                 <Input
                   id="faqTitle"
                   value={formData.faqTitle}
-                  onChange={(e) => setFormData({ ...formData, faqTitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, faqTitle: e.target.value })
+                  }
                 />
               </div>
-              
+
               <div className="space-y-2">
                 <Label htmlFor="faqSubtitle">Page Subtitle</Label>
                 <Input
                   id="faqSubtitle"
                   value={formData.faqSubtitle}
-                  onChange={(e) => setFormData({ ...formData, faqSubtitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, faqSubtitle: e.target.value })
+                  }
                 />
               </div>
             </CardContent>
@@ -1059,16 +1475,20 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                 <Input
                   id="blogTitle"
                   value={formData.blogTitle}
-                  onChange={(e) => setFormData({ ...formData, blogTitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, blogTitle: e.target.value })
+                  }
                 />
               </div>
-              
+
               <div className="space-y-2">
                 <Label htmlFor="blogSubtitle">Page Subtitle</Label>
                 <Input
                   id="blogSubtitle"
                   value={formData.blogSubtitle}
-                  onChange={(e) => setFormData({ ...formData, blogSubtitle: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, blogSubtitle: e.target.value })
+                  }
                 />
               </div>
             </CardContent>
@@ -1080,7 +1500,9 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
           <Card>
             <CardHeader>
               <CardTitle>Advanced Settings</CardTitle>
-              <CardDescription>Custom CSS and advanced configuration</CardDescription>
+              <CardDescription>
+                Custom CSS and advanced configuration
+              </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
               <div className="space-y-2">
@@ -1090,7 +1512,9 @@ export default function ComprehensiveBrandingForm({ tenant }: ComprehensiveBrand
                   rows={10}
                   placeholder="/* Add your custom CSS here */"
                   value={formData.customCSS}
-                  onChange={(e) => setFormData({ ...formData, customCSS: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, customCSS: e.target.value })
+                  }
                   className="font-mono text-sm"
                 />
               </div>
diff --git a/nextjs_space/app/tenant-admin/branding/page.tsx b/nextjs_space/app/tenant-admin/branding/page.tsx
index 7aecae6..1c58864 100644
--- a/nextjs_space/app/tenant-admin/branding/page.tsx
+++ b/nextjs_space/app/tenant-admin/branding/page.tsx
@@ -1,14 +1,14 @@
-import { getServerSession } from 'next-auth';
-import { redirect } from 'next/navigation';
-import { prisma } from '@/lib/db';
-import BrandingForm from './branding-form';
-import { Breadcrumbs } from '@/components/admin/shared';
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/db";
+import BrandingForm from "./branding-form";
+import { Breadcrumbs } from "@/components/admin/shared";
 
 export default async function BrandingPage() {
   const session = await getServerSession();
 
   if (!session?.user?.email) {
-    redirect('/auth/login');
+    redirect("/auth/login");
   }
 
   const user = await prisma.users.findUnique({
@@ -23,20 +23,20 @@ export default async function BrandingPage() {
   });
 
   if (!user?.tenants) {
-    redirect('/dashboard');
+    redirect("/dashboard");
   }
 
   // Fetch all available templates
   const templates = await prisma.templates.findMany({
     where: { isActive: true },
-    orderBy: { name: 'asc' },
+    orderBy: { name: "asc" },
   });
 
   // Fetch active tenant template
   const activeTemplate = user.tenants.activeTenantTemplateId
     ? await prisma.tenant_templates.findUnique({
-      where: { id: user.tenants.activeTenantTemplateId }
-    })
+        where: { id: user.tenants.activeTenantTemplateId },
+      })
     : null;
 
   return (
@@ -44,16 +44,20 @@ export default async function BrandingPage() {
       {/* Breadcrumbs */}
       <Breadcrumbs
         items={[
-          { label: 'Dashboard', href: '/tenant-admin' },
-          { label: 'Branding' },
+          { label: "Dashboard", href: "/tenant-admin" },
+          { label: "Branding" },
         ]}
         className="mb-4"
       />
 
       {/* Page Header */}
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-slate-900 tracking-tight">Store Branding</h1>
-        <p className="text-slate-600 mt-2">Customize the look and feel of your storefront</p>
+        <h1 className="text-3xl font-bold text-slate-900 tracking-tight">
+          Store Branding
+        </h1>
+        <p className="text-slate-600 mt-2">
+          Customize the look and feel of your storefront
+        </p>
       </div>
 
       {/* Branding Form */}
diff --git a/nextjs_space/app/tenant-admin/cookie-settings/page.tsx b/nextjs_space/app/tenant-admin/cookie-settings/page.tsx
index 501908b..326f78a 100644
--- a/nextjs_space/app/tenant-admin/cookie-settings/page.tsx
+++ b/nextjs_space/app/tenant-admin/cookie-settings/page.tsx
@@ -1,60 +1,67 @@
-import { getServerSession } from 'next-auth';
-import { redirect } from 'next/navigation';
-import { authOptions } from '@/lib/auth';
-import { prisma } from '@/lib/db';
-import CookieSettingsForm from './settings-form';
-import { Breadcrumbs } from '@/components/admin/shared';
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import { authOptions } from "@/lib/auth";
+import { prisma } from "@/lib/db";
+import CookieSettingsForm from "./settings-form";
+import { Breadcrumbs } from "@/components/admin/shared";
 
 export default async function CookieSettingsPage() {
-    const session = await getServerSession(authOptions);
-
-    if (!session || (session.user.role !== 'TENANT_ADMIN' && session.user.role !== 'SUPER_ADMIN')) {
-        redirect('/auth/login');
-    }
-
-    const user = await prisma.users.findUnique({
-        where: { id: session.user.id },
-        include: { tenants: true },
-    });
-
-    if (!user?.tenants) {
-        redirect('/tenant-admin');
-    }
-
-    const tenant = user.tenants;
-    const settings = (tenant.settings as Record<string, any>) || {};
-
-    return (
-        <div className="p-8">
-            <Breadcrumbs
-                items={[
-                    { label: 'Dashboard', href: '/tenant-admin' },
-                    { label: 'Cookie Settings' },
-                ]}
-                className="mb-4"
-            />
-
-            <div className="mb-8">
-                <h1 className="text-3xl font-bold text-slate-900 tracking-tight">Cookie & Privacy Settings</h1>
-                <p className="text-slate-600 mt-2">
-                    Configure how cookies are managed on your storefront. Based on your country ({tenant.countryCode}),
-                    we automatically apply the appropriate consent model.
-                </p>
-            </div>
-
-            <div className="max-w-4xl">
-                <CookieSettingsForm
-                    tenantId={tenant.id}
-                    countryCode={tenant.countryCode}
-                    initialSettings={{
-                        cookieConsentEnabled: settings.cookieConsentEnabled ?? true,
-                        cookieBannerMessage: settings.cookieBannerMessage ?? '',
-                        cookiePolicyUrl: settings.cookiePolicyUrl ?? '',
-                        analyticsEnabled: settings.analyticsEnabled ?? false,
-                        marketingCookiesEnabled: settings.marketingCookiesEnabled ?? false,
-                    }}
-                />
-            </div>
-        </div>
-    );
+  const session = await getServerSession(authOptions);
+
+  if (
+    !session ||
+    (session.user.role !== "TENANT_ADMIN" &&
+      session.user.role !== "SUPER_ADMIN")
+  ) {
+    redirect("/auth/login");
+  }
+
+  const user = await prisma.users.findUnique({
+    where: { id: session.user.id },
+    include: { tenants: true },
+  });
+
+  if (!user?.tenants) {
+    redirect("/tenant-admin");
+  }
+
+  const tenant = user.tenants;
+  const settings = (tenant.settings as Record<string, any>) || {};
+
+  return (
+    <div className="p-8">
+      <Breadcrumbs
+        items={[
+          { label: "Dashboard", href: "/tenant-admin" },
+          { label: "Cookie Settings" },
+        ]}
+        className="mb-4"
+      />
+
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-slate-900 tracking-tight">
+          Cookie & Privacy Settings
+        </h1>
+        <p className="text-slate-600 mt-2">
+          Configure how cookies are managed on your storefront. Based on your
+          country ({tenant.countryCode}), we automatically apply the appropriate
+          consent model.
+        </p>
+      </div>
+
+      <div className="max-w-4xl">
+        <CookieSettingsForm
+          tenantId={tenant.id}
+          countryCode={tenant.countryCode}
+          initialSettings={{
+            cookieConsentEnabled: settings.cookieConsentEnabled ?? true,
+            cookieBannerMessage: settings.cookieBannerMessage ?? "",
+            cookiePolicyUrl: settings.cookiePolicyUrl ?? "",
+            analyticsEnabled: settings.analyticsEnabled ?? false,
+            marketingCookiesEnabled: settings.marketingCookiesEnabled ?? false,
+          }}
+        />
+      </div>
+    </div>
+  );
 }
diff --git a/nextjs_space/app/tenant-admin/cookie-settings/settings-form.tsx b/nextjs_space/app/tenant-admin/cookie-settings/settings-form.tsx
index cd2eaf1..c903482 100644
--- a/nextjs_space/app/tenant-admin/cookie-settings/settings-form.tsx
+++ b/nextjs_space/app/tenant-admin/cookie-settings/settings-form.tsx
@@ -1,206 +1,264 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Switch } from '@/components/ui/switch';
-import { toast } from '@/components/ui/sonner';
-import { Cookie, Shield, BarChart3, Target, Globe } from 'lucide-react';
-import { getConsentModel, isGDPRRegion, isPOPIARegion } from '@/lib/cookie-utils';
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { toast } from "@/components/ui/sonner";
+import { Cookie, Shield, BarChart3, Target, Globe } from "lucide-react";
+import {
+  getConsentModel,
+  isGDPRRegion,
+  isPOPIARegion,
+} from "@/lib/cookie-utils";
 
 interface CookieSettingsFormProps {
-    tenantId: string;
-    countryCode: string;
-    initialSettings: {
-        cookieConsentEnabled: boolean;
-        cookieBannerMessage: string;
-        cookiePolicyUrl: string;
-        analyticsEnabled: boolean;
-        marketingCookiesEnabled: boolean;
-    };
+  tenantId: string;
+  countryCode: string;
+  initialSettings: {
+    cookieConsentEnabled: boolean;
+    cookieBannerMessage: string;
+    cookiePolicyUrl: string;
+    analyticsEnabled: boolean;
+    marketingCookiesEnabled: boolean;
+  };
 }
 
-export default function CookieSettingsForm({ tenantId, countryCode, initialSettings }: CookieSettingsFormProps) {
-    const router = useRouter();
-    const [isLoading, setIsLoading] = useState(false);
-    const [formData, setFormData] = useState(initialSettings);
-
-    const consentModel = getConsentModel(countryCode);
-    const isGDPR = isGDPRRegion(countryCode);
-    const isPOPIA = isPOPIARegion(countryCode);
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setIsLoading(true);
-
-        try {
-            const res = await fetch('/api/tenant-admin/cookie-settings', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(formData),
-            });
-
-            if (!res.ok) throw new Error('Failed to update cookie settings');
-
-            toast.success('Cookie settings updated successfully');
-            router.refresh();
-        } catch (error) {
-            toast.error('Failed to update cookie settings');
-            console.error(error);
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    return (
-        <form onSubmit={handleSubmit} className="space-y-6">
-            {/* Region Info Card */}
-            <Card className="border-emerald-200 bg-emerald-50/50">
-                <CardHeader className="pb-3">
-                    <div className="flex items-center gap-2">
-                        <Globe className="w-5 h-5 text-emerald-600" />
-                        <CardTitle className="text-lg">Your Compliance Region</CardTitle>
-                    </div>
-                </CardHeader>
-                <CardContent>
-                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-                        <div>
-                            <p className="text-gray-500">Country Code</p>
-                            <p className="font-semibold text-gray-900">{countryCode}</p>
-                        </div>
-                        <div>
-                            <p className="text-gray-500">Consent Model</p>
-                            <p className="font-semibold text-gray-900 capitalize">{consentModel}</p>
-                        </div>
-                        <div>
-                            <p className="text-gray-500">GDPR Applies</p>
-                            <p className={`font-semibold ${isGDPR ? 'text-amber-600' : 'text-gray-400'}`}>
-                                {isGDPR ? 'Yes' : 'No'}
-                            </p>
-                        </div>
-                        <div>
-                            <p className="text-gray-500">POPIA Applies</p>
-                            <p className={`font-semibold ${isPOPIA ? 'text-amber-600' : 'text-gray-400'}`}>
-                                {isPOPIA ? 'Yes' : 'No'}
-                            </p>
-                        </div>
-                    </div>
-                    {consentModel === 'opt-in' && (
-                        <p className="mt-4 text-sm text-amber-700 bg-amber-100 p-3 rounded-lg">
-                            <strong>Opt-In Required:</strong> Users must give explicit consent before non-essential cookies are set.
-                        </p>
-                    )}
-                </CardContent>
-            </Card>
-
-            {/* Cookie Banner Settings */}
-            <Card>
-                <CardHeader>
-                    <div className="flex items-center gap-2">
-                        <Cookie className="w-5 h-5 text-gray-600" />
-                        <CardTitle>Cookie Banner</CardTitle>
-                    </div>
-                    <CardDescription>Configure how the cookie consent banner appears on your storefront</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-6">
-                    <div className="flex items-center justify-between">
-                        <div>
-                            <Label htmlFor="cookieConsentEnabled" className="text-base">Enable Cookie Banner</Label>
-                            <p className="text-sm text-gray-500">Show cookie consent banner to visitors</p>
-                        </div>
-                        <Switch
-                            id="cookieConsentEnabled"
-                            checked={formData.cookieConsentEnabled}
-                            onCheckedChange={(checked) => setFormData({ ...formData, cookieConsentEnabled: checked })}
-                        />
-                    </div>
-
-                    <div>
-                        <Label htmlFor="cookieBannerMessage">Custom Banner Message (Optional)</Label>
-                        <Input
-                            id="cookieBannerMessage"
-                            value={formData.cookieBannerMessage}
-                            onChange={(e) => setFormData({ ...formData, cookieBannerMessage: e.target.value })}
-                            placeholder="We use cookies to enhance your experience..."
-                            className="mt-2"
-                        />
-                        <p className="text-xs text-gray-500 mt-1">Leave empty to use the default message for your region</p>
-                    </div>
-
-                    <div>
-                        <Label htmlFor="cookiePolicyUrl">Cookie Policy URL (Optional)</Label>
-                        <Input
-                            id="cookiePolicyUrl"
-                            value={formData.cookiePolicyUrl}
-                            onChange={(e) => setFormData({ ...formData, cookiePolicyUrl: e.target.value })}
-                            placeholder="/cookies or https://yoursite.com/cookie-policy"
-                            className="mt-2"
-                        />
-                        <p className="text-xs text-gray-500 mt-1">Link to your detailed cookie policy page</p>
-                    </div>
-                </CardContent>
-            </Card>
-
-            {/* Cookie Categories */}
-            <Card>
-                <CardHeader>
-                    <div className="flex items-center gap-2">
-                        <Shield className="w-5 h-5 text-gray-600" />
-                        <CardTitle>Cookie Categories</CardTitle>
-                    </div>
-                    <CardDescription>Enable optional cookie categories for enhanced functionality</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-6">
-                    {/* Essential - Always on */}
-                    <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
-                        <div>
-                            <p className="font-medium text-gray-900">Essential Cookies</p>
-                            <p className="text-sm text-gray-500">Required for site functionality (auth, cart, sessions)</p>
-                        </div>
-                        <span className="text-emerald-600 font-medium text-sm">Always Enabled</span>
-                    </div>
-
-                    {/* Analytics */}
-                    <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
-                        <div className="flex items-start gap-3">
-                            <BarChart3 className="w-5 h-5 text-blue-600 mt-0.5" />
-                            <div>
-                                <p className="font-medium text-gray-900">Analytics Cookies</p>
-                                <p className="text-sm text-gray-500">Track user behavior to improve your store</p>
-                            </div>
-                        </div>
-                        <Switch
-                            checked={formData.analyticsEnabled}
-                            onCheckedChange={(checked) => setFormData({ ...formData, analyticsEnabled: checked })}
-                        />
-                    </div>
-
-                    {/* Marketing */}
-                    <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
-                        <div className="flex items-start gap-3">
-                            <Target className="w-5 h-5 text-purple-600 mt-0.5" />
-                            <div>
-                                <p className="font-medium text-gray-900">Marketing Cookies</p>
-                                <p className="text-sm text-gray-500">Enable personalized ads and retargeting</p>
-                            </div>
-                        </div>
-                        <Switch
-                            checked={formData.marketingCookiesEnabled}
-                            onCheckedChange={(checked) => setFormData({ ...formData, marketingCookiesEnabled: checked })}
-                        />
-                    </div>
-                </CardContent>
-            </Card>
-
-            {/* Submit */}
-            <div className="flex justify-end">
-                <Button type="submit" disabled={isLoading}>
-                    {isLoading ? 'Saving...' : 'Save Cookie Settings'}
-                </Button>
+export default function CookieSettingsForm({
+  tenantId,
+  countryCode,
+  initialSettings,
+}: CookieSettingsFormProps) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [formData, setFormData] = useState(initialSettings);
+
+  const consentModel = getConsentModel(countryCode);
+  const isGDPR = isGDPRRegion(countryCode);
+  const isPOPIA = isPOPIARegion(countryCode);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      const res = await fetch("/api/tenant-admin/cookie-settings", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(formData),
+      });
+
+      if (!res.ok) throw new Error("Failed to update cookie settings");
+
+      toast.success("Cookie settings updated successfully");
+      router.refresh();
+    } catch (error) {
+      toast.error("Failed to update cookie settings");
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      {/* Region Info Card */}
+      <Card className="border-emerald-200 bg-emerald-50/50">
+        <CardHeader className="pb-3">
+          <div className="flex items-center gap-2">
+            <Globe className="w-5 h-5 text-emerald-600" />
+            <CardTitle className="text-lg">Your Compliance Region</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+            <div>
+              <p className="text-gray-500">Country Code</p>
+              <p className="font-semibold text-gray-900">{countryCode}</p>
+            </div>
+            <div>
+              <p className="text-gray-500">Consent Model</p>
+              <p className="font-semibold text-gray-900 capitalize">
+                {consentModel}
+              </p>
+            </div>
+            <div>
+              <p className="text-gray-500">GDPR Applies</p>
+              <p
+                className={`font-semibold ${isGDPR ? "text-amber-600" : "text-gray-400"}`}
+              >
+                {isGDPR ? "Yes" : "No"}
+              </p>
             </div>
-        </form>
-    );
+            <div>
+              <p className="text-gray-500">POPIA Applies</p>
+              <p
+                className={`font-semibold ${isPOPIA ? "text-amber-600" : "text-gray-400"}`}
+              >
+                {isPOPIA ? "Yes" : "No"}
+              </p>
+            </div>
+          </div>
+          {consentModel === "opt-in" && (
+            <p className="mt-4 text-sm text-amber-700 bg-amber-100 p-3 rounded-lg">
+              <strong>Opt-In Required:</strong> Users must give explicit consent
+              before non-essential cookies are set.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Cookie Banner Settings */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Cookie className="w-5 h-5 text-gray-600" />
+            <CardTitle>Cookie Banner</CardTitle>
+          </div>
+          <CardDescription>
+            Configure how the cookie consent banner appears on your storefront
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <Label htmlFor="cookieConsentEnabled" className="text-base">
+                Enable Cookie Banner
+              </Label>
+              <p className="text-sm text-gray-500">
+                Show cookie consent banner to visitors
+              </p>
+            </div>
+            <Switch
+              id="cookieConsentEnabled"
+              checked={formData.cookieConsentEnabled}
+              onCheckedChange={(checked) =>
+                setFormData({ ...formData, cookieConsentEnabled: checked })
+              }
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="cookieBannerMessage">
+              Custom Banner Message (Optional)
+            </Label>
+            <Input
+              id="cookieBannerMessage"
+              value={formData.cookieBannerMessage}
+              onChange={(e) =>
+                setFormData({
+                  ...formData,
+                  cookieBannerMessage: e.target.value,
+                })
+              }
+              placeholder="We use cookies to enhance your experience..."
+              className="mt-2"
+            />
+            <p className="text-xs text-gray-500 mt-1">
+              Leave empty to use the default message for your region
+            </p>
+          </div>
+
+          <div>
+            <Label htmlFor="cookiePolicyUrl">
+              Cookie Policy URL (Optional)
+            </Label>
+            <Input
+              id="cookiePolicyUrl"
+              value={formData.cookiePolicyUrl}
+              onChange={(e) =>
+                setFormData({ ...formData, cookiePolicyUrl: e.target.value })
+              }
+              placeholder="/cookies or https://yoursite.com/cookie-policy"
+              className="mt-2"
+            />
+            <p className="text-xs text-gray-500 mt-1">
+              Link to your detailed cookie policy page
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Cookie Categories */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Shield className="w-5 h-5 text-gray-600" />
+            <CardTitle>Cookie Categories</CardTitle>
+          </div>
+          <CardDescription>
+            Enable optional cookie categories for enhanced functionality
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Essential - Always on */}
+          <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+            <div>
+              <p className="font-medium text-gray-900">Essential Cookies</p>
+              <p className="text-sm text-gray-500">
+                Required for site functionality (auth, cart, sessions)
+              </p>
+            </div>
+            <span className="text-emerald-600 font-medium text-sm">
+              Always Enabled
+            </span>
+          </div>
+
+          {/* Analytics */}
+          <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+            <div className="flex items-start gap-3">
+              <BarChart3 className="w-5 h-5 text-blue-600 mt-0.5" />
+              <div>
+                <p className="font-medium text-gray-900">Analytics Cookies</p>
+                <p className="text-sm text-gray-500">
+                  Track user behavior to improve your store
+                </p>
+              </div>
+            </div>
+            <Switch
+              checked={formData.analyticsEnabled}
+              onCheckedChange={(checked) =>
+                setFormData({ ...formData, analyticsEnabled: checked })
+              }
+            />
+          </div>
+
+          {/* Marketing */}
+          <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+            <div className="flex items-start gap-3">
+              <Target className="w-5 h-5 text-purple-600 mt-0.5" />
+              <div>
+                <p className="font-medium text-gray-900">Marketing Cookies</p>
+                <p className="text-sm text-gray-500">
+                  Enable personalized ads and retargeting
+                </p>
+              </div>
+            </div>
+            <Switch
+              checked={formData.marketingCookiesEnabled}
+              onCheckedChange={(checked) =>
+                setFormData({ ...formData, marketingCookiesEnabled: checked })
+              }
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Submit */}
+      <div className="flex justify-end">
+        <Button type="submit" disabled={isLoading}>
+          {isLoading ? "Saving..." : "Save Cookie Settings"}
+        </Button>
+      </div>
+    </form>
+  );
 }
diff --git a/nextjs_space/app/tenant-admin/customers/[id]/customer-actions.tsx b/nextjs_space/app/tenant-admin/customers/[id]/customer-actions.tsx
index 94a014b..93e7620 100644
--- a/nextjs_space/app/tenant-admin/customers/[id]/customer-actions.tsx
+++ b/nextjs_space/app/tenant-admin/customers/[id]/customer-actions.tsx
@@ -1,87 +1,88 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { Button } from '@/components/ui/button';
-import { toast } from '@/components/ui/sonner';
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { toast } from "@/components/ui/sonner";
 import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 
 interface CustomerActionsProps {
-    customer: {
-        id: string;
-        name: string | null;
-        email: string;
-    };
+  customer: {
+    id: string;
+    name: string | null;
+    email: string;
+  };
 }
 
 export default function CustomerActions({ customer }: CustomerActionsProps) {
-    const router = useRouter();
-    const [isLoading, setIsLoading] = useState(false);
-    const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 
-    const deleteCustomer = async () => {
-        setIsLoading(true);
-        try {
-            const res = await fetch(`/api/tenant-admin/customers/${customer.id}`, {
-                method: 'DELETE',
-            });
+  const deleteCustomer = async () => {
+    setIsLoading(true);
+    try {
+      const res = await fetch(`/api/tenant-admin/customers/${customer.id}`, {
+        method: "DELETE",
+      });
 
-            if (!res.ok) throw new Error('Failed to delete customer');
+      if (!res.ok) throw new Error("Failed to delete customer");
 
-            toast.success('Customer deleted successfully (GDPR compliant)');
-            router.push('/tenant-admin/customers');
-        } catch (error) {
-            toast.error('Failed to delete customer');
-            console.error(error);
-        } finally {
-            setIsLoading(false);
-        }
-    };
+      toast.success("Customer deleted successfully (GDPR compliant)");
+      router.push("/tenant-admin/customers");
+    } catch (error) {
+      toast.error("Failed to delete customer");
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
-    return (
-        <>
-            <div className="space-y-2">
-                <Button
-                    variant="destructive"
-                    className="w-full"
-                    onClick={() => setShowDeleteDialog(true)}
-                >
-                    Delete Customer (GDPR)
-                </Button>
-            </div>
+  return (
+    <>
+      <div className="space-y-2">
+        <Button
+          variant="destructive"
+          className="w-full"
+          onClick={() => setShowDeleteDialog(true)}
+        >
+          Delete Customer (GDPR)
+        </Button>
+      </div>
 
-            {/* Delete Confirmation Dialog */}
-            <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-                <AlertDialogContent>
-                    <AlertDialogHeader>
-                        <AlertDialogTitle>GDPR Compliant Deletion</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            This will anonymize all personal data for <strong>{customer.name || customer.email}</strong>.
-                            The customer record will be kept for order history integrity but all PII will be removed.
-                            This action cannot be undone.
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel>Cancel</AlertDialogCancel>
-                        <AlertDialogAction
-                            onClick={deleteCustomer}
-                            disabled={isLoading}
-                            className="bg-red-600 hover:bg-red-700"
-                        >
-                            {isLoading ? 'Deleting...' : 'Delete Customer Data'}
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
-        </>
-    );
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>GDPR Compliant Deletion</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will anonymize all personal data for{" "}
+              <strong>{customer.name || customer.email}</strong>. The customer
+              record will be kept for order history integrity but all PII will
+              be removed. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={deleteCustomer}
+              disabled={isLoading}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              {isLoading ? "Deleting..." : "Delete Customer Data"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
 }
diff --git a/nextjs_space/app/tenant-admin/customers/[id]/customer-edit-form.tsx b/nextjs_space/app/tenant-admin/customers/[id]/customer-edit-form.tsx
index e3b841d..ed4bf06 100644
--- a/nextjs_space/app/tenant-admin/customers/[id]/customer-edit-form.tsx
+++ b/nextjs_space/app/tenant-admin/customers/[id]/customer-edit-form.tsx
@@ -1,131 +1,136 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { toast } from '@/components/ui/sonner';
-import { format } from 'date-fns';
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toast } from "@/components/ui/sonner";
+import { format } from "date-fns";
 
 interface CustomerEditFormProps {
-    customer: {
-        id: string;
-        email: string;
-        name: string | null;
-        createdAt: Date;
-        updatedAt: Date;
-    };
+  customer: {
+    id: string;
+    email: string;
+    name: string | null;
+    createdAt: Date;
+    updatedAt: Date;
+  };
 }
 
 export default function CustomerEditForm({ customer }: CustomerEditFormProps) {
-    const router = useRouter();
-    const [isEditing, setIsEditing] = useState(false);
-    const [isSaving, setIsSaving] = useState(false);
+  const router = useRouter();
+  const [isEditing, setIsEditing] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
 
-    // Form state - using only fields currently in database
-    const [name, setName] = useState(customer.name || '');
+  // Form state - using only fields currently in database
+  const [name, setName] = useState(customer.name || "");
 
-    const handleSave = async () => {
-        setIsSaving(true);
-        try {
-            const res = await fetch(`/api/tenant-admin/customers/${customer.id}`, {
-                method: 'PATCH',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    name,
-                }),
-            });
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      const res = await fetch(`/api/tenant-admin/customers/${customer.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name,
+        }),
+      });
 
-            if (!res.ok) {
-                const error = await res.json();
-                throw new Error(error.error || 'Failed to update customer');
-            }
+      if (!res.ok) {
+        const error = await res.json();
+        throw new Error(error.error || "Failed to update customer");
+      }
 
-            toast.success('Customer updated successfully');
-            setIsEditing(false);
-            router.refresh();
-        } catch (error: any) {
-            toast.error(error.message || 'Failed to update customer');
-            console.error(error);
-        } finally {
-            setIsSaving(false);
-        }
-    };
+      toast.success("Customer updated successfully");
+      setIsEditing(false);
+      router.refresh();
+    } catch (error: any) {
+      toast.error(error.message || "Failed to update customer");
+      console.error(error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
 
-    const handleCancel = () => {
-        setName(customer.name || '');
-        setIsEditing(false);
-    };
+  const handleCancel = () => {
+    setName(customer.name || "");
+    setIsEditing(false);
+  };
 
-    return (
-        <Card>
-            <CardHeader>
-                <div className="flex justify-between items-center">
-                    <CardTitle>Customer Information</CardTitle>
-                    {!isEditing ? (
-                        <Button onClick={() => setIsEditing(true)} variant="outline">
-                            Edit
-                        </Button>
-                    ) : (
-                        <div className="space-x-2">
-                            <Button onClick={handleCancel} variant="outline" disabled={isSaving}>
-                                Cancel
-                            </Button>
-                            <Button onClick={handleSave} disabled={isSaving}>
-                                {isSaving ? 'Saving...' : 'Save Changes'}
-                            </Button>
-                        </div>
-                    )}
-                </div>
-            </CardHeader>
-            <CardContent>
-                <div className="grid grid-cols-2 gap-6">
-                    {/* Name */}
-                    <div className="space-y-2">
-                        <Label htmlFor="name">Full Name</Label>
-                        {isEditing ? (
-                            <Input
-                                id="name"
-                                value={name}
-                                onChange={(e) => setName(e.target.value)}
-                                placeholder="Customer Name"
-                            />
-                        ) : (
-                            <p className="text-base">{customer.name || 'Not set'}</p>
-                        )}
-                    </div>
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex justify-between items-center">
+          <CardTitle>Customer Information</CardTitle>
+          {!isEditing ? (
+            <Button onClick={() => setIsEditing(true)} variant="outline">
+              Edit
+            </Button>
+          ) : (
+            <div className="space-x-2">
+              <Button
+                onClick={handleCancel}
+                variant="outline"
+                disabled={isSaving}
+              >
+                Cancel
+              </Button>
+              <Button onClick={handleSave} disabled={isSaving}>
+                {isSaving ? "Saving..." : "Save Changes"}
+              </Button>
+            </div>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-2 gap-6">
+          {/* Name */}
+          <div className="space-y-2">
+            <Label htmlFor="name">Full Name</Label>
+            {isEditing ? (
+              <Input
+                id="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Customer Name"
+              />
+            ) : (
+              <p className="text-base">{customer.name || "Not set"}</p>
+            )}
+          </div>
 
-                    {/* Email (read-only) */}
-                    <div className="space-y-2">
-                        <Label>Email</Label>
-                        <p className="text-base text-gray-500">{customer.email}</p>
-                    </div>
+          {/* Email (read-only) */}
+          <div className="space-y-2">
+            <Label>Email</Label>
+            <p className="text-base text-gray-500">{customer.email}</p>
+          </div>
 
-                    {/* Created Date (read-only) */}
-                    <div className="space-y-2">
-                        <Label>Customer Since</Label>
-                        <p className="text-base text-gray-500">
-                            {format(new Date(customer.createdAt), 'MMM d, yyyy')}
-                        </p>
-                    </div>
+          {/* Created Date (read-only) */}
+          <div className="space-y-2">
+            <Label>Customer Since</Label>
+            <p className="text-base text-gray-500">
+              {format(new Date(customer.createdAt), "MMM d, yyyy")}
+            </p>
+          </div>
 
-                    {/* Last Updated (read-only) */}
-                    <div className="space-y-2">
-                        <Label>Last Updated</Label>
-                        <p className="text-base text-gray-500">
-                            {format(new Date(customer.updatedAt), 'MMM d, yyyy')}
-                        </p>
-                    </div>
-                </div>
+          {/* Last Updated (read-only) */}
+          <div className="space-y-2">
+            <Label>Last Updated</Label>
+            <p className="text-base text-gray-500">
+              {format(new Date(customer.updatedAt), "MMM d, yyyy")}
+            </p>
+          </div>
+        </div>
 
-                <div className="mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-md">
-                    <p className="text-sm text-yellow-800">
-                        <strong>Note:</strong> Additional fields (phone, address) will be available after running the database migration.
-                    </p>
-                </div>
-            </CardContent>
-        </Card>
-    );
+        <div className="mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-md">
+          <p className="text-sm text-yellow-800">
+            <strong>Note:</strong> Additional fields (phone, address) will be
+            available after running the database migration.
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
 }
diff --git a/nextjs_space/app/tenant-admin/customers/[id]/page.tsx b/nextjs_space/app/tenant-admin/customers/[id]/page.tsx
index 4296500..7fd6d89 100644
--- a/nextjs_space/app/tenant-admin/customers/[id]/page.tsx
+++ b/nextjs_space/app/tenant-admin/customers/[id]/page.tsx
@@ -1,114 +1,129 @@
+import { getServerSession } from "next-auth";
+import { redirect, notFound } from "next/navigation";
+import { authOptions } from "@/lib/auth";
+import { prisma } from "@/lib/db";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import CustomerEditForm from "./customer-edit-form";
+import CustomerActions from "./customer-actions";
+import { Breadcrumbs } from "@/components/admin/shared";
 
-import { getServerSession } from 'next-auth';
-import { redirect, notFound } from 'next/navigation';
-import { authOptions } from '@/lib/auth';
-import { prisma } from '@/lib/db';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import CustomerEditForm from './customer-edit-form';
-import CustomerActions from './customer-actions';
-import { Breadcrumbs } from '@/components/admin/shared';
+export default async function CustomerDetailPage({
+  params,
+}: {
+  params: { id: string };
+}) {
+  const session = await getServerSession(authOptions);
 
-export default async function CustomerDetailPage({ params }: { params: { id: string } }) {
-    const session = await getServerSession(authOptions);
+  if (
+    !session ||
+    !["TENANT_ADMIN", "SUPER_ADMIN"].includes(session.user.role!)
+  ) {
+    redirect("/auth/login");
+  }
 
-    if (!session || !['TENANT_ADMIN', 'SUPER_ADMIN'].includes(session.user.role!)) {
-        redirect('/auth/login');
-    }
+  // Tenant admins can only access their own tenant's customers
+  const tenantId =
+    session.user.role === "TENANT_ADMIN" ? session.user.tenantId : undefined;
 
-    // Tenant admins can only access their own tenant's customers
-    const tenantId = session.user.role === 'TENANT_ADMIN' ? session.user.tenantId : undefined;
-
-    const customer = await prisma.users.findFirst({
-        where: {
-            id: params.id,
-            role: 'PATIENT',
-            ...(tenantId && { tenantId }),
-        },
-        include: {
-            _count: {
-                select: {
-                    orders: true,
-                    consultations: true,
-                },
-            },
+  const customer = await prisma.users.findFirst({
+    where: {
+      id: params.id,
+      role: "PATIENT",
+      ...(tenantId && { tenantId }),
+    },
+    include: {
+      _count: {
+        select: {
+          orders: true,
+          consultations: true,
         },
-    });
+      },
+    },
+  });
 
-    if (!customer) {
-        notFound();
-    }
+  if (!customer) {
+    notFound();
+  }
 
-    // Verify tenant access for tenant admins
-    if (session.user.role === 'TENANT_ADMIN' && customer.tenantId !== tenantId) {
-        notFound();
-    }
+  // Verify tenant access for tenant admins
+  if (session.user.role === "TENANT_ADMIN" && customer.tenantId !== tenantId) {
+    notFound();
+  }
 
-    return (
-        <div className="min-h-screen bg-gray-50 theme-force-light">
-            <div className="bg-white shadow">
-                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-                    {/* Breadcrumbs */}
-                    <Breadcrumbs
-                        items={[
-                            { label: 'Dashboard', href: '/tenant-admin' },
-                            { label: 'Customers', href: '/tenant-admin/customers' },
-                            { label: customer.name || customer.email || 'Customer Details' },
-                        ]}
-                        className="mb-4"
-                    />
-                    <div className="flex justify-between items-center">
-                        <h1 className="text-3xl font-bold text-gray-900">{customer.name || customer.email}</h1>
-                    </div>
-                </div>
-            </div>
+  return (
+    <div className="min-h-screen bg-gray-50 theme-force-light">
+      <div className="bg-white shadow">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          {/* Breadcrumbs */}
+          <Breadcrumbs
+            items={[
+              { label: "Dashboard", href: "/tenant-admin" },
+              { label: "Customers", href: "/tenant-admin/customers" },
+              { label: customer.name || customer.email || "Customer Details" },
+            ]}
+            className="mb-4"
+          />
+          <div className="flex justify-between items-center">
+            <h1 className="text-3xl font-bold text-gray-900">
+              {customer.name || customer.email}
+            </h1>
+          </div>
+        </div>
+      </div>
 
-            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-                    {/* Customer Details */}
-                    <div className="lg:col-span-2 space-y-6">
-                        <CustomerEditForm customer={customer} />
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Customer Details */}
+          <div className="lg:col-span-2 space-y-6">
+            <CustomerEditForm customer={customer} />
 
-                        {/* Order History */}
-                        <Card>
-                            <CardHeader>
-                                <CardTitle>Order History</CardTitle>
-                            </CardHeader>
-                            <CardContent>
-                                <p className="text-sm text-gray-500">
-                                    Total Orders: <span className="font-semibold">{customer._count.orders}</span>
-                                </p>
-                                <p className="text-sm text-gray-500 mt-2">
-                                    Integration with Dr. Green API for detailed order history
-                                </p>
-                            </CardContent>
-                        </Card>
+            {/* Order History */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Order History</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-gray-500">
+                  Total Orders:{" "}
+                  <span className="font-semibold">
+                    {customer._count.orders}
+                  </span>
+                </p>
+                <p className="text-sm text-gray-500 mt-2">
+                  Integration with Dr. Green API for detailed order history
+                </p>
+              </CardContent>
+            </Card>
 
-                        {/* Consultation History */}
-                        <Card>
-                            <CardHeader>
-                                <CardTitle>Consultation History</CardTitle>
-                            </CardHeader>
-                            <CardContent>
-                                <p className="text-sm text-gray-500">
-                                    Total Consultations: <span className="font-semibold">{customer._count.consultations}</span>
-                                </p>
-                            </CardContent>
-                        </Card>
-                    </div>
+            {/* Consultation History */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Consultation History</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-gray-500">
+                  Total Consultations:{" "}
+                  <span className="font-semibold">
+                    {customer._count.consultations}
+                  </span>
+                </p>
+              </CardContent>
+            </Card>
+          </div>
 
-                    {/* Actions */}
-                    <div className="space-y-6">
-                        <Card>
-                            <CardHeader>
-                                <CardTitle>Actions</CardTitle>
-                            </CardHeader>
-                            <CardContent>
-                                <CustomerActions customer={customer} />
-                            </CardContent>
-                        </Card>
-                    </div>
-                </div>
-            </div>
+          {/* Actions */}
+          <div className="space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Actions</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <CustomerActions customer={customer} />
+              </CardContent>
+            </Card>
+          </div>
         </div>
-    );
+      </div>
+    </div>
+  );
 }
diff --git a/nextjs_space/app/tenant-admin/customers/customers-table.tsx b/nextjs_space/app/tenant-admin/customers/customers-table.tsx
index 34426f3..03391fb 100644
--- a/nextjs_space/app/tenant-admin/customers/customers-table.tsx
+++ b/nextjs_space/app/tenant-admin/customers/customers-table.tsx
@@ -1,12 +1,12 @@
-'use client';
+"use client";
 
-import { useMemo } from 'react';
-import Link from 'next/link';
-import { format } from 'date-fns';
-import { Users, Search, Phone, ShoppingBag, Share2 } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
+import { useMemo } from "react";
+import Link from "next/link";
+import { format } from "date-fns";
+import { Users, Search, Phone, ShoppingBag, Share2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
 import {
   Table,
   TableBody,
@@ -14,12 +14,18 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/components/ui/table';
-import { SearchInput, EmptyState, Pagination, SortableTableHeader, ExportButton } from '@/components/admin/shared';
-import { useTableState } from '@/lib/admin/url-state';
-import { exportToCSV } from '@/lib/admin/csv-export';
-import { toast } from '@/components/ui/sonner';
-import { useCallback } from 'react';
+} from "@/components/ui/table";
+import {
+  SearchInput,
+  EmptyState,
+  Pagination,
+  SortableTableHeader,
+  ExportButton,
+} from "@/components/admin/shared";
+import { useTableState } from "@/lib/admin/url-state";
+import { exportToCSV } from "@/lib/admin/csv-export";
+import { toast } from "@/components/ui/sonner";
+import { useCallback } from "react";
 
 /**
  * Customer data shape from Prisma query
@@ -53,7 +59,10 @@ interface CustomersTableProps {
  * - Empty state for no results with clear action
  */
 export function CustomersTable({ customers, totalCount }: CustomersTableProps) {
-  const [{ search, page, pageSize, sort }, { setSearch, setPage, setPageSize, setSort }] = useTableState({
+  const [
+    { search, page, pageSize, sort },
+    { setSearch, setPage, setPageSize, setSort },
+  ] = useTableState({
     defaultPageSize: 20,
   });
 
@@ -65,12 +74,12 @@ export function CustomersTable({ customers, totalCount }: CustomersTableProps) {
     if (hasSearchQuery) {
       return `No customers found matching "${search}". Try a different search term.`;
     }
-    return 'No customers yet. Share your store URL to get started.';
+    return "No customers yet. Share your store URL to get started.";
   }, [hasSearchQuery, search]);
 
   // Clear search handler
   const handleClearSearch = () => {
-    setSearch('');
+    setSearch("");
   };
 
   // Export handler
@@ -78,39 +87,39 @@ export function CustomersTable({ customers, totalCount }: CustomersTableProps) {
     if (customers.length === 0) return;
 
     const exportData = customers.map((c) => ({
-      name: c.name || 'N/A',
+      name: c.name || "N/A",
       email: c.email,
-      phone: c.phone || 'N/A',
+      phone: c.phone || "N/A",
       orders: c._count.orders,
-      createdAt: format(new Date(c.createdAt), 'yyyy-MM-dd'),
+      createdAt: format(new Date(c.createdAt), "yyyy-MM-dd"),
     }));
 
     const csvHeaders = [
-      { key: 'name' as const, label: 'Name' },
-      { key: 'email' as const, label: 'Email' },
-      { key: 'phone' as const, label: 'Phone' },
-      { key: 'orders' as const, label: 'Orders' },
-      { key: 'createdAt' as const, label: 'Joined' },
+      { key: "name" as const, label: "Name" },
+      { key: "email" as const, label: "Email" },
+      { key: "phone" as const, label: "Phone" },
+      { key: "orders" as const, label: "Orders" },
+      { key: "createdAt" as const, label: "Joined" },
     ];
 
     await exportToCSV(
       exportData,
       csvHeaders,
-      'customers',
+      "customers",
       undefined,
       (recordCount, fileSize) => {
         toast.success(`Exported ${recordCount} customers to CSV (${fileSize})`);
       },
       (error) => {
         toast.error(`Export failed: ${error.message}`);
-      }
+      },
     );
   }, [customers]);
 
   // Get initials for avatar
   const getInitials = (name: string | null): string => {
-    if (!name) return '?';
-    const parts = name.trim().split(' ');
+    if (!name) return "?";
+    const parts = name.trim().split(" ");
     if (parts.length >= 2) {
       return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
     }
@@ -127,7 +136,10 @@ export function CustomersTable({ customers, totalCount }: CustomersTableProps) {
                 ? `Results (${totalCount})`
                 : `All Customers (${totalCount})`}
             </span>
-            <Badge variant="outline" className="text-sm font-normal bg-white/60">
+            <Badge
+              variant="outline"
+              className="text-sm font-normal bg-white/60"
+            >
               {totalCount} Total
             </Badge>
           </CardTitle>
@@ -164,9 +176,9 @@ export function CustomersTable({ customers, totalCount }: CustomersTableProps) {
             variant="muted"
             size="default"
             action={{
-              label: 'Clear search',
+              label: "Clear search",
               onClick: handleClearSearch,
-              variant: 'outline',
+              variant: "outline",
             }}
             className="my-8"
           />
@@ -179,7 +191,7 @@ export function CustomersTable({ customers, totalCount }: CustomersTableProps) {
             theme="cyan"
             showDecoration
             action={{
-              label: 'Copy Store URL',
+              label: "Copy Store URL",
               onClick: () => {
                 navigator.clipboard.writeText(window.location.origin);
               },
@@ -235,7 +247,7 @@ export function CustomersTable({ customers, totalCount }: CustomersTableProps) {
                         </div>
                         <div className="min-w-0">
                           <p className="font-medium text-slate-900 truncate">
-                            {customer.name || 'N/A'}
+                            {customer.name || "N/A"}
                           </p>
                           {/* Show email on mobile */}
                           <a
@@ -267,7 +279,7 @@ export function CustomersTable({ customers, totalCount }: CustomersTableProps) {
                       </span>
                     </TableCell>
                     <TableCell className="text-slate-600 text-sm hidden sm:table-cell">
-                      {format(new Date(customer.createdAt), 'MMM d, yyyy')}
+                      {format(new Date(customer.createdAt), "MMM d, yyyy")}
                     </TableCell>
                     <TableCell>
                       <Link href={`/tenant-admin/customers/${customer.id}`}>
diff --git a/nextjs_space/app/tenant-admin/customers/page.tsx b/nextjs_space/app/tenant-admin/customers/page.tsx
index fa14ca5..e5ac176 100644
--- a/nextjs_space/app/tenant-admin/customers/page.tsx
+++ b/nextjs_space/app/tenant-admin/customers/page.tsx
@@ -1,74 +1,91 @@
-import { getServerSession } from 'next-auth';
-import { redirect } from 'next/navigation';
-import { authOptions } from '@/lib/auth';
-import { prisma } from '@/lib/db';
-import { Prisma } from '@prisma/client';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Users } from 'lucide-react';
-import { CustomersTable } from './customers-table';
-import { Breadcrumbs } from '@/components/admin/shared';
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import { authOptions } from "@/lib/auth";
+import { prisma } from "@/lib/db";
+import { Prisma } from "@prisma/client";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Users } from "lucide-react";
+import { CustomersTable } from "./customers-table";
+import { Breadcrumbs } from "@/components/admin/shared";
 
 /** Default pagination settings */
 const DEFAULT_PAGE_SIZE = 20;
 const VALID_PAGE_SIZES = [10, 20, 50, 100];
 
 /** Valid sort columns for customers table */
-const VALID_SORT_COLUMNS = ['name', 'email', 'createdAt'] as const;
-type SortColumn = typeof VALID_SORT_COLUMNS[number];
+const VALID_SORT_COLUMNS = ["name", "email", "createdAt"] as const;
+type SortColumn = (typeof VALID_SORT_COLUMNS)[number];
 
 interface CustomersPageProps {
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }
 
-export default async function CustomersListPage({ searchParams }: CustomersPageProps) {
+export default async function CustomersListPage({
+  searchParams,
+}: CustomersPageProps) {
   const session = await getServerSession(authOptions);
 
-  if (!session || !['TENANT_ADMIN', 'SUPER_ADMIN'].includes(session.user.role!)) {
-    redirect('/auth/login');
+  if (
+    !session ||
+    !["TENANT_ADMIN", "SUPER_ADMIN"].includes(session.user.role!)
+  ) {
+    redirect("/auth/login");
   }
 
   // Tenant admins only see their own customers
-  const tenantId = session.user.role === 'TENANT_ADMIN' ? session.user.tenantId : undefined;
+  const tenantId =
+    session.user.role === "TENANT_ADMIN" ? session.user.tenantId : undefined;
 
-  if (!tenantId && session.user.role === 'TENANT_ADMIN') {
-    redirect('/auth/login');
+  if (!tenantId && session.user.role === "TENANT_ADMIN") {
+    redirect("/auth/login");
   }
 
   // Await searchParams (Next.js 15+ async searchParams)
   const params = await searchParams;
 
   // Parse pagination params from URL
-  const pageParam = typeof params.page === 'string' ? parseInt(params.page, 10) : 1;
+  const pageParam =
+    typeof params.page === "string" ? parseInt(params.page, 10) : 1;
   const page = Number.isNaN(pageParam) || pageParam < 1 ? 1 : pageParam;
 
-  const pageSizeParam = typeof params.pageSize === 'string' ? parseInt(params.pageSize, 10) : DEFAULT_PAGE_SIZE;
-  const pageSize = VALID_PAGE_SIZES.includes(pageSizeParam) ? pageSizeParam : DEFAULT_PAGE_SIZE;
+  const pageSizeParam =
+    typeof params.pageSize === "string"
+      ? parseInt(params.pageSize, 10)
+      : DEFAULT_PAGE_SIZE;
+  const pageSize = VALID_PAGE_SIZES.includes(pageSizeParam)
+    ? pageSizeParam
+    : DEFAULT_PAGE_SIZE;
 
   // Parse search param from URL
-  const search = typeof params.search === 'string' ? params.search.trim() : '';
+  const search = typeof params.search === "string" ? params.search.trim() : "";
 
   // Parse sort params from URL
-  const sortByParam = typeof params.sortBy === 'string' ? params.sortBy : null;
-  const sortOrderParam = typeof params.sortOrder === 'string' ? params.sortOrder : null;
+  const sortByParam = typeof params.sortBy === "string" ? params.sortBy : null;
+  const sortOrderParam =
+    typeof params.sortOrder === "string" ? params.sortOrder : null;
 
   // Validate sort column
-  const sortBy = sortByParam && VALID_SORT_COLUMNS.includes(sortByParam as SortColumn)
-    ? (sortByParam as SortColumn)
-    : null;
-  const sortOrder = sortOrderParam === 'asc' || sortOrderParam === 'desc' ? sortOrderParam : 'asc';
+  const sortBy =
+    sortByParam && VALID_SORT_COLUMNS.includes(sortByParam as SortColumn)
+      ? (sortByParam as SortColumn)
+      : null;
+  const sortOrder =
+    sortOrderParam === "asc" || sortOrderParam === "desc"
+      ? sortOrderParam
+      : "asc";
 
   // Build Prisma where clause for server-side filtering
   const whereClause: Prisma.usersWhereInput = {
-    role: 'PATIENT',
+    role: "PATIENT",
     ...(tenantId && { tenantId }),
   };
 
   // Apply search filter (case-insensitive across multiple fields)
   if (search) {
     whereClause.OR = [
-      { name: { contains: search, mode: 'insensitive' } },
-      { email: { contains: search, mode: 'insensitive' } },
-      { phone: { contains: search, mode: 'insensitive' } },
+      { name: { contains: search, mode: "insensitive" } },
+      { email: { contains: search, mode: "insensitive" } },
+      { phone: { contains: search, mode: "insensitive" } },
     ];
   }
 
@@ -78,64 +95,69 @@ export default async function CustomersListPage({ searchParams }: CustomersPageP
   // Build orderBy clause - default to createdAt desc if no sort specified
   const orderBy: Prisma.usersOrderByWithRelationInput = sortBy
     ? { [sortBy]: sortOrder }
-    : { createdAt: 'desc' };
+    : { createdAt: "desc" };
 
   // Get filtered count, paginated customers, and recent sign-ups in parallel
   const thirtyDaysAgo = new Date();
   thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
 
-  const [filteredCount, customers, totalCustomersCount, recentSignupsCount] = await Promise.all([
-    prisma.users.count({ where: whereClause }),
-    prisma.users.findMany({
-      where: whereClause,
-      select: {
-        id: true,
-        email: true,
-        name: true,
-        phone: true,
-        createdAt: true,
-        _count: {
-          select: {
-            orders: true,
+  const [filteredCount, customers, totalCustomersCount, recentSignupsCount] =
+    await Promise.all([
+      prisma.users.count({ where: whereClause }),
+      prisma.users.findMany({
+        where: whereClause,
+        select: {
+          id: true,
+          email: true,
+          name: true,
+          phone: true,
+          createdAt: true,
+          _count: {
+            select: {
+              orders: true,
+            },
           },
         },
-      },
-      orderBy,
-      skip,
-      take: pageSize,
-    }),
-    // Total customers count (without search filter) for stats
-    prisma.users.count({
-      where: {
-        role: 'PATIENT',
-        ...(tenantId && { tenantId }),
-      },
-    }),
-    // Count recent sign-ups (last 30 days)
-    prisma.users.count({
-      where: {
-        role: 'PATIENT',
-        ...(tenantId && { tenantId }),
-        createdAt: { gte: thirtyDaysAgo },
-      },
-    }),
-  ]);
+        orderBy,
+        skip,
+        take: pageSize,
+      }),
+      // Total customers count (without search filter) for stats
+      prisma.users.count({
+        where: {
+          role: "PATIENT",
+          ...(tenantId && { tenantId }),
+        },
+      }),
+      // Count recent sign-ups (last 30 days)
+      prisma.users.count({
+        where: {
+          role: "PATIENT",
+          ...(tenantId && { tenantId }),
+          createdAt: { gte: thirtyDaysAgo },
+        },
+      }),
+    ]);
 
   return (
     <div className="p-4 sm:p-6 lg:p-8">
       {/* Breadcrumbs */}
       <Breadcrumbs
         items={[
-          { label: 'Dashboard', href: '/tenant-admin' },
-          { label: 'Customers' },
+          { label: "Dashboard", href: "/tenant-admin" },
+          { label: "Customers" },
         ]}
         className="mb-4"
       />
 
       {/* Header */}
       <div className="mb-6 sm:mb-8">
-        <h1 className="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">Customer Management</h1>
-        <p className="text-sm sm:text-base text-slate-600 mt-1 sm:mt-2">Manage your customer base</p>
+        <h1 className="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">
+          Customer Management
+        </h1>
+        <p className="text-sm sm:text-base text-slate-600 mt-1 sm:mt-2">
+          Manage your customer base
+        </p>
       </div>
 
       {/* Stats */}
@@ -143,7 +165,9 @@ export default async function CustomersListPage({ searchParams }: CustomersPageP
         <Card className="border-none shadow-lg bg-gradient-to-br from-cyan-500 to-blue-500 text-white overflow-hidden relative group hover:shadow-xl transition-shadow duration-300">
           <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 group-hover:scale-110 transition-transform duration-300" />
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
-            <CardTitle className="text-sm font-medium text-cyan-50">Total Customers</CardTitle>
+            <CardTitle className="text-sm font-medium text-cyan-50">
+              Total Customers
+            </CardTitle>
             <Users className="h-5 w-5 text-cyan-100" />
           </CardHeader>
           <CardContent className="relative z-10">
@@ -155,7 +179,9 @@ export default async function CustomersListPage({ searchParams }: CustomersPageP
         <Card className="border-none shadow-lg bg-gradient-to-br from-emerald-500 to-teal-500 text-white overflow-hidden relative group hover:shadow-xl transition-shadow duration-300">
           <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 group-hover:scale-110 transition-transform duration-300" />
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
-            <CardTitle className="text-sm font-medium text-emerald-50">Active Customers</CardTitle>
+            <CardTitle className="text-sm font-medium text-emerald-50">
+              Active Customers
+            </CardTitle>
             <Users className="h-5 w-5 text-emerald-100" />
           </CardHeader>
           <CardContent className="relative z-10">
@@ -167,7 +193,9 @@ export default async function CustomersListPage({ searchParams }: CustomersPageP
         <Card className="border-none shadow-lg bg-gradient-to-br from-purple-500 to-pink-500 text-white overflow-hidden relative group hover:shadow-xl transition-shadow duration-300">
           <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 group-hover:scale-110 transition-transform duration-300" />
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
-            <CardTitle className="text-sm font-medium text-purple-50">Recent Sign-ups</CardTitle>
+            <CardTitle className="text-sm font-medium text-purple-50">
+              Recent Sign-ups
+            </CardTitle>
             <Users className="h-5 w-5 text-purple-100" />
           </CardHeader>
           <CardContent className="relative z-10">
@@ -178,10 +206,7 @@ export default async function CustomersListPage({ searchParams }: CustomersPageP
       </div>
 
       {/* Customers Table with Search and Pagination */}
-      <CustomersTable
-        customers={customers}
-        totalCount={filteredCount}
-      />
+      <CustomersTable customers={customers} totalCount={filteredCount} />
     </div>
   );
 }
diff --git a/nextjs_space/app/tenant-admin/emails/[id]/client.tsx b/nextjs_space/app/tenant-admin/emails/[id]/client.tsx
index 778bc9c..0b92604 100644
--- a/nextjs_space/app/tenant-admin/emails/[id]/client.tsx
+++ b/nextjs_space/app/tenant-admin/emails/[id]/client.tsx
@@ -1,60 +1,70 @@
-'use client';
+"use client";
 
-import React, { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { EmailEditor, EmailTemplateData } from '@/components/admin/email/EmailEditor';
-import { toast } from 'sonner';
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  EmailEditor,
+  EmailTemplateData,
+} from "@/components/admin/email/EmailEditor";
+import { toast } from "sonner";
 
 interface EditTemplateClientProps {
-    template: {
-        id: string;
-        name: string;
-        subject: string;
-        contentHtml: string;
-        description: string;
-        category: string;
-    };
+  template: {
+    id: string;
+    name: string;
+    subject: string;
+    contentHtml: string;
+    description: string;
+    category: string;
+  };
 }
 
-export function TenantEditTemplateClient({ template }: EditTemplateClientProps) {
-    const router = useRouter();
-    const [isSaving, setIsSaving] = useState(false);
+export function TenantEditTemplateClient({
+  template,
+}: EditTemplateClientProps) {
+  const router = useRouter();
+  const [isSaving, setIsSaving] = useState(false);
 
-    const handleSave = async (data: EmailTemplateData) => {
-        setIsSaving(true);
-        try {
-            const res = await fetch(`/api/tenant-admin/email-templates/${template.id}`, {
-                method: 'PUT',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(data),
-            });
+  const handleSave = async (data: EmailTemplateData) => {
+    setIsSaving(true);
+    try {
+      const res = await fetch(
+        `/api/tenant-admin/email-templates/${template.id}`,
+        {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(data),
+        },
+      );
 
-            if (!res.ok) throw new Error('Failed to update template');
+      if (!res.ok) throw new Error("Failed to update template");
 
-            toast.success('Template updated successfully');
-            router.refresh();
-            router.push('/tenant-admin/emails');
-        } catch (error) {
-            console.error(error);
-            toast.error('Failed to update template');
-        } finally {
-            setIsSaving(false);
-        }
-    };
+      toast.success("Template updated successfully");
+      router.refresh();
+      router.push("/tenant-admin/emails");
+    } catch (error) {
+      console.error(error);
+      toast.error("Failed to update template");
+    } finally {
+      setIsSaving(false);
+    }
+  };
 
-    return (
-        <div className="flex flex-col h-[calc(100vh-6rem)]">
-            <div className="px-6 py-4 border-b">
-                <h1 className="text-2xl font-bold tracking-tight">Edit Custom Template</h1>
-                <p className="text-muted-foreground">Editing: {template.name}</p>
-            </div>
-            <div className="flex-1 p-6 overflow-hidden">
-                <EmailEditor
-                    initialData={template}
-                    onSave={handleSave}
-                    isSaving={isSaving}
-                />
-            </div>
-        </div>
-    );
+  return (
+    <div className="flex flex-col h-[calc(100vh-6rem)]">
+      <div className="px-6 py-4 border-b">
+        <h1 className="text-2xl font-bold tracking-tight">
+          Edit Custom Template
+        </h1>
+        <p className="text-muted-foreground">Editing: {template.name}</p>
+      </div>
+      <div className="flex-1 p-6 overflow-hidden">
+        <EmailEditor
+          initialData={template}
+          onSave={handleSave}
+          isSaving={isSaving}
+        />
+      </div>
+    </div>
+  );
 }
diff --git a/nextjs_space/app/tenant-admin/emails/[id]/page.tsx b/nextjs_space/app/tenant-admin/emails/[id]/page.tsx
index 91e0ffb..2433f89 100644
--- a/nextjs_space/app/tenant-admin/emails/[id]/page.tsx
+++ b/nextjs_space/app/tenant-admin/emails/[id]/page.tsx
@@ -1,42 +1,45 @@
-import { getServerSession } from 'next-auth';
-import { notFound, redirect } from 'next/navigation';
-import { authOptions } from '@/lib/auth';
-import { prisma } from '@/lib/db';
-import { TenantEditTemplateClient } from './client';
+import { getServerSession } from "next-auth";
+import { notFound, redirect } from "next/navigation";
+import { authOptions } from "@/lib/auth";
+import { prisma } from "@/lib/db";
+import { TenantEditTemplateClient } from "./client";
 
 export default async function TenantEditEmailPage({
-    params,
+  params,
 }: {
-    params: { id: string };
+  params: { id: string };
 }) {
-    const session = await getServerSession(authOptions);
-
-    if (!session || !['TENANT_ADMIN', 'SUPER_ADMIN'].includes(session.user.role || '')) {
-        redirect('/auth/login');
-    }
-
-    const user = await prisma.users.findUnique({
-        where: { id: session.user.id },
-        include: { tenants: true },
-    });
-
-    if (!user?.tenants) {
-        redirect('/tenant-admin');
-    }
-
-    const template = await prisma.email_templates.findFirst({
-        where: {
-            id: params.id,
-            tenantId: user.tenants.id // Strict ownership
-        }
-    });
-
-    if (!template) {
-        notFound();
-    }
-
-    // Convert Decimals/Dates if needed? Prisma usually fine for simple objects passed to client component.
-    // Assuming simple fields.
-
-    return <TenantEditTemplateClient template={template as any} />;
+  const session = await getServerSession(authOptions);
+
+  if (
+    !session ||
+    !["TENANT_ADMIN", "SUPER_ADMIN"].includes(session.user.role || "")
+  ) {
+    redirect("/auth/login");
+  }
+
+  const user = await prisma.users.findUnique({
+    where: { id: session.user.id },
+    include: { tenants: true },
+  });
+
+  if (!user?.tenants) {
+    redirect("/tenant-admin");
+  }
+
+  const template = await prisma.email_templates.findFirst({
+    where: {
+      id: params.id,
+      tenantId: user.tenants.id, // Strict ownership
+    },
+  });
+
+  if (!template) {
+    notFound();
+  }
+
+  // Convert Decimals/Dates if needed? Prisma usually fine for simple objects passed to client component.
+  // Assuming simple fields.
+
+  return <TenantEditTemplateClient template={template as any} />;
 }
diff --git a/nextjs_space/app/tenant-admin/emails/new/client.tsx b/nextjs_space/app/tenant-admin/emails/new/client.tsx
index 7c1c636..dcaad30 100644
--- a/nextjs_space/app/tenant-admin/emails/new/client.tsx
+++ b/nextjs_space/app/tenant-admin/emails/new/client.tsx
@@ -1,48 +1,50 @@
-'use client';
+"use client";
 
-import React, { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { EmailEditor, EmailTemplateData } from '@/components/admin/email/EmailEditor';
-import { toast } from 'sonner';
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  EmailEditor,
+  EmailTemplateData,
+} from "@/components/admin/email/EmailEditor";
+import { toast } from "sonner";
 
 export function TenantNewTemplateClient() {
-    const router = useRouter();
-    const [isSaving, setIsSaving] = useState(false);
+  const router = useRouter();
+  const [isSaving, setIsSaving] = useState(false);
 
-    const handleSave = async (data: EmailTemplateData) => {
-        setIsSaving(true);
-        try {
-            const res = await fetch('/api/tenant-admin/email-templates', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(data),
-            });
+  const handleSave = async (data: EmailTemplateData) => {
+    setIsSaving(true);
+    try {
+      const res = await fetch("/api/tenant-admin/email-templates", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
 
-            if (!res.ok) throw new Error('Failed to create template');
+      if (!res.ok) throw new Error("Failed to create template");
 
-            toast.success('Template created successfully');
-            router.refresh();
-            router.push('/tenant-admin/emails');
-        } catch (error) {
-            console.error(error);
-            toast.error('Failed to create template');
-        } finally {
-            setIsSaving(false);
-        }
-    };
+      toast.success("Template created successfully");
+      router.refresh();
+      router.push("/tenant-admin/emails");
+    } catch (error) {
+      console.error(error);
+      toast.error("Failed to create template");
+    } finally {
+      setIsSaving(false);
+    }
+  };
 
-    return (
-        <div className="flex flex-col h-[calc(100vh-6rem)]">
-            <div className="px-6 py-4 border-b">
-                <h1 className="text-2xl font-bold tracking-tight">Create New Template</h1>
-                <p className="text-muted-foreground">Design a custom email template.</p>
-            </div>
-            <div className="flex-1 p-6 overflow-hidden">
-                <EmailEditor
-                    onSave={handleSave}
-                    isSaving={isSaving}
-                />
-            </div>
-        </div>
-    );
+  return (
+    <div className="flex flex-col h-[calc(100vh-6rem)]">
+      <div className="px-6 py-4 border-b">
+        <h1 className="text-2xl font-bold tracking-tight">
+          Create New Template
+        </h1>
+        <p className="text-muted-foreground">Design a custom email template.</p>
+      </div>
+      <div className="flex-1 p-6 overflow-hidden">
+        <EmailEditor onSave={handleSave} isSaving={isSaving} />
+      </div>
+    </div>
+  );
 }
diff --git a/nextjs_space/app/tenant-admin/emails/new/page.tsx b/nextjs_space/app/tenant-admin/emails/new/page.tsx
index 1ff4fac..9adba9e 100644
--- a/nextjs_space/app/tenant-admin/emails/new/page.tsx
+++ b/nextjs_space/app/tenant-admin/emails/new/page.tsx
@@ -1,24 +1,27 @@
-import { getServerSession } from 'next-auth';
-import { redirect } from 'next/navigation';
-import { authOptions } from '@/lib/auth';
-import { prisma } from '@/lib/db';
-import { TenantNewTemplateClient } from './client';
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import { authOptions } from "@/lib/auth";
+import { prisma } from "@/lib/db";
+import { TenantNewTemplateClient } from "./client";
 
 export default async function TenantNewEmailPage() {
-    const session = await getServerSession(authOptions);
+  const session = await getServerSession(authOptions);
 
-    if (!session || !['TENANT_ADMIN', 'SUPER_ADMIN'].includes(session.user.role || '')) {
-        redirect('/auth/login');
-    }
+  if (
+    !session ||
+    !["TENANT_ADMIN", "SUPER_ADMIN"].includes(session.user.role || "")
+  ) {
+    redirect("/auth/login");
+  }
 
-    const user = await prisma.users.findUnique({
-        where: { id: session.user.id },
-        include: { tenants: true },
-    });
+  const user = await prisma.users.findUnique({
+    where: { id: session.user.id },
+    include: { tenants: true },
+  });
 
-    if (!user?.tenants) {
-        redirect('/tenant-admin');
-    }
+  if (!user?.tenants) {
+    redirect("/tenant-admin");
+  }
 
-    return <TenantNewTemplateClient />;
+  return <TenantNewTemplateClient />;
 }
diff --git a/nextjs_space/app/tenant-admin/emails/page.tsx b/nextjs_space/app/tenant-admin/emails/page.tsx
index cd86e46..de95b07 100644
--- a/nextjs_space/app/tenant-admin/emails/page.tsx
+++ b/nextjs_space/app/tenant-admin/emails/page.tsx
@@ -1,42 +1,48 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { TenantTemplateList } from '@/components/admin/email/TenantTemplateList';
-import { TenantEventMapper } from '@/components/admin/email/TenantEventMapper';
-import { Button } from '@/components/ui/button';
-import { Plus } from 'lucide-react';
-import Link from 'next/link';
+import React from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { TenantTemplateList } from "@/components/admin/email/TenantTemplateList";
+import { TenantEventMapper } from "@/components/admin/email/TenantEventMapper";
+import { Button } from "@/components/ui/button";
+import { Plus } from "lucide-react";
+import Link from "next/link";
 
 export default function TenantEmailsPage() {
-    return (
-        <div className="p-4 sm:p-6 lg:p-8 space-y-4 sm:space-y-6">
-            <div className="flex flex-col gap-4 sm:flex-row sm:justify-between sm:items-center">
-                <div>
-                    <h1 className="text-2xl sm:text-3xl font-bold tracking-tight">Email Management</h1>
-                    <p className="text-sm sm:text-base text-muted-foreground mt-1 sm:mt-2">Create templates and map them to system events.</p>
-                </div>
-                <Link href="/tenant-admin/emails/new" className="w-full sm:w-auto">
-                    <Button className="w-full sm:w-auto">
-                        <Plus className="mr-2 h-4 w-4" /> Create Template
-                    </Button>
-                </Link>
-            </div>
+  return (
+    <div className="p-4 sm:p-6 lg:p-8 space-y-4 sm:space-y-6">
+      <div className="flex flex-col gap-4 sm:flex-row sm:justify-between sm:items-center">
+        <div>
+          <h1 className="text-2xl sm:text-3xl font-bold tracking-tight">
+            Email Management
+          </h1>
+          <p className="text-sm sm:text-base text-muted-foreground mt-1 sm:mt-2">
+            Create templates and map them to system events.
+          </p>
+        </div>
+        <Link href="/tenant-admin/emails/new" className="w-full sm:w-auto">
+          <Button className="w-full sm:w-auto">
+            <Plus className="mr-2 h-4 w-4" /> Create Template
+          </Button>
+        </Link>
+      </div>
 
-            <Tabs defaultValue="templates" className="space-y-4">
-                <div className="flex justify-start"> {/* Left aligned tabs usually better? Or right? User screenshot had Filter/Tabs. I'll stick to left or standard. */}
-                    <TabsList>
-                        <TabsTrigger value="templates">Templates</TabsTrigger>
-                        <TabsTrigger value="events">Event Triggers</TabsTrigger>
-                    </TabsList>
-                </div>
-                <TabsContent value="templates" className="mt-0">
-                    <TenantTemplateList />
-                </TabsContent>
-                <TabsContent value="events" className="mt-0">
-                    <TenantEventMapper />
-                </TabsContent>
-            </Tabs>
+      <Tabs defaultValue="templates" className="space-y-4">
+        <div className="flex justify-start">
+          {" "}
+          {/* Left aligned tabs usually better? Or right? User screenshot had Filter/Tabs. I'll stick to left or standard. */}
+          <TabsList>
+            <TabsTrigger value="templates">Templates</TabsTrigger>
+            <TabsTrigger value="events">Event Triggers</TabsTrigger>
+          </TabsList>
         </div>
-    );
+        <TabsContent value="templates" className="mt-0">
+          <TenantTemplateList />
+        </TabsContent>
+        <TabsContent value="events" className="mt-0">
+          <TenantEventMapper />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
 }
diff --git a/nextjs_space/app/tenant-admin/layout.tsx b/nextjs_space/app/tenant-admin/layout.tsx
index a7ffa59..1a53f2f 100644
--- a/nextjs_space/app/tenant-admin/layout.tsx
+++ b/nextjs_space/app/tenant-admin/layout.tsx
@@ -1,11 +1,11 @@
-import { getServerSession } from 'next-auth';
-import { redirect } from 'next/navigation';
-import { authOptions } from '@/lib/auth';
-import { prisma } from '@/lib/db';
-import { TenantAdminSidebar } from '@/components/admin/TenantAdminSidebar';
-import { AccessibleAdminLayout } from '@/components/admin/AccessibleAdminLayout';
-import { NotificationCenter } from '@/components/admin/NotificationCenter';
-import { generateMockNotifications } from '@/lib/mock-data';
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import { authOptions } from "@/lib/auth";
+import { prisma } from "@/lib/db";
+import { TenantAdminSidebar } from "@/components/admin/TenantAdminSidebar";
+import { AccessibleAdminLayout } from "@/components/admin/AccessibleAdminLayout";
+import { NotificationCenter } from "@/components/admin/NotificationCenter";
+import { generateMockNotifications } from "@/lib/mock-data";
 
 export default async function TenantAdminLayout({
   children,
@@ -14,8 +14,12 @@ export default async function TenantAdminLayout({
 }) {
   const session = await getServerSession(authOptions);
 
-  if (!session || (session.user.role !== 'TENANT_ADMIN' && session.user.role !== 'SUPER_ADMIN')) {
-    redirect('/auth/login');
+  if (
+    !session ||
+    (session.user.role !== "TENANT_ADMIN" &&
+      session.user.role !== "SUPER_ADMIN")
+  ) {
+    redirect("/auth/login");
   }
 
   const user = await prisma.users.findUnique({
@@ -30,7 +34,9 @@ export default async function TenantAdminLayout({
       <div className="min-h-screen flex items-center justify-center">
         <div className="text-center">
           <h1 className="text-2xl font-bold mb-4">No Tenant Associated</h1>
-          <p className="text-gray-600">Your account is not associated with any tenant.</p>
+          <p className="text-gray-600">
+            Your account is not associated with any tenant.
+          </p>
         </div>
       </div>
     );
@@ -42,8 +48,8 @@ export default async function TenantAdminLayout({
   return (
     <div className="flex h-screen bg-gray-50 theme-force-light">
       <TenantAdminSidebar
-        userName={session.user.name || 'Tenant Admin'}
-        userEmail={session.user.email || ''}
+        userName={session.user.name || "Tenant Admin"}
+        userEmail={session.user.email || ""}
         tenantName={user.tenants.businessName}
       />
       <AccessibleAdminLayout theme="tenant-admin">
@@ -55,9 +61,7 @@ export default async function TenantAdminLayout({
             viewAllUrl="/tenant-admin/notifications"
           />
         </div>
-        <div className="flex-1 overflow-auto pl-0 md:pl-0">
-          {children}
-        </div>
+        <div className="flex-1 overflow-auto pl-0 md:pl-0">{children}</div>
       </AccessibleAdminLayout>
     </div>
   );
diff --git a/nextjs_space/app/tenant-admin/orders/[id]/packing-slip/page.tsx b/nextjs_space/app/tenant-admin/orders/[id]/packing-slip/page.tsx
index 8e57844..ca8e4c4 100644
--- a/nextjs_space/app/tenant-admin/orders/[id]/packing-slip/page.tsx
+++ b/nextjs_space/app/tenant-admin/orders/[id]/packing-slip/page.tsx
@@ -1,10 +1,10 @@
-'use client';
+"use client";
 
-import { useEffect, useState } from 'react';
-import { useParams, useRouter } from 'next/navigation';
-import { useSession } from 'next-auth/react';
-import { PackingSlip } from '@/components/admin/PackingSlip';
-import { toast } from '@/components/ui/sonner';
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { PackingSlip } from "@/components/admin/PackingSlip";
+import { toast } from "@/components/ui/sonner";
 
 interface OrderItem {
   id: string;
@@ -54,8 +54,8 @@ export default function PackingSlipPage() {
   const orderId = params.id as string;
 
   useEffect(() => {
-    if (status === 'unauthenticated') {
-      router.push('/auth/login');
+    if (status === "unauthenticated") {
+      router.push("/auth/login");
     }
   }, [status, router]);
 
@@ -65,22 +65,24 @@ export default function PackingSlipPage() {
     const fetchOrderAndTenant = async () => {
       try {
         // Fetch order data
-        const orderResponse = await fetch(`/api/tenant-admin/orders/${orderId}`);
+        const orderResponse = await fetch(
+          `/api/tenant-admin/orders/${orderId}`,
+        );
         if (!orderResponse.ok) {
-          throw new Error('Failed to fetch order');
+          throw new Error("Failed to fetch order");
         }
         const orderData = await orderResponse.json();
         setOrder(orderData);
 
         // Fetch tenant data for business name
-        const tenantResponse = await fetch('/api/tenant-admin/tenant');
+        const tenantResponse = await fetch("/api/tenant-admin/tenant");
         if (tenantResponse.ok) {
           const tenantData = await tenantResponse.json();
           setTenant(tenantData);
         }
       } catch (error) {
-        console.error('Error fetching data:', error);
-        toast.error('Failed to load packing slip');
+        console.error("Error fetching data:", error);
+        toast.error("Failed to load packing slip");
       } finally {
         setLoading(false);
       }
@@ -89,7 +91,7 @@ export default function PackingSlipPage() {
     fetchOrderAndTenant();
   }, [session, orderId]);
 
-  if (status === 'loading' || loading) {
+  if (status === "loading" || loading) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-slate-50">
         <div className="text-center">
@@ -119,7 +121,7 @@ export default function PackingSlipPage() {
   return (
     <PackingSlip
       order={order}
-      businessName={tenant?.businessName || 'BudStack'}
+      businessName={tenant?.businessName || "BudStack"}
       autoPrint={true}
     />
   );
diff --git a/nextjs_space/app/tenant-admin/orders/orders-table.tsx b/nextjs_space/app/tenant-admin/orders/orders-table.tsx
index 2bfd08e..6286a34 100644
--- a/nextjs_space/app/tenant-admin/orders/orders-table.tsx
+++ b/nextjs_space/app/tenant-admin/orders/orders-table.tsx
@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import { useMemo, useState, useCallback } from 'react';
-import { useRouter } from 'next/navigation';
-import { format, parseISO } from 'date-fns';
+import { useMemo, useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { format, parseISO } from "date-fns";
 import {
   Package,
   Search,
@@ -16,11 +16,11 @@ import {
   Loader2,
   Download,
   ShoppingCart,
-} from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
+} from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Table,
   TableBody,
@@ -28,7 +28,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/components/ui/table';
+} from "@/components/ui/table";
 import {
   Dialog,
   DialogContent,
@@ -36,25 +36,33 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog';
+} from "@/components/ui/dialog";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/components/ui/popover';
-import { Calendar as CalendarComponent } from '@/components/ui/calendar';
-import { SearchInput, StatusFilter, EmptyState, Pagination, SortableTableHeader, BulkActionBar, ExportButton } from '@/components/admin/shared';
-import type { StatusFilterOption, BulkAction } from '@/components/admin/shared';
-import { useTableState } from '@/lib/admin/url-state';
-import { toast } from '@/components/ui/sonner';
-import { cn } from '@/lib/utils';
-import { exportToCSV } from '@/lib/admin/csv-export';
+} from "@/components/ui/popover";
+import { Calendar as CalendarComponent } from "@/components/ui/calendar";
+import {
+  SearchInput,
+  StatusFilter,
+  EmptyState,
+  Pagination,
+  SortableTableHeader,
+  BulkActionBar,
+  ExportButton,
+} from "@/components/admin/shared";
+import type { StatusFilterOption, BulkAction } from "@/components/admin/shared";
+import { useTableState } from "@/lib/admin/url-state";
+import { toast } from "@/components/ui/sonner";
+import { cn } from "@/lib/utils";
+import { exportToCSV } from "@/lib/admin/csv-export";
 
 /** Order status types */
-type OrderStatus = 'all' | 'PENDING' | 'PROCESSING' | 'COMPLETED' | 'CANCELLED';
+type OrderStatus = "all" | "PENDING" | "PROCESSING" | "COMPLETED" | "CANCELLED";
 
 /** Date range preset options */
-type DateRangePreset = 'all' | '7days' | '30days' | '90days' | 'custom';
+type DateRangePreset = "all" | "7days" | "30days" | "90days" | "custom";
 
 /** Filter types for orders table */
 type OrderFilters = {
@@ -65,7 +73,7 @@ type OrderFilters = {
 } & Record<string, string>;
 
 /** Type for bulk action confirmation dialog */
-type BulkActionType = 'mark-processing' | 'mark-completed' | null;
+type BulkActionType = "mark-processing" | "mark-completed" | null;
 
 /**
  * Order item data shape
@@ -131,12 +139,15 @@ export function OrdersTable({
   onViewOrder,
 }: OrdersTableProps) {
   const router = useRouter();
-  const [{ search, filters, page, pageSize, sort }, { setSearch, setFilter, setPage, setPageSize, setSort }] = useTableState<OrderFilters>({
+  const [
+    { search, filters, page, pageSize, sort },
+    { setSearch, setFilter, setPage, setPageSize, setSort },
+  ] = useTableState<OrderFilters>({
     defaultFilters: {
-      status: 'all',
-      dateRange: 'all',
-      dateFrom: '',
-      dateTo: '',
+      status: "all",
+      dateRange: "all",
+      dateFrom: "",
+      dateTo: "",
     },
     defaultPageSize: 20,
   });
@@ -153,41 +164,49 @@ export function OrdersTable({
   const [confirmAction, setConfirmAction] = useState<BulkActionType>(null);
   const [isProcessing, setIsProcessing] = useState(false);
 
-  const statusFilter = filters.status || 'all';
-  const dateRangeFilter = filters.dateRange || 'all';
-  const dateFromFilter = filters.dateFrom || '';
-  const dateToFilter = filters.dateTo || '';
+  const statusFilter = filters.status || "all";
+  const dateRangeFilter = filters.dateRange || "all";
+  const dateFromFilter = filters.dateFrom || "";
+  const dateToFilter = filters.dateTo || "";
 
   // Total orders matching search/date filter (regardless of status filter)
-  const totalSearchCount = statusCounts.PENDING + statusCounts.PROCESSING + statusCounts.COMPLETED + statusCounts.CANCELLED;
+  const totalSearchCount =
+    statusCounts.PENDING +
+    statusCounts.PROCESSING +
+    statusCounts.COMPLETED +
+    statusCounts.CANCELLED;
 
   // Status filter options with server-provided counts
   const statusOptions: StatusFilterOption<OrderStatus>[] = useMemo(
     () => [
-      { value: 'all', label: 'All Orders', count: totalSearchCount },
-      { value: 'PENDING', label: 'Pending', count: statusCounts.PENDING },
-      { value: 'PROCESSING', label: 'Processing', count: statusCounts.PROCESSING },
-      { value: 'COMPLETED', label: 'Completed', count: statusCounts.COMPLETED },
-      { value: 'CANCELLED', label: 'Cancelled', count: statusCounts.CANCELLED },
+      { value: "all", label: "All Orders", count: totalSearchCount },
+      { value: "PENDING", label: "Pending", count: statusCounts.PENDING },
+      {
+        value: "PROCESSING",
+        label: "Processing",
+        count: statusCounts.PROCESSING,
+      },
+      { value: "COMPLETED", label: "Completed", count: statusCounts.COMPLETED },
+      { value: "CANCELLED", label: "Cancelled", count: statusCounts.CANCELLED },
     ],
-    [totalSearchCount, statusCounts]
+    [totalSearchCount, statusCounts],
   );
 
   // Quick filter handlers
   const handleQuickFilter = (status: OrderStatus) => {
     if (statusFilter === status) {
-      setFilter('status', 'all');
+      setFilter("status", "all");
     } else {
-      setFilter('status', status);
+      setFilter("status", status);
     }
   };
 
   // Date range preset handler
   const handleDateRangePreset = (preset: DateRangePreset) => {
-    setFilter('dateRange', preset);
-    if (preset !== 'custom') {
-      setFilter('dateFrom', '');
-      setFilter('dateTo', '');
+    setFilter("dateRange", preset);
+    if (preset !== "custom") {
+      setFilter("dateFrom", "");
+      setFilter("dateTo", "");
       setCustomDateFrom(undefined);
       setCustomDateTo(undefined);
     }
@@ -196,20 +215,20 @@ export function OrdersTable({
   // Custom date range handler
   const handleCustomDateSelect = () => {
     if (customDateFrom && customDateTo) {
-      setFilter('dateRange', 'custom');
-      setFilter('dateFrom', format(customDateFrom, 'yyyy-MM-dd'));
-      setFilter('dateTo', format(customDateTo, 'yyyy-MM-dd'));
+      setFilter("dateRange", "custom");
+      setFilter("dateFrom", format(customDateFrom, "yyyy-MM-dd"));
+      setFilter("dateTo", format(customDateTo, "yyyy-MM-dd"));
       setCalendarOpen(false);
     }
   };
 
   // Clear all filters
   const handleClearFilters = () => {
-    setSearch('');
-    setFilter('status', 'all');
-    setFilter('dateRange', 'all');
-    setFilter('dateFrom', '');
-    setFilter('dateTo', '');
+    setSearch("");
+    setFilter("status", "all");
+    setFilter("dateRange", "all");
+    setFilter("dateFrom", "");
+    setFilter("dateTo", "");
     setCustomDateFrom(undefined);
     setCustomDateTo(undefined);
   };
@@ -217,13 +236,13 @@ export function OrdersTable({
   // Status icon helper
   const getStatusIcon = (status: string) => {
     switch (status) {
-      case 'COMPLETED':
+      case "COMPLETED":
         return <CheckCircle2 className="w-3.5 h-3.5" />;
-      case 'PROCESSING':
+      case "PROCESSING":
         return <Truck className="w-3.5 h-3.5" />;
-      case 'PENDING':
+      case "PENDING":
         return <Clock className="w-3.5 h-3.5" />;
-      case 'CANCELLED':
+      case "CANCELLED":
         return <XCircle className="w-3.5 h-3.5" />;
       default:
         return <Package className="w-3.5 h-3.5" />;
@@ -233,41 +252,41 @@ export function OrdersTable({
   // Status color helper
   const getStatusColor = (status: string) => {
     switch (status) {
-      case 'COMPLETED':
-        return 'bg-emerald-500 hover:bg-emerald-600 text-white';
-      case 'PROCESSING':
-        return 'bg-blue-500 hover:bg-blue-600 text-white';
-      case 'PENDING':
-        return 'bg-amber-500 hover:bg-amber-600 text-white';
-      case 'CANCELLED':
-        return 'bg-red-500 hover:bg-red-600 text-white';
+      case "COMPLETED":
+        return "bg-emerald-500 hover:bg-emerald-600 text-white";
+      case "PROCESSING":
+        return "bg-blue-500 hover:bg-blue-600 text-white";
+      case "PENDING":
+        return "bg-amber-500 hover:bg-amber-600 text-white";
+      case "CANCELLED":
+        return "bg-red-500 hover:bg-red-600 text-white";
       default:
-        return 'bg-slate-500 hover:bg-slate-600 text-white';
+        return "bg-slate-500 hover:bg-slate-600 text-white";
     }
   };
 
   // Format date range display
   const getDateRangeLabel = () => {
     switch (dateRangeFilter) {
-      case '7days':
-        return 'Last 7 days';
-      case '30days':
-        return 'Last 30 days';
-      case '90days':
-        return 'Last 90 days';
-      case 'custom':
+      case "7days":
+        return "Last 7 days";
+      case "30days":
+        return "Last 30 days";
+      case "90days":
+        return "Last 90 days";
+      case "custom":
         if (dateFromFilter && dateToFilter) {
-          return `${format(parseISO(dateFromFilter), 'MMM d')} - ${format(parseISO(dateToFilter), 'MMM d, yyyy')}`;
+          return `${format(parseISO(dateFromFilter), "MMM d")} - ${format(parseISO(dateToFilter), "MMM d, yyyy")}`;
         }
-        return 'Custom range';
+        return "Custom range";
       default:
-        return 'All time';
+        return "All time";
     }
   };
 
   const hasSearchQuery = search.trim().length > 0;
-  const hasStatusFilter = statusFilter !== 'all';
-  const hasDateFilter = dateRangeFilter !== 'all';
+  const hasStatusFilter = statusFilter !== "all";
+  const hasDateFilter = dateRangeFilter !== "all";
   const hasFilters = hasSearchQuery || hasStatusFilter || hasDateFilter;
   const noResults = totalCount === 0 && hasFilters;
 
@@ -286,7 +305,7 @@ export function OrdersTable({
     if (activeFilters.length > 0) {
       return `No orders found with the selected filters.`;
     }
-    return 'No orders found.';
+    return "No orders found.";
   }, [hasSearchQuery, hasStatusFilter, hasDateFilter, search, statusFilter]);
 
   // Selection handlers
@@ -331,11 +350,11 @@ export function OrdersTable({
 
   // Bulk action handlers
   const handleMarkProcessing = useCallback(() => {
-    setConfirmAction('mark-processing');
+    setConfirmAction("mark-processing");
   }, []);
 
   const handleMarkCompleted = useCallback(() => {
-    setConfirmAction('mark-completed');
+    setConfirmAction("mark-completed");
   }, []);
 
   // Export ALL filtered orders (the main export button)
@@ -344,35 +363,35 @@ export function OrdersTable({
 
     const exportData = orders.map((o) => ({
       orderNumber: o.orderNumber,
-      customerName: o.user?.name || 'Guest',
-      customerEmail: o.user?.email || 'N/A',
+      customerName: o.user?.name || "Guest",
+      customerEmail: o.user?.email || "N/A",
       status: o.status,
       items: o.items.length,
       total: `$${o.total.toFixed(2)}`,
-      createdAt: format(new Date(o.createdAt), 'yyyy-MM-dd'),
+      createdAt: format(new Date(o.createdAt), "yyyy-MM-dd"),
     }));
 
     const csvHeaders = [
-      { key: 'orderNumber' as const, label: 'Order Number' },
-      { key: 'customerName' as const, label: 'Customer Name' },
-      { key: 'customerEmail' as const, label: 'Customer Email' },
-      { key: 'status' as const, label: 'Status' },
-      { key: 'items' as const, label: 'Items' },
-      { key: 'total' as const, label: 'Total' },
-      { key: 'createdAt' as const, label: 'Date' },
+      { key: "orderNumber" as const, label: "Order Number" },
+      { key: "customerName" as const, label: "Customer Name" },
+      { key: "customerEmail" as const, label: "Customer Email" },
+      { key: "status" as const, label: "Status" },
+      { key: "items" as const, label: "Items" },
+      { key: "total" as const, label: "Total" },
+      { key: "createdAt" as const, label: "Date" },
     ];
 
     await exportToCSV(
       exportData,
       csvHeaders,
-      'orders',
+      "orders",
       undefined,
       (recordCount, fileSize) => {
         toast.success(`Exported ${recordCount} orders to CSV (${fileSize})`);
       },
       (error) => {
         toast.error(`Export failed: ${error.message}`);
-      }
+      },
     );
   }, [orders]);
 
@@ -383,36 +402,38 @@ export function OrdersTable({
 
     const exportData = selectedOrders.map((o) => ({
       orderNumber: o.orderNumber,
-      customerName: o.user?.name || 'Guest',
-      customerEmail: o.user?.email || 'N/A',
+      customerName: o.user?.name || "Guest",
+      customerEmail: o.user?.email || "N/A",
       status: o.status,
       items: o.items.length,
       total: `$${o.total.toFixed(2)}`,
-      createdAt: format(new Date(o.createdAt), 'yyyy-MM-dd'),
+      createdAt: format(new Date(o.createdAt), "yyyy-MM-dd"),
     }));
 
     const csvHeaders = [
-      { key: 'orderNumber' as const, label: 'Order Number' },
-      { key: 'customerName' as const, label: 'Customer Name' },
-      { key: 'customerEmail' as const, label: 'Customer Email' },
-      { key: 'status' as const, label: 'Status' },
-      { key: 'items' as const, label: 'Items' },
-      { key: 'total' as const, label: 'Total' },
-      { key: 'createdAt' as const, label: 'Date' },
+      { key: "orderNumber" as const, label: "Order Number" },
+      { key: "customerName" as const, label: "Customer Name" },
+      { key: "customerEmail" as const, label: "Customer Email" },
+      { key: "status" as const, label: "Status" },
+      { key: "items" as const, label: "Items" },
+      { key: "total" as const, label: "Total" },
+      { key: "createdAt" as const, label: "Date" },
     ];
 
     await exportToCSV(
       exportData,
       csvHeaders,
-      'orders',
+      "orders",
       undefined,
       (recordCount, fileSize) => {
-        toast.success(`Exported ${recordCount} selected orders to CSV (${fileSize})`);
+        toast.success(
+          `Exported ${recordCount} selected orders to CSV (${fileSize})`,
+        );
         clearSelection();
       },
       (error) => {
         toast.error(`Export failed: ${error.message}`);
-      }
+      },
     );
   }, [orders, selectedIds, clearSelection]);
 
@@ -422,9 +443,9 @@ export function OrdersTable({
     setIsProcessing(true);
 
     try {
-      const response = await fetch('/api/tenant-admin/orders/bulk', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+      const response = await fetch("/api/tenant-admin/orders/bulk", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
           action: confirmAction,
           orderIds: Array.from(selectedIds),
@@ -434,26 +455,24 @@ export function OrdersTable({
       const data = await response.json();
 
       if (!response.ok) {
-        throw new Error(data.error || 'Failed to perform action');
+        throw new Error(data.error || "Failed to perform action");
       }
 
       // Display appropriate success message
       const actionMessages: Record<string, string> = {
-        'mark-processing': 'marked as Processing',
-        'mark-completed': 'marked as Completed',
+        "mark-processing": "marked as Processing",
+        "mark-completed": "marked as Completed",
       };
 
       toast.success(
-        `${data.count} order${data.count === 1 ? '' : 's'} ${actionMessages[confirmAction]} successfully`
+        `${data.count} order${data.count === 1 ? "" : "s"} ${actionMessages[confirmAction]} successfully`,
       );
 
       // Clear selection and refresh
       clearSelection();
       router.refresh();
     } catch (error) {
-      toast.error(
-        error instanceof Error ? error.message : 'An error occurred'
-      );
+      toast.error(error instanceof Error ? error.message : "An error occurred");
     } finally {
       setIsProcessing(false);
       setConfirmAction(null);
@@ -464,28 +483,28 @@ export function OrdersTable({
   const bulkActions: BulkAction[] = useMemo(
     () => [
       {
-        id: 'mark-processing',
-        label: 'Mark Processing',
+        id: "mark-processing",
+        label: "Mark Processing",
         icon: Truck,
         onClick: handleMarkProcessing,
-        variant: 'default',
+        variant: "default",
       },
       {
-        id: 'mark-completed',
-        label: 'Mark Completed',
+        id: "mark-completed",
+        label: "Mark Completed",
         icon: CheckCircle2,
         onClick: handleMarkCompleted,
-        variant: 'outline',
+        variant: "outline",
       },
       {
-        id: 'export',
-        label: 'Export CSV',
+        id: "export",
+        label: "Export CSV",
         icon: Download,
         onClick: handleExportCSV,
-        variant: 'outline',
+        variant: "outline",
       },
     ],
-    [handleMarkProcessing, handleMarkCompleted, handleExportCSV]
+    [handleMarkProcessing, handleMarkCompleted, handleExportCSV],
   );
 
   // Get selected order numbers for confirmation dialog
@@ -498,505 +517,536 @@ export function OrdersTable({
 
   return (
     <>
-    <Card className="shadow-lg border-slate-200">
-      <CardHeader className="border-b bg-gradient-to-r from-purple-50 to-pink-50">
-        <div className="flex flex-col gap-4">
-          {/* Title Row */}
-          <div className="flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-between">
-            <CardTitle className="flex items-center gap-3">
-              <span className="text-2xl font-bold text-slate-900">
-                {hasFilters
-                  ? `Results (${totalCount})`
-                  : `All Orders (${totalSearchCount})`}
-              </span>
-            </CardTitle>
-
-            {/* Search and Status Filter */}
-            <div className="flex flex-col gap-3 w-full xl:w-auto xl:flex-row xl:items-center">
-              {/* Search Input */}
-              <div className="w-full xl:w-72">
-                <SearchInput
-                  value={search}
-                  onChange={setSearch}
-                  placeholder="Search orders..."
-                  aria-label="Search orders by order number, customer name, or email"
-                  debounceMs={300}
+      <Card className="shadow-lg border-slate-200">
+        <CardHeader className="border-b bg-gradient-to-r from-purple-50 to-pink-50">
+          <div className="flex flex-col gap-4">
+            {/* Title Row */}
+            <div className="flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-between">
+              <CardTitle className="flex items-center gap-3">
+                <span className="text-2xl font-bold text-slate-900">
+                  {hasFilters
+                    ? `Results (${totalCount})`
+                    : `All Orders (${totalSearchCount})`}
+                </span>
+              </CardTitle>
+
+              {/* Search and Status Filter */}
+              <div className="flex flex-col gap-3 w-full xl:w-auto xl:flex-row xl:items-center">
+                {/* Search Input */}
+                <div className="w-full xl:w-72">
+                  <SearchInput
+                    value={search}
+                    onChange={setSearch}
+                    placeholder="Search orders..."
+                    aria-label="Search orders by order number, customer name, or email"
+                    debounceMs={300}
+                  />
+                </div>
+
+                {/* Status Filter */}
+                <StatusFilter<OrderStatus>
+                  value={statusFilter}
+                  onChange={(value) => setFilter("status", value)}
+                  options={statusOptions}
+                  aria-label="Filter by order status"
+                  placeholder="All Orders"
+                  showIcon={false}
+                  className="w-full xl:w-[160px]"
                 />
-              </div>
-
-              {/* Status Filter */}
-              <StatusFilter<OrderStatus>
-                value={statusFilter}
-                onChange={(value) => setFilter('status', value)}
-                options={statusOptions}
-                aria-label="Filter by order status"
-                placeholder="All Orders"
-                showIcon={false}
-                className="w-full xl:w-[160px]"
-              />
 
-              {/* Date Range Picker */}
-              <Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    className={cn(
-                      'w-full xl:w-[180px] justify-start text-left font-normal',
-                      'bg-background/50 backdrop-blur-sm',
-                      'border-border/60 hover:border-border',
-                      dateRangeFilter !== 'all' && 'border-primary/50 bg-primary/5'
-                    )}
-                  >
-                    <Calendar className="mr-2 h-4 w-4 text-muted-foreground" />
-                    <span className={cn(
-                      dateRangeFilter === 'all' ? 'text-muted-foreground' : 'text-foreground'
-                    )}>
-                      {getDateRangeLabel()}
-                    </span>
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0" align="start">
-                  <div className="p-3 space-y-3">
-                    {/* Preset Options */}
-                    <div className="grid grid-cols-2 gap-2">
-                      <Button
-                        variant={dateRangeFilter === 'all' ? 'default' : 'outline'}
-                        size="sm"
-                        onClick={() => handleDateRangePreset('all')}
-                        className="justify-start"
-                      >
-                        All time
-                      </Button>
-                      <Button
-                        variant={dateRangeFilter === '7days' ? 'default' : 'outline'}
-                        size="sm"
-                        onClick={() => handleDateRangePreset('7days')}
-                        className="justify-start"
-                      >
-                        Last 7 days
-                      </Button>
-                      <Button
-                        variant={dateRangeFilter === '30days' ? 'default' : 'outline'}
-                        size="sm"
-                        onClick={() => handleDateRangePreset('30days')}
-                        className="justify-start"
-                      >
-                        Last 30 days
-                      </Button>
-                      <Button
-                        variant={dateRangeFilter === '90days' ? 'default' : 'outline'}
-                        size="sm"
-                        onClick={() => handleDateRangePreset('90days')}
-                        className="justify-start"
+                {/* Date Range Picker */}
+                <Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      className={cn(
+                        "w-full xl:w-[180px] justify-start text-left font-normal",
+                        "bg-background/50 backdrop-blur-sm",
+                        "border-border/60 hover:border-border",
+                        dateRangeFilter !== "all" &&
+                          "border-primary/50 bg-primary/5",
+                      )}
+                    >
+                      <Calendar className="mr-2 h-4 w-4 text-muted-foreground" />
+                      <span
+                        className={cn(
+                          dateRangeFilter === "all"
+                            ? "text-muted-foreground"
+                            : "text-foreground",
+                        )}
                       >
-                        Last 90 days
-                      </Button>
-                    </div>
+                        {getDateRangeLabel()}
+                      </span>
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0" align="start">
+                    <div className="p-3 space-y-3">
+                      {/* Preset Options */}
+                      <div className="grid grid-cols-2 gap-2">
+                        <Button
+                          variant={
+                            dateRangeFilter === "all" ? "default" : "outline"
+                          }
+                          size="sm"
+                          onClick={() => handleDateRangePreset("all")}
+                          className="justify-start"
+                        >
+                          All time
+                        </Button>
+                        <Button
+                          variant={
+                            dateRangeFilter === "7days" ? "default" : "outline"
+                          }
+                          size="sm"
+                          onClick={() => handleDateRangePreset("7days")}
+                          className="justify-start"
+                        >
+                          Last 7 days
+                        </Button>
+                        <Button
+                          variant={
+                            dateRangeFilter === "30days" ? "default" : "outline"
+                          }
+                          size="sm"
+                          onClick={() => handleDateRangePreset("30days")}
+                          className="justify-start"
+                        >
+                          Last 30 days
+                        </Button>
+                        <Button
+                          variant={
+                            dateRangeFilter === "90days" ? "default" : "outline"
+                          }
+                          size="sm"
+                          onClick={() => handleDateRangePreset("90days")}
+                          className="justify-start"
+                        >
+                          Last 90 days
+                        </Button>
+                      </div>
 
-                    <div className="border-t pt-3">
-                      <p className="text-sm font-medium text-muted-foreground mb-2">Custom Range</p>
-                      <div className="flex gap-2">
-                        <div className="flex-1">
-                          <CalendarComponent
-                            mode="single"
-                            selected={customDateFrom}
-                            onSelect={setCustomDateFrom}
-                            disabled={(date) =>
-                              date > new Date() || (customDateTo ? date > customDateTo : false)
-                            }
-                            initialFocus
-                          />
-                        </div>
-                        <div className="flex-1">
-                          <CalendarComponent
-                            mode="single"
-                            selected={customDateTo}
-                            onSelect={setCustomDateTo}
-                            disabled={(date) =>
-                              date > new Date() || (customDateFrom ? date < customDateFrom : false)
-                            }
-                          />
+                      <div className="border-t pt-3">
+                        <p className="text-sm font-medium text-muted-foreground mb-2">
+                          Custom Range
+                        </p>
+                        <div className="flex gap-2">
+                          <div className="flex-1">
+                            <CalendarComponent
+                              mode="single"
+                              selected={customDateFrom}
+                              onSelect={setCustomDateFrom}
+                              disabled={(date) =>
+                                date > new Date() ||
+                                (customDateTo ? date > customDateTo : false)
+                              }
+                              initialFocus
+                            />
+                          </div>
+                          <div className="flex-1">
+                            <CalendarComponent
+                              mode="single"
+                              selected={customDateTo}
+                              onSelect={setCustomDateTo}
+                              disabled={(date) =>
+                                date > new Date() ||
+                                (customDateFrom ? date < customDateFrom : false)
+                              }
+                            />
+                          </div>
                         </div>
+                        <Button
+                          className="w-full mt-2"
+                          size="sm"
+                          onClick={handleCustomDateSelect}
+                          disabled={!customDateFrom || !customDateTo}
+                        >
+                          Apply Custom Range
+                        </Button>
                       </div>
-                      <Button
-                        className="w-full mt-2"
-                        size="sm"
-                        onClick={handleCustomDateSelect}
-                        disabled={!customDateFrom || !customDateTo}
-                      >
-                        Apply Custom Range
-                      </Button>
                     </div>
-                  </div>
-                </PopoverContent>
-              </Popover>
-
-              {/* Export Button */}
-              <ExportButton
-                onExport={handleExportAll}
-                recordCount={orders.length}
-                theme="tenant-admin"
-                disabled={orders.length === 0}
-              />
+                  </PopoverContent>
+                </Popover>
+
+                {/* Export Button */}
+                <ExportButton
+                  onExport={handleExportAll}
+                  recordCount={orders.length}
+                  theme="tenant-admin"
+                  disabled={orders.length === 0}
+                />
+              </div>
             </div>
-          </div>
 
-          {/* Quick Filter Chips */}
-          <div className="flex flex-wrap items-center gap-2">
-            <span className="text-sm text-muted-foreground mr-1">Quick filters:</span>
+            {/* Quick Filter Chips */}
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="text-sm text-muted-foreground mr-1">
+                Quick filters:
+              </span>
 
-            {/* Needs Attention Chip */}
-            <button
-              onClick={() => handleQuickFilter('PENDING')}
-              className={cn(
-                'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium transition-all',
-                'border hover:shadow-sm',
-                statusFilter === 'PENDING'
-                  ? 'bg-amber-100 border-amber-300 text-amber-800'
-                  : 'bg-white border-slate-200 text-slate-600 hover:border-amber-300 hover:bg-amber-50'
-              )}
-            >
-              <AlertCircle className="w-3.5 h-3.5" />
-              Needs Attention
-              <Badge
-                variant="secondary"
+              {/* Needs Attention Chip */}
+              <button
+                onClick={() => handleQuickFilter("PENDING")}
                 className={cn(
-                  'ml-1 h-5 px-1.5 text-[10px] font-semibold',
-                  statusFilter === 'PENDING'
-                    ? 'bg-amber-200 text-amber-800'
-                    : 'bg-slate-100 text-slate-600'
+                  "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium transition-all",
+                  "border hover:shadow-sm",
+                  statusFilter === "PENDING"
+                    ? "bg-amber-100 border-amber-300 text-amber-800"
+                    : "bg-white border-slate-200 text-slate-600 hover:border-amber-300 hover:bg-amber-50",
                 )}
               >
-                {statusCounts.PENDING}
-              </Badge>
-            </button>
+                <AlertCircle className="w-3.5 h-3.5" />
+                Needs Attention
+                <Badge
+                  variant="secondary"
+                  className={cn(
+                    "ml-1 h-5 px-1.5 text-[10px] font-semibold",
+                    statusFilter === "PENDING"
+                      ? "bg-amber-200 text-amber-800"
+                      : "bg-slate-100 text-slate-600",
+                  )}
+                >
+                  {statusCounts.PENDING}
+                </Badge>
+              </button>
 
-            {/* In Progress Chip */}
-            <button
-              onClick={() => handleQuickFilter('PROCESSING')}
-              className={cn(
-                'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium transition-all',
-                'border hover:shadow-sm',
-                statusFilter === 'PROCESSING'
-                  ? 'bg-blue-100 border-blue-300 text-blue-800'
-                  : 'bg-white border-slate-200 text-slate-600 hover:border-blue-300 hover:bg-blue-50'
-              )}
-            >
-              <Loader2 className="w-3.5 h-3.5" />
-              In Progress
-              <Badge
-                variant="secondary"
+              {/* In Progress Chip */}
+              <button
+                onClick={() => handleQuickFilter("PROCESSING")}
                 className={cn(
-                  'ml-1 h-5 px-1.5 text-[10px] font-semibold',
-                  statusFilter === 'PROCESSING'
-                    ? 'bg-blue-200 text-blue-800'
-                    : 'bg-slate-100 text-slate-600'
+                  "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium transition-all",
+                  "border hover:shadow-sm",
+                  statusFilter === "PROCESSING"
+                    ? "bg-blue-100 border-blue-300 text-blue-800"
+                    : "bg-white border-slate-200 text-slate-600 hover:border-blue-300 hover:bg-blue-50",
                 )}
               >
-                {statusCounts.PROCESSING}
-              </Badge>
-            </button>
-
-            {/* Clear Filters (shown when filters active) */}
-            {hasFilters && (
-              <button
-                onClick={handleClearFilters}
-                className="inline-flex items-center gap-1 px-2 py-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                <XCircle className="w-3.5 h-3.5" />
-                Clear all
-              </button>
-            )}
-          </div>
-        </div>
-      </CardHeader>
-
-      <CardContent className="p-0">
-        {noResults ? (
-          <EmptyState
-            icon={Search}
-            heading="No orders found"
-            description={emptyDescription}
-            variant="muted"
-            size="default"
-            action={{
-              label: 'Clear filters',
-              onClick: handleClearFilters,
-              variant: 'outline',
-            }}
-            className="my-8"
-          />
-        ) : orders.length === 0 && !hasFilters ? (
-          <EmptyState
-            icon={ShoppingCart}
-            heading="No orders yet"
-            description="Your orders will appear here once customers start purchasing from your store."
-            size="lg"
-            theme="purple"
-            showDecoration
-            className="my-8"
-          />
-        ) : (
-          <div className="overflow-x-auto">
-            <Table>
-              <TableHeader>
-                <TableRow className="bg-slate-50/50">
-                  {/* Select All Checkbox */}
-                  <TableHead className="w-12">
-                    <Checkbox
-                      checked={isAllSelected}
-                      onCheckedChange={handleSelectAll}
-                      aria-label={
-                        isAllSelected
-                          ? 'Deselect all orders'
-                          : 'Select all orders'
-                      }
-                      className={cn(
-                        'border-purple-400 data-[state=checked]:bg-purple-600 data-[state=checked]:border-purple-600',
-                        isSomeSelected && 'data-[state=checked]:bg-purple-400'
-                      )}
-                      {...(isSomeSelected && { 'data-state': 'checked' })}
-                    />
-                  </TableHead>
-                  <SortableTableHeader
-                    columnKey="orderNumber"
-                    label="Order ID"
-                    sortState={sort}
-                    onSort={setSort}
-                  />
-                  <TableHead className="font-semibold text-slate-700">Customer</TableHead>
-                  <SortableTableHeader
-                    columnKey="status"
-                    label="Status"
-                    sortState={sort}
-                    onSort={setSort}
-                  />
-                  <TableHead className="font-semibold text-slate-700 text-center">Items</TableHead>
-                  <SortableTableHeader
-                    columnKey="total"
-                    label="Total"
-                    sortState={sort}
-                    onSort={setSort}
-                    align="right"
-                  />
-                  <SortableTableHeader
-                    columnKey="createdAt"
-                    label="Date"
-                    sortState={sort}
-                    onSort={setSort}
-                  />
-                  <TableHead className="font-semibold text-slate-700 text-right">Actions</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {orders.map((order) => {
-                  const isSelected = selectedIds.has(order.id);
-                  return (
-                  <TableRow
-                    key={order.id}
-                    className={cn(
-                      'hover:bg-slate-50 transition-colors',
-                      isSelected && 'bg-purple-50/70'
-                    )}
-                  >
-                    {/* Row Checkbox */}
-                    <TableCell className="w-12">
-                      <Checkbox
-                        checked={isSelected}
-                        onCheckedChange={(checked) =>
-                          handleSelectOne(order.id, checked === true)
-                        }
-                        aria-label={`Select order ${order.orderNumber.slice(-8).toUpperCase()}`}
-                        className="border-purple-400 data-[state=checked]:bg-purple-600 data-[state=checked]:border-purple-600"
-                      />
-                    </TableCell>
-                    <TableCell className="font-medium text-slate-900">
-                      #{order.orderNumber.slice(-8).toUpperCase()}
-                    </TableCell>
-                    <TableCell>
-                      <div>
-                        <p className="font-medium text-slate-900">
-                          {order.user?.name || 'Guest'}
-                        </p>
-                        <p className="text-sm text-slate-500">
-                          {order.user?.email || 'N/A'}
-                        </p>
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <Badge className={cn(getStatusColor(order.status), 'gap-1')}>
-                        {getStatusIcon(order.status)}
-                        {order.status}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="text-center text-slate-600">
-                      {order.items.length}
-                    </TableCell>
-                    <TableCell className="text-right font-medium text-slate-900">
-                      €{order.total.toFixed(2)}
-                    </TableCell>
-                    <TableCell className="text-slate-600">
-                      {format(new Date(order.createdAt), 'MMM d, yyyy')}
-                    </TableCell>
-                    <TableCell className="text-right">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => onViewOrder(order)}
-                        className="gap-2"
-                      >
-                        <Eye className="w-4 h-4" />
-                        View
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          </div>
-        )}
-
-        {/* Pagination Controls */}
-        {orders.length > 0 && (
-          <div className="border-t border-slate-200 bg-slate-50/50">
-            <Pagination
-              page={page}
-              pageSize={pageSize}
-              totalItems={totalCount}
-              onPageChange={setPage}
-              onPageSizeChange={setPageSize}
-              pageSizeOptions={[10, 20, 50, 100]}
-              showPageSizeSelector
-              showFirstLast
-            />
-          </div>
-        )}
-      </CardContent>
-    </Card>
-
-    {/* Bulk Action Bar */}
-    <BulkActionBar
-      selectedCount={selectedIds.size}
-      itemLabel="orders"
-      actions={bulkActions}
-      onClearSelection={clearSelection}
-    />
-
-    {/* Confirmation Dialog */}
-    <Dialog
-      open={confirmAction !== null}
-      onOpenChange={(open) => !open && setConfirmAction(null)}
-    >
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            {confirmAction === 'mark-processing' ? (
-              <>
-                <Truck className="h-5 w-5 text-blue-500" />
-                <span>Mark as Processing</span>
-              </>
-            ) : (
-              <>
-                <CheckCircle2 className="h-5 w-5 text-emerald-500" />
-                <span>Mark as Completed</span>
-              </>
-            )}
-          </DialogTitle>
-          <DialogDescription className="pt-2">
-            {confirmAction === 'mark-processing' ? (
-              <span>
-                Update <strong>{selectedIds.size}</strong> order
-                {selectedIds.size === 1 ? '' : 's'} to Processing?
-              </span>
-            ) : (
-              <span>
-                Update <strong>{selectedIds.size}</strong> order
-                {selectedIds.size === 1 ? '' : 's'} to Completed?
-              </span>
-            )}
-          </DialogDescription>
-        </DialogHeader>
-
-        {/* Show order numbers */}
-        {selectedOrderNumbers.length > 0 && (
-          <div className="py-2">
-            <p className="text-xs text-muted-foreground mb-2">
-              Affected orders:
-            </p>
-            <div className="flex flex-wrap gap-1.5">
-              {selectedOrderNumbers.map((orderNum) => (
+                <Loader2 className="w-3.5 h-3.5" />
+                In Progress
                 <Badge
-                  key={orderNum}
                   variant="secondary"
-                  className="text-xs font-normal"
+                  className={cn(
+                    "ml-1 h-5 px-1.5 text-[10px] font-semibold",
+                    statusFilter === "PROCESSING"
+                      ? "bg-blue-200 text-blue-800"
+                      : "bg-slate-100 text-slate-600",
+                  )}
                 >
-                  {orderNum}
-                </Badge>
-              ))}
-              {selectedIds.size > 5 && (
-                <Badge variant="outline" className="text-xs font-normal">
-                  +{selectedIds.size - 5} more
+                  {statusCounts.PROCESSING}
                 </Badge>
+              </button>
+
+              {/* Clear Filters (shown when filters active) */}
+              {hasFilters && (
+                <button
+                  onClick={handleClearFilters}
+                  className="inline-flex items-center gap-1 px-2 py-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <XCircle className="w-3.5 h-3.5" />
+                  Clear all
+                </button>
               )}
             </div>
           </div>
-        )}
-
-        <DialogFooter className="gap-2 sm:gap-0">
-          <Button
-            variant="outline"
-            onClick={() => setConfirmAction(null)}
-            disabled={isProcessing}
-          >
-            Cancel
-          </Button>
-          <Button
-            variant="default"
-            onClick={handleConfirmAction}
-            disabled={isProcessing}
-            className={cn(
-              confirmAction === 'mark-processing' &&
-                'bg-blue-600 hover:bg-blue-700',
-              confirmAction === 'mark-completed' &&
-                'bg-emerald-600 hover:bg-emerald-700'
-            )}
-          >
-            {isProcessing ? (
-              <>
-                <span className="animate-spin mr-2">
-                  <svg
-                    className="h-4 w-4"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <circle
-                      className="opacity-25"
-                      cx="12"
-                      cy="12"
-                      r="10"
-                      stroke="currentColor"
-                      strokeWidth="4"
+        </CardHeader>
+
+        <CardContent className="p-0">
+          {noResults ? (
+            <EmptyState
+              icon={Search}
+              heading="No orders found"
+              description={emptyDescription}
+              variant="muted"
+              size="default"
+              action={{
+                label: "Clear filters",
+                onClick: handleClearFilters,
+                variant: "outline",
+              }}
+              className="my-8"
+            />
+          ) : orders.length === 0 && !hasFilters ? (
+            <EmptyState
+              icon={ShoppingCart}
+              heading="No orders yet"
+              description="Your orders will appear here once customers start purchasing from your store."
+              size="lg"
+              theme="purple"
+              showDecoration
+              className="my-8"
+            />
+          ) : (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow className="bg-slate-50/50">
+                    {/* Select All Checkbox */}
+                    <TableHead className="w-12">
+                      <Checkbox
+                        checked={isAllSelected}
+                        onCheckedChange={handleSelectAll}
+                        aria-label={
+                          isAllSelected
+                            ? "Deselect all orders"
+                            : "Select all orders"
+                        }
+                        className={cn(
+                          "border-purple-400 data-[state=checked]:bg-purple-600 data-[state=checked]:border-purple-600",
+                          isSomeSelected &&
+                            "data-[state=checked]:bg-purple-400",
+                        )}
+                        {...(isSomeSelected && { "data-state": "checked" })}
+                      />
+                    </TableHead>
+                    <SortableTableHeader
+                      columnKey="orderNumber"
+                      label="Order ID"
+                      sortState={sort}
+                      onSort={setSort}
+                    />
+                    <TableHead className="font-semibold text-slate-700">
+                      Customer
+                    </TableHead>
+                    <SortableTableHeader
+                      columnKey="status"
+                      label="Status"
+                      sortState={sort}
+                      onSort={setSort}
+                    />
+                    <TableHead className="font-semibold text-slate-700 text-center">
+                      Items
+                    </TableHead>
+                    <SortableTableHeader
+                      columnKey="total"
+                      label="Total"
+                      sortState={sort}
+                      onSort={setSort}
+                      align="right"
                     />
-                    <path
-                      className="opacity-75"
-                      fill="currentColor"
-                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    <SortableTableHeader
+                      columnKey="createdAt"
+                      label="Date"
+                      sortState={sort}
+                      onSort={setSort}
                     />
-                  </svg>
+                    <TableHead className="font-semibold text-slate-700 text-right">
+                      Actions
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {orders.map((order) => {
+                    const isSelected = selectedIds.has(order.id);
+                    return (
+                      <TableRow
+                        key={order.id}
+                        className={cn(
+                          "hover:bg-slate-50 transition-colors",
+                          isSelected && "bg-purple-50/70",
+                        )}
+                      >
+                        {/* Row Checkbox */}
+                        <TableCell className="w-12">
+                          <Checkbox
+                            checked={isSelected}
+                            onCheckedChange={(checked) =>
+                              handleSelectOne(order.id, checked === true)
+                            }
+                            aria-label={`Select order ${order.orderNumber.slice(-8).toUpperCase()}`}
+                            className="border-purple-400 data-[state=checked]:bg-purple-600 data-[state=checked]:border-purple-600"
+                          />
+                        </TableCell>
+                        <TableCell className="font-medium text-slate-900">
+                          #{order.orderNumber.slice(-8).toUpperCase()}
+                        </TableCell>
+                        <TableCell>
+                          <div>
+                            <p className="font-medium text-slate-900">
+                              {order.user?.name || "Guest"}
+                            </p>
+                            <p className="text-sm text-slate-500">
+                              {order.user?.email || "N/A"}
+                            </p>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <Badge
+                            className={cn(
+                              getStatusColor(order.status),
+                              "gap-1",
+                            )}
+                          >
+                            {getStatusIcon(order.status)}
+                            {order.status}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-center text-slate-600">
+                          {order.items.length}
+                        </TableCell>
+                        <TableCell className="text-right font-medium text-slate-900">
+                          €{order.total.toFixed(2)}
+                        </TableCell>
+                        <TableCell className="text-slate-600">
+                          {format(new Date(order.createdAt), "MMM d, yyyy")}
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => onViewOrder(order)}
+                            className="gap-2"
+                          >
+                            <Eye className="w-4 h-4" />
+                            View
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+
+          {/* Pagination Controls */}
+          {orders.length > 0 && (
+            <div className="border-t border-slate-200 bg-slate-50/50">
+              <Pagination
+                page={page}
+                pageSize={pageSize}
+                totalItems={totalCount}
+                onPageChange={setPage}
+                onPageSizeChange={setPageSize}
+                pageSizeOptions={[10, 20, 50, 100]}
+                showPageSizeSelector
+                showFirstLast
+              />
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Bulk Action Bar */}
+      <BulkActionBar
+        selectedCount={selectedIds.size}
+        itemLabel="orders"
+        actions={bulkActions}
+        onClearSelection={clearSelection}
+      />
+
+      {/* Confirmation Dialog */}
+      <Dialog
+        open={confirmAction !== null}
+        onOpenChange={(open) => !open && setConfirmAction(null)}
+      >
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              {confirmAction === "mark-processing" ? (
+                <>
+                  <Truck className="h-5 w-5 text-blue-500" />
+                  <span>Mark as Processing</span>
+                </>
+              ) : (
+                <>
+                  <CheckCircle2 className="h-5 w-5 text-emerald-500" />
+                  <span>Mark as Completed</span>
+                </>
+              )}
+            </DialogTitle>
+            <DialogDescription className="pt-2">
+              {confirmAction === "mark-processing" ? (
+                <span>
+                  Update <strong>{selectedIds.size}</strong> order
+                  {selectedIds.size === 1 ? "" : "s"} to Processing?
+                </span>
+              ) : (
+                <span>
+                  Update <strong>{selectedIds.size}</strong> order
+                  {selectedIds.size === 1 ? "" : "s"} to Completed?
                 </span>
-                Processing...
-              </>
-            ) : confirmAction === 'mark-processing' ? (
-              'Mark Processing'
-            ) : (
-              'Mark Completed'
-            )}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+              )}
+            </DialogDescription>
+          </DialogHeader>
+
+          {/* Show order numbers */}
+          {selectedOrderNumbers.length > 0 && (
+            <div className="py-2">
+              <p className="text-xs text-muted-foreground mb-2">
+                Affected orders:
+              </p>
+              <div className="flex flex-wrap gap-1.5">
+                {selectedOrderNumbers.map((orderNum) => (
+                  <Badge
+                    key={orderNum}
+                    variant="secondary"
+                    className="text-xs font-normal"
+                  >
+                    {orderNum}
+                  </Badge>
+                ))}
+                {selectedIds.size > 5 && (
+                  <Badge variant="outline" className="text-xs font-normal">
+                    +{selectedIds.size - 5} more
+                  </Badge>
+                )}
+              </div>
+            </div>
+          )}
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={() => setConfirmAction(null)}
+              disabled={isProcessing}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="default"
+              onClick={handleConfirmAction}
+              disabled={isProcessing}
+              className={cn(
+                confirmAction === "mark-processing" &&
+                  "bg-blue-600 hover:bg-blue-700",
+                confirmAction === "mark-completed" &&
+                  "bg-emerald-600 hover:bg-emerald-700",
+              )}
+            >
+              {isProcessing ? (
+                <>
+                  <span className="animate-spin mr-2">
+                    <svg
+                      className="h-4 w-4"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      />
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      />
+                    </svg>
+                  </span>
+                  Processing...
+                </>
+              ) : confirmAction === "mark-processing" ? (
+                "Mark Processing"
+              ) : (
+                "Mark Completed"
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </>
   );
 }
diff --git a/nextjs_space/app/tenant-admin/orders/page.tsx b/nextjs_space/app/tenant-admin/orders/page.tsx
index c6e028c..e7274c2 100644
--- a/nextjs_space/app/tenant-admin/orders/page.tsx
+++ b/nextjs_space/app/tenant-admin/orders/page.tsx
@@ -1,32 +1,48 @@
-'use client';
-
-import { useSession } from 'next-auth/react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useState, useCallback, useRef } from 'react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { Badge } from '@/components/ui/badge';
-import { Textarea } from '@/components/ui/textarea';
-import { format } from 'date-fns';
-import { Package, Truck, CheckCircle2, XCircle, Clock, Printer, FileText, Check } from 'lucide-react';
+"use client";
+
+import { useSession } from "next-auth/react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState, useCallback, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Textarea } from "@/components/ui/textarea";
+import { format } from "date-fns";
+import {
+  Package,
+  Truck,
+  CheckCircle2,
+  XCircle,
+  Clock,
+  Printer,
+  FileText,
+  Check,
+} from "lucide-react";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog';
+} from "@/components/ui/dialog";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select';
-import { toast } from '@/components/ui/sonner';
-import { OrdersTable } from './orders-table';
-import { Breadcrumbs } from '@/components/admin/shared';
+} from "@/components/ui/select";
+import { toast } from "@/components/ui/sonner";
+import { OrdersTable } from "./orders-table";
+import { Breadcrumbs } from "@/components/admin/shared";
 
 interface OrderItem {
   id: string;
@@ -85,17 +101,21 @@ export default function TenantOrdersPage() {
   const [loading, setLoading] = useState(true);
   const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);
   const [updatingStatus, setUpdatingStatus] = useState(false);
-  const [adminNotes, setAdminNotes] = useState('');
+  const [adminNotes, setAdminNotes] = useState("");
   const [isSavingNotes, setIsSavingNotes] = useState(false);
   const [showSavedIndicator, setShowSavedIndicator] = useState(false);
   const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
-    if (status === 'unauthenticated') {
-      router.push('/auth/login');
+    if (status === "unauthenticated") {
+      router.push("/auth/login");
     }
-    if (status === 'authenticated' && session?.user?.role !== 'TENANT_ADMIN' && session?.user?.role !== 'SUPER_ADMIN') {
-      router.push('/auth/login');
+    if (
+      status === "authenticated" &&
+      session?.user?.role !== "TENANT_ADMIN" &&
+      session?.user?.role !== "SUPER_ADMIN"
+    ) {
+      router.push("/auth/login");
     }
   }, [status, session, router]);
 
@@ -104,27 +124,28 @@ export default function TenantOrdersPage() {
     const params = new URLSearchParams();
 
     // Pagination params
-    const page = searchParams.get('page') || '1';
-    const pageSize = searchParams.get('pageSize') || '20';
-    params.set('page', page);
-    params.set('pageSize', pageSize);
+    const page = searchParams.get("page") || "1";
+    const pageSize = searchParams.get("pageSize") || "20";
+    params.set("page", page);
+    params.set("pageSize", pageSize);
 
     // Search and filter params
-    const search = searchParams.get('search');
-    const statusFilter = searchParams.get('status');
-    const dateFrom = searchParams.get('dateFrom');
-    const dateTo = searchParams.get('dateTo');
+    const search = searchParams.get("search");
+    const statusFilter = searchParams.get("status");
+    const dateFrom = searchParams.get("dateFrom");
+    const dateTo = searchParams.get("dateTo");
 
     // Sort params
-    const sortBy = searchParams.get('sortBy');
-    const sortOrder = searchParams.get('sortOrder');
+    const sortBy = searchParams.get("sortBy");
+    const sortOrder = searchParams.get("sortOrder");
 
-    if (search) params.set('search', search);
-    if (statusFilter && statusFilter !== 'all') params.set('status', statusFilter);
-    if (dateFrom) params.set('dateFrom', dateFrom);
-    if (dateTo) params.set('dateTo', dateTo);
-    if (sortBy) params.set('sortBy', sortBy);
-    if (sortOrder) params.set('sortOrder', sortOrder);
+    if (search) params.set("search", search);
+    if (statusFilter && statusFilter !== "all")
+      params.set("status", statusFilter);
+    if (dateFrom) params.set("dateFrom", dateFrom);
+    if (dateTo) params.set("dateTo", dateTo);
+    if (sortBy) params.set("sortBy", sortBy);
+    if (sortOrder) params.set("sortOrder", sortOrder);
 
     return `/api/tenant-admin/orders?${params.toString()}`;
   }, [searchParams]);
@@ -137,16 +158,18 @@ export default function TenantOrdersPage() {
         const data: OrdersResponse = await response.json();
         setOrders(data.orders || []);
         setTotalCount(data.totalCount || 0);
-        setStatusCounts(data.statusCounts || {
-          PENDING: 0,
-          PROCESSING: 0,
-          COMPLETED: 0,
-          CANCELLED: 0,
-        });
+        setStatusCounts(
+          data.statusCounts || {
+            PENDING: 0,
+            PROCESSING: 0,
+            COMPLETED: 0,
+            CANCELLED: 0,
+          },
+        );
       }
     } catch (error) {
-      console.error('Error fetching orders:', error);
-      toast.error('Failed to load orders');
+      console.error("Error fetching orders:", error);
+      toast.error("Failed to load orders");
     } finally {
       setLoading(false);
     }
@@ -161,25 +184,25 @@ export default function TenantOrdersPage() {
   const updateOrderStatus = async (orderId: string, newStatus: string) => {
     setUpdatingStatus(true);
     try {
-      const response = await fetch('/api/tenant-admin/orders', {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
+      const response = await fetch("/api/tenant-admin/orders", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ orderId, status: newStatus }),
       });
 
       if (response.ok) {
-        toast.success('Order status updated successfully');
+        toast.success("Order status updated successfully");
         await fetchOrders();
         // Update selected order if it's the one being updated
         if (selectedOrder?.id === orderId) {
           setSelectedOrder({ ...selectedOrder, status: newStatus });
         }
       } else {
-        toast.error('Failed to update order status');
+        toast.error("Failed to update order status");
       }
     } catch (error) {
-      console.error('Error updating order status:', error);
-      toast.error('Failed to update order status');
+      console.error("Error updating order status:", error);
+      toast.error("Failed to update order status");
     } finally {
       setUpdatingStatus(false);
     }
@@ -187,28 +210,28 @@ export default function TenantOrdersPage() {
 
   const getStatusColor = (status: string) => {
     switch (status) {
-      case 'COMPLETED':
-        return 'bg-green-600 hover:bg-green-700';
-      case 'PROCESSING':
-        return 'bg-blue-600 hover:bg-blue-700';
-      case 'PENDING':
-        return 'bg-yellow-600 hover:bg-yellow-700';
-      case 'CANCELLED':
-        return 'bg-red-600 hover:bg-red-700';
+      case "COMPLETED":
+        return "bg-green-600 hover:bg-green-700";
+      case "PROCESSING":
+        return "bg-blue-600 hover:bg-blue-700";
+      case "PENDING":
+        return "bg-yellow-600 hover:bg-yellow-700";
+      case "CANCELLED":
+        return "bg-red-600 hover:bg-red-700";
       default:
-        return 'bg-gray-600 hover:bg-gray-700';
+        return "bg-gray-600 hover:bg-gray-700";
     }
   };
 
   const getStatusIcon = (status: string) => {
     switch (status) {
-      case 'COMPLETED':
+      case "COMPLETED":
         return <CheckCircle2 className="w-4 h-4" />;
-      case 'PROCESSING':
+      case "PROCESSING":
         return <Truck className="w-4 h-4" />;
-      case 'PENDING':
+      case "PENDING":
         return <Clock className="w-4 h-4" />;
-      case 'CANCELLED':
+      case "CANCELLED":
         return <XCircle className="w-4 h-4" />;
       default:
         return <Package className="w-4 h-4" />;
@@ -219,46 +242,52 @@ export default function TenantOrdersPage() {
   const saveAdminNotes = useCallback(async (orderId: string, notes: string) => {
     setIsSavingNotes(true);
     try {
-      const response = await fetch(`/api/tenant-admin/orders/${orderId}/admin-notes`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ adminNotes: notes }),
-      });
+      const response = await fetch(
+        `/api/tenant-admin/orders/${orderId}/admin-notes`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ adminNotes: notes }),
+        },
+      );
 
       if (response.ok) {
         setShowSavedIndicator(true);
         // Hide saved indicator after 2 seconds
         setTimeout(() => setShowSavedIndicator(false), 2000);
       } else {
-        toast.error('Failed to save admin notes');
+        toast.error("Failed to save admin notes");
       }
     } catch (error) {
-      console.error('Error saving admin notes:', error);
-      toast.error('Failed to save admin notes');
+      console.error("Error saving admin notes:", error);
+      toast.error("Failed to save admin notes");
     } finally {
       setIsSavingNotes(false);
     }
   }, []);
 
   // Handle admin notes change with debouncing
-  const handleAdminNotesChange = useCallback((value: string, orderId: string) => {
-    setAdminNotes(value);
+  const handleAdminNotesChange = useCallback(
+    (value: string, orderId: string) => {
+      setAdminNotes(value);
 
-    // Clear existing timeout
-    if (saveTimeoutRef.current) {
-      clearTimeout(saveTimeoutRef.current);
-    }
+      // Clear existing timeout
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
 
-    // Set new timeout to save after 1 second of no typing
-    saveTimeoutRef.current = setTimeout(() => {
-      saveAdminNotes(orderId, value);
-    }, 1000);
-  }, [saveAdminNotes]);
+      // Set new timeout to save after 1 second of no typing
+      saveTimeoutRef.current = setTimeout(() => {
+        saveAdminNotes(orderId, value);
+      }, 1000);
+    },
+    [saveAdminNotes],
+  );
 
   // Initialize admin notes when order is selected
   useEffect(() => {
     if (selectedOrder) {
-      setAdminNotes(selectedOrder.adminNotes || '');
+      setAdminNotes(selectedOrder.adminNotes || "");
       setShowSavedIndicator(false);
     }
   }, [selectedOrder]);
@@ -272,7 +301,7 @@ export default function TenantOrdersPage() {
     };
   }, []);
 
-  if (status === 'loading' || loading) {
+  if (status === "loading" || loading) {
     return (
       <div className="min-h-screen flex items-center justify-center">
         <div className="text-center">
@@ -288,23 +317,31 @@ export default function TenantOrdersPage() {
   }
 
   // Calculate total orders for stats (sum of all status counts)
-  const totalOrders = statusCounts.PENDING + statusCounts.PROCESSING + statusCounts.COMPLETED + statusCounts.CANCELLED;
+  const totalOrders =
+    statusCounts.PENDING +
+    statusCounts.PROCESSING +
+    statusCounts.COMPLETED +
+    statusCounts.CANCELLED;
 
   return (
     <div className="p-8">
       {/* Breadcrumbs */}
       <Breadcrumbs
         items={[
-          { label: 'Dashboard', href: '/tenant-admin' },
-          { label: 'Orders' },
+          { label: "Dashboard", href: "/tenant-admin" },
+          { label: "Orders" },
         ]}
         className="mb-4"
       />
 
       {/* Header */}
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-slate-900 tracking-tight">Order Management</h1>
-        <p className="text-slate-600 mt-2">Manage and fulfill customer orders</p>
+        <h1 className="text-3xl font-bold text-slate-900 tracking-tight">
+          Order Management
+        </h1>
+        <p className="text-slate-600 mt-2">
+          Manage and fulfill customer orders
+        </p>
       </div>
 
       {/* Order Stats */}
@@ -312,7 +349,9 @@ export default function TenantOrdersPage() {
         <Card className="border-none shadow-lg bg-gradient-to-br from-slate-500 to-gray-500 text-white overflow-hidden relative group hover:shadow-xl transition-shadow duration-300">
           <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 group-hover:scale-110 transition-transform duration-300" />
           <CardHeader className="pb-3 relative z-10">
-            <CardTitle className="text-sm font-medium text-slate-50">Total Orders</CardTitle>
+            <CardTitle className="text-sm font-medium text-slate-50">
+              Total Orders
+            </CardTitle>
           </CardHeader>
           <CardContent className="relative z-10">
             <div className="text-3xl font-bold">{totalOrders}</div>
@@ -321,34 +360,34 @@ export default function TenantOrdersPage() {
         <Card className="border-none shadow-lg bg-gradient-to-br from-amber-500 to-orange-500 text-white overflow-hidden relative group hover:shadow-xl transition-shadow duration-300">
           <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 group-hover:scale-110 transition-transform duration-300" />
           <CardHeader className="pb-3 relative z-10">
-            <CardTitle className="text-sm font-medium text-amber-50">Pending</CardTitle>
+            <CardTitle className="text-sm font-medium text-amber-50">
+              Pending
+            </CardTitle>
           </CardHeader>
           <CardContent className="relative z-10">
-            <div className="text-3xl font-bold">
-              {statusCounts.PENDING}
-            </div>
+            <div className="text-3xl font-bold">{statusCounts.PENDING}</div>
           </CardContent>
         </Card>
         <Card className="border-none shadow-lg bg-gradient-to-br from-cyan-500 to-blue-500 text-white overflow-hidden relative group hover:shadow-xl transition-shadow duration-300">
           <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 group-hover:scale-110 transition-transform duration-300" />
           <CardHeader className="pb-3 relative z-10">
-            <CardTitle className="text-sm font-medium text-cyan-50">Processing</CardTitle>
+            <CardTitle className="text-sm font-medium text-cyan-50">
+              Processing
+            </CardTitle>
           </CardHeader>
           <CardContent className="relative z-10">
-            <div className="text-3xl font-bold">
-              {statusCounts.PROCESSING}
-            </div>
+            <div className="text-3xl font-bold">{statusCounts.PROCESSING}</div>
           </CardContent>
         </Card>
         <Card className="border-none shadow-lg bg-gradient-to-br from-emerald-500 to-teal-500 text-white overflow-hidden relative group hover:shadow-xl transition-shadow duration-300">
           <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 group-hover:scale-110 transition-transform duration-300" />
           <CardHeader className="pb-3 relative z-10">
-            <CardTitle className="text-sm font-medium text-emerald-50">Completed</CardTitle>
+            <CardTitle className="text-sm font-medium text-emerald-50">
+              Completed
+            </CardTitle>
           </CardHeader>
           <CardContent className="relative z-10">
-            <div className="text-3xl font-bold">
-              {statusCounts.COMPLETED}
-            </div>
+            <div className="text-3xl font-bold">{statusCounts.COMPLETED}</div>
           </CardContent>
         </Card>
       </div>
@@ -362,7 +401,10 @@ export default function TenantOrdersPage() {
       />
 
       {/* Order Detail Modal */}
-      <Dialog open={!!selectedOrder} onOpenChange={() => setSelectedOrder(null)}>
+      <Dialog
+        open={!!selectedOrder}
+        onOpenChange={() => setSelectedOrder(null)}
+      >
         <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle className="text-2xl">Order Details</DialogTitle>
@@ -377,13 +419,20 @@ export default function TenantOrdersPage() {
               <div className="grid grid-cols-2 gap-4 p-4 bg-gray-50 rounded-lg">
                 <div>
                   <p className="text-sm text-gray-600 mb-1">Customer</p>
-                  <p className="font-semibold">{selectedOrder.user?.name || 'Guest'}</p>
-                  <p className="text-sm text-gray-600">{selectedOrder.user?.email}</p>
+                  <p className="font-semibold">
+                    {selectedOrder.user?.name || "Guest"}
+                  </p>
+                  <p className="text-sm text-gray-600">
+                    {selectedOrder.user?.email}
+                  </p>
                 </div>
                 <div className="text-right">
                   <p className="text-sm text-gray-600 mb-1">Order Date</p>
                   <p className="font-semibold">
-                    {format(new Date(selectedOrder.createdAt), 'MMM d, yyyy • h:mm a')}
+                    {format(
+                      new Date(selectedOrder.createdAt),
+                      "MMM d, yyyy • h:mm a",
+                    )}
                   </p>
                 </div>
               </div>
@@ -395,7 +444,9 @@ export default function TenantOrdersPage() {
                   <div className="flex-1">
                     <Select
                       value={selectedOrder.status}
-                      onValueChange={(value) => updateOrderStatus(selectedOrder.id, value)}
+                      onValueChange={(value) =>
+                        updateOrderStatus(selectedOrder.id, value)
+                      }
                       disabled={updatingStatus}
                     >
                       <SelectTrigger className="w-full">
@@ -409,7 +460,9 @@ export default function TenantOrdersPage() {
                       </SelectContent>
                     </Select>
                   </div>
-                  <Badge className={`${getStatusColor(selectedOrder.status)} text-white gap-1`}>
+                  <Badge
+                    className={`${getStatusColor(selectedOrder.status)} text-white gap-1`}
+                  >
                     {getStatusIcon(selectedOrder.status)}
                     {selectedOrder.status}
                   </Badge>
@@ -435,9 +488,15 @@ export default function TenantOrdersPage() {
                     <TableBody>
                       {selectedOrder.items.map((item) => (
                         <TableRow key={item.id}>
-                          <TableCell className="font-medium">{item.productName}</TableCell>
-                          <TableCell className="text-center">{item.quantity}</TableCell>
-                          <TableCell className="text-right">€{item.price.toFixed(2)}</TableCell>
+                          <TableCell className="font-medium">
+                            {item.productName}
+                          </TableCell>
+                          <TableCell className="text-center">
+                            {item.quantity}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            €{item.price.toFixed(2)}
+                          </TableCell>
                           <TableCell className="text-right">
                             €{(item.quantity * item.price).toFixed(2)}
                           </TableCell>
@@ -471,7 +530,9 @@ export default function TenantOrdersPage() {
                 <div className="flex items-start justify-between mb-2">
                   <div className="flex items-center gap-2">
                     <FileText className="w-5 h-5 text-amber-600" />
-                    <h3 className="font-semibold text-lg text-slate-900">Admin Notes</h3>
+                    <h3 className="font-semibold text-lg text-slate-900">
+                      Admin Notes
+                    </h3>
                   </div>
                   {showSavedIndicator && (
                     <div className="flex items-center gap-1.5 text-sm text-emerald-600 font-medium animate-in fade-in duration-200">
@@ -485,13 +546,17 @@ export default function TenantOrdersPage() {
                 </p>
                 <Textarea
                   value={adminNotes}
-                  onChange={(e) => handleAdminNotesChange(e.target.value, selectedOrder.id)}
+                  onChange={(e) =>
+                    handleAdminNotesChange(e.target.value, selectedOrder.id)
+                  }
                   placeholder="Add notes about special handling, gift messages, or other internal information..."
                   className="min-h-[120px] resize-y bg-white border-amber-200 focus-visible:ring-amber-400 focus-visible:border-amber-400"
                   disabled={isSavingNotes}
                 />
                 <p className="text-xs text-slate-500 mt-2">
-                  {isSavingNotes ? 'Saving...' : 'Changes are saved automatically after 1 second of no typing'}
+                  {isSavingNotes
+                    ? "Saving..."
+                    : "Changes are saved automatically after 1 second of no typing"}
                 </p>
               </div>
 
@@ -503,7 +568,7 @@ export default function TenantOrdersPage() {
                   className="w-full gap-2 border-slate-300 hover:bg-slate-50 hover:border-slate-400 font-medium"
                   onClick={() => {
                     const packingSlipUrl = `/tenant-admin/orders/${selectedOrder.id}/packing-slip`;
-                    window.open(packingSlipUrl, '_blank');
+                    window.open(packingSlipUrl, "_blank");
                   }}
                 >
                   <Printer className="w-4 h-4" />
@@ -512,43 +577,50 @@ export default function TenantOrdersPage() {
 
                 {/* Status Action Buttons */}
                 <div className="flex gap-3">
-                  {selectedOrder.status === 'PENDING' && (
+                  {selectedOrder.status === "PENDING" && (
                     <Button
                       className="flex-1 bg-blue-600 hover:bg-blue-700"
-                      onClick={() => updateOrderStatus(selectedOrder.id, 'PROCESSING')}
+                      onClick={() =>
+                        updateOrderStatus(selectedOrder.id, "PROCESSING")
+                      }
                       disabled={updatingStatus}
                     >
                       <Truck className="w-4 h-4 mr-2" />
                       Start Processing
                     </Button>
                   )}
-                  {selectedOrder.status === 'PROCESSING' && (
+                  {selectedOrder.status === "PROCESSING" && (
                     <Button
                       className="flex-1 bg-green-600 hover:bg-green-700"
-                      onClick={() => updateOrderStatus(selectedOrder.id, 'COMPLETED')}
+                      onClick={() =>
+                        updateOrderStatus(selectedOrder.id, "COMPLETED")
+                      }
                       disabled={updatingStatus}
                     >
                       <CheckCircle2 className="w-4 h-4 mr-2" />
                       Mark as Completed
                     </Button>
                   )}
-                  {selectedOrder.status !== 'CANCELLED' && selectedOrder.status !== 'COMPLETED' && (
-                    <Button
-                      variant="outline"
-                      className="text-red-600 hover:text-red-700 hover:bg-red-50"
-                      onClick={() => updateOrderStatus(selectedOrder.id, 'CANCELLED')}
-                      disabled={updatingStatus}
-                    >
-                      <XCircle className="w-4 h-4 mr-2" />
-                      Cancel Order
-                    </Button>
-                  )}
+                  {selectedOrder.status !== "CANCELLED" &&
+                    selectedOrder.status !== "COMPLETED" && (
+                      <Button
+                        variant="outline"
+                        className="text-red-600 hover:text-red-700 hover:bg-red-50"
+                        onClick={() =>
+                          updateOrderStatus(selectedOrder.id, "CANCELLED")
+                        }
+                        disabled={updatingStatus}
+                      >
+                        <XCircle className="w-4 h-4 mr-2" />
+                        Cancel Order
+                      </Button>
+                    )}
                 </div>
               </div>
             </div>
           )}
         </DialogContent>
       </Dialog>
-    </div >
+    </div>
   );
 }
diff --git a/nextjs_space/app/tenant-admin/page.tsx b/nextjs_space/app/tenant-admin/page.tsx
index 06114f2..22f9112 100644
--- a/nextjs_space/app/tenant-admin/page.tsx
+++ b/nextjs_space/app/tenant-admin/page.tsx
@@ -1,20 +1,40 @@
-
-import { getServerSession } from 'next-auth';
-import { redirect } from 'next/navigation';
-import { authOptions } from '@/lib/auth';
-import Link from 'next/link';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { ShoppingBag, Package, Palette, Settings, ExternalLink, BarChart3, Shield, Webhook, Newspaper, Users } from 'lucide-react';
-import { prisma } from '@/lib/db';
-import { getTenantUrl } from '@/lib/tenant';
-import { QuickActionsWidget } from '@/components/admin/QuickActionsWidget';
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import { authOptions } from "@/lib/auth";
+import Link from "next/link";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  ShoppingBag,
+  Package,
+  Palette,
+  Settings,
+  ExternalLink,
+  BarChart3,
+  Shield,
+  Webhook,
+  Newspaper,
+  Users,
+} from "lucide-react";
+import { prisma } from "@/lib/db";
+import { getTenantUrl } from "@/lib/tenant";
+import { QuickActionsWidget } from "@/components/admin/QuickActionsWidget";
 
 export default async function TenantAdminDashboard() {
   const session = await getServerSession(authOptions);
 
-  if (!session || (session.user.role !== 'TENANT_ADMIN' && session.user.role !== 'SUPER_ADMIN')) {
-    redirect('/auth/login');
+  if (
+    !session ||
+    (session.user.role !== "TENANT_ADMIN" &&
+      session.user.role !== "SUPER_ADMIN")
+  ) {
+    redirect("/auth/login");
   }
 
   const user = await prisma.users.findUnique({
@@ -36,7 +56,7 @@ export default async function TenantAdminDashboard() {
 
   if (!user?.tenants) {
     // Redirect to login if user has no tenant associated
-    redirect('/auth/login');
+    redirect("/auth/login");
   }
 
   const tenant = user.tenants;
@@ -50,7 +70,9 @@ export default async function TenantAdminDashboard() {
     <div className="p-8">
       {/* Header */}
       <div className="mb-8">
-        <h1 className="text-3xl font-bold tracking-tight">Tenant Admin Dashboard</h1>
+        <h1 className="text-3xl font-bold tracking-tight">
+          Tenant Admin Dashboard
+        </h1>
         <p className="text-muted-foreground mt-2">
           Managing: <span className="font-semibold">{tenant.businessName}</span>
         </p>
@@ -80,34 +102,52 @@ export default async function TenantAdminDashboard() {
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
         <Card className="bg-white text-slate-900 border-slate-200 shadow-lg hover:shadow-xl transition-shadow">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 border-b bg-gradient-to-r from-emerald-50 to-teal-50">
-            <CardTitle className="text-sm font-semibold text-slate-900">Total Products</CardTitle>
+            <CardTitle className="text-sm font-semibold text-slate-900">
+              Total Products
+            </CardTitle>
             <Package className="h-5 w-5 text-emerald-600" />
           </CardHeader>
           <CardContent className="pt-6">
-            <div className="text-3xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">{tenant._count.products}</div>
-            <p className="text-xs text-slate-600 font-medium tracking-wide mt-1">Active listings</p>
+            <div className="text-3xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">
+              {tenant._count.products}
+            </div>
+            <p className="text-xs text-slate-600 font-medium tracking-wide mt-1">
+              Active listings
+            </p>
           </CardContent>
         </Card>
 
         <Card className="bg-white text-slate-900 border-slate-200 shadow-lg hover:shadow-xl transition-shadow">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 border-b bg-gradient-to-r from-purple-50 to-pink-50">
-            <CardTitle className="text-sm font-semibold text-slate-900">Total Orders</CardTitle>
+            <CardTitle className="text-sm font-semibold text-slate-900">
+              Total Orders
+            </CardTitle>
             <ShoppingBag className="h-5 w-5 text-purple-600" />
           </CardHeader>
           <CardContent className="pt-6">
-            <div className="text-3xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">{tenant._count.orders}</div>
-            <p className="text-xs text-slate-600 font-medium tracking-wide mt-1">All time</p>
+            <div className="text-3xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
+              {tenant._count.orders}
+            </div>
+            <p className="text-xs text-slate-600 font-medium tracking-wide mt-1">
+              All time
+            </p>
           </CardContent>
         </Card>
 
         <Card className="bg-white text-slate-900 border-slate-200 shadow-lg hover:shadow-xl transition-shadow">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 border-b bg-gradient-to-r from-cyan-50 to-blue-50">
-            <CardTitle className="text-sm font-semibold text-slate-900">Team Members</CardTitle>
+            <CardTitle className="text-sm font-semibold text-slate-900">
+              Team Members
+            </CardTitle>
             <Users className="h-5 w-5 text-cyan-600" />
           </CardHeader>
           <CardContent className="pt-6">
-            <div className="text-3xl font-bold bg-gradient-to-r from-cyan-600 to-blue-600 bg-clip-text text-transparent">{tenant._count.users}</div>
-            <p className="text-xs text-slate-600 font-medium tracking-wide mt-1">Active users</p>
+            <div className="text-3xl font-bold bg-gradient-to-r from-cyan-600 to-blue-600 bg-clip-text text-transparent">
+              {tenant._count.users}
+            </div>
+            <p className="text-xs text-slate-600 font-medium tracking-wide mt-1">
+              Active users
+            </p>
           </CardContent>
         </Card>
       </div>
@@ -121,30 +161,51 @@ export default async function TenantAdminDashboard() {
       <div className="mt-8">
         <Card className="bg-white text-slate-900 border-slate-200 shadow-sm">
           <CardHeader>
-            <CardTitle className="text-2xl font-bold">Store Information</CardTitle>
+            <CardTitle className="text-2xl font-bold">
+              Store Information
+            </CardTitle>
           </CardHeader>
           <CardContent>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4 bg-slate-50 p-4 rounded-lg border border-slate-100">
               <div>
-                <p className="text-sm font-semibold text-slate-500 uppercase">Store URL</p>
-                <a href={tenantUrl} target="_blank" rel="noopener noreferrer" className="text-base text-blue-600 font-medium hover:underline flex items-center gap-1 mt-1">
+                <p className="text-sm font-semibold text-slate-500 uppercase">
+                  Store URL
+                </p>
+                <a
+                  href={tenantUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-base text-blue-600 font-medium hover:underline flex items-center gap-1 mt-1"
+                >
                   {tenantUrl}
                   <ExternalLink className="h-3 w-3" />
                 </a>
               </div>
               <div>
-                <p className="text-sm font-semibold text-slate-500 uppercase">Custom Domain</p>
-                <p className="text-base text-slate-900 font-medium mt-1">{tenant.customDomain || 'Not configured'}</p>
+                <p className="text-sm font-semibold text-slate-500 uppercase">
+                  Custom Domain
+                </p>
+                <p className="text-base text-slate-900 font-medium mt-1">
+                  {tenant.customDomain || "Not configured"}
+                </p>
               </div>
               <div>
-                <p className="text-sm font-semibold text-slate-500 uppercase">NFT Token ID</p>
-                <p className="text-base text-slate-900 font-medium mt-1">{tenant.nftTokenId || 'Not set'}</p>
+                <p className="text-sm font-semibold text-slate-500 uppercase">
+                  NFT Token ID
+                </p>
+                <p className="text-base text-slate-900 font-medium mt-1">
+                  {tenant.nftTokenId || "Not set"}
+                </p>
               </div>
               <div>
-                <p className="text-sm font-semibold text-slate-500 uppercase">Status</p>
+                <p className="text-sm font-semibold text-slate-500 uppercase">
+                  Status
+                </p>
                 <div className="mt-1">
-                  <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold ${tenant.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
-                    {tenant.isActive ? 'Active' : 'Inactive'}
+                  <span
+                    className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold ${tenant.isActive ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}`}
+                  >
+                    {tenant.isActive ? "Active" : "Inactive"}
                   </span>
                 </div>
               </div>
diff --git a/nextjs_space/app/tenant-admin/products/page.tsx b/nextjs_space/app/tenant-admin/products/page.tsx
index 1a20931..ddbe3ef 100644
--- a/nextjs_space/app/tenant-admin/products/page.tsx
+++ b/nextjs_space/app/tenant-admin/products/page.tsx
@@ -1,29 +1,43 @@
-import { getServerSession } from 'next-auth';
-import { redirect } from 'next/navigation';
-import { authOptions } from '@/lib/auth';
-import { Button } from '@/components/ui/button';
-import { prisma } from '@/lib/db';
-import { Prisma } from '@prisma/client';
-import { ProductsTable } from './products-table';
-import { Breadcrumbs } from '@/components/admin/shared';
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import { authOptions } from "@/lib/auth";
+import { Button } from "@/components/ui/button";
+import { prisma } from "@/lib/db";
+import { Prisma } from "@prisma/client";
+import { ProductsTable } from "./products-table";
+import { Breadcrumbs } from "@/components/admin/shared";
 
 /** Default pagination settings */
 const DEFAULT_PAGE_SIZE = 20;
 const VALID_PAGE_SIZES = [10, 20, 50, 100];
 
 /** Valid sort columns for products table */
-const VALID_SORT_COLUMNS = ['name', 'category', 'price', 'stock', 'thcContent', 'cbdContent', 'createdAt'] as const;
-type SortColumn = typeof VALID_SORT_COLUMNS[number];
+const VALID_SORT_COLUMNS = [
+  "name",
+  "category",
+  "price",
+  "stock",
+  "thcContent",
+  "cbdContent",
+  "createdAt",
+] as const;
+type SortColumn = (typeof VALID_SORT_COLUMNS)[number];
 
 interface ProductsPageProps {
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }
 
-export default async function ProductsPage({ searchParams }: ProductsPageProps) {
+export default async function ProductsPage({
+  searchParams,
+}: ProductsPageProps) {
   const session = await getServerSession(authOptions);
 
-  if (!session || (session.user.role !== 'TENANT_ADMIN' && session.user.role !== 'SUPER_ADMIN')) {
-    redirect('/auth/login');
+  if (
+    !session ||
+    (session.user.role !== "TENANT_ADMIN" &&
+      session.user.role !== "SUPER_ADMIN")
+  ) {
+    redirect("/auth/login");
   }
 
   const user = await prisma.users.findUnique({
@@ -32,7 +46,7 @@ export default async function ProductsPage({ searchParams }: ProductsPageProps)
   });
 
   if (!user?.tenantId) {
-    redirect('/tenant-admin');
+    redirect("/tenant-admin");
   }
 
   const tenantId = user.tenantId;
@@ -41,26 +55,38 @@ export default async function ProductsPage({ searchParams }: ProductsPageProps)
   const params = await searchParams;
 
   // Parse pagination params from URL
-  const pageParam = typeof params.page === 'string' ? parseInt(params.page, 10) : 1;
+  const pageParam =
+    typeof params.page === "string" ? parseInt(params.page, 10) : 1;
   const page = Number.isNaN(pageParam) || pageParam < 1 ? 1 : pageParam;
 
-  const pageSizeParam = typeof params.pageSize === 'string' ? parseInt(params.pageSize, 10) : DEFAULT_PAGE_SIZE;
-  const pageSize = VALID_PAGE_SIZES.includes(pageSizeParam) ? pageSizeParam : DEFAULT_PAGE_SIZE;
+  const pageSizeParam =
+    typeof params.pageSize === "string"
+      ? parseInt(params.pageSize, 10)
+      : DEFAULT_PAGE_SIZE;
+  const pageSize = VALID_PAGE_SIZES.includes(pageSizeParam)
+    ? pageSizeParam
+    : DEFAULT_PAGE_SIZE;
 
   // Parse search and filter params from URL
-  const search = typeof params.search === 'string' ? params.search.trim() : '';
-  const categoryFilter = typeof params.category === 'string' ? params.category : 'all';
-  const stockFilter = typeof params.stock === 'string' ? params.stock : 'all';
+  const search = typeof params.search === "string" ? params.search.trim() : "";
+  const categoryFilter =
+    typeof params.category === "string" ? params.category : "all";
+  const stockFilter = typeof params.stock === "string" ? params.stock : "all";
 
   // Parse sort params from URL
-  const sortByParam = typeof params.sortBy === 'string' ? params.sortBy : null;
-  const sortOrderParam = typeof params.sortOrder === 'string' ? params.sortOrder : null;
+  const sortByParam = typeof params.sortBy === "string" ? params.sortBy : null;
+  const sortOrderParam =
+    typeof params.sortOrder === "string" ? params.sortOrder : null;
 
   // Validate sort column
-  const sortBy = sortByParam && VALID_SORT_COLUMNS.includes(sortByParam as SortColumn)
-    ? (sortByParam as SortColumn)
-    : null;
-  const sortOrder = sortOrderParam === 'asc' || sortOrderParam === 'desc' ? sortOrderParam : 'asc';
+  const sortBy =
+    sortByParam && VALID_SORT_COLUMNS.includes(sortByParam as SortColumn)
+      ? (sortByParam as SortColumn)
+      : null;
+  const sortOrder =
+    sortOrderParam === "asc" || sortOrderParam === "desc"
+      ? sortOrderParam
+      : "asc";
 
   // Build Prisma where clause for server-side filtering
   const whereClause: Prisma.productsWhereInput = {
@@ -70,21 +96,21 @@ export default async function ProductsPage({ searchParams }: ProductsPageProps)
   // Apply search filter (case-insensitive across multiple fields)
   if (search) {
     whereClause.OR = [
-      { name: { contains: search, mode: 'insensitive' } },
-      { category: { contains: search, mode: 'insensitive' } },
-      { slug: { contains: search, mode: 'insensitive' } },
+      { name: { contains: search, mode: "insensitive" } },
+      { category: { contains: search, mode: "insensitive" } },
+      { slug: { contains: search, mode: "insensitive" } },
     ];
   }
 
   // Apply category filter
-  if (categoryFilter !== 'all') {
-    whereClause.category = { equals: categoryFilter, mode: 'insensitive' };
+  if (categoryFilter !== "all") {
+    whereClause.category = { equals: categoryFilter, mode: "insensitive" };
   }
 
   // Apply stock filter
-  if (stockFilter === 'in-stock') {
+  if (stockFilter === "in-stock") {
     whereClause.stock = { gt: 0 };
-  } else if (stockFilter === 'out-of-stock') {
+  } else if (stockFilter === "out-of-stock") {
     whereClause.stock = { equals: 0 };
   }
 
@@ -94,11 +120,17 @@ export default async function ProductsPage({ searchParams }: ProductsPageProps)
   // Build orderBy clause - default to displayOrder asc if no sort specified
   const orderBy: Prisma.productsOrderByWithRelationInput = sortBy
     ? { [sortBy]: sortOrder }
-    : { displayOrder: 'asc' };
+    : { displayOrder: "asc" };
 
   // Get filtered count and paginated products in parallel
   // Also get counts for filter badges
-  const [filteredCount, products, inStockCount, outOfStockCount, categoryCounts] = await Promise.all([
+  const [
+    filteredCount,
+    products,
+    inStockCount,
+    outOfStockCount,
+    categoryCounts,
+  ] = await Promise.all([
     prisma.products.count({ where: whereClause }),
     prisma.products.findMany({
       where: whereClause,
@@ -110,13 +142,15 @@ export default async function ProductsPage({ searchParams }: ProductsPageProps)
     prisma.products.count({
       where: {
         tenantId,
-        ...(search ? {
-          OR: [
-            { name: { contains: search, mode: 'insensitive' } },
-            { category: { contains: search, mode: 'insensitive' } },
-            { slug: { contains: search, mode: 'insensitive' } },
-          ],
-        } : {}),
+        ...(search
+          ? {
+              OR: [
+                { name: { contains: search, mode: "insensitive" } },
+                { category: { contains: search, mode: "insensitive" } },
+                { slug: { contains: search, mode: "insensitive" } },
+              ],
+            }
+          : {}),
         stock: { gt: 0 },
       },
     }),
@@ -124,28 +158,32 @@ export default async function ProductsPage({ searchParams }: ProductsPageProps)
     prisma.products.count({
       where: {
         tenantId,
-        ...(search ? {
-          OR: [
-            { name: { contains: search, mode: 'insensitive' } },
-            { category: { contains: search, mode: 'insensitive' } },
-            { slug: { contains: search, mode: 'insensitive' } },
-          ],
-        } : {}),
+        ...(search
+          ? {
+              OR: [
+                { name: { contains: search, mode: "insensitive" } },
+                { category: { contains: search, mode: "insensitive" } },
+                { slug: { contains: search, mode: "insensitive" } },
+              ],
+            }
+          : {}),
         stock: { equals: 0 },
       },
     }),
     // Get category counts for filter badges
     prisma.products.groupBy({
-      by: ['category'],
+      by: ["category"],
       where: {
         tenantId,
-        ...(search ? {
-          OR: [
-            { name: { contains: search, mode: 'insensitive' } },
-            { category: { contains: search, mode: 'insensitive' } },
-            { slug: { contains: search, mode: 'insensitive' } },
-          ],
-        } : {}),
+        ...(search
+          ? {
+              OR: [
+                { name: { contains: search, mode: "insensitive" } },
+                { category: { contains: search, mode: "insensitive" } },
+                { slug: { contains: search, mode: "insensitive" } },
+              ],
+            }
+          : {}),
       },
       _count: { id: true },
     }),
@@ -153,18 +191,20 @@ export default async function ProductsPage({ searchParams }: ProductsPageProps)
 
   // Transform category counts into a map
   const categoryCountsMap: Record<string, number> = {};
-  categoryCounts.forEach((item: { category: string | null; _count: { id: number } }) => {
-    const cat = item.category?.toLowerCase() || 'uncategorized';
-    categoryCountsMap[cat] = item._count.id;
-  });
+  categoryCounts.forEach(
+    (item: { category: string | null; _count: { id: number } }) => {
+      const cat = item.category?.toLowerCase() || "uncategorized";
+      categoryCountsMap[cat] = item._count.id;
+    },
+  );
 
   return (
     <div className="p-4 sm:p-6 lg:p-8">
       {/* Breadcrumbs */}
       <Breadcrumbs
         items={[
-          { label: 'Dashboard', href: '/tenant-admin' },
-          { label: 'Products' },
+          { label: "Dashboard", href: "/tenant-admin" },
+          { label: "Products" },
         ]}
         className="mb-4"
       />
@@ -172,8 +212,12 @@ export default async function ProductsPage({ searchParams }: ProductsPageProps)
       <div className="mb-6 sm:mb-8">
         <div className="flex flex-col gap-4 sm:flex-row sm:justify-between sm:items-center">
           <div>
-            <h1 className="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">Product Management</h1>
-            <p className="text-sm sm:text-base text-slate-600 mt-1 sm:mt-2">Manage your product catalog</p>
+            <h1 className="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">
+              Product Management
+            </h1>
+            <p className="text-sm sm:text-base text-slate-600 mt-1 sm:mt-2">
+              Manage your product catalog
+            </p>
           </div>
           <Button className="w-full sm:w-auto bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-700 hover:to-blue-700 text-white font-medium shadow-md hover:shadow-lg transition-all">
             Sync from Dr Green Admin
diff --git a/nextjs_space/app/tenant-admin/products/products-table.tsx b/nextjs_space/app/tenant-admin/products/products-table.tsx
index 17edc03..863fc28 100644
--- a/nextjs_space/app/tenant-admin/products/products-table.tsx
+++ b/nextjs_space/app/tenant-admin/products/products-table.tsx
@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import { useMemo, useState, useCallback } from 'react';
-import { useRouter } from 'next/navigation';
-import { format } from 'date-fns';
+import { useMemo, useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { format } from "date-fns";
 import {
   Package,
   Search,
@@ -14,7 +14,7 @@ import {
   AlertTriangle,
   RefreshCw,
   GripVertical,
-} from 'lucide-react';
+} from "lucide-react";
 import {
   DndContext,
   closestCenter,
@@ -23,19 +23,19 @@ import {
   useSensor,
   useSensors,
   DragEndEvent,
-} from '@dnd-kit/core';
+} from "@dnd-kit/core";
 import {
   arrayMove,
   SortableContext,
   sortableKeyboardCoordinates,
   useSortable,
   verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Table,
   TableBody,
@@ -43,7 +43,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/components/ui/table';
+} from "@/components/ui/table";
 import {
   Dialog,
   DialogContent,
@@ -51,7 +51,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog';
+} from "@/components/ui/dialog";
 import {
   SearchInput,
   StatusFilter,
@@ -60,19 +60,26 @@ import {
   SortableTableHeader,
   BulkActionBar,
   ExportButton,
-} from '@/components/admin/shared';
-import type { StatusFilterOption, BulkAction } from '@/components/admin/shared';
-import { useTableState } from '@/lib/admin/url-state';
-import { toast } from '@/components/ui/sonner';
-import { cn } from '@/lib/utils';
-import { exportToCSV } from '@/lib/admin/csv-export';
+} from "@/components/admin/shared";
+import type { StatusFilterOption, BulkAction } from "@/components/admin/shared";
+import { useTableState } from "@/lib/admin/url-state";
+import { toast } from "@/components/ui/sonner";
+import { cn } from "@/lib/utils";
+import { exportToCSV } from "@/lib/admin/csv-export";
 
 /** Filter types for product table */
-type CategoryFilter = 'all' | 'flower' | 'edibles' | 'concentrates' | 'pre-rolls' | 'topicals' | 'accessories';
-type StockFilter = 'all' | 'in-stock' | 'out-of-stock';
+type CategoryFilter =
+  | "all"
+  | "flower"
+  | "edibles"
+  | "concentrates"
+  | "pre-rolls"
+  | "topicals"
+  | "accessories";
+type StockFilter = "all" | "in-stock" | "out-of-stock";
 
 /** Type for bulk action confirmation dialog */
-type BulkActionType = 'set-in-stock' | 'set-out-of-stock' | 'delete' | null;
+type BulkActionType = "set-in-stock" | "set-out-of-stock" | "delete" | null;
 
 /** Typed filters for product table - uses Record index signature for URL state compatibility */
 type ProductFilters = {
@@ -147,13 +154,17 @@ function SortableProductRow({
       ref={setNodeRef}
       style={style}
       className={cn(
-        'hover:bg-slate-50 transition-colors',
-        isSelected && 'bg-emerald-50/70',
-        isDragging && 'relative z-50 shadow-lg'
+        "hover:bg-slate-50 transition-colors",
+        isSelected && "bg-emerald-50/70",
+        isDragging && "relative z-50 shadow-lg",
       )}
     >
       {/* Drag Handle - hidden on mobile */}
-      <TableCell className="w-12 cursor-grab active:cursor-grabbing hidden md:table-cell" {...attributes} {...listeners}>
+      <TableCell
+        className="w-12 cursor-grab active:cursor-grabbing hidden md:table-cell"
+        {...attributes}
+        {...listeners}
+      >
         <GripVertical className="h-5 w-5 text-slate-400 hover:text-slate-600 transition-colors" />
       </TableCell>
 
@@ -161,7 +172,9 @@ function SortableProductRow({
       <TableCell className="w-12 hidden sm:table-cell">
         <Checkbox
           checked={isSelected}
-          onCheckedChange={(checked) => onSelectOne(product.id, checked === true)}
+          onCheckedChange={(checked) =>
+            onSelectOne(product.id, checked === true)
+          }
           aria-label={`Select ${product.name}`}
           className="border-emerald-400 data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
         />
@@ -173,10 +186,15 @@ function SortableProductRow({
             <Leaf className="h-4 w-4 text-emerald-600" />
           </div>
           <div className="min-w-0">
-            <span className="block truncate max-w-[150px] sm:max-w-[200px]">{product.name}</span>
+            <span className="block truncate max-w-[150px] sm:max-w-[200px]">
+              {product.name}
+            </span>
             {/* Show category and price on mobile */}
             <span className="block text-xs text-slate-500 md:hidden">
-              {product.category || 'Uncategorized'} • €{typeof product.price === 'number' ? product.price.toFixed(2) : product.price}
+              {product.category || "Uncategorized"} • €
+              {typeof product.price === "number"
+                ? product.price.toFixed(2)
+                : product.price}
             </span>
           </div>
         </div>
@@ -193,22 +211,28 @@ function SortableProductRow({
       </TableCell>
 
       <TableCell className="text-center text-slate-700 font-mono text-sm hidden lg:table-cell">
-        {product.thcContent != null ? `${product.thcContent}%` : '—'}
+        {product.thcContent != null ? `${product.thcContent}%` : "—"}
       </TableCell>
 
       <TableCell className="text-center text-slate-700 font-mono text-sm hidden lg:table-cell">
-        {product.cbdContent != null ? `${product.cbdContent}%` : '—'}
+        {product.cbdContent != null ? `${product.cbdContent}%` : "—"}
       </TableCell>
 
       <TableCell className="text-right text-slate-700 font-medium hidden sm:table-cell">
-        €{typeof product.price === 'number' ? product.price.toFixed(2) : product.price}
+        €
+        {typeof product.price === "number"
+          ? product.price.toFixed(2)
+          : product.price}
       </TableCell>
 
       <TableCell className="text-center hidden sm:table-cell">
-        <span className={`inline-flex items-center justify-center min-w-[2rem] h-8 px-2 rounded-full text-sm font-medium ${product.stock > 0
-          ? 'bg-emerald-100 text-emerald-800'
-          : 'bg-slate-100 text-slate-700'
-          }`}>
+        <span
+          className={`inline-flex items-center justify-center min-w-[2rem] h-8 px-2 rounded-full text-sm font-medium ${
+            product.stock > 0
+              ? "bg-emerald-100 text-emerald-800"
+              : "bg-slate-100 text-slate-700"
+          }`}
+        >
           {product.stock}
         </span>
       </TableCell>
@@ -216,14 +240,14 @@ function SortableProductRow({
       <TableCell>
         <Badge
           className={cn(
-            'font-medium',
+            "font-medium",
             product.stock > 0
-              ? 'bg-emerald-600 text-white hover:bg-emerald-700'
-              : 'bg-slate-200 text-slate-800 hover:bg-slate-300'
+              ? "bg-emerald-600 text-white hover:bg-emerald-700"
+              : "bg-slate-200 text-slate-800 hover:bg-slate-300",
           )}
-          aria-label={`Status: ${product.stock > 0 ? 'In Stock' : 'Out of Stock'}`}
+          aria-label={`Status: ${product.stock > 0 ? "In Stock" : "Out of Stock"}`}
         >
-          {product.stock > 0 ? 'In Stock' : 'Out of Stock'}
+          {product.stock > 0 ? "In Stock" : "Out of Stock"}
         </Badge>
       </TableCell>
     </TableRow>
@@ -250,8 +274,11 @@ export function ProductsTable({
   categoryCounts,
 }: ProductsTableProps) {
   const router = useRouter();
-  const [{ search, filters, page, pageSize, sort }, { setSearch, setFilter, setPage, setPageSize, setSort }] = useTableState<ProductFilters>({
-    defaultFilters: { category: 'all', stock: 'all' },
+  const [
+    { search, filters, page, pageSize, sort },
+    { setSearch, setFilter, setPage, setPageSize, setSort },
+  ] = useTableState<ProductFilters>({
+    defaultFilters: { category: "all", stock: "all" },
     defaultPageSize: 20,
   });
 
@@ -276,11 +303,11 @@ export function ProductsTable({
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
-    })
+    }),
   );
 
-  const categoryFilter = filters.category || 'all';
-  const stockFilter = filters.stock || 'all';
+  const categoryFilter = filters.category || "all";
+  const stockFilter = filters.stock || "all";
 
   // Total products matching search (regardless of category/stock filter)
   const totalSearchCount = inStockCount + outOfStockCount;
@@ -288,30 +315,50 @@ export function ProductsTable({
   // Category filter options with server-provided counts
   const categoryOptions: StatusFilterOption<CategoryFilter>[] = useMemo(
     () => [
-      { value: 'all', label: 'All Categories', count: totalSearchCount },
-      { value: 'flower', label: 'Flower', count: categoryCounts.flower || 0 },
-      { value: 'edibles', label: 'Edibles', count: categoryCounts.edibles || 0 },
-      { value: 'concentrates', label: 'Concentrates', count: categoryCounts.concentrates || 0 },
-      { value: 'pre-rolls', label: 'Pre-Rolls', count: categoryCounts['pre-rolls'] || 0 },
-      { value: 'topicals', label: 'Topicals', count: categoryCounts.topicals || 0 },
-      { value: 'accessories', label: 'Accessories', count: categoryCounts.accessories || 0 },
+      { value: "all", label: "All Categories", count: totalSearchCount },
+      { value: "flower", label: "Flower", count: categoryCounts.flower || 0 },
+      {
+        value: "edibles",
+        label: "Edibles",
+        count: categoryCounts.edibles || 0,
+      },
+      {
+        value: "concentrates",
+        label: "Concentrates",
+        count: categoryCounts.concentrates || 0,
+      },
+      {
+        value: "pre-rolls",
+        label: "Pre-Rolls",
+        count: categoryCounts["pre-rolls"] || 0,
+      },
+      {
+        value: "topicals",
+        label: "Topicals",
+        count: categoryCounts.topicals || 0,
+      },
+      {
+        value: "accessories",
+        label: "Accessories",
+        count: categoryCounts.accessories || 0,
+      },
     ],
-    [totalSearchCount, categoryCounts]
+    [totalSearchCount, categoryCounts],
   );
 
   // Stock filter options with server-provided counts
   const stockOptions: StatusFilterOption<StockFilter>[] = useMemo(
     () => [
-      { value: 'all', label: 'All Stock', count: totalSearchCount },
-      { value: 'in-stock', label: 'In Stock', count: inStockCount },
-      { value: 'out-of-stock', label: 'Out of Stock', count: outOfStockCount },
+      { value: "all", label: "All Stock", count: totalSearchCount },
+      { value: "in-stock", label: "In Stock", count: inStockCount },
+      { value: "out-of-stock", label: "Out of Stock", count: outOfStockCount },
     ],
-    [totalSearchCount, inStockCount, outOfStockCount]
+    [totalSearchCount, inStockCount, outOfStockCount],
   );
 
   const hasSearchQuery = search.trim().length > 0;
-  const hasCategoryFilter = categoryFilter !== 'all';
-  const hasStockFilter = stockFilter !== 'all';
+  const hasCategoryFilter = categoryFilter !== "all";
+  const hasStockFilter = stockFilter !== "all";
   const hasFilters = hasSearchQuery || hasCategoryFilter || hasStockFilter;
   const noResults = totalCount === 0 && hasFilters;
 
@@ -319,7 +366,10 @@ export function ProductsTable({
   const emptyDescription = useMemo(() => {
     const activeFilters: string[] = [];
     if (hasCategoryFilter) activeFilters.push(categoryFilter);
-    if (hasStockFilter) activeFilters.push(stockFilter === 'in-stock' ? 'in stock' : 'out of stock');
+    if (hasStockFilter)
+      activeFilters.push(
+        stockFilter === "in-stock" ? "in stock" : "out of stock",
+      );
 
     if (hasSearchQuery && activeFilters.length > 0) {
       return `No products match "${search}" with the selected filters. Try adjusting your filters.`;
@@ -330,14 +380,21 @@ export function ProductsTable({
     if (activeFilters.length > 0) {
       return `No products found with the selected filters.`;
     }
-    return 'No products found.';
-  }, [hasSearchQuery, hasCategoryFilter, hasStockFilter, search, categoryFilter, stockFilter]);
+    return "No products found.";
+  }, [
+    hasSearchQuery,
+    hasCategoryFilter,
+    hasStockFilter,
+    search,
+    categoryFilter,
+    stockFilter,
+  ]);
 
   // Clear filters handler
   const handleClearFilters = () => {
-    setSearch('');
-    setFilter('category', 'all');
-    setFilter('stock', 'all');
+    setSearch("");
+    setFilter("category", "all");
+    setFilter("stock", "all");
   };
 
   // Selection handlers
@@ -382,65 +439,68 @@ export function ProductsTable({
 
   // Bulk action handlers
   const handleSetInStock = useCallback(() => {
-    setConfirmAction('set-in-stock');
+    setConfirmAction("set-in-stock");
   }, []);
 
   const handleSetOutOfStock = useCallback(() => {
-    setConfirmAction('set-out-of-stock');
+    setConfirmAction("set-out-of-stock");
   }, []);
 
   const handleDelete = useCallback(() => {
-    setConfirmAction('delete');
+    setConfirmAction("delete");
   }, []);
 
   // Drag end handler
-  const handleDragEnd = useCallback(async (event: DragEndEvent) => {
-    const { active, over } = event;
+  const handleDragEnd = useCallback(
+    async (event: DragEndEvent) => {
+      const { active, over } = event;
 
-    if (!over || active.id === over.id) {
-      return;
-    }
-
-    const oldIndex = orderedProducts.findIndex((p) => p.id === active.id);
-    const newIndex = orderedProducts.findIndex((p) => p.id === over.id);
-
-    if (oldIndex === -1 || newIndex === -1) {
-      return;
-    }
+      if (!over || active.id === over.id) {
+        return;
+      }
 
-    // Update local state immediately for smooth UX
-    const newOrder = arrayMove(orderedProducts, oldIndex, newIndex);
-    setOrderedProducts(newOrder);
+      const oldIndex = orderedProducts.findIndex((p) => p.id === active.id);
+      const newIndex = orderedProducts.findIndex((p) => p.id === over.id);
 
-    // Persist to server
-    setIsSavingOrder(true);
-    try {
-      const orderUpdates = newOrder.map((product, index) => ({
-        id: product.id,
-        displayOrder: index,
-      }));
-
-      const response = await fetch('/api/tenant-admin/products/reorder', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ products: orderUpdates }),
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to update product order');
+      if (oldIndex === -1 || newIndex === -1) {
+        return;
       }
 
-      toast.success('Product order updated successfully');
-      router.refresh();
-    } catch (error) {
-      console.error('Error updating product order:', error);
-      toast.error('Failed to update product order');
-      // Revert to original order on error
-      setOrderedProducts(products);
-    } finally {
-      setIsSavingOrder(false);
-    }
-  }, [orderedProducts, products, router]);
+      // Update local state immediately for smooth UX
+      const newOrder = arrayMove(orderedProducts, oldIndex, newIndex);
+      setOrderedProducts(newOrder);
+
+      // Persist to server
+      setIsSavingOrder(true);
+      try {
+        const orderUpdates = newOrder.map((product, index) => ({
+          id: product.id,
+          displayOrder: index,
+        }));
+
+        const response = await fetch("/api/tenant-admin/products/reorder", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ products: orderUpdates }),
+        });
+
+        if (!response.ok) {
+          throw new Error("Failed to update product order");
+        }
+
+        toast.success("Product order updated successfully");
+        router.refresh();
+      } catch (error) {
+        console.error("Error updating product order:", error);
+        toast.error("Failed to update product order");
+        // Revert to original order on error
+        setOrderedProducts(products);
+      } finally {
+        setIsSavingOrder(false);
+      }
+    },
+    [orderedProducts, products, router],
+  );
 
   // Export ALL filtered products (the main export button)
   const handleExportAll = useCallback(async () => {
@@ -448,37 +508,37 @@ export function ProductsTable({
 
     const exportData = products.map((p) => ({
       name: p.name,
-      category: p.category || '',
-      thcContent: p.thcContent != null ? `${p.thcContent}%` : '',
-      cbdContent: p.cbdContent != null ? `${p.cbdContent}%` : '',
+      category: p.category || "",
+      thcContent: p.thcContent != null ? `${p.thcContent}%` : "",
+      cbdContent: p.cbdContent != null ? `${p.cbdContent}%` : "",
       price: `$${p.price.toFixed(2)}`,
       stock: p.stock,
-      status: p.stock > 0 ? 'In Stock' : 'Out of Stock',
-      createdAt: format(new Date(p.createdAt), 'yyyy-MM-dd'),
+      status: p.stock > 0 ? "In Stock" : "Out of Stock",
+      createdAt: format(new Date(p.createdAt), "yyyy-MM-dd"),
     }));
 
     const csvHeaders = [
-      { key: 'name' as const, label: 'Name' },
-      { key: 'category' as const, label: 'Category' },
-      { key: 'thcContent' as const, label: 'THC %' },
-      { key: 'cbdContent' as const, label: 'CBD %' },
-      { key: 'price' as const, label: 'Price' },
-      { key: 'stock' as const, label: 'Stock' },
-      { key: 'status' as const, label: 'Status' },
-      { key: 'createdAt' as const, label: 'Created' },
+      { key: "name" as const, label: "Name" },
+      { key: "category" as const, label: "Category" },
+      { key: "thcContent" as const, label: "THC %" },
+      { key: "cbdContent" as const, label: "CBD %" },
+      { key: "price" as const, label: "Price" },
+      { key: "stock" as const, label: "Stock" },
+      { key: "status" as const, label: "Status" },
+      { key: "createdAt" as const, label: "Created" },
     ];
 
     await exportToCSV(
       exportData,
       csvHeaders,
-      'products',
+      "products",
       undefined,
       (recordCount, fileSize) => {
         toast.success(`Exported ${recordCount} products to CSV (${fileSize})`);
       },
       (error) => {
         toast.error(`Export failed: ${error.message}`);
-      }
+      },
     );
   }, [products]);
 
@@ -489,38 +549,40 @@ export function ProductsTable({
 
     const exportData = selectedProducts.map((p) => ({
       name: p.name,
-      category: p.category || '',
-      thcContent: p.thcContent != null ? `${p.thcContent}%` : '',
-      cbdContent: p.cbdContent != null ? `${p.cbdContent}%` : '',
+      category: p.category || "",
+      thcContent: p.thcContent != null ? `${p.thcContent}%` : "",
+      cbdContent: p.cbdContent != null ? `${p.cbdContent}%` : "",
       price: `$${p.price.toFixed(2)}`,
       stock: p.stock,
-      status: p.stock > 0 ? 'In Stock' : 'Out of Stock',
-      createdAt: format(new Date(p.createdAt), 'yyyy-MM-dd'),
+      status: p.stock > 0 ? "In Stock" : "Out of Stock",
+      createdAt: format(new Date(p.createdAt), "yyyy-MM-dd"),
     }));
 
     const csvHeaders = [
-      { key: 'name' as const, label: 'Name' },
-      { key: 'category' as const, label: 'Category' },
-      { key: 'thcContent' as const, label: 'THC %' },
-      { key: 'cbdContent' as const, label: 'CBD %' },
-      { key: 'price' as const, label: 'Price' },
-      { key: 'stock' as const, label: 'Stock' },
-      { key: 'status' as const, label: 'Status' },
-      { key: 'createdAt' as const, label: 'Created' },
+      { key: "name" as const, label: "Name" },
+      { key: "category" as const, label: "Category" },
+      { key: "thcContent" as const, label: "THC %" },
+      { key: "cbdContent" as const, label: "CBD %" },
+      { key: "price" as const, label: "Price" },
+      { key: "stock" as const, label: "Stock" },
+      { key: "status" as const, label: "Status" },
+      { key: "createdAt" as const, label: "Created" },
     ];
 
     await exportToCSV(
       exportData,
       csvHeaders,
-      'products',
+      "products",
       undefined,
       (recordCount, fileSize) => {
-        toast.success(`Exported ${recordCount} selected products to CSV (${fileSize})`);
+        toast.success(
+          `Exported ${recordCount} selected products to CSV (${fileSize})`,
+        );
         clearSelection();
       },
       (error) => {
         toast.error(`Export failed: ${error.message}`);
-      }
+      },
     );
   }, [products, selectedIds, clearSelection]);
 
@@ -530,9 +592,9 @@ export function ProductsTable({
     setIsProcessing(true);
 
     try {
-      const response = await fetch('/api/tenant-admin/products/bulk', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+      const response = await fetch("/api/tenant-admin/products/bulk", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
           action: confirmAction,
           productIds: Array.from(selectedIds),
@@ -542,27 +604,25 @@ export function ProductsTable({
       const data = await response.json();
 
       if (!response.ok) {
-        throw new Error(data.error || 'Failed to perform action');
+        throw new Error(data.error || "Failed to perform action");
       }
 
       // Display appropriate success message
       const actionMessages: Record<string, string> = {
-        'set-in-stock': 'set to In Stock',
-        'set-out-of-stock': 'set to Out of Stock',
-        'delete': 'deleted',
+        "set-in-stock": "set to In Stock",
+        "set-out-of-stock": "set to Out of Stock",
+        delete: "deleted",
       };
 
       toast.success(
-        `${data.count} product${data.count === 1 ? '' : 's'} ${actionMessages[confirmAction]} successfully`
+        `${data.count} product${data.count === 1 ? "" : "s"} ${actionMessages[confirmAction]} successfully`,
       );
 
       // Clear selection and refresh
       clearSelection();
       router.refresh();
     } catch (error) {
-      toast.error(
-        error instanceof Error ? error.message : 'An error occurred'
-      );
+      toast.error(error instanceof Error ? error.message : "An error occurred");
     } finally {
       setIsProcessing(false);
       setConfirmAction(null);
@@ -573,35 +633,35 @@ export function ProductsTable({
   const bulkActions: BulkAction[] = useMemo(
     () => [
       {
-        id: 'set-in-stock',
-        label: 'Set In Stock',
+        id: "set-in-stock",
+        label: "Set In Stock",
         icon: PackageCheck,
         onClick: handleSetInStock,
-        variant: 'default',
+        variant: "default",
       },
       {
-        id: 'set-out-of-stock',
-        label: 'Set Out of Stock',
+        id: "set-out-of-stock",
+        label: "Set Out of Stock",
         icon: PackageMinus,
         onClick: handleSetOutOfStock,
-        variant: 'outline',
+        variant: "outline",
       },
       {
-        id: 'export',
-        label: 'Export CSV',
+        id: "export",
+        label: "Export CSV",
         icon: Download,
         onClick: handleExportCSV,
-        variant: 'outline',
+        variant: "outline",
       },
       {
-        id: 'delete',
-        label: 'Delete',
+        id: "delete",
+        label: "Delete",
         icon: Trash2,
         onClick: handleDelete,
-        variant: 'destructive',
+        variant: "destructive",
       },
     ],
-    [handleSetInStock, handleSetOutOfStock, handleExportCSV, handleDelete]
+    [handleSetInStock, handleSetOutOfStock, handleExportCSV, handleDelete],
   );
 
   // Get selected product names for confirmation dialog
@@ -615,23 +675,27 @@ export function ProductsTable({
   // Get strain badge color (using hash for demo since strain isn't in schema)
   // Updated with darker text colors for WCAG AA compliance (4.5:1 contrast on light backgrounds)
   const getStrainBadgeClasses = (productName: string) => {
-    const nameHash = productName.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
+    const nameHash = productName
+      .split("")
+      .reduce((acc, char) => acc + char.charCodeAt(0), 0);
     const strainIndex = nameHash % 3;
     switch (strainIndex) {
       case 0: // Sativa
-        return 'bg-amber-100 text-amber-800 border-amber-200';
+        return "bg-amber-100 text-amber-800 border-amber-200";
       case 1: // Indica
-        return 'bg-purple-100 text-purple-800 border-purple-200';
+        return "bg-purple-100 text-purple-800 border-purple-200";
       case 2: // Hybrid
-        return 'bg-emerald-100 text-emerald-800 border-emerald-200';
+        return "bg-emerald-100 text-emerald-800 border-emerald-200";
       default:
-        return 'bg-slate-100 text-slate-800 border-slate-200';
+        return "bg-slate-100 text-slate-800 border-slate-200";
     }
   };
 
   const getStrainLabel = (productName: string) => {
-    const nameHash = productName.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
-    const strainTypes = ['Sativa', 'Indica', 'Hybrid'];
+    const nameHash = productName
+      .split("")
+      .reduce((acc, char) => acc + char.charCodeAt(0), 0);
+    const strainTypes = ["Sativa", "Indica", "Hybrid"];
     return strainTypes[nameHash % 3];
   };
 
@@ -669,7 +733,7 @@ export function ProductsTable({
                 {/* Category Filter */}
                 <StatusFilter<CategoryFilter>
                   value={categoryFilter}
-                  onChange={(value) => setFilter('category', value)}
+                  onChange={(value) => setFilter("category", value)}
                   options={categoryOptions}
                   aria-label="Filter by category"
                   placeholder="All Categories"
@@ -680,7 +744,7 @@ export function ProductsTable({
                 {/* Stock Filter */}
                 <StatusFilter<StockFilter>
                   value={stockFilter}
-                  onChange={(value) => setFilter('stock', value)}
+                  onChange={(value) => setFilter("stock", value)}
                   options={stockOptions}
                   aria-label="Filter by stock status"
                   placeholder="All Stock"
@@ -709,9 +773,9 @@ export function ProductsTable({
               variant="muted"
               size="default"
               action={{
-                label: 'Clear filters',
+                label: "Clear filters",
                 onClick: handleClearFilters,
-                variant: 'outline',
+                variant: "outline",
               }}
               className="my-8"
             />
@@ -724,8 +788,8 @@ export function ProductsTable({
               theme="emerald"
               showDecoration
               action={{
-                label: 'Sync from Dr Green Admin',
-                href: '/tenant-admin/settings',
+                label: "Sync from Dr Green Admin",
+                href: "/tenant-admin/settings",
                 icon: RefreshCw,
               }}
               className="my-8"
@@ -749,14 +813,15 @@ export function ProductsTable({
                           onCheckedChange={handleSelectAll}
                           aria-label={
                             isAllSelected
-                              ? 'Deselect all products'
-                              : 'Select all products'
+                              ? "Deselect all products"
+                              : "Select all products"
                           }
                           className={cn(
-                            'border-emerald-400 data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600',
-                            isSomeSelected && 'data-[state=checked]:bg-emerald-400'
+                            "border-emerald-400 data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600",
+                            isSomeSelected &&
+                              "data-[state=checked]:bg-emerald-400",
                           )}
-                          {...(isSomeSelected && { 'data-state': 'checked' })}
+                          {...(isSomeSelected && { "data-state": "checked" })}
                         />
                       </TableHead>
                       <SortableTableHeader
@@ -772,7 +837,9 @@ export function ProductsTable({
                         onSort={setSort}
                         className="hidden md:table-cell"
                       />
-                      <TableHead className="font-semibold text-slate-700 hidden lg:table-cell">Strain</TableHead>
+                      <TableHead className="font-semibold text-slate-700 hidden lg:table-cell">
+                        Strain
+                      </TableHead>
                       <SortableTableHeader
                         columnKey="thcContent"
                         label="THC %"
@@ -804,7 +871,9 @@ export function ProductsTable({
                         align="center"
                         className="hidden sm:table-cell"
                       />
-                      <TableHead className="font-semibold text-slate-700">Status</TableHead>
+                      <TableHead className="font-semibold text-slate-700">
+                        Status
+                      </TableHead>
                     </TableRow>
                   </TableHeader>
                   <SortableContext
@@ -863,12 +932,12 @@ export function ProductsTable({
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
-              {confirmAction === 'delete' ? (
+              {confirmAction === "delete" ? (
                 <>
                   <Trash2 className="h-5 w-5 text-red-500" />
                   <span>Delete Products</span>
                 </>
-              ) : confirmAction === 'set-in-stock' ? (
+              ) : confirmAction === "set-in-stock" ? (
                 <>
                   <PackageCheck className="h-5 w-5 text-emerald-500" />
                   <span>Set In Stock</span>
@@ -881,21 +950,21 @@ export function ProductsTable({
               )}
             </DialogTitle>
             <DialogDescription className="pt-2">
-              {confirmAction === 'delete' ? (
+              {confirmAction === "delete" ? (
                 <span className="text-red-600">
-                  Are you sure you want to delete{' '}
+                  Are you sure you want to delete{" "}
                   <strong>{selectedIds.size}</strong> product
-                  {selectedIds.size === 1 ? '' : 's'}? This cannot be undone.
+                  {selectedIds.size === 1 ? "" : "s"}? This cannot be undone.
                 </span>
-              ) : confirmAction === 'set-in-stock' ? (
+              ) : confirmAction === "set-in-stock" ? (
                 <span>
                   Set <strong>{selectedIds.size}</strong> product
-                  {selectedIds.size === 1 ? '' : 's'} to In Stock?
+                  {selectedIds.size === 1 ? "" : "s"} to In Stock?
                 </span>
               ) : (
                 <span>
                   Set <strong>{selectedIds.size}</strong> product
-                  {selectedIds.size === 1 ? '' : 's'} to Out of Stock?
+                  {selectedIds.size === 1 ? "" : "s"} to Out of Stock?
                 </span>
               )}
             </DialogDescription>
@@ -935,14 +1004,14 @@ export function ProductsTable({
               Cancel
             </Button>
             <Button
-              variant={confirmAction === 'delete' ? 'destructive' : 'default'}
+              variant={confirmAction === "delete" ? "destructive" : "default"}
               onClick={handleConfirmAction}
               disabled={isProcessing}
               className={cn(
-                confirmAction === 'set-in-stock' &&
-                'bg-emerald-600 hover:bg-emerald-700',
-                confirmAction === 'set-out-of-stock' &&
-                'bg-amber-600 hover:bg-amber-700'
+                confirmAction === "set-in-stock" &&
+                  "bg-emerald-600 hover:bg-emerald-700",
+                confirmAction === "set-out-of-stock" &&
+                  "bg-amber-600 hover:bg-amber-700",
               )}
             >
               {isProcessing ? (
@@ -971,12 +1040,12 @@ export function ProductsTable({
                   </span>
                   Processing...
                 </>
-              ) : confirmAction === 'delete' ? (
-                'Delete'
-              ) : confirmAction === 'set-in-stock' ? (
-                'Set In Stock'
+              ) : confirmAction === "delete" ? (
+                "Delete"
+              ) : confirmAction === "set-in-stock" ? (
+                "Set In Stock"
               ) : (
-                'Set Out of Stock'
+                "Set Out of Stock"
               )}
             </Button>
           </DialogFooter>
diff --git a/nextjs_space/app/tenant-admin/seo/page.tsx b/nextjs_space/app/tenant-admin/seo/page.tsx
index 6e3ec36..c23e0bd 100644
--- a/nextjs_space/app/tenant-admin/seo/page.tsx
+++ b/nextjs_space/app/tenant-admin/seo/page.tsx
@@ -1,101 +1,110 @@
-import { getServerSession } from 'next-auth';
-import { redirect } from 'next/navigation';
-import { authOptions } from '@/lib/auth';
-import { prisma } from '@/lib/db';
-import { Breadcrumbs } from '@/components/admin/shared';
-import { SeoPageClient } from './seo-page-client';
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import { authOptions } from "@/lib/auth";
+import { prisma } from "@/lib/db";
+import { Breadcrumbs } from "@/components/admin/shared";
+import { SeoPageClient } from "./seo-page-client";
 
 export default async function SeoPage() {
-    const session = await getServerSession(authOptions);
+  const session = await getServerSession(authOptions);
 
-    if (!session || (session.user.role !== 'TENANT_ADMIN' && session.user.role !== 'SUPER_ADMIN')) {
-        redirect('/auth/login');
-    }
+  if (
+    !session ||
+    (session.user.role !== "TENANT_ADMIN" &&
+      session.user.role !== "SUPER_ADMIN")
+  ) {
+    redirect("/auth/login");
+  }
 
-    const user = await prisma.users.findUnique({
-        where: { id: session.user.id },
-        select: { tenantId: true },
-    });
+  const user = await prisma.users.findUnique({
+    where: { id: session.user.id },
+    select: { tenantId: true },
+  });
 
-    if (!user?.tenantId) {
-        redirect('/tenant-admin');
-    }
+  if (!user?.tenantId) {
+    redirect("/tenant-admin");
+  }
 
-    const tenantId = user.tenantId;
+  const tenantId = user.tenantId;
 
-    // Fetch tenant with subdomain and products/posts for SEO management
-    const [tenant, products, posts] = await Promise.all([
-        prisma.tenants.findUnique({
-            where: { id: tenantId },
-            select: {
-                id: true,
-                subdomain: true,
-                customDomain: true,
-                businessName: true,
-                pageSeo: true,
-            },
-        }),
-        prisma.products.findMany({
-            where: { tenantId },
-            orderBy: { name: 'asc' },
-            select: {
-                id: true,
-                name: true,
-                slug: true,
-                seo: true,
-                images: true,
-            },
-        }),
-        prisma.posts.findMany({
-            where: { tenantId },
-            orderBy: { title: 'asc' },
-            select: {
-                id: true,
-                title: true,
-                slug: true,
-                seo: true,
-                coverImage: true,
-            },
-        }),
-    ]);
+  // Fetch tenant with subdomain and products/posts for SEO management
+  const [tenant, products, posts] = await Promise.all([
+    prisma.tenants.findUnique({
+      where: { id: tenantId },
+      select: {
+        id: true,
+        subdomain: true,
+        customDomain: true,
+        businessName: true,
+        pageSeo: true,
+      },
+    }),
+    prisma.products.findMany({
+      where: { tenantId },
+      orderBy: { name: "asc" },
+      select: {
+        id: true,
+        name: true,
+        slug: true,
+        seo: true,
+        images: true,
+      },
+    }),
+    prisma.posts.findMany({
+      where: { tenantId },
+      orderBy: { title: "asc" },
+      select: {
+        id: true,
+        title: true,
+        slug: true,
+        seo: true,
+        coverImage: true,
+      },
+    }),
+  ]);
 
-    if (!tenant) {
-        redirect('/tenant-admin');
-    }
+  if (!tenant) {
+    redirect("/tenant-admin");
+  }
 
-    // Build base URL for previews
-    const baseUrl = tenant.customDomain
-        ? `https://${tenant.customDomain}`
-        : `https://${tenant.subdomain}.budstack.to`;
+  // Build base URL for previews
+  const baseUrl = tenant.customDomain
+    ? `https://${tenant.customDomain}`
+    : `https://${tenant.subdomain}.budstack.to`;
 
-    return (
-        <div className="p-4 sm:p-6 lg:p-8">
-            <Breadcrumbs
-                items={[
-                    { label: 'Dashboard', href: '/tenant-admin' },
-                    { label: 'SEO Manager' },
-                ]}
-                className="mb-4"
-            />
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <Breadcrumbs
+        items={[
+          { label: "Dashboard", href: "/tenant-admin" },
+          { label: "SEO Manager" },
+        ]}
+        className="mb-4"
+      />
 
-            <div className="mb-6 sm:mb-8">
-                <div className="flex flex-col gap-2">
-                    <h1 className="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">
-                        SEO Manager
-                    </h1>
-                    <p className="text-sm sm:text-base text-slate-600">
-                        Optimize how your store appears in search engines and social media.
-                    </p>
-                </div>
-            </div>
-
-            <SeoPageClient
-                tenantId={tenantId}
-                baseUrl={baseUrl}
-                products={products}
-                posts={posts}
-                pageSeo={tenant.pageSeo as Record<string, { title?: string; description?: string; ogImage?: string }> | null}
-            />
+      <div className="mb-6 sm:mb-8">
+        <div className="flex flex-col gap-2">
+          <h1 className="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">
+            SEO Manager
+          </h1>
+          <p className="text-sm sm:text-base text-slate-600">
+            Optimize how your store appears in search engines and social media.
+          </p>
         </div>
-    );
+      </div>
+
+      <SeoPageClient
+        tenantId={tenantId}
+        baseUrl={baseUrl}
+        products={products}
+        posts={posts}
+        pageSeo={
+          tenant.pageSeo as Record<
+            string,
+            { title?: string; description?: string; ogImage?: string }
+          > | null
+        }
+      />
+    </div>
+  );
 }
diff --git a/nextjs_space/app/tenant-admin/seo/seo-page-client.tsx b/nextjs_space/app/tenant-admin/seo/seo-page-client.tsx
index 5f1a6bc..36a6365 100644
--- a/nextjs_space/app/tenant-admin/seo/seo-page-client.tsx
+++ b/nextjs_space/app/tenant-admin/seo/seo-page-client.tsx
@@ -1,347 +1,381 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { SeoEditorModal } from '@/components/admin/seo';
-import { Package, FileText, Home, Search, CheckCircle, AlertCircle } from 'lucide-react';
+import { useState } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { SeoEditorModal } from "@/components/admin/seo";
+import {
+  Package,
+  FileText,
+  Home,
+  Search,
+  CheckCircle,
+  AlertCircle,
+} from "lucide-react";
 
 interface SeoData {
-    title?: string;
-    description?: string;
-    ogImage?: string;
+  title?: string;
+  description?: string;
+  ogImage?: string;
 }
 
 interface ProductItem {
-    id: string;
-    name: string;
-    slug: string;
-    seo: SeoData | null;
-    images: string[];
+  id: string;
+  name: string;
+  slug: string;
+  seo: SeoData | null;
+  images: string[];
 }
 
 interface PostItem {
-    id: string;
-    title: string;
-    slug: string;
-    seo: SeoData | null;
-    coverImage: string | null;
+  id: string;
+  title: string;
+  slug: string;
+  seo: SeoData | null;
+  coverImage: string | null;
 }
 
 interface SeoPageClientProps {
-    tenantId: string;
-    baseUrl: string;
-    products: ProductItem[];
-    posts: PostItem[];
-    pageSeo: Record<string, SeoData> | null;
+  tenantId: string;
+  baseUrl: string;
+  products: ProductItem[];
+  posts: PostItem[];
+  pageSeo: Record<string, SeoData> | null;
 }
 
 const STATIC_PAGES = [
-    { key: 'home', name: 'Homepage', path: '' },
-    { key: 'about', name: 'About Us', path: '/about' },
-    { key: 'contact', name: 'Contact', path: '/contact' },
-    { key: 'faq', name: 'FAQ', path: '/faq' },
+  { key: "home", name: "Homepage", path: "" },
+  { key: "about", name: "About Us", path: "/about" },
+  { key: "contact", name: "Contact", path: "/contact" },
+  { key: "faq", name: "FAQ", path: "/faq" },
 ];
 
-export function SeoPageClient({ tenantId, baseUrl, products, posts, pageSeo }: SeoPageClientProps) {
-    const [selectedProduct, setSelectedProduct] = useState<ProductItem | null>(null);
-    const [selectedPost, setSelectedPost] = useState<PostItem | null>(null);
-    const [selectedPage, setSelectedPage] = useState<{ key: string; name: string; path: string } | null>(null);
-    const [localPageSeo, setLocalPageSeo] = useState<Record<string, SeoData>>(pageSeo || {});
-    const [localProducts, setLocalProducts] = useState(products);
-    const [localPosts, setLocalPosts] = useState(posts);
-
-    const hasSeo = (seo: SeoData | null | undefined): boolean => {
-        return !!(seo && (seo.title || seo.description || seo.ogImage));
-    };
+export function SeoPageClient({
+  tenantId,
+  baseUrl,
+  products,
+  posts,
+  pageSeo,
+}: SeoPageClientProps) {
+  const [selectedProduct, setSelectedProduct] = useState<ProductItem | null>(
+    null,
+  );
+  const [selectedPost, setSelectedPost] = useState<PostItem | null>(null);
+  const [selectedPage, setSelectedPage] = useState<{
+    key: string;
+    name: string;
+    path: string;
+  } | null>(null);
+  const [localPageSeo, setLocalPageSeo] = useState<Record<string, SeoData>>(
+    pageSeo || {},
+  );
+  const [localProducts, setLocalProducts] = useState(products);
+  const [localPosts, setLocalPosts] = useState(posts);
 
-    const handleSaveProductSeo = async (seo: SeoData) => {
-        if (!selectedProduct) return;
+  const hasSeo = (seo: SeoData | null | undefined): boolean => {
+    return !!(seo && (seo.title || seo.description || seo.ogImage));
+  };
 
-        const res = await fetch(`/api/tenant-admin/seo/products/${selectedProduct.id}`, {
-            method: 'PUT',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(seo),
-        });
+  const handleSaveProductSeo = async (seo: SeoData) => {
+    if (!selectedProduct) return;
 
-        if (!res.ok) throw new Error('Failed to save');
+    const res = await fetch(
+      `/api/tenant-admin/seo/products/${selectedProduct.id}`,
+      {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(seo),
+      },
+    );
 
-        // Update local state
-        setLocalProducts(prev =>
-            prev.map(p => p.id === selectedProduct.id ? { ...p, seo } : p)
-        );
-    };
+    if (!res.ok) throw new Error("Failed to save");
 
-    const handleSavePostSeo = async (seo: SeoData) => {
-        if (!selectedPost) return;
+    // Update local state
+    setLocalProducts((prev) =>
+      prev.map((p) => (p.id === selectedProduct.id ? { ...p, seo } : p)),
+    );
+  };
 
-        const res = await fetch(`/api/tenant-admin/seo/posts/${selectedPost.id}`, {
-            method: 'PUT',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(seo),
-        });
+  const handleSavePostSeo = async (seo: SeoData) => {
+    if (!selectedPost) return;
 
-        if (!res.ok) throw new Error('Failed to save');
+    const res = await fetch(`/api/tenant-admin/seo/posts/${selectedPost.id}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(seo),
+    });
 
-        // Update local state
-        setLocalPosts(prev =>
-            prev.map(p => p.id === selectedPost.id ? { ...p, seo } : p)
-        );
-    };
+    if (!res.ok) throw new Error("Failed to save");
 
-    const handleSavePageSeo = async (seo: SeoData) => {
-        if (!selectedPage) return;
+    // Update local state
+    setLocalPosts((prev) =>
+      prev.map((p) => (p.id === selectedPost.id ? { ...p, seo } : p)),
+    );
+  };
 
-        const res = await fetch('/api/tenant-admin/seo/pages', {
-            method: 'PUT',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ pageKey: selectedPage.key, seo }),
-        });
+  const handleSavePageSeo = async (seo: SeoData) => {
+    if (!selectedPage) return;
 
-        if (!res.ok) throw new Error('Failed to save');
+    const res = await fetch("/api/tenant-admin/seo/pages", {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ pageKey: selectedPage.key, seo }),
+    });
 
-        // Update local state
-        setLocalPageSeo(prev => ({
-            ...prev,
-            [selectedPage.key]: seo,
-        }));
-    };
+    if (!res.ok) throw new Error("Failed to save");
 
-    const SeoStatusBadge = ({ hasCustomSeo }: { hasCustomSeo: boolean }) => (
-        <Badge variant={hasCustomSeo ? 'default' : 'secondary'} className="gap-1">
-            {hasCustomSeo ? (
-                <>
-                    <CheckCircle className="h-3 w-3" />
-                    Custom
-                </>
-            ) : (
-                <>
-                    <AlertCircle className="h-3 w-3" />
-                    Default
-                </>
-            )}
-        </Badge>
-    );
+    // Update local state
+    setLocalPageSeo((prev) => ({
+      ...prev,
+      [selectedPage.key]: seo,
+    }));
+  };
 
-    return (
+  const SeoStatusBadge = ({ hasCustomSeo }: { hasCustomSeo: boolean }) => (
+    <Badge variant={hasCustomSeo ? "default" : "secondary"} className="gap-1">
+      {hasCustomSeo ? (
         <>
-            <Tabs defaultValue="products" className="space-y-6">
-                <TabsList className="grid w-full grid-cols-3 lg:w-auto lg:inline-grid">
-                    <TabsTrigger value="products" className="gap-2">
-                        <Package className="h-4 w-4 hidden sm:block" />
-                        Products ({localProducts.length})
-                    </TabsTrigger>
-                    <TabsTrigger value="posts" className="gap-2">
-                        <FileText className="h-4 w-4 hidden sm:block" />
-                        Posts ({localPosts.length})
-                    </TabsTrigger>
-                    <TabsTrigger value="pages" className="gap-2">
-                        <Home className="h-4 w-4 hidden sm:block" />
-                        Static Pages
-                    </TabsTrigger>
-                </TabsList>
+          <CheckCircle className="h-3 w-3" />
+          Custom
+        </>
+      ) : (
+        <>
+          <AlertCircle className="h-3 w-3" />
+          Default
+        </>
+      )}
+    </Badge>
+  );
 
-                {/* Products Tab */}
-                <TabsContent value="products">
-                    <Card>
-                        <CardHeader>
-                            <CardTitle>Product SEO</CardTitle>
-                            <CardDescription>
-                                Customize titles and descriptions for your products in search results.
-                            </CardDescription>
-                        </CardHeader>
-                        <CardContent>
-                            {localProducts.length === 0 ? (
-                                <p className="text-sm text-slate-500 text-center py-8">
-                                    No products found. Sync products from Dr Green first.
-                                </p>
-                            ) : (
-                                <div className="divide-y">
-                                    {localProducts.map((product) => (
-                                        <div
-                                            key={product.id}
-                                            className="flex items-center justify-between py-3 gap-4"
-                                        >
-                                            <div className="flex items-center gap-3 min-w-0">
-                                                {product.images[0] && (
-                                                    <img
-                                                        src={product.images[0]}
-                                                        alt={product.name}
-                                                        className="w-10 h-10 rounded object-cover flex-shrink-0"
-                                                    />
-                                                )}
-                                                <div className="min-w-0">
-                                                    <p className="font-medium text-slate-900 truncate">
-                                                        {product.name}
-                                                    </p>
-                                                    <p className="text-xs text-slate-500 truncate">
-                                                        {baseUrl}/products/{product.slug}
-                                                    </p>
-                                                </div>
-                                            </div>
-                                            <div className="flex items-center gap-2 flex-shrink-0">
-                                                <SeoStatusBadge hasCustomSeo={hasSeo(product.seo)} />
-                                                <Button
-                                                    variant="outline"
-                                                    size="sm"
-                                                    onClick={() => setSelectedProduct(product)}
-                                                >
-                                                    <Search className="h-4 w-4 mr-1" />
-                                                    Edit SEO
-                                                </Button>
-                                            </div>
-                                        </div>
-                                    ))}
-                                </div>
-                            )}
-                        </CardContent>
-                    </Card>
-                </TabsContent>
+  return (
+    <>
+      <Tabs defaultValue="products" className="space-y-6">
+        <TabsList className="grid w-full grid-cols-3 lg:w-auto lg:inline-grid">
+          <TabsTrigger value="products" className="gap-2">
+            <Package className="h-4 w-4 hidden sm:block" />
+            Products ({localProducts.length})
+          </TabsTrigger>
+          <TabsTrigger value="posts" className="gap-2">
+            <FileText className="h-4 w-4 hidden sm:block" />
+            Posts ({localPosts.length})
+          </TabsTrigger>
+          <TabsTrigger value="pages" className="gap-2">
+            <Home className="h-4 w-4 hidden sm:block" />
+            Static Pages
+          </TabsTrigger>
+        </TabsList>
 
-                {/* Posts Tab */}
-                <TabsContent value="posts">
-                    <Card>
-                        <CardHeader>
-                            <CardTitle>Blog Post SEO</CardTitle>
-                            <CardDescription>
-                                Optimize your blog posts for search engines.
-                            </CardDescription>
-                        </CardHeader>
-                        <CardContent>
-                            {localPosts.length === 0 ? (
-                                <p className="text-sm text-slate-500 text-center py-8">
-                                    No blog posts yet. Create posts in The Wire section.
-                                </p>
-                            ) : (
-                                <div className="divide-y">
-                                    {localPosts.map((post) => (
-                                        <div
-                                            key={post.id}
-                                            className="flex items-center justify-between py-3 gap-4"
-                                        >
-                                            <div className="flex items-center gap-3 min-w-0">
-                                                {post.coverImage && (
-                                                    <img
-                                                        src={post.coverImage}
-                                                        alt={post.title}
-                                                        className="w-10 h-10 rounded object-cover flex-shrink-0"
-                                                    />
-                                                )}
-                                                <div className="min-w-0">
-                                                    <p className="font-medium text-slate-900 truncate">
-                                                        {post.title}
-                                                    </p>
-                                                    <p className="text-xs text-slate-500 truncate">
-                                                        {baseUrl}/the-wire/{post.slug}
-                                                    </p>
-                                                </div>
-                                            </div>
-                                            <div className="flex items-center gap-2 flex-shrink-0">
-                                                <SeoStatusBadge hasCustomSeo={hasSeo(post.seo)} />
-                                                <Button
-                                                    variant="outline"
-                                                    size="sm"
-                                                    onClick={() => setSelectedPost(post)}
-                                                >
-                                                    <Search className="h-4 w-4 mr-1" />
-                                                    Edit SEO
-                                                </Button>
-                                            </div>
-                                        </div>
-                                    ))}
-                                </div>
-                            )}
-                        </CardContent>
-                    </Card>
-                </TabsContent>
+        {/* Products Tab */}
+        <TabsContent value="products">
+          <Card>
+            <CardHeader>
+              <CardTitle>Product SEO</CardTitle>
+              <CardDescription>
+                Customize titles and descriptions for your products in search
+                results.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {localProducts.length === 0 ? (
+                <p className="text-sm text-slate-500 text-center py-8">
+                  No products found. Sync products from Dr Green first.
+                </p>
+              ) : (
+                <div className="divide-y">
+                  {localProducts.map((product) => (
+                    <div
+                      key={product.id}
+                      className="flex items-center justify-between py-3 gap-4"
+                    >
+                      <div className="flex items-center gap-3 min-w-0">
+                        {product.images[0] && (
+                          <img
+                            src={product.images[0]}
+                            alt={product.name}
+                            className="w-10 h-10 rounded object-cover flex-shrink-0"
+                          />
+                        )}
+                        <div className="min-w-0">
+                          <p className="font-medium text-slate-900 truncate">
+                            {product.name}
+                          </p>
+                          <p className="text-xs text-slate-500 truncate">
+                            {baseUrl}/products/{product.slug}
+                          </p>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2 flex-shrink-0">
+                        <SeoStatusBadge hasCustomSeo={hasSeo(product.seo)} />
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => setSelectedProduct(product)}
+                        >
+                          <Search className="h-4 w-4 mr-1" />
+                          Edit SEO
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
 
-                {/* Static Pages Tab */}
-                <TabsContent value="pages">
-                    <Card>
-                        <CardHeader>
-                            <CardTitle>Static Page SEO</CardTitle>
-                            <CardDescription>
-                                Set metadata for your store's main pages.
-                            </CardDescription>
-                        </CardHeader>
-                        <CardContent>
-                            <div className="divide-y">
-                                {STATIC_PAGES.map((page) => (
-                                    <div
-                                        key={page.key}
-                                        className="flex items-center justify-between py-3 gap-4"
-                                    >
-                                        <div className="min-w-0">
-                                            <p className="font-medium text-slate-900">{page.name}</p>
-                                            <p className="text-xs text-slate-500 truncate">
-                                                {baseUrl}{page.path || '/'}
-                                            </p>
-                                        </div>
-                                        <div className="flex items-center gap-2 flex-shrink-0">
-                                            <SeoStatusBadge hasCustomSeo={hasSeo(localPageSeo[page.key])} />
-                                            <Button
-                                                variant="outline"
-                                                size="sm"
-                                                onClick={() => setSelectedPage(page)}
-                                            >
-                                                <Search className="h-4 w-4 mr-1" />
-                                                Edit SEO
-                                            </Button>
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        </CardContent>
-                    </Card>
-                </TabsContent>
-            </Tabs>
+        {/* Posts Tab */}
+        <TabsContent value="posts">
+          <Card>
+            <CardHeader>
+              <CardTitle>Blog Post SEO</CardTitle>
+              <CardDescription>
+                Optimize your blog posts for search engines.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {localPosts.length === 0 ? (
+                <p className="text-sm text-slate-500 text-center py-8">
+                  No blog posts yet. Create posts in The Wire section.
+                </p>
+              ) : (
+                <div className="divide-y">
+                  {localPosts.map((post) => (
+                    <div
+                      key={post.id}
+                      className="flex items-center justify-between py-3 gap-4"
+                    >
+                      <div className="flex items-center gap-3 min-w-0">
+                        {post.coverImage && (
+                          <img
+                            src={post.coverImage}
+                            alt={post.title}
+                            className="w-10 h-10 rounded object-cover flex-shrink-0"
+                          />
+                        )}
+                        <div className="min-w-0">
+                          <p className="font-medium text-slate-900 truncate">
+                            {post.title}
+                          </p>
+                          <p className="text-xs text-slate-500 truncate">
+                            {baseUrl}/the-wire/{post.slug}
+                          </p>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2 flex-shrink-0">
+                        <SeoStatusBadge hasCustomSeo={hasSeo(post.seo)} />
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => setSelectedPost(post)}
+                        >
+                          <Search className="h-4 w-4 mr-1" />
+                          Edit SEO
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
 
-            {/* Product SEO Modal */}
-            {selectedProduct && (
-                <SeoEditorModal
-                    isOpen={!!selectedProduct}
-                    onClose={() => setSelectedProduct(null)}
-                    entityType="product"
-                    entityId={selectedProduct.id}
-                    entityName={selectedProduct.name}
-                    entitySlug={selectedProduct.slug}
-                    previewUrl={`${baseUrl}/products/${selectedProduct.slug}`}
-                    initialSeo={selectedProduct.seo || undefined}
-                    onSave={handleSaveProductSeo}
-                />
-            )}
+        {/* Static Pages Tab */}
+        <TabsContent value="pages">
+          <Card>
+            <CardHeader>
+              <CardTitle>Static Page SEO</CardTitle>
+              <CardDescription>
+                Set metadata for your store's main pages.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="divide-y">
+                {STATIC_PAGES.map((page) => (
+                  <div
+                    key={page.key}
+                    className="flex items-center justify-between py-3 gap-4"
+                  >
+                    <div className="min-w-0">
+                      <p className="font-medium text-slate-900">{page.name}</p>
+                      <p className="text-xs text-slate-500 truncate">
+                        {baseUrl}
+                        {page.path || "/"}
+                      </p>
+                    </div>
+                    <div className="flex items-center gap-2 flex-shrink-0">
+                      <SeoStatusBadge
+                        hasCustomSeo={hasSeo(localPageSeo[page.key])}
+                      />
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setSelectedPage(page)}
+                      >
+                        <Search className="h-4 w-4 mr-1" />
+                        Edit SEO
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
 
-            {/* Post SEO Modal */}
-            {selectedPost && (
-                <SeoEditorModal
-                    isOpen={!!selectedPost}
-                    onClose={() => setSelectedPost(null)}
-                    entityType="post"
-                    entityId={selectedPost.id}
-                    entityName={selectedPost.title}
-                    entitySlug={selectedPost.slug}
-                    previewUrl={`${baseUrl}/the-wire/${selectedPost.slug}`}
-                    initialSeo={selectedPost.seo || undefined}
-                    onSave={handleSavePostSeo}
-                />
-            )}
+      {/* Product SEO Modal */}
+      {selectedProduct && (
+        <SeoEditorModal
+          isOpen={!!selectedProduct}
+          onClose={() => setSelectedProduct(null)}
+          entityType="product"
+          entityId={selectedProduct.id}
+          entityName={selectedProduct.name}
+          entitySlug={selectedProduct.slug}
+          previewUrl={`${baseUrl}/products/${selectedProduct.slug}`}
+          initialSeo={selectedProduct.seo || undefined}
+          onSave={handleSaveProductSeo}
+        />
+      )}
 
-            {/* Page SEO Modal */}
-            {selectedPage && (
-                <SeoEditorModal
-                    isOpen={!!selectedPage}
-                    onClose={() => setSelectedPage(null)}
-                    entityType="page"
-                    entityId={selectedPage.key}
-                    entityName={selectedPage.name}
-                    entitySlug={selectedPage.path || '/'}
-                    previewUrl={`${baseUrl}${selectedPage.path || '/'}`}
-                    initialSeo={localPageSeo[selectedPage.key] || undefined}
-                    onSave={handleSavePageSeo}
-                />
-            )}
-        </>
-    );
+      {/* Post SEO Modal */}
+      {selectedPost && (
+        <SeoEditorModal
+          isOpen={!!selectedPost}
+          onClose={() => setSelectedPost(null)}
+          entityType="post"
+          entityId={selectedPost.id}
+          entityName={selectedPost.title}
+          entitySlug={selectedPost.slug}
+          previewUrl={`${baseUrl}/the-wire/${selectedPost.slug}`}
+          initialSeo={selectedPost.seo || undefined}
+          onSave={handleSavePostSeo}
+        />
+      )}
+
+      {/* Page SEO Modal */}
+      {selectedPage && (
+        <SeoEditorModal
+          isOpen={!!selectedPage}
+          onClose={() => setSelectedPage(null)}
+          entityType="page"
+          entityId={selectedPage.key}
+          entityName={selectedPage.name}
+          entitySlug={selectedPage.path || "/"}
+          previewUrl={`${baseUrl}${selectedPage.path || "/"}`}
+          initialSeo={localPageSeo[selectedPage.key] || undefined}
+          onSave={handleSavePageSeo}
+        />
+      )}
+    </>
+  );
 }
diff --git a/nextjs_space/app/tenant-admin/settings/page.tsx b/nextjs_space/app/tenant-admin/settings/page.tsx
index 3969a70..0ce39be 100644
--- a/nextjs_space/app/tenant-admin/settings/page.tsx
+++ b/nextjs_space/app/tenant-admin/settings/page.tsx
@@ -1,16 +1,19 @@
-
-import { getServerSession } from 'next-auth';
-import { redirect } from 'next/navigation';
-import { authOptions } from '@/lib/auth';
-import { prisma } from '@/lib/db';
-import SettingsForm from './settings-form';
-import { Breadcrumbs } from '@/components/admin/shared';
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import { authOptions } from "@/lib/auth";
+import { prisma } from "@/lib/db";
+import SettingsForm from "./settings-form";
+import { Breadcrumbs } from "@/components/admin/shared";
 
 export default async function SettingsPage() {
   const session = await getServerSession(authOptions);
 
-  if (!session || (session.user.role !== 'TENANT_ADMIN' && session.user.role !== 'SUPER_ADMIN')) {
-    redirect('/auth/login');
+  if (
+    !session ||
+    (session.user.role !== "TENANT_ADMIN" &&
+      session.user.role !== "SUPER_ADMIN")
+  ) {
+    redirect("/auth/login");
   }
 
   const user = await prisma.users.findUnique({
@@ -21,14 +24,14 @@ export default async function SettingsPage() {
   // Mask the secret key before passing to client
   if (user?.tenants?.drGreenSecretKey) {
     // Only indicate it exists, don't send value
-    user.tenants.drGreenSecretKey = '********';
+    user.tenants.drGreenSecretKey = "********";
   }
   if (user?.tenants?.drGreenApiKey) {
-    user.tenants.drGreenApiKey = '********';
+    user.tenants.drGreenApiKey = "********";
   }
 
   if (!user?.tenants) {
-    redirect('/tenant-admin');
+    redirect("/tenant-admin");
   }
 
   return (
@@ -36,14 +39,16 @@ export default async function SettingsPage() {
       {/* Breadcrumbs */}
       <Breadcrumbs
         items={[
-          { label: 'Dashboard', href: '/tenant-admin' },
-          { label: 'Settings' },
+          { label: "Dashboard", href: "/tenant-admin" },
+          { label: "Settings" },
         ]}
         className="mb-4"
       />
 
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-slate-900 tracking-tight">Store Settings</h1>
+        <h1 className="text-3xl font-bold text-slate-900 tracking-tight">
+          Store Settings
+        </h1>
         <p className="text-slate-600 mt-2">Configure your store preferences</p>
       </div>
 
diff --git a/nextjs_space/app/tenant-admin/settings/settings-form.tsx b/nextjs_space/app/tenant-admin/settings/settings-form.tsx
index ace5c92..43c71c8 100644
--- a/nextjs_space/app/tenant-admin/settings/settings-form.tsx
+++ b/nextjs_space/app/tenant-admin/settings/settings-form.tsx
@@ -1,13 +1,18 @@
+"use client";
 
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { toast } from '@/components/ui/sonner';
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toast } from "@/components/ui/sonner";
 
 interface SettingsFormProps {
   tenant: {
@@ -28,39 +33,39 @@ export default function SettingsForm({ tenant }: SettingsFormProps) {
   const [isLoading, setIsLoading] = useState(false);
   const hasApiKey = Boolean(tenant.drGreenApiKey);
   const [formData, setFormData] = useState({
-    customDomain: tenant.customDomain || '',
-    drGreenApiUrl: tenant.drGreenApiUrl || '',
-    drGreenApiKey: '',
-    drGreenSecretKey: '', // Always start empty for security
+    customDomain: tenant.customDomain || "",
+    drGreenApiUrl: tenant.drGreenApiUrl || "",
+    drGreenApiKey: "",
+    drGreenSecretKey: "", // Always start empty for security
     // SMTP (from settings json)
-    smtpHost: tenant.settings?.smtp?.host || '',
-    smtpPort: tenant.settings?.smtp?.port || '587',
-    smtpUser: tenant.settings?.smtp?.user || '',
-    smtpPassword: '',
-    smtpFromEmail: tenant.settings?.smtp?.fromEmail || '',
-    smtpFromName: tenant.settings?.smtp?.fromName || '',
+    smtpHost: tenant.settings?.smtp?.host || "",
+    smtpPort: tenant.settings?.smtp?.port || "587",
+    smtpUser: tenant.settings?.smtp?.user || "",
+    smtpPassword: "",
+    smtpFromEmail: tenant.settings?.smtp?.fromEmail || "",
+    smtpFromName: tenant.settings?.smtp?.fromName || "",
   });
 
-  const [testEmail, setTestEmail] = useState('');
+  const [testEmail, setTestEmail] = useState("");
   const [testLoading, setTestLoading] = useState(false);
 
   const smtpConfigured = !!tenant.settings?.smtp?.password;
 
   const handleTestSmtp = async () => {
     if (!testEmail) {
-      toast.error('Please enter a test email address');
+      toast.error("Please enter a test email address");
       return;
     }
     setTestLoading(true);
     try {
-      const res = await fetch('/api/tenant-admin/settings/test-smtp', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+      const res = await fetch("/api/tenant-admin/settings/test-smtp", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ testEmail }),
       });
       const data = await res.json();
-      if (!res.ok) throw new Error(data.error || 'Test failed');
-      toast.success('Connection Successful! Test email sent.');
+      if (!res.ok) throw new Error(data.error || "Test failed");
+      toast.success("Connection Successful! Test email sent.");
     } catch (err: any) {
       toast.error(err.message);
     } finally {
@@ -74,17 +79,17 @@ export default function SettingsForm({ tenant }: SettingsFormProps) {
 
     try {
       const res = await fetch(`/api/tenant-admin/settings`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify(formData),
       });
 
-      if (!res.ok) throw new Error('Failed to update settings');
+      if (!res.ok) throw new Error("Failed to update settings");
 
-      toast.success('Settings updated successfully');
+      toast.success("Settings updated successfully");
       router.refresh();
     } catch (error) {
-      toast.error('Failed to update settings');
+      toast.error("Failed to update settings");
       console.error(error);
     } finally {
       setIsLoading(false);
@@ -106,14 +111,18 @@ export default function SettingsForm({ tenant }: SettingsFormProps) {
               <Input value={tenant.subdomain} disabled className="flex-1" />
               <span className="ml-2 text-gray-500">.budstack.to</span>
             </div>
-            <p className="text-xs text-gray-500 mt-1">This is your permanent subdomain</p>
+            <p className="text-xs text-gray-500 mt-1">
+              This is your permanent subdomain
+            </p>
           </div>
           <div>
             <Label htmlFor="customDomain">Custom Domain (Optional)</Label>
             <Input
               id="customDomain"
               value={formData.customDomain}
-              onChange={(e) => setFormData({ ...formData, customDomain: e.target.value })}
+              onChange={(e) =>
+                setFormData({ ...formData, customDomain: e.target.value })
+              }
               placeholder="yourdispensary.com"
             />
             <p className="text-xs text-gray-500 mt-1">
@@ -132,7 +141,11 @@ export default function SettingsForm({ tenant }: SettingsFormProps) {
         <CardContent>
           <div>
             <Label>NFT Token ID</Label>
-            <Input value={tenant.nftTokenId || 'Not set'} disabled className="mt-2" />
+            <Input
+              value={tenant.nftTokenId || "Not set"}
+              disabled
+              className="mt-2"
+            />
             <p className="text-xs text-gray-500 mt-1">
               This NFT verifies your license to operate on BudStack.io
             </p>
@@ -144,7 +157,9 @@ export default function SettingsForm({ tenant }: SettingsFormProps) {
       <Card>
         <CardHeader>
           <CardTitle>Dr. Green Integration</CardTitle>
-          <CardDescription>Configure your connection to the Dr. Green API</CardDescription>
+          <CardDescription>
+            Configure your connection to the Dr. Green API
+          </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <div>
@@ -152,11 +167,17 @@ export default function SettingsForm({ tenant }: SettingsFormProps) {
             <Input
               id="drGreenApiKey"
               value={formData.drGreenApiKey}
-              onChange={(e) => setFormData({ ...formData, drGreenApiKey: e.target.value })}
-              placeholder={hasApiKey ? "******** (Verified)" : "Paste your Public Key here"}
+              onChange={(e) =>
+                setFormData({ ...formData, drGreenApiKey: e.target.value })
+              }
+              placeholder={
+                hasApiKey ? "******** (Verified)" : "Paste your Public Key here"
+              }
             />
             <p className="text-xs text-gray-500 mt-1">
-              {hasApiKey ? "Leave empty to keep existing key." : "Required for Dr. Green integration."}
+              {hasApiKey
+                ? "Leave empty to keep existing key."
+                : "Required for Dr. Green integration."}
             </p>
           </div>
           <div>
@@ -165,11 +186,19 @@ export default function SettingsForm({ tenant }: SettingsFormProps) {
               id="drGreenSecretKey"
               type="password"
               value={formData.drGreenSecretKey}
-              onChange={(e) => setFormData({ ...formData, drGreenSecretKey: e.target.value })}
-              placeholder={tenant.drGreenSecretKey ? "******** (Verified)" : "Paste your Private Key here"}
+              onChange={(e) =>
+                setFormData({ ...formData, drGreenSecretKey: e.target.value })
+              }
+              placeholder={
+                tenant.drGreenSecretKey
+                  ? "******** (Verified)"
+                  : "Paste your Private Key here"
+              }
             />
             <p className="text-xs text-gray-500 mt-1">
-              {tenant.drGreenSecretKey ? "Leave empty to keep existing secret." : "Required for submitting consultations."}
+              {tenant.drGreenSecretKey
+                ? "Leave empty to keep existing secret."
+                : "Required for submitting consultations."}
             </p>
           </div>
         </CardContent>
@@ -179,37 +208,84 @@ export default function SettingsForm({ tenant }: SettingsFormProps) {
       <Card>
         <CardHeader>
           <CardTitle>Email Configuration (SMTP)</CardTitle>
-          <CardDescription>Configure your custom email server for branding.</CardDescription>
+          <CardDescription>
+            Configure your custom email server for branding.
+          </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
               <Label htmlFor="smtpHost">SMTP Host</Label>
-              <Input id="smtpHost" value={formData.smtpHost} onChange={e => setFormData({ ...formData, smtpHost: e.target.value })} placeholder="smtp.mailgun.org" />
+              <Input
+                id="smtpHost"
+                value={formData.smtpHost}
+                onChange={(e) =>
+                  setFormData({ ...formData, smtpHost: e.target.value })
+                }
+                placeholder="smtp.mailgun.org"
+              />
             </div>
             <div className="space-y-2">
               <Label htmlFor="smtpPort">Port</Label>
-              <Input id="smtpPort" value={formData.smtpPort} onChange={e => setFormData({ ...formData, smtpPort: e.target.value })} placeholder="587" />
+              <Input
+                id="smtpPort"
+                value={formData.smtpPort}
+                onChange={(e) =>
+                  setFormData({ ...formData, smtpPort: e.target.value })
+                }
+                placeholder="587"
+              />
             </div>
           </div>
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
               <Label htmlFor="smtpUser">Username</Label>
-              <Input id="smtpUser" value={formData.smtpUser} onChange={e => setFormData({ ...formData, smtpUser: e.target.value })} placeholder="postmaster@domain.com" />
+              <Input
+                id="smtpUser"
+                value={formData.smtpUser}
+                onChange={(e) =>
+                  setFormData({ ...formData, smtpUser: e.target.value })
+                }
+                placeholder="postmaster@domain.com"
+              />
             </div>
             <div className="space-y-2">
               <Label htmlFor="smtpPassword">Password</Label>
-              <Input type="password" id="smtpPassword" value={formData.smtpPassword} onChange={e => setFormData({ ...formData, smtpPassword: e.target.value })} placeholder={smtpConfigured ? "******** (Verified)" : "Enter password"} />
+              <Input
+                type="password"
+                id="smtpPassword"
+                value={formData.smtpPassword}
+                onChange={(e) =>
+                  setFormData({ ...formData, smtpPassword: e.target.value })
+                }
+                placeholder={
+                  smtpConfigured ? "******** (Verified)" : "Enter password"
+                }
+              />
             </div>
           </div>
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
               <Label htmlFor="smtpFromName">Sender Name</Label>
-              <Input id="smtpFromName" value={formData.smtpFromName} onChange={e => setFormData({ ...formData, smtpFromName: e.target.value })} placeholder={tenant.businessName} />
+              <Input
+                id="smtpFromName"
+                value={formData.smtpFromName}
+                onChange={(e) =>
+                  setFormData({ ...formData, smtpFromName: e.target.value })
+                }
+                placeholder={tenant.businessName}
+              />
             </div>
             <div className="space-y-2">
               <Label htmlFor="smtpFromEmail">Sender Email</Label>
-              <Input id="smtpFromEmail" value={formData.smtpFromEmail} onChange={e => setFormData({ ...formData, smtpFromEmail: e.target.value })} placeholder="orders@yourdomain.com" />
+              <Input
+                id="smtpFromEmail"
+                value={formData.smtpFromEmail}
+                onChange={(e) =>
+                  setFormData({ ...formData, smtpFromEmail: e.target.value })
+                }
+                placeholder="orders@yourdomain.com"
+              />
             </div>
           </div>
 
@@ -227,9 +303,11 @@ export default function SettingsForm({ tenant }: SettingsFormProps) {
               onClick={handleTestSmtp}
               disabled={testLoading || !smtpConfigured}
             >
-              {testLoading ? 'Verifying...' : 'Test Connection'}
+              {testLoading ? "Verifying..." : "Test Connection"}
             </Button>
-            <p className="text-xs text-muted-foreground">Save settings before testing.</p>
+            <p className="text-xs text-muted-foreground">
+              Save settings before testing.
+            </p>
           </div>
         </CardContent>
       </Card>
@@ -237,7 +315,7 @@ export default function SettingsForm({ tenant }: SettingsFormProps) {
       {/* Submit */}
       <div className="flex justify-end">
         <Button type="submit" disabled={isLoading}>
-          {isLoading ? 'Saving...' : 'Save Changes'}
+          {isLoading ? "Saving..." : "Save Changes"}
         </Button>
       </div>
     </form>
diff --git a/nextjs_space/app/tenant-admin/templates/activate-button.tsx b/nextjs_space/app/tenant-admin/templates/activate-button.tsx
index 981401b..aed7ab4 100644
--- a/nextjs_space/app/tenant-admin/templates/activate-button.tsx
+++ b/nextjs_space/app/tenant-admin/templates/activate-button.tsx
@@ -1,67 +1,79 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { Check, Loader2 } from 'lucide-react';
-import { useRouter } from 'next/navigation';
-import { toast } from '@/components/ui/sonner';
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Check, Loader2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { toast } from "@/components/ui/sonner";
 
 interface ActivateButtonProps {
-    templateId: string;
-    templateName: string;
-    isActive: boolean;
+  templateId: string;
+  templateName: string;
+  isActive: boolean;
 }
 
-export default function ActivateButton({ templateId, templateName, isActive }: ActivateButtonProps) {
-    const [isLoading, setIsLoading] = useState(false);
-    const router = useRouter();
+export default function ActivateButton({
+  templateId,
+  templateName,
+  isActive,
+}: ActivateButtonProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
 
-    const handleActivate = async () => {
-        try {
-            setIsLoading(true);
-            const response = await fetch(`/api/tenant-admin/templates/${templateId}/activate`, {
-                method: 'PATCH',
-            });
+  const handleActivate = async () => {
+    try {
+      setIsLoading(true);
+      const response = await fetch(
+        `/api/tenant-admin/templates/${templateId}/activate`,
+        {
+          method: "PATCH",
+        },
+      );
 
-            if (!response.ok) {
-                throw new Error('Failed to activate template');
-            }
+      if (!response.ok) {
+        throw new Error("Failed to activate template");
+      }
 
-            toast.success(`✅ ${templateName} is now active!`);
-            router.refresh();
-        } catch (error) {
-            console.error('Activation error:', error);
-            toast.error('Failed to activate template');
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    if (isActive) {
-        return (
-            <Button size="sm" variant="default" className="bg-green-600 hover:bg-green-700" disabled>
-                <Check className="mr-2 h-4 w-4" />
-                Active
-            </Button>
-        );
+      toast.success(`✅ ${templateName} is now active!`);
+      router.refresh();
+    } catch (error) {
+      console.error("Activation error:", error);
+      toast.error("Failed to activate template");
+    } finally {
+      setIsLoading(false);
     }
+  };
 
+  if (isActive) {
     return (
-        <Button
-            size="sm"
-            variant="default"
-            onClick={handleActivate}
-            disabled={isLoading}
-            className="bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-700 hover:to-blue-700"
-        >
-            {isLoading ? (
-                <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Activating...
-                </>
-            ) : (
-                'Activate'
-            )}
-        </Button>
+      <Button
+        size="sm"
+        variant="default"
+        className="bg-green-600 hover:bg-green-700"
+        disabled
+      >
+        <Check className="mr-2 h-4 w-4" />
+        Active
+      </Button>
     );
+  }
+
+  return (
+    <Button
+      size="sm"
+      variant="default"
+      onClick={handleActivate}
+      disabled={isLoading}
+      className="bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-700 hover:to-blue-700"
+    >
+      {isLoading ? (
+        <>
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          Activating...
+        </>
+      ) : (
+        "Activate"
+      )}
+    </Button>
+  );
 }
diff --git a/nextjs_space/app/tenant-admin/templates/clone-button.tsx b/nextjs_space/app/tenant-admin/templates/clone-button.tsx
index 6e27f57..fb0fbff 100644
--- a/nextjs_space/app/tenant-admin/templates/clone-button.tsx
+++ b/nextjs_space/app/tenant-admin/templates/clone-button.tsx
@@ -1,77 +1,78 @@
+"use client";
 
-'use client';
-
-import { useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { Copy, Loader2, Check } from 'lucide-react';
-import { useRouter } from 'next/navigation';
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Copy, Loader2, Check } from "lucide-react";
+import { useRouter } from "next/navigation";
 
 interface TemplateCloneButtonProps {
-    templateId: string;
-    templateName: string;
+  templateId: string;
+  templateName: string;
 }
 
-export default function TemplateCloneButton({ templateId, templateName }: TemplateCloneButtonProps) {
-    const [isLoading, setIsLoading] = useState(false);
-    const [isSuccess, setIsSuccess] = useState(false);
-    const router = useRouter();
-
-    const handleClone = async () => {
-        try {
-            setIsLoading(true);
-            const response = await fetch('/api/tenant-admin/templates/clone', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ baseTemplateId: templateId }),
-            });
+export default function TemplateCloneButton({
+  templateId,
+  templateName,
+}: TemplateCloneButtonProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+  const router = useRouter();
 
-            if (!response.ok) {
-                throw new Error('Failed to clone template');
-            }
+  const handleClone = async () => {
+    try {
+      setIsLoading(true);
+      const response = await fetch("/api/tenant-admin/templates/clone", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ baseTemplateId: templateId }),
+      });
 
-            setIsSuccess(true);
-            router.refresh();
+      if (!response.ok) {
+        throw new Error("Failed to clone template");
+      }
 
-            // Reset success state after 2s
-            setTimeout(() => {
-                setIsSuccess(false);
-                // Switch tab to "my-templates"? Ideally yes, but router.refresh() keeps current tab.
-                // We could use query param or context to switch tab.
-            }, 2000);
+      setIsSuccess(true);
+      router.refresh();
 
-        } catch (error) {
-            console.error('Clone error:', error);
-            alert('Failed to clone template. Please try again.');
-        } finally {
-            setIsLoading(false);
-        }
-    };
+      // Reset success state after 2s
+      setTimeout(() => {
+        setIsSuccess(false);
+        // Switch tab to "my-templates"? Ideally yes, but router.refresh() keeps current tab.
+        // We could use query param or context to switch tab.
+      }, 2000);
+    } catch (error) {
+      console.error("Clone error:", error);
+      alert("Failed to clone template. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
-    return (
-        <Button
-            className="w-full"
-            onClick={handleClone}
-            disabled={isLoading || isSuccess}
-            variant={isSuccess ? "outline" : "default"}
-        >
-            {isLoading ? (
-                <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Cloning...
-                </>
-            ) : isSuccess ? (
-                <>
-                    <Check className="mr-2 h-4 w-4 text-green-500" />
-                    Cloned!
-                </>
-            ) : (
-                <>
-                    <Copy className="mr-2 h-4 w-4" />
-                    Clone Template
-                </>
-            )}
-        </Button>
-    );
+  return (
+    <Button
+      className="w-full"
+      onClick={handleClone}
+      disabled={isLoading || isSuccess}
+      variant={isSuccess ? "outline" : "default"}
+    >
+      {isLoading ? (
+        <>
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          Cloning...
+        </>
+      ) : isSuccess ? (
+        <>
+          <Check className="mr-2 h-4 w-4 text-green-500" />
+          Cloned!
+        </>
+      ) : (
+        <>
+          <Copy className="mr-2 h-4 w-4" />
+          Clone Template
+        </>
+      )}
+    </Button>
+  );
 }
diff --git a/nextjs_space/app/tenant-admin/templates/page.tsx b/nextjs_space/app/tenant-admin/templates/page.tsx
index 479fce4..a1b9b3b 100644
--- a/nextjs_space/app/tenant-admin/templates/page.tsx
+++ b/nextjs_space/app/tenant-admin/templates/page.tsx
@@ -1,193 +1,239 @@
-
-import { getServerSession } from 'next-auth';
-import { redirect } from 'next/navigation';
-import { authOptions } from '@/lib/auth';
-import { prisma } from '@/lib/db';
-import Link from 'next/link';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Palette, Layout } from 'lucide-react';
-import { Badge } from '@/components/ui/badge';
-import TemplateCloneButton from './clone-button';
-import ActivateButton from './activate-button';
-import { Prisma, templates } from '@prisma/client';
-import { Breadcrumbs } from '@/components/admin/shared';
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import { authOptions } from "@/lib/auth";
+import { prisma } from "@/lib/db";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Palette, Layout } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import TemplateCloneButton from "./clone-button";
+import ActivateButton from "./activate-button";
+import { Prisma, templates } from "@prisma/client";
+import { Breadcrumbs } from "@/components/admin/shared";
 
 // Define typed interface for the cloned template with the included base template relation
 type ClonedTemplate = any;
 
 export default async function TemplatesPage() {
-    const session = await getServerSession(authOptions);
-
-    if (!session || (session.user.role !== 'TENANT_ADMIN' && session.user.role !== 'SUPER_ADMIN')) {
-        redirect('/auth/login');
-    }
-
-    const user = await prisma.users.findUnique({
-        where: { id: session.user.id },
-        include: { tenants: true },
-    });
-
-    if (!user?.tenants) {
-        redirect('/tenant-admin');
-    }
-
-    const tenant = user.tenants;
-
-    // 1. Fetch Tenant's Templates
-    const myTemplates = await prisma.tenant_templates.findMany({
-        where: { tenantId: tenant.id },
-        include: {
-            templates: {
-                select: {
-                    thumbnailUrl: true,
-                    previewUrl: true,
-                },
-            },
+  const session = await getServerSession(authOptions);
+
+  if (
+    !session ||
+    (session.user.role !== "TENANT_ADMIN" &&
+      session.user.role !== "SUPER_ADMIN")
+  ) {
+    redirect("/auth/login");
+  }
+
+  const user = await prisma.users.findUnique({
+    where: { id: session.user.id },
+    include: { tenants: true },
+  });
+
+  if (!user?.tenants) {
+    redirect("/tenant-admin");
+  }
+
+  const tenant = user.tenants;
+
+  // 1. Fetch Tenant's Templates
+  const myTemplates = await prisma.tenant_templates.findMany({
+    where: { tenantId: tenant.id },
+    include: {
+      templates: {
+        select: {
+          thumbnailUrl: true,
+          previewUrl: true,
         },
-        orderBy: { createdAt: 'desc' },
-    });
-
-    // 2. Fetch Available Base Templates (Marketplace)
-    const templatess = await prisma.templates.findMany({
-        where: { isActive: true, isPublic: true },
-    });
-
-    return (
-        <div className="p-8">
-            {/* Breadcrumbs */}
-            <Breadcrumbs
-                items={[
-                    { label: 'Dashboard', href: '/tenant-admin' },
-                    { label: 'Templates' },
-                ]}
-                className="mb-4"
-            />
-
-            <div className="mb-8">
-                <h1 className="text-3xl font-bold text-slate-900 tracking-tight">Template Management</h1>
-                <p className="text-slate-600 mt-2">Manage your store's design and layout</p>
-            </div>
-
-            <Tabs defaultValue="my-templates" className="w-full">
-                <TabsList className="mb-8">
-                    <TabsTrigger value="my-templates">My Templates</TabsTrigger>
-                    <TabsTrigger value="marketplace">Template Marketplace</TabsTrigger>
-                </TabsList>
-
-                {/* MY TEMPLATES TAB */}
-                <TabsContent value="my-templates">
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                        {myTemplates.length === 0 && (
-                            <div className="col-span-full text-center py-12 bg-slate-50 rounded-lg border border-dashed border-slate-300">
-                                <Palette className="h-12 w-12 text-slate-300 mx-auto mb-4" />
-                                <h3 className="text-lg font-medium text-slate-900">No Templates Found</h3>
-                                <p className="text-slate-500 mb-4">You haven't cloned any templates yet.</p>
-                                <p className="text-sm text-slate-400">Visit the Marketplace to get started.</p>
-                            </div>
-                        )}
-
-                        {myTemplates.map((item: ClonedTemplate) => (
-                            <Card key={item.id} className={`overflow-hidden transition-all ${item.isActive ? 'ring-2 ring-primary border-primary' : ''}`}>
-                                <div className="aspect-video bg-gradient-to-br from-slate-100 to-slate-200 relative">
-                                    {item.templates?.thumbnailUrl ? (
-                                        <img
-                                            src={item.templates.thumbnailUrl}
-                                            alt={`${item.templateName} preview`}
-                                            className="w-full h-full object-cover"
-                                        />
-                                    ) : (
-                                        <div className="absolute inset-0 flex items-center justify-center text-slate-400">
-                                            <Layout className="h-12 w-12 opacity-20" />
-                                        </div>
-                                    )}
-                                    {item.isActive && (
-                                        <div className="absolute top-2 right-2">
-                                            <Badge className="bg-green-500 hover:bg-green-600">Active</Badge>
-                                        </div>
-                                    )}
-                                </div>
-                                <CardHeader>
-                                    <CardTitle>{item.templateName}</CardTitle>
-                                    <CardDescription>Cloned {new Date(item.createdAt).toLocaleDateString()}</CardDescription>
-                                </CardHeader>
-                                <CardContent>
-                                    <p className="text-sm text-slate-500">
-                                        Based on: {item.templatesId}
-                                    </p>
-                                </CardContent>
-                                <CardFooter className="flex justify-between gap-2 border-t bg-slate-50/50 p-4">
-                                    <Link href="/tenant-admin/branding" className="flex-1">
-                                        <Button variant="outline" size="sm" className="w-full">
-                                            <Palette className="mr-2 h-4 w-4" />
-                                            Customize
-                                        </Button>
-                                    </Link>
-                                    <ActivateButton
-                                        templateId={item.id}
-                                        templateName={item.templateName}
-                                        isActive={item.isActive}
-                                    />
-                                </CardFooter>
-                            </Card>
-                        ))}
+      },
+    },
+    orderBy: { createdAt: "desc" },
+  });
+
+  // 2. Fetch Available Base Templates (Marketplace)
+  const templatess = await prisma.templates.findMany({
+    where: { isActive: true, isPublic: true },
+  });
+
+  return (
+    <div className="p-8">
+      {/* Breadcrumbs */}
+      <Breadcrumbs
+        items={[
+          { label: "Dashboard", href: "/tenant-admin" },
+          { label: "Templates" },
+        ]}
+        className="mb-4"
+      />
+
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-slate-900 tracking-tight">
+          Template Management
+        </h1>
+        <p className="text-slate-600 mt-2">
+          Manage your store's design and layout
+        </p>
+      </div>
+
+      <Tabs defaultValue="my-templates" className="w-full">
+        <TabsList className="mb-8">
+          <TabsTrigger value="my-templates">My Templates</TabsTrigger>
+          <TabsTrigger value="marketplace">Template Marketplace</TabsTrigger>
+        </TabsList>
+
+        {/* MY TEMPLATES TAB */}
+        <TabsContent value="my-templates">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {myTemplates.length === 0 && (
+              <div className="col-span-full text-center py-12 bg-slate-50 rounded-lg border border-dashed border-slate-300">
+                <Palette className="h-12 w-12 text-slate-300 mx-auto mb-4" />
+                <h3 className="text-lg font-medium text-slate-900">
+                  No Templates Found
+                </h3>
+                <p className="text-slate-500 mb-4">
+                  You haven't cloned any templates yet.
+                </p>
+                <p className="text-sm text-slate-400">
+                  Visit the Marketplace to get started.
+                </p>
+              </div>
+            )}
+
+            {myTemplates.map((item: ClonedTemplate) => (
+              <Card
+                key={item.id}
+                className={`overflow-hidden transition-all ${item.isActive ? "ring-2 ring-primary border-primary" : ""}`}
+              >
+                <div className="aspect-video bg-gradient-to-br from-slate-100 to-slate-200 relative">
+                  {item.templates?.thumbnailUrl ? (
+                    <img
+                      src={item.templates.thumbnailUrl}
+                      alt={`${item.templateName} preview`}
+                      className="w-full h-full object-cover"
+                    />
+                  ) : (
+                    <div className="absolute inset-0 flex items-center justify-center text-slate-400">
+                      <Layout className="h-12 w-12 opacity-20" />
                     </div>
-                </TabsContent>
-
-                {/* MARKETPLACE TAB */}
-                <TabsContent value="marketplace">
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                        {templatess.map((template: templates) => (
-                            <Card key={template.id} className="overflow-hidden hover:shadow-lg transition-all border-slate-200">
-                                <div className="aspect-video bg-gradient-to-br from-slate-100 to-slate-200 relative group">
-                                    {template.thumbnailUrl ? (
-                                        <img
-                                            src={template.thumbnailUrl}
-                                            alt={`${template.name} template preview`}
-                                            className="w-full h-full object-cover"
-                                        />
-                                    ) : (
-                                        <div className="absolute inset-0 flex items-center justify-center text-slate-400">
-                                            <Palette className="h-16 w-16 opacity-30" />
-                                        </div>
-                                    )}
-                                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-4">
-                                        {template.demoUrl && (
-                                            <a href={template.demoUrl} target="_blank" rel="noopener noreferrer">
-                                                <Button variant="secondary" size="sm" className="shadow-lg">
-                                                    <Layout className="mr-2 h-4 w-4" />
-                                                    Live Demo
-                                                </Button>
-                                            </a>
-                                        )}
-                                    </div>
-                                </div>
-                                <CardHeader>
-                                    <div className="flex justify-between items-start">
-                                        <div>
-                                            <CardTitle>{template.name}</CardTitle>
-                                            <CardDescription className="line-clamp-2 mt-2">
-                                                {template.description || "A professional template for your store."}
-                                            </CardDescription>
-                                        </div>
-                                        {template.isPremium && <Badge variant="secondary">Premium</Badge>}
-                                    </div>
-                                </CardHeader>
-                                <CardFooter className="border-t bg-slate-50/50 p-4">
-                                    <TemplateCloneButton templateId={template.id} templateName={template.name} />
-                                </CardFooter>
-                            </Card>
-                        ))}
-
-                        {templatess.length === 0 && (
-                            <div className="col-span-full text-center py-12">
-                                <p className="text-slate-500">No base templates available in the system.</p>
-                            </div>
-                        )}
+                  )}
+                  {item.isActive && (
+                    <div className="absolute top-2 right-2">
+                      <Badge className="bg-green-500 hover:bg-green-600">
+                        Active
+                      </Badge>
+                    </div>
+                  )}
+                </div>
+                <CardHeader>
+                  <CardTitle>{item.templateName}</CardTitle>
+                  <CardDescription>
+                    Cloned {new Date(item.createdAt).toLocaleDateString()}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-sm text-slate-500">
+                    Based on: {item.templatesId}
+                  </p>
+                </CardContent>
+                <CardFooter className="flex justify-between gap-2 border-t bg-slate-50/50 p-4">
+                  <Link href="/tenant-admin/branding" className="flex-1">
+                    <Button variant="outline" size="sm" className="w-full">
+                      <Palette className="mr-2 h-4 w-4" />
+                      Customize
+                    </Button>
+                  </Link>
+                  <ActivateButton
+                    templateId={item.id}
+                    templateName={item.templateName}
+                    isActive={item.isActive}
+                  />
+                </CardFooter>
+              </Card>
+            ))}
+          </div>
+        </TabsContent>
+
+        {/* MARKETPLACE TAB */}
+        <TabsContent value="marketplace">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {templatess.map((template: templates) => (
+              <Card
+                key={template.id}
+                className="overflow-hidden hover:shadow-lg transition-all border-slate-200"
+              >
+                <div className="aspect-video bg-gradient-to-br from-slate-100 to-slate-200 relative group">
+                  {template.thumbnailUrl ? (
+                    <img
+                      src={template.thumbnailUrl}
+                      alt={`${template.name} template preview`}
+                      className="w-full h-full object-cover"
+                    />
+                  ) : (
+                    <div className="absolute inset-0 flex items-center justify-center text-slate-400">
+                      <Palette className="h-16 w-16 opacity-30" />
+                    </div>
+                  )}
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-4">
+                    {template.demoUrl && (
+                      <a
+                        href={template.demoUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <Button
+                          variant="secondary"
+                          size="sm"
+                          className="shadow-lg"
+                        >
+                          <Layout className="mr-2 h-4 w-4" />
+                          Live Demo
+                        </Button>
+                      </a>
+                    )}
+                  </div>
+                </div>
+                <CardHeader>
+                  <div className="flex justify-between items-start">
+                    <div>
+                      <CardTitle>{template.name}</CardTitle>
+                      <CardDescription className="line-clamp-2 mt-2">
+                        {template.description ||
+                          "A professional template for your store."}
+                      </CardDescription>
                     </div>
-                </TabsContent>
-            </Tabs>
-        </div>
-    );
+                    {template.isPremium && (
+                      <Badge variant="secondary">Premium</Badge>
+                    )}
+                  </div>
+                </CardHeader>
+                <CardFooter className="border-t bg-slate-50/50 p-4">
+                  <TemplateCloneButton
+                    templateId={template.id}
+                    templateName={template.name}
+                  />
+                </CardFooter>
+              </Card>
+            ))}
+
+            {templatess.length === 0 && (
+              <div className="col-span-full text-center py-12">
+                <p className="text-slate-500">
+                  No base templates available in the system.
+                </p>
+              </div>
+            )}
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
 }
diff --git a/nextjs_space/app/tenant-admin/the-wire/[id]/page.tsx b/nextjs_space/app/tenant-admin/the-wire/[id]/page.tsx
index 626c2ea..62ff7d2 100644
--- a/nextjs_space/app/tenant-admin/the-wire/[id]/page.tsx
+++ b/nextjs_space/app/tenant-admin/the-wire/[id]/page.tsx
@@ -1,51 +1,55 @@
-import { getServerSession } from 'next-auth';
-import { authOptions } from '@/lib/auth';
-import { prisma } from '@/lib/db';
-import { redirect, notFound } from 'next/navigation';
-import PostForm from '../post-form';
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth";
+import { prisma } from "@/lib/db";
+import { redirect, notFound } from "next/navigation";
+import PostForm from "../post-form";
 
 export const metadata = {
-    title: 'Edit Article | The Wire',
+  title: "Edit Article | The Wire",
 };
 
-export default async function EditPostPage({ params }: { params: { id: string } }) {
-    const session = await getServerSession(authOptions);
-
-    if (!session) {
-        redirect('/auth/login');
-    }
-
-    const { id } = params;
-
-    const post = await prisma.posts.findUnique({
-        where: { id },
-    });
-
-    if (!post) {
-        notFound();
-    }
-
-    // Verify tenant access
-    const user = await prisma.users.findUnique({
-        where: { id: session.user.id },
-        include: { tenants: true }
-    });
-
-    if (post.tenantId !== user?.tenantId) {
-        redirect('/tenant-admin/the-wire');
-    }
-
-    return (
-        <PostForm
-            isEditing
-            initialData={{
-                id: post.id,
-                title: post.title,
-                content: post.content,
-                excerpt: post.excerpt || '',
-                coverImage: post.coverImage || '',
-                published: post.published,
-            }}
-        />
-    );
+export default async function EditPostPage({
+  params,
+}: {
+  params: { id: string };
+}) {
+  const session = await getServerSession(authOptions);
+
+  if (!session) {
+    redirect("/auth/login");
+  }
+
+  const { id } = params;
+
+  const post = await prisma.posts.findUnique({
+    where: { id },
+  });
+
+  if (!post) {
+    notFound();
+  }
+
+  // Verify tenant access
+  const user = await prisma.users.findUnique({
+    where: { id: session.user.id },
+    include: { tenants: true },
+  });
+
+  if (post.tenantId !== user?.tenantId) {
+    redirect("/tenant-admin/the-wire");
+  }
+
+  return (
+    <PostForm
+      isEditing
+      initialData={{
+        id: post.id,
+        title: post.title,
+        content: post.content,
+        excerpt: post.excerpt || "",
+        coverImage: post.coverImage || "",
+        published: post.published,
+      }}
+    />
+  );
 }
diff --git a/nextjs_space/app/tenant-admin/the-wire/new/page.tsx b/nextjs_space/app/tenant-admin/the-wire/new/page.tsx
index 7e4ad2f..ed4be4b 100644
--- a/nextjs_space/app/tenant-admin/the-wire/new/page.tsx
+++ b/nextjs_space/app/tenant-admin/the-wire/new/page.tsx
@@ -1,9 +1,9 @@
-import PostForm from '../post-form';
+import PostForm from "../post-form";
 
 export const metadata = {
-    title: 'New Article | The Wire',
+  title: "New Article | The Wire",
 };
 
 export default function NewPostPage() {
-    return <PostForm />;
+  return <PostForm />;
 }
diff --git a/nextjs_space/app/tenant-admin/the-wire/page.tsx b/nextjs_space/app/tenant-admin/the-wire/page.tsx
index 7eee7f6..a7b56fb 100644
--- a/nextjs_space/app/tenant-admin/the-wire/page.tsx
+++ b/nextjs_space/app/tenant-admin/the-wire/page.tsx
@@ -1,63 +1,67 @@
-import { getServerSession } from 'next-auth';
-import { authOptions } from '@/lib/auth';
-import { prisma } from '@/lib/db';
-import { redirect } from 'next/navigation';
-import { Button } from '@/components/ui/button';
-import Link from 'next/link';
-import { Plus } from 'lucide-react';
-import PostsList from './posts-list';
-import { Breadcrumbs } from '@/components/admin/shared';
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth";
+import { prisma } from "@/lib/db";
+import { redirect } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { Plus } from "lucide-react";
+import PostsList from "./posts-list";
+import { Breadcrumbs } from "@/components/admin/shared";
 
 export const metadata = {
-    title: 'The Wire Management',
+  title: "The Wire Management",
 };
 
 export default async function TheWirePage() {
-    const session = await getServerSession(authOptions);
-
-    if (!session) {
-        redirect('/auth/login');
-    }
-
-    const user = await prisma.users.findUnique({
-        where: { id: session.user.id },
-        include: { tenants: true },
-    });
-
-    if (!user?.tenants) {
-        redirect('/tenant-admin');
-    }
-
-    const posts = await prisma.posts.findMany({
-        where: { tenantId: user.tenants.id },
-        orderBy: { createdAt: 'desc' },
-        include: { users: true },
-    });
-
-    return (
-        <div className="p-4 sm:p-6 lg:p-8">
-            {/* Breadcrumbs */}
-            <Breadcrumbs
-                items={[
-                    { label: 'Dashboard', href: '/tenant-admin' },
-                    { label: 'The Wire' },
-                ]}
-                className="mb-4"
-            />
-
-            <div className="flex flex-col gap-4 sm:flex-row sm:justify-between sm:items-center mb-6 sm:mb-8">
-                <div>
-                    <h1 className="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">The Wire</h1>
-                    <p className="text-sm sm:text-base text-slate-600 mt-1 sm:mt-2">Manage your news and articles</p>
-                </div>
-                <Link href="/tenant-admin/the-wire/new" className="w-full sm:w-auto">
-                    <Button className="w-full sm:w-auto bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-700 hover:to-blue-700 text-white font-medium shadow-md hover:shadow-lg transition-all">
-                        <Plus className="mr-2 h-4 w-4" /> New Article
-                    </Button>
-                </Link>
-            </div>
-
-            <PostsList initialPosts={posts} />
+  const session = await getServerSession(authOptions);
+
+  if (!session) {
+    redirect("/auth/login");
+  }
+
+  const user = await prisma.users.findUnique({
+    where: { id: session.user.id },
+    include: { tenants: true },
+  });
+
+  if (!user?.tenants) {
+    redirect("/tenant-admin");
+  }
+
+  const posts = await prisma.posts.findMany({
+    where: { tenantId: user.tenants.id },
+    orderBy: { createdAt: "desc" },
+    include: { users: true },
+  });
+
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      {/* Breadcrumbs */}
+      <Breadcrumbs
+        items={[
+          { label: "Dashboard", href: "/tenant-admin" },
+          { label: "The Wire" },
+        ]}
+        className="mb-4"
+      />
+
+      <div className="flex flex-col gap-4 sm:flex-row sm:justify-between sm:items-center mb-6 sm:mb-8">
+        <div>
+          <h1 className="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">
+            The Wire
+          </h1>
+          <p className="text-sm sm:text-base text-slate-600 mt-1 sm:mt-2">
+            Manage your news and articles
+          </p>
         </div>
-    );
+        <Link href="/tenant-admin/the-wire/new" className="w-full sm:w-auto">
+          <Button className="w-full sm:w-auto bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-700 hover:to-blue-700 text-white font-medium shadow-md hover:shadow-lg transition-all">
+            <Plus className="mr-2 h-4 w-4" /> New Article
+          </Button>
+        </Link>
+      </div>
+
+      <PostsList initialPosts={posts} />
+    </div>
+  );
 }
diff --git a/nextjs_space/app/tenant-admin/the-wire/post-form.tsx b/nextjs_space/app/tenant-admin/the-wire/post-form.tsx
index ae8fa24..e50b577 100644
--- a/nextjs_space/app/tenant-admin/the-wire/post-form.tsx
+++ b/nextjs_space/app/tenant-admin/the-wire/post-form.tsx
@@ -1,245 +1,274 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import * as z from 'zod';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import { Switch } from '@/components/ui/switch';
-import { Card, CardContent } from '@/components/ui/card';
-import Tiptap from '@/components/editor/tiptap';
-import { toast } from '@/components/ui/sonner';
-import Link from 'next/link';
-import { ArrowLeft, Upload, X, Loader2 } from 'lucide-react';
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Switch } from "@/components/ui/switch";
+import { Card, CardContent } from "@/components/ui/card";
+import Tiptap from "@/components/editor/tiptap";
+import { toast } from "@/components/ui/sonner";
+import Link from "next/link";
+import { ArrowLeft, Upload, X, Loader2 } from "lucide-react";
 
 const postSchema = z.object({
-    title: z.string().min(1, 'Title is required'),
-    content: z.string().min(1, 'Content is required'),
-    excerpt: z.string().optional(),
-    coverImage: z.string().optional(),
-    published: z.boolean().default(false),
+  title: z.string().min(1, "Title is required"),
+  content: z.string().min(1, "Content is required"),
+  excerpt: z.string().optional(),
+  coverImage: z.string().optional(),
+  published: z.boolean().default(false),
 });
 
 type PostFormData = z.infer<typeof postSchema>;
 
 interface PostFormProps {
-    initialData?: PostFormData & { id?: string };
-    isEditing?: boolean;
+  initialData?: PostFormData & { id?: string };
+  isEditing?: boolean;
 }
 
-export default function PostForm({ initialData, isEditing = false }: PostFormProps) {
-    const router = useRouter();
-    const [isLoading, setIsLoading] = useState(false);
-    const [isUploading, setIsUploading] = useState(false);
-
-    const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-        const file = e.target.files?.[0];
-        if (!file) return;
-
-        setIsUploading(true);
-        const formData = new FormData();
-        formData.append('file', file);
-
-        try {
-            const res = await fetch('/api/tenant-admin/upload', {
-                method: 'POST',
-                body: formData,
-            });
-
-            if (!res.ok) throw new Error('Upload failed');
-
-            const data = await res.json();
-            form.setValue('coverImage', data.url);
-            toast.success('Image uploaded');
-        } catch (error) {
-            toast.error('Failed to upload image');
-        } finally {
-            setIsUploading(false);
-            // Reset input
-            e.target.value = '';
-        }
-    };
-
-    const form = useForm<PostFormData>({
-        resolver: zodResolver(postSchema),
-        defaultValues: initialData || {
-            title: '',
-            content: '',
-            excerpt: '',
-            coverImage: '',
-            published: false,
-        },
-    });
-
-    const onSubmit = async (data: PostFormData) => {
-        setIsLoading(true);
-        try {
-            const url = isEditing && initialData?.id
-                ? `/api/tenant-admin/posts/${initialData.id}`
-                : '/api/tenant-admin/posts';
-
-            const method = isEditing ? 'PATCH' : 'POST';
-
-            const res = await fetch(url, {
-                method,
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(data),
-            });
-
-            if (!res.ok) {
-                const error = await res.json();
-                throw new Error(error.error || 'Something went wrong');
-            }
-
-            toast.success(isEditing ? 'Article updated' : 'Article created');
-            router.push('/tenant-admin/the-wire');
-            router.refresh();
-        } catch (error: any) {
-            toast.error(error.message);
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    return (
-        <div className="p-8">
-            {/* Header */}
-            <div className="mb-8">
-                <h1 className="text-3xl font-bold text-slate-900 tracking-tight">
-                    {isEditing ? 'Edit Article' : 'New Article'}
-                </h1>
-                <p className="text-slate-600 mt-2">
-                    {isEditing ? 'Update your article content and settings' : 'Create a new article for The Wire'}
-                </p>
-            </div>
-
-            <div className="max-w-5xl">
-                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-                    <div className="grid gap-6">
-
-                        <Card>
-                            <CardContent className="pt-6 space-y-4">
-                                <div className="space-y-2">
-                                    <Label htmlFor="title">Title</Label>
-                                    <Input
-                                        id="title"
-                                        {...form.register('title')}
-                                        placeholder="Article Title"
-                                    />
-                                    {form.formState.errors.title && (
-                                        <p className="text-sm text-destructive">{form.formState.errors.title.message}</p>
-                                    )}
-                                </div>
-
-                                <div className="space-y-2">
-                                    <Label htmlFor="excerpt">Excerpt</Label>
-                                    <Textarea
-                                        id="excerpt"
-                                        {...form.register('excerpt')}
-                                        placeholder="Short summary for preview cards..."
-                                        className="h-20"
-                                    />
-                                </div>
-
-                                <div className="space-y-2">
-                                    <Label htmlFor="coverImage">Cover Image</Label>
-                                    <div className="flex flex-col gap-4">
-                                        {form.watch('coverImage') && (
-                                            <div className="relative aspect-video w-full max-w-sm rounded-lg overflow-hidden border">
-                                                <img
-                                                    src={form.watch('coverImage')}
-                                                    alt="Cover preview"
-                                                    className="object-cover w-full h-full"
-                                                />
-                                                <Button
-                                                    type="button"
-                                                    variant="destructive"
-                                                    size="icon"
-                                                    className="absolute top-2 right-2 h-6 w-6"
-                                                    onClick={() => form.setValue('coverImage', '')}
-                                                >
-                                                    <X className="h-3 w-3" />
-                                                </Button>
-                                            </div>
-                                        )}
-                                        <div className="flex items-center gap-2">
-                                            <Input
-                                                id="coverImage"
-                                                {...form.register('coverImage')}
-                                                placeholder="https://... or upload image"
-                                                className="flex-1"
-                                            />
-                                            <div className="relative">
-                                                <Button type="button" variant="outline" size="icon" disabled={isUploading}>
-                                                    {isUploading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
-                                                </Button>
-                                                <input
-                                                    type="file"
-                                                    className="absolute inset-0 opacity-0 cursor-pointer"
-                                                    accept="image/*"
-                                                    onChange={handleImageUpload}
-                                                    disabled={isUploading}
-                                                />
-                                            </div>
-                                        </div>
-                                        <p className="text-xs text-muted-foreground">
-                                            Paste a URL or click the upload icon to select a file.
-                                        </p>
-                                    </div>
-                                </div>
-                            </CardContent>
-                        </Card>
-
-                        <Card>
-                            <CardContent className="pt-6">
-                                <div className="space-y-2">
-                                    <Label>Content</Label>
-                                    <Tiptap
-                                        content={form.getValues('content')}
-                                        onChange={(html) => form.setValue('content', html, { shouldValidate: true })}
-                                    />
-                                    {form.formState.errors.content && (
-                                        <p className="text-sm text-destructive">{form.formState.errors.content.message}</p>
-                                    )}
-                                </div>
-                            </CardContent>
-                        </Card>
-
-                        <Card>
-                            <CardContent className="pt-6 flex items-center justify-between">
-                                <div className="space-y-0.5">
-                                    <Label>Publish Status</Label>
-                                    <p className="text-sm text-muted-foreground">
-                                        {form.watch('published') ? 'Article is live' : 'Article is saved as draft'}
-                                    </p>
-                                </div>
-                                <Switch
-                                    checked={form.watch('published')}
-                                    onCheckedChange={(checked) => form.setValue('published', checked)}
-                                />
-                            </CardContent>
-                        </Card>
+export default function PostForm({
+  initialData,
+  isEditing = false,
+}: PostFormProps) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
 
-                    </div>
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setIsUploading(true);
+    const formData = new FormData();
+    formData.append("file", file);
+
+    try {
+      const res = await fetch("/api/tenant-admin/upload", {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!res.ok) throw new Error("Upload failed");
+
+      const data = await res.json();
+      form.setValue("coverImage", data.url);
+      toast.success("Image uploaded");
+    } catch (error) {
+      toast.error("Failed to upload image");
+    } finally {
+      setIsUploading(false);
+      // Reset input
+      e.target.value = "";
+    }
+  };
+
+  const form = useForm<PostFormData>({
+    resolver: zodResolver(postSchema),
+    defaultValues: initialData || {
+      title: "",
+      content: "",
+      excerpt: "",
+      coverImage: "",
+      published: false,
+    },
+  });
+
+  const onSubmit = async (data: PostFormData) => {
+    setIsLoading(true);
+    try {
+      const url =
+        isEditing && initialData?.id
+          ? `/api/tenant-admin/posts/${initialData.id}`
+          : "/api/tenant-admin/posts";
+
+      const method = isEditing ? "PATCH" : "POST";
+
+      const res = await fetch(url, {
+        method,
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+
+      if (!res.ok) {
+        const error = await res.json();
+        throw new Error(error.error || "Something went wrong");
+      }
 
-                    <div className="flex justify-end gap-4 pt-4">
-                        <Link href="/tenant-admin/the-wire">
-                            <Button variant="outline" type="button">Cancel</Button>
-                        </Link>
+      toast.success(isEditing ? "Article updated" : "Article created");
+      router.push("/tenant-admin/the-wire");
+      router.refresh();
+    } catch (error: any) {
+      toast.error(error.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="p-8">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-slate-900 tracking-tight">
+          {isEditing ? "Edit Article" : "New Article"}
+        </h1>
+        <p className="text-slate-600 mt-2">
+          {isEditing
+            ? "Update your article content and settings"
+            : "Create a new article for The Wire"}
+        </p>
+      </div>
+
+      <div className="max-w-5xl">
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          <div className="grid gap-6">
+            <Card>
+              <CardContent className="pt-6 space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="title">Title</Label>
+                  <Input
+                    id="title"
+                    {...form.register("title")}
+                    placeholder="Article Title"
+                  />
+                  {form.formState.errors.title && (
+                    <p className="text-sm text-destructive">
+                      {form.formState.errors.title.message}
+                    </p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="excerpt">Excerpt</Label>
+                  <Textarea
+                    id="excerpt"
+                    {...form.register("excerpt")}
+                    placeholder="Short summary for preview cards..."
+                    className="h-20"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="coverImage">Cover Image</Label>
+                  <div className="flex flex-col gap-4">
+                    {form.watch("coverImage") && (
+                      <div className="relative aspect-video w-full max-w-sm rounded-lg overflow-hidden border">
+                        <img
+                          src={form.watch("coverImage")}
+                          alt="Cover preview"
+                          className="object-cover w-full h-full"
+                        />
+                        <Button
+                          type="button"
+                          variant="destructive"
+                          size="icon"
+                          className="absolute top-2 right-2 h-6 w-6"
+                          onClick={() => form.setValue("coverImage", "")}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    )}
+                    <div className="flex items-center gap-2">
+                      <Input
+                        id="coverImage"
+                        {...form.register("coverImage")}
+                        placeholder="https://... or upload image"
+                        className="flex-1"
+                      />
+                      <div className="relative">
                         <Button
-                            type="submit"
-                            disabled={isLoading}
-                            className="bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-700 hover:to-blue-700 text-white font-medium shadow-md hover:shadow-lg transition-all"
+                          type="button"
+                          variant="outline"
+                          size="icon"
+                          disabled={isUploading}
                         >
-                            {isLoading ? 'Saving...' : (isEditing ? 'Update Article' : 'Create Article')}
+                          {isUploading ? (
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                          ) : (
+                            <Upload className="h-4 w-4" />
+                          )}
                         </Button>
+                        <input
+                          type="file"
+                          className="absolute inset-0 opacity-0 cursor-pointer"
+                          accept="image/*"
+                          onChange={handleImageUpload}
+                          disabled={isUploading}
+                        />
+                      </div>
                     </div>
-                </form>
-            </div>
-        </div>
-    );
+                    <p className="text-xs text-muted-foreground">
+                      Paste a URL or click the upload icon to select a file.
+                    </p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardContent className="pt-6">
+                <div className="space-y-2">
+                  <Label>Content</Label>
+                  <Tiptap
+                    content={form.getValues("content")}
+                    onChange={(html) =>
+                      form.setValue("content", html, { shouldValidate: true })
+                    }
+                  />
+                  {form.formState.errors.content && (
+                    <p className="text-sm text-destructive">
+                      {form.formState.errors.content.message}
+                    </p>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardContent className="pt-6 flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Publish Status</Label>
+                  <p className="text-sm text-muted-foreground">
+                    {form.watch("published")
+                      ? "Article is live"
+                      : "Article is saved as draft"}
+                  </p>
+                </div>
+                <Switch
+                  checked={form.watch("published")}
+                  onCheckedChange={(checked) =>
+                    form.setValue("published", checked)
+                  }
+                />
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="flex justify-end gap-4 pt-4">
+            <Link href="/tenant-admin/the-wire">
+              <Button variant="outline" type="button">
+                Cancel
+              </Button>
+            </Link>
+            <Button
+              type="submit"
+              disabled={isLoading}
+              className="bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-700 hover:to-blue-700 text-white font-medium shadow-md hover:shadow-lg transition-all"
+            >
+              {isLoading
+                ? "Saving..."
+                : isEditing
+                  ? "Update Article"
+                  : "Create Article"}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
 }
diff --git a/nextjs_space/app/tenant-admin/the-wire/posts-list.tsx b/nextjs_space/app/tenant-admin/the-wire/posts-list.tsx
index 53d1830..0b09e59 100644
--- a/nextjs_space/app/tenant-admin/the-wire/posts-list.tsx
+++ b/nextjs_space/app/tenant-admin/the-wire/posts-list.tsx
@@ -1,155 +1,178 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { format } from 'date-fns';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
+import { useState } from "react";
+import { format } from "date-fns";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
 import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow
-} from '@/components/ui/table';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { Edit, Trash2, Eye, EyeOff } from 'lucide-react';
-import { toast } from '@/components/ui/sonner';
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Edit, Trash2, Eye, EyeOff } from "lucide-react";
+import { toast } from "@/components/ui/sonner";
 
 interface Post {
-    id: string;
-    title: string;
-    slug: string;
-    published: boolean;
-    createdAt: Date;
-    author: { name: string | null };
+  id: string;
+  title: string;
+  slug: string;
+  published: boolean;
+  createdAt: Date;
+  author: { name: string | null };
 }
 
 export default function PostsList({ initialPosts }: { initialPosts: any[] }) {
-    const router = useRouter();
-    const [posts, setPosts] = useState(initialPosts);
-    const [isDeleting, setIsDeleting] = useState<string | null>(null);
+  const router = useRouter();
+  const [posts, setPosts] = useState(initialPosts);
+  const [isDeleting, setIsDeleting] = useState<string | null>(null);
 
-    const handleTogglePublish = async (id: string, currentStatus: boolean) => {
-        try {
-            const res = await fetch(`/api/tenant-admin/posts/${id}`, {
-                method: 'PATCH',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ published: !currentStatus }),
-            });
+  const handleTogglePublish = async (id: string, currentStatus: boolean) => {
+    try {
+      const res = await fetch(`/api/tenant-admin/posts/${id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ published: !currentStatus }),
+      });
 
-            if (!res.ok) throw new Error('Failed to update');
+      if (!res.ok) throw new Error("Failed to update");
 
-            setPosts(posts.map(p => p.id === id ? { ...p, published: !currentStatus } : p));
-            toast.success(currentStatus ? 'Article unpublished' : 'Article published');
-            router.refresh();
-        } catch (error) {
-            toast.error('Failed to update article');
-        }
-    };
-
-    const handleDelete = async (id: string) => {
-        if (!confirm('Are you sure you want to delete this article?')) return;
+      setPosts(
+        posts.map((p) =>
+          p.id === id ? { ...p, published: !currentStatus } : p,
+        ),
+      );
+      toast.success(
+        currentStatus ? "Article unpublished" : "Article published",
+      );
+      router.refresh();
+    } catch (error) {
+      toast.error("Failed to update article");
+    }
+  };
 
-        setIsDeleting(id);
-        try {
-            const res = await fetch(`/api/tenant-admin/posts/${id}`, {
-                method: 'DELETE',
-            });
+  const handleDelete = async (id: string) => {
+    if (!confirm("Are you sure you want to delete this article?")) return;
 
-            if (!res.ok) throw new Error('Failed to delete');
+    setIsDeleting(id);
+    try {
+      const res = await fetch(`/api/tenant-admin/posts/${id}`, {
+        method: "DELETE",
+      });
 
-            setPosts(posts.filter(p => p.id !== id));
-            toast.success('Article deleted');
-            router.refresh();
-        } catch (error) {
-            toast.error('Failed to delete article');
-        } finally {
-            setIsDeleting(null);
-        }
-    };
+      if (!res.ok) throw new Error("Failed to delete");
 
-    if (posts.length === 0) {
-        return (
-            <div className="text-center py-12 border rounded-lg bg-muted/10">
-                <h3 className="text-lg font-semibold">No articles yet</h3>
-                <p className="text-muted-foreground mb-4">Get started by creating your first post.</p>
-                <Link href="/tenant-admin/the-wire/new">
-                    <Button variant="outline">Create Article</Button>
-                </Link>
-            </div>
-        );
+      setPosts(posts.filter((p) => p.id !== id));
+      toast.success("Article deleted");
+      router.refresh();
+    } catch (error) {
+      toast.error("Failed to delete article");
+    } finally {
+      setIsDeleting(null);
     }
+  };
 
+  if (posts.length === 0) {
     return (
-        <div className="border rounded-md overflow-x-auto">
-            <Table>
-                <TableHeader>
-                    <TableRow>
-                        <TableHead>Title</TableHead>
-                        <TableHead>Status</TableHead>
-                        <TableHead className="hidden sm:table-cell">Author</TableHead>
-                        <TableHead className="hidden sm:table-cell">Date</TableHead>
-                        <TableHead className="text-right">Actions</TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {posts.map((post) => (
-                        <TableRow key={post.id}>
-                            <TableCell className="font-medium">
-                                <div className="min-w-0">
-                                    <span className="block truncate max-w-[150px] sm:max-w-[250px]">{post.title}</span>
-                                    <div className="text-xs text-muted-foreground truncate max-w-[150px] sm:max-w-[200px]">
-                                        /{post.slug}
-                                    </div>
-                                    {/* Show author/date on mobile */}
-                                    <div className="sm:hidden text-xs text-muted-foreground mt-1">
-                                        {post.author?.name || 'Unknown'} • {format(new Date(post.createdAt), 'MMM d')}
-                                    </div>
-                                </div>
-                            </TableCell>
-                            <TableCell>
-                                <Badge variant={post.published ? 'default' : 'secondary'}>
-                                    {post.published ? 'Published' : 'Draft'}
-                                </Badge>
-                            </TableCell>
-                            <TableCell className="hidden sm:table-cell">{post.author?.name || 'Unknown'}</TableCell>
-                            <TableCell className="hidden sm:table-cell">
-                                {format(new Date(post.createdAt), 'MMM d, yyyy')}
-                            </TableCell>
-                            <TableCell className="text-right">
-                                <div className="flex items-center justify-end gap-1">
-                                    <Link href={`/tenant-admin/the-wire/${post.id}`} passHref>
-                                        <Button variant="ghost" size="icon" title="Edit article">
-                                            <Edit className="h-4 w-4" />
-                                        </Button>
-                                    </Link>
-                                    <Button
-                                        variant="ghost"
-                                        size="icon"
-                                        onClick={() => handleTogglePublish(post.id, post.published)}
-                                        title={post.published ? 'Unpublish article' : 'Publish article'}
-                                        className={post.published ? 'text-amber-600 hover:text-amber-700' : 'text-green-600 hover:text-green-700'}
-                                    >
-                                        {post.published ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                                    </Button>
-                                    <Button
-                                        variant="ghost"
-                                        size="icon"
-                                        onClick={() => handleDelete(post.id)}
-                                        disabled={isDeleting === post.id}
-                                        className="text-destructive hover:text-destructive/90"
-                                        title="Delete article"
-                                    >
-                                        <Trash2 className="h-4 w-4" />
-                                    </Button>
-                                </div>
-                            </TableCell>
-                        </TableRow>
-                    ))}
-                </TableBody>
-            </Table>
-        </div>
+      <div className="text-center py-12 border rounded-lg bg-muted/10">
+        <h3 className="text-lg font-semibold">No articles yet</h3>
+        <p className="text-muted-foreground mb-4">
+          Get started by creating your first post.
+        </p>
+        <Link href="/tenant-admin/the-wire/new">
+          <Button variant="outline">Create Article</Button>
+        </Link>
+      </div>
     );
+  }
+
+  return (
+    <div className="border rounded-md overflow-x-auto">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Title</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead className="hidden sm:table-cell">Author</TableHead>
+            <TableHead className="hidden sm:table-cell">Date</TableHead>
+            <TableHead className="text-right">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {posts.map((post) => (
+            <TableRow key={post.id}>
+              <TableCell className="font-medium">
+                <div className="min-w-0">
+                  <span className="block truncate max-w-[150px] sm:max-w-[250px]">
+                    {post.title}
+                  </span>
+                  <div className="text-xs text-muted-foreground truncate max-w-[150px] sm:max-w-[200px]">
+                    /{post.slug}
+                  </div>
+                  {/* Show author/date on mobile */}
+                  <div className="sm:hidden text-xs text-muted-foreground mt-1">
+                    {post.author?.name || "Unknown"} •{" "}
+                    {format(new Date(post.createdAt), "MMM d")}
+                  </div>
+                </div>
+              </TableCell>
+              <TableCell>
+                <Badge variant={post.published ? "default" : "secondary"}>
+                  {post.published ? "Published" : "Draft"}
+                </Badge>
+              </TableCell>
+              <TableCell className="hidden sm:table-cell">
+                {post.author?.name || "Unknown"}
+              </TableCell>
+              <TableCell className="hidden sm:table-cell">
+                {format(new Date(post.createdAt), "MMM d, yyyy")}
+              </TableCell>
+              <TableCell className="text-right">
+                <div className="flex items-center justify-end gap-1">
+                  <Link href={`/tenant-admin/the-wire/${post.id}`} passHref>
+                    <Button variant="ghost" size="icon" title="Edit article">
+                      <Edit className="h-4 w-4" />
+                    </Button>
+                  </Link>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => handleTogglePublish(post.id, post.published)}
+                    title={
+                      post.published ? "Unpublish article" : "Publish article"
+                    }
+                    className={
+                      post.published
+                        ? "text-amber-600 hover:text-amber-700"
+                        : "text-green-600 hover:text-green-700"
+                    }
+                  >
+                    {post.published ? (
+                      <EyeOff className="h-4 w-4" />
+                    ) : (
+                      <Eye className="h-4 w-4" />
+                    )}
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => handleDelete(post.id)}
+                    disabled={isDeleting === post.id}
+                    className="text-destructive hover:text-destructive/90"
+                    title="Delete article"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
 }
diff --git a/nextjs_space/app/tenant-admin/webhooks/page.tsx b/nextjs_space/app/tenant-admin/webhooks/page.tsx
index 0517635..9b6b93a 100644
--- a/nextjs_space/app/tenant-admin/webhooks/page.tsx
+++ b/nextjs_space/app/tenant-admin/webhooks/page.tsx
@@ -1,22 +1,43 @@
+"use client";
 
-'use client';
-
-import { useState, useEffect } from 'react';
-import { useSession } from 'next-auth/react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import { Switch } from '@/components/ui/switch';
-import { Badge } from '@/components/ui/badge';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Checkbox } from '@/components/ui/checkbox';
-import { toast } from '@/components/ui/sonner';
-import { Webhook, Plus, Trash2, Edit2, CheckCircle, XCircle, ExternalLink } from 'lucide-react';
-import { WEBHOOK_EVENT_CATEGORIES } from '@/lib/webhook';
-import { Breadcrumbs } from '@/components/admin/shared';
+import { useState, useEffect } from "react";
+import { useSession } from "next-auth/react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Switch } from "@/components/ui/switch";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Checkbox } from "@/components/ui/checkbox";
+import { toast } from "@/components/ui/sonner";
+import {
+  Webhook,
+  Plus,
+  Trash2,
+  Edit2,
+  CheckCircle,
+  XCircle,
+  ExternalLink,
+} from "lucide-react";
+import { WEBHOOK_EVENT_CATEGORIES } from "@/lib/webhook";
+import { Breadcrumbs } from "@/components/admin/shared";
 
 interface WebhookData {
   id: string;
@@ -37,13 +58,15 @@ export default function WebhooksPage() {
   const [loading, setLoading] = useState(true);
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
   const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
-  const [editingWebhook, setEditingWebhook] = useState<WebhookData | null>(null);
+  const [editingWebhook, setEditingWebhook] = useState<WebhookData | null>(
+    null,
+  );
 
   // Form state
   const [formData, setFormData] = useState({
-    url: '',
+    url: "",
     events: [] as string[],
-    description: '',
+    description: "",
   });
 
   useEffect(() => {
@@ -53,15 +76,15 @@ export default function WebhooksPage() {
   const fetchWebhooks = async () => {
     try {
       setLoading(true);
-      const response = await fetch('/api/tenant-admin/webhooks');
+      const response = await fetch("/api/tenant-admin/webhooks");
       const data = await response.json();
 
       if (response.ok) {
         setWebhooks(data.webhooks);
       }
     } catch (error) {
-      console.error('Failed to fetch webhooks:', error);
-      toast.error('Failed to load webhooks');
+      console.error("Failed to fetch webhooks:", error);
+      toast.error("Failed to load webhooks");
     } finally {
       setLoading(false);
     }
@@ -69,75 +92,78 @@ export default function WebhooksPage() {
 
   const handleCreate = async () => {
     if (!formData.url || formData.events.length === 0) {
-      toast.error('Please fill in all required fields');
+      toast.error("Please fill in all required fields");
       return;
     }
 
     try {
-      const response = await fetch('/api/tenant-admin/webhooks', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+      const response = await fetch("/api/tenant-admin/webhooks", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify(formData),
       });
 
       if (response.ok) {
-        toast.success('Webhook created successfully');
+        toast.success("Webhook created successfully");
         setIsCreateDialogOpen(false);
-        setFormData({ url: '', events: [], description: '' });
+        setFormData({ url: "", events: [], description: "" });
         fetchWebhooks();
       } else {
         const error = await response.json();
-        toast.error(error.error || 'Failed to create webhook');
+        toast.error(error.error || "Failed to create webhook");
       }
     } catch (error) {
-      console.error('Error creating webhook:', error);
-      toast.error('Failed to create webhook');
+      console.error("Error creating webhook:", error);
+      toast.error("Failed to create webhook");
     }
   };
 
-  const handleUpdate = async (webhookId: string, updates: Partial<WebhookData>) => {
+  const handleUpdate = async (
+    webhookId: string,
+    updates: Partial<WebhookData>,
+  ) => {
     try {
       const response = await fetch(`/api/tenant-admin/webhooks/${webhookId}`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify(updates),
       });
 
       if (response.ok) {
-        toast.success('Webhook updated successfully');
+        toast.success("Webhook updated successfully");
         setIsEditDialogOpen(false);
         setEditingWebhook(null);
         fetchWebhooks();
       } else {
         const error = await response.json();
-        toast.error(error.error || 'Failed to update webhook');
+        toast.error(error.error || "Failed to update webhook");
       }
     } catch (error) {
-      console.error('Error updating webhook:', error);
-      toast.error('Failed to update webhook');
+      console.error("Error updating webhook:", error);
+      toast.error("Failed to update webhook");
     }
   };
 
   const handleDelete = async (webhookId: string) => {
-    if (!confirm('Are you sure you want to delete this webhook?')) {
+    if (!confirm("Are you sure you want to delete this webhook?")) {
       return;
     }
 
     try {
       const response = await fetch(`/api/tenant-admin/webhooks/${webhookId}`, {
-        method: 'DELETE',
+        method: "DELETE",
       });
 
       if (response.ok) {
-        toast.success('Webhook deleted successfully');
+        toast.success("Webhook deleted successfully");
         fetchWebhooks();
       } else {
         const error = await response.json();
-        toast.error(error.error || 'Failed to delete webhook');
+        toast.error(error.error || "Failed to delete webhook");
       }
     } catch (error) {
-      console.error('Error deleting webhook:', error);
-      toast.error('Failed to delete webhook');
+      console.error("Error deleting webhook:", error);
+      toast.error("Failed to delete webhook");
     }
   };
 
@@ -159,8 +185,8 @@ export default function WebhooksPage() {
       {/* Breadcrumbs */}
       <Breadcrumbs
         items={[
-          { label: 'Dashboard', href: '/tenant-admin' },
-          { label: 'Webhooks' },
+          { label: "Dashboard", href: "/tenant-admin" },
+          { label: "Webhooks" },
         ]}
         className="mb-4"
       />
@@ -168,10 +194,17 @@ export default function WebhooksPage() {
       <div className="mb-8">
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-3xl font-bold text-slate-900 tracking-tight">Webhooks</h1>
-            <p className="text-slate-600 mt-2">Send real-time event notifications to external systems</p>
+            <h1 className="text-3xl font-bold text-slate-900 tracking-tight">
+              Webhooks
+            </h1>
+            <p className="text-slate-600 mt-2">
+              Send real-time event notifications to external systems
+            </p>
           </div>
-          <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+          <Dialog
+            open={isCreateDialogOpen}
+            onOpenChange={setIsCreateDialogOpen}
+          >
             <DialogTrigger asChild>
               <Button className="bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-700 hover:to-blue-700 text-white font-medium shadow-md hover:shadow-lg transition-all">
                 <Plus className="h-4 w-4 mr-2" />
@@ -182,7 +215,8 @@ export default function WebhooksPage() {
               <DialogHeader>
                 <DialogTitle>Create New Webhook</DialogTitle>
                 <DialogDescription>
-                  Add a webhook endpoint to receive real-time event notifications
+                  Add a webhook endpoint to receive real-time event
+                  notifications
                 </DialogDescription>
               </DialogHeader>
 
@@ -193,7 +227,9 @@ export default function WebhooksPage() {
                     id="url"
                     placeholder="https://example.com/webhook"
                     value={formData.url}
-                    onChange={(e) => setFormData({ ...formData, url: e.target.value })}
+                    onChange={(e) =>
+                      setFormData({ ...formData, url: e.target.value })
+                    }
                   />
                 </div>
 
@@ -203,7 +239,9 @@ export default function WebhooksPage() {
                     id="description"
                     placeholder="e.g., Notify inventory system of stock changes"
                     value={formData.description}
-                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                    onChange={(e) =>
+                      setFormData({ ...formData, description: e.target.value })
+                    }
                   />
                 </div>
 
@@ -215,11 +253,16 @@ export default function WebhooksPage() {
                         <h4 className="font-medium mb-2">{category.name}</h4>
                         <div className="space-y-2 ml-4">
                           {category.events.map((event) => (
-                            <div key={event.value} className="flex items-center space-x-2">
+                            <div
+                              key={event.value}
+                              className="flex items-center space-x-2"
+                            >
                               <Checkbox
                                 id={event.value}
                                 checked={formData.events.includes(event.value)}
-                                onCheckedChange={() => handleEventToggle(event.value)}
+                                onCheckedChange={() =>
+                                  handleEventToggle(event.value)
+                                }
                               />
                               <label
                                 htmlFor={event.value}
@@ -237,13 +280,17 @@ export default function WebhooksPage() {
 
                 <Alert>
                   <AlertDescription>
-                    A unique secret will be generated for this webhook. Use it to verify webhook signatures.
+                    A unique secret will be generated for this webhook. Use it
+                    to verify webhook signatures.
                   </AlertDescription>
                 </Alert>
               </div>
 
               <DialogFooter>
-                <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
+                <Button
+                  variant="outline"
+                  onClick={() => setIsCreateDialogOpen(false)}
+                >
                   Cancel
                 </Button>
                 <Button onClick={handleCreate}>Create Webhook</Button>
@@ -263,7 +310,9 @@ export default function WebhooksPage() {
         <Card>
           <CardContent className="py-12 text-center">
             <Webhook className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
-            <h3 className="text-lg font-semibold mb-2">No webhooks configured</h3>
+            <h3 className="text-lg font-semibold mb-2">
+              No webhooks configured
+            </h3>
             <p className="text-muted-foreground mb-4">
               Create your first webhook to start receiving event notifications
             </p>
@@ -294,7 +343,9 @@ export default function WebhooksPage() {
                         </Badge>
                       )}
                     </div>
-                    <CardDescription>{webhook.description || 'No description'}</CardDescription>
+                    <CardDescription>
+                      {webhook.description || "No description"}
+                    </CardDescription>
                   </div>
                   <div className="flex gap-2">
                     <Button
@@ -302,7 +353,7 @@ export default function WebhooksPage() {
                       size="sm"
                       onClick={() => toggleWebhookActive(webhook)}
                     >
-                      {webhook.isActive ? 'Disable' : 'Enable'}
+                      {webhook.isActive ? "Disable" : "Enable"}
                     </Button>
                     <Button
                       variant="outline"
@@ -317,17 +368,25 @@ export default function WebhooksPage() {
               <CardContent>
                 <div className="space-y-3">
                   <div>
-                    <Label className="text-xs text-muted-foreground">Subscribed Events</Label>
+                    <Label className="text-xs text-muted-foreground">
+                      Subscribed Events
+                    </Label>
                     <div className="flex flex-wrap gap-1 mt-1">
                       {webhook.events.map((event) => (
-                        <Badge key={event} variant="outline" className="text-xs">
+                        <Badge
+                          key={event}
+                          variant="outline"
+                          className="text-xs"
+                        >
                           {event}
                         </Badge>
                       ))}
                     </div>
                   </div>
                   <div>
-                    <Label className="text-xs text-muted-foreground">Webhook Secret</Label>
+                    <Label className="text-xs text-muted-foreground">
+                      Webhook Secret
+                    </Label>
                     <code className="block mt-1 p-2 bg-muted rounded text-xs font-mono">
                       {webhook.secret}
                     </code>
@@ -335,12 +394,19 @@ export default function WebhooksPage() {
                   <div className="flex items-center gap-4 text-sm text-muted-foreground">
                     <span>{webhook._count.deliveries} deliveries</span>
                     <span>•</span>
-                    <span>Created {new Date(webhook.createdAt).toLocaleDateString()}</span>
+                    <span>
+                      Created {new Date(webhook.createdAt).toLocaleDateString()}
+                    </span>
                     <Button
                       variant="link"
                       size="sm"
                       className="h-auto p-0 text-xs"
-                      onClick={() => window.open(`/tenant-admin/webhooks/${webhook.id}/deliveries`, '_blank')}
+                      onClick={() =>
+                        window.open(
+                          `/tenant-admin/webhooks/${webhook.id}/deliveries`,
+                          "_blank",
+                        )
+                      }
                     >
                       View delivery logs
                       <ExternalLink className="h-3 w-3 ml-1" />
@@ -360,8 +426,10 @@ export default function WebhooksPage() {
         </CardHeader>
         <CardContent className="prose prose-sm max-w-none">
           <p>
-            Webhooks send HTTP POST requests to your specified URL when events occur in your dispensary.
-            Each request includes a signature header (<code>X-Webhook-Signature</code>) that you can use to verify authenticity.
+            Webhooks send HTTP POST requests to your specified URL when events
+            occur in your dispensary. Each request includes a signature header (
+            <code>X-Webhook-Signature</code>) that you can use to verify
+            authenticity.
           </p>
           <h4>Example Payload:</h4>
           <pre className="bg-muted p-3 rounded text-xs overflow-x-auto">
@@ -378,7 +446,8 @@ export default function WebhooksPage() {
           </pre>
           <h4>Verifying Signatures:</h4>
           <p>
-            Use the webhook secret to verify the <code>X-Webhook-Signature</code> header using HMAC SHA256.
+            Use the webhook secret to verify the{" "}
+            <code>X-Webhook-Signature</code> header using HMAC SHA256.
           </p>
         </CardContent>
       </Card>