From 244014f33a94cbe767961d12ac6113d4cc48d747 Mon Sep 17 00:00:00 2001
From: g <g@paki.email>
Date: Mon, 12 Jan 2026 07:33:16 +0000
Subject: [PATCH] Improve admin UI and vendor invite experience

Enhanced the admin dashboard tab styling for better clarity. Refactored InviteVendorCard with improved UI, feedback, and clipboard copy functionality. Fixed vendor store ID update to send raw object instead of JSON string. Ensured product price formatting is robust against non-numeric values.
---
 app/dashboard/admin/page.tsx          |   4 +-
 app/dashboard/admin/vendors/page.tsx  |   2 +-
 components/admin/InviteVendorCard.tsx | 101 ++++++++++++++++++++------
 components/dashboard/content.tsx      |   2 +-
 4 files changed, 84 insertions(+), 25 deletions(-)

diff --git a/app/dashboard/admin/page.tsx b/app/dashboard/admin/page.tsx
index 85e4661..def9a4e 100644
--- a/app/dashboard/admin/page.tsx
+++ b/app/dashboard/admin/page.tsx
@@ -403,11 +403,12 @@ export default function AdminPage() {
       </div>
 
       <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
-        <TabsList>
+        <TabsList className="bg-muted/20 p-1 border border-border/40 backdrop-blur-sm h-auto">
           <TabsTrigger
             value="analytics"
             onMouseEnter={() => handleTabHover("analytics")}
             onFocus={() => handleTabFocus("analytics")}
+            className="data-[state=active]:bg-background/80 data-[state=active]:backdrop-blur-sm data-[state=active]:text-foreground data-[state=active]:shadow-sm px-6 py-2 transition-all"
           >
             Analytics
           </TabsTrigger>
@@ -415,6 +416,7 @@ export default function AdminPage() {
             value="management"
             onMouseEnter={() => handleTabHover("management")}
             onFocus={() => handleTabFocus("management")}
+            className="data-[state=active]:bg-background/80 data-[state=active]:backdrop-blur-sm data-[state=active]:text-foreground data-[state=active]:shadow-sm px-6 py-2 transition-all"
           >
             Management
           </TabsTrigger>
diff --git a/app/dashboard/admin/vendors/page.tsx b/app/dashboard/admin/vendors/page.tsx
index cfc2c09..48bff9e 100644
--- a/app/dashboard/admin/vendors/page.tsx
+++ b/app/dashboard/admin/vendors/page.tsx
@@ -61,7 +61,7 @@ export default function AdminVendorsPage() {
       setUpdating(true);
       await fetchClient(`/admin/vendors/${editingVendor._id}/store-id`, {
         method: 'PUT',
-        body: JSON.stringify({ storeId: newStoreId })
+        body: { storeId: newStoreId }
       });
 
       toast({
diff --git a/components/admin/InviteVendorCard.tsx b/components/admin/InviteVendorCard.tsx
index b7295b6..0732f58 100644
--- a/components/admin/InviteVendorCard.tsx
+++ b/components/admin/InviteVendorCard.tsx
@@ -1,47 +1,104 @@
-"use client";
 import { useState } from "react";
 import { fetchClient } from "@/lib/api-client";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Copy, Check, Ticket, Loader2, RefreshCw } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
 
 export default function InviteVendorCard() {
   const [loading, setLoading] = useState(false);
-  const [message, setMessage] = useState<string | null>(null);
   const [code, setCode] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const { toast } = useToast();
 
   async function handleInvite() {
     setLoading(true);
-    setMessage(null);
     setCode(null);
+    setCopied(false);
     try {
       const res = await fetchClient<{ code: string }>("/admin/invitations", { method: "POST" });
-      setMessage("Invitation created");
       setCode(res.code);
+      toast({
+        title: "Invitation Created",
+        description: "New vendor invitation code generated successfully.",
+      });
     } catch (e: any) {
-      setMessage(e?.message || "Failed to send invitation");
+      toast({
+        title: "Error",
+        description: e?.message || "Failed to generate invitation",
+        variant: "destructive",
+      });
     } finally {
       setLoading(false);
     }
   }
 
+  const copyToClipboard = () => {
+    if (!code) return;
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    toast({
+      title: "Copied",
+      description: "Invitation code copied to clipboard",
+    });
+    setTimeout(() => setCopied(false), 2000);
+  };
+
   return (
-    <div className="rounded-lg border border-border/60 bg-background p-4 h-full min-h-[200px]">
-      <h2 className="font-medium">Invite Vendor</h2>
-      <p className="text-sm text-muted-foreground mt-1">Generate a new invitation code</p>
-      <div className="mt-4 space-y-3">
-        <button
-          onClick={handleInvite}
-          className="inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm text-primary-foreground disabled:opacity-60"
-          disabled={loading}
-        >
-          {loading ? "Generating..." : "Generate Invite Code"}
-        </button>
-        {message && <p className="text-xs text-muted-foreground">{message}</p>}
-        {code && (
-          <div className="text-sm">
-            Code: <span className="font-mono px-1.5 py-0.5 rounded bg-muted">{code}</span>
+    <Card className="h-full border-border/40 bg-background/50 backdrop-blur-sm shadow-sm flex flex-col">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base font-medium flex items-center gap-2">
+            <Ticket className="h-4 w-4 text-primary" />
+            Invite Vendor
+          </CardTitle>
+        </div>
+        <CardDescription>Generate a one-time invitation code.</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 flex flex-col justify-center gap-4">
+        {code ? (
+          <div className="space-y-3 animate-in fade-in zoom-in-95 duration-300">
+            <div className="p-3 rounded-md bg-muted/50 border border-border/50 text-center relative group">
+              <span className="font-mono text-xl font-bold tracking-widest text-primary">{code}</span>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="absolute right-1 top-1 h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
+                onClick={copyToClipboard}
+              >
+                {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+              </Button>
+            </div>
+            <p className="text-xs text-center text-muted-foreground">
+              Share this code with the new vendor. It expires in 7 days.
+            </p>
+          </div>
+        ) : (
+          <div className="text-center py-2 text-sm text-muted-foreground/80">
+            Click generate to create a new code.
           </div>
         )}
-      </div>
-    </div>
+      </CardContent>
+      <CardFooter className="pt-0">
+        <Button
+          onClick={handleInvite}
+          disabled={loading}
+          className="w-full bg-primary/90 hover:bg-primary shadow-sm"
+        >
+          {loading ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Generating...
+            </>
+          ) : (
+            <>
+              {code ? <RefreshCw className="mr-2 h-4 w-4" /> : <Ticket className="mr-2 h-4 w-4" />}
+              {code ? "Generate Another" : "Generate Code"}
+            </>
+          )}
+        </Button>
+      </CardFooter>
+    </Card>
   );
 }
 
diff --git a/components/dashboard/content.tsx b/components/dashboard/content.tsx
index de89b0b..f8f9c62 100644
--- a/components/dashboard/content.tsx
+++ b/components/dashboard/content.tsx
@@ -181,7 +181,7 @@ export default function Content({ username, orderStats }: ContentProps) {
                       <div className="flex-grow min-w-0">
                         <h4 className="font-semibold text-lg truncate group-hover:text-primary transition-colors">{product.name}</h4>
                         <div className="flex items-center gap-3 mt-0.5">
-                          <span className="text-sm text-muted-foreground font-medium">£{product.price.toFixed(2)}</span>
+                          <span className="text-sm text-muted-foreground font-medium">£{(Number(product.price) || 0).toFixed(2)}</span>
                           <span className="h-1 w-1 rounded-full bg-muted-foreground/30" />
                           <span className="text-xs text-muted-foreground">ID: {product.id.slice(-6)}</span>
                         </div>