From c9d56741947eef8ff762010f39a73d10d7b34807 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 25 Mar 2026 22:20:18 +0000
Subject: [PATCH] Update src/app/admin-dashboard/page.tsx

---
 src/app/admin-dashboard/page.tsx | 252 ++++++++++++++-----------------
 1 file changed, 115 insertions(+), 137 deletions(-)

diff --git a/src/app/admin-dashboard/page.tsx b/src/app/admin-dashboard/page.tsx
index b9d0d95..b263e09 100644
--- a/src/app/admin-dashboard/page.tsx
+++ b/src/app/admin-dashboard/page.tsx
@@ -1,14 +1,94 @@
 "use client";
 
+import { useState, useMemo } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
-import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { UserRound, FileText, Banknote, Shield, LayoutDashboard } from "lucide-react";
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
 
 export default function AdminDashboardPage() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [paymentFilter, setPaymentFilter] = useState("All");
+
+  const applicants = useMemo(() => [
+    {
+      id: "app-1",      name: "John Doe",      category: "Paid",      price: "$100", // Application Fee
+      rating: 5, // Approval rating
+      reviewCount: "5 documents",      imageSrc: "https://images.unsplash.com/photo-1535713875002-d1d0cfdce53c?auto=format&fit=crop&q=80&w=1780&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", // Example profile pic
+      imageAlt: "John Doe profile",      onProductClick: () => alert("Viewing John Doe's details"),
+    },
+    {
+      id: "app-2",      name: "Jane Smith",      category: "Pending",      price: "$100",      rating: 3,
+      reviewCount: "3 documents",      imageSrc: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&q=80&w=1780&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",      imageAlt: "Jane Smith profile",      onProductClick: () => alert("Viewing Jane Smith's details"),
+    },
+    {
+      id: "app-3",      name: "Robert Brown",      category: "Paid",      price: "$100",      rating: 4,
+      reviewCount: "4 documents",      imageSrc: "https://images.unsplash.com/photo-1507003211169-e69fe254fe58?auto=format&fit=crop&q=80&w=1887&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",      imageAlt: "Robert Brown profile",      onProductClick: () => alert("Viewing Robert Brown's details"),
+    },
+    {
+      id: "app-4",      name: "Emily White",      category: "Rejected",      price: "$100",      rating: 1,
+      reviewCount: "2 documents",      imageSrc: "https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&q=80&w=1961&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",      imageAlt: "Emily White profile",      onProductClick: () => alert("Viewing Emily White's details"),
+    },
+    {
+      id: "app-5",      name: "Michael Green",      category: "Paid",      price: "$100",      rating: 5,
+      reviewCount: "6 documents",      imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=1887&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",      imageAlt: "Michael Green profile",      onProductClick: () => alert("Viewing Michael Green's details"),
+    },
+  ], []);
+
+  const filteredApplicants = useMemo(() => {
+    return applicants.filter((applicant) => {
+      const matchesSearch = applicant.name.toLowerCase().includes(searchTerm.toLowerCase());
+      const matchesFilter = paymentFilter === "All" || applicant.category === paymentFilter;
+      return matchesSearch && matchesFilter;
+    });
+  }, [applicants, searchTerm, paymentFilter]);
+
+  const navItems = [
+    { name: "Properties", id: "properties" },
+    { name: "About", id: "about" },
+    { name: "Services", id: "services" },
+    { name: "Team", id: "team" },
+    { name: "Testimonials", id: "testimonials" },
+    { name: "Contact", id: "contact" },
+    { name: "Admin Dashboard", id: "/admin-dashboard" }
+  ];
+
+  const footerColumns = [
+    {
+      title: "Company",      items: [
+        { label: "About Us", href: "#about" },
+        { label: "Our Services", href: "#services" },
+        { label: "Executive Team", href: "#team" },
+        { label: "Properties", href: "#properties" },
+        { label: "Contact", href: "#contact" },
+        { label: "Apply Now", href: "/application-form" },
+        { label: "Admin Dashboard", href: "/admin-dashboard" }
+      ]
+    },
+    {
+      title: "Resources",      items: [
+        { label: "Investment Guide", href: "#" },
+        { label: "Market Reports", href: "#" },
+        { label: "FAQ", href: "#" },
+        { label: "Blog", href: "#" }
+      ]
+    },
+    {
+      title: "Legal",      items: [
+        { label: "Privacy Policy", href: "#" },
+        { label: "Terms of Service", href: "#" },
+        { label: "Cookie Policy", href: "#" }
+      ]
+    },
+    {
+      title: "Connect",      items: [
+        { label: "LinkedIn", href: "#" },
+        { label: "Instagram", href: "#" },
+        { label: "WhatsApp", href: "#" }
+      ]
+    }
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -24,147 +104,45 @@ export default function AdminDashboardPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
-          brandName="Luxe Properties Admin"
-          navItems={[
-            { name: "Properties", id: "properties" },
-            { name: "About", id: "about" },
-            { name: "Services", id: "services" },
-            { name: "Team", id: "team" },
-            { name: "Testimonials", id: "testimonials" },
-            { name: "Contact", id: "contact" },
-            { name: "Apply Now", id: "/application-form" },
-            { name: "Admin Dashboard", id: "/admin-dashboard" }
-          ]}
-          button={{ text: "View Site", href: "/" }}
+          brandName="Luxe Properties"
+          navItems={navItems}
+          button={{ text: "Apply Now", href: "/application-form" }}
         />
       </div>
 
-      <div id="dashboard-hero" data-section="dashboard-hero" className="py-20 text-center">
-        <LayoutDashboard className="mx-auto h-16 w-16 text-primary-cta mb-4" />
-        <h1 className="text-5xl font-bold text-foreground mb-4">Admin Dashboard</h1>
-        <p className="text-lg text-foreground/80 max-w-2xl mx-auto">Manage applications, documents, and payments efficiently.</p>
-      </div>
+      <div className="relative isolate min-h-screen py-10 lg:py-16">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <h1 className="mb-8 text-4xl font-bold tracking-tight lg:text-5xl">Admin Dashboard</h1>
+          <p className="mb-12 text-lg text-gray-600 dark:text-gray-400">
+            Manage applicants, view documents, and track payment statuses.
+          </p>
 
-      <div id="applicants" data-section="applicants">
-        <FeatureCardTwentyFour
-          title="Applicant List"
-          description="View and manage all property applications, track their status, and review details."
-          tag="Applications"
-          tagIcon={UserRound}
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground={true}
-          features={[
-            {
-              id: "1",              title: "John Doe",              author: "Application ID: #001",              description: "Interested in Palm Jumeirah Villa. Initial contact made.",              tags: ["New", "Approved", "Pending Payment"],
-              imageSrc: "https://img.b2bpic.net/free-photo/young-businessman-with-clipboard_1098-602.jpg",              imageAlt: "John Doe Profile"
-            },
-            {
-              id: "2",              title: "Jane Smith",              author: "Application ID: #002",              description: "Downtown Dubai Penthouse. Document review in progress.",              tags: ["In Review", "Pending Documents"],
-              imageSrc: "https://img.b2bpic.net/free-photo/attractive-satisfied-young-female-entrepreneur-standing-proud-smiling-with-crossed-hands-confident_197531-23012.jpg?id=13871705",              imageAlt: "Jane Smith Profile"
-            },
-            {
-              id: "3",              title: "Robert Johnson",              author: "Application ID: #003",              description: "Emirates Hills Townhouse. Payment confirmation pending.",              tags: ["Ready for Payment", "Approved"],
-              imageSrc: "https://img.b2bpic.net/free-photo/business-people-using-digital-tablet-airport_107420-95868.jpg",              imageAlt: "Robert Johnson Profile"
-            }
-          ]}
-        />
-      </div>
-
-      <div id="documents" data-section="documents">
-        <FeatureCardThree
-          title="Document Management"
-          description="Organize and track all application-related documents including IDs, financial statements, and contracts."
-          tag="Documents"
-          tagIcon={FileText}
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground={false}
-          gridVariant="three-columns-all-equal-width"
-          carouselMode="buttons"
-          features={[
-            {
-              id: "doc1",              title: "Passport Scans",              description: "Submitted by John Doe, Jane Smith.",              imageSrc: "https://img.b2bpic.net/free-photo/identity-document-passport-citizenship-concept_53876-133994.jpg",              imageAlt: "Passport document icon"
-            },
-            {
-              id: "doc2",              title: "Financial Statements",              description: "Received for Jane Smith, Robert Johnson.",              imageSrc: "https://img.b2bpic.net/free-photo/man-using-calculator_53876-14185.jpg",              imageAlt: "Financial document icon"
-            },
-            {
-              id: "doc3",              title: "Purchase Agreements",              description: "Drafts for John Doe, finalized for Jane Smith.",              imageSrc: "https://img.b2bpic.net/free-photo/young-man-holding-paper-his-hand_23-2147690623.jpg",              imageAlt: "Agreement document icon"
-            }
-          ]}
-        />
-      </div>
-
-      <div id="payments" data-section="payments">
-        <MetricCardThree
-          title="Payment Status Overview"
-          description="Track payment statuses for all applicants and manage financial transactions."
-          tag="Payments"
-          tagIcon={Banknote}
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground={true}
-          metrics={[
-            {
-              id: "p1",              icon: Banknote,
-              title: "Pending Payments",              value: "AED 5.2M"
-            },
-            {
-              id: "p2",              icon: Shield,
-              title: "Confirmed Payments",              value: "AED 18.7M"
-            },
-            {
-              id: "p3",              icon: UserRound,
-              title: "Applications Paid",              value: "35"
-            },
-            {
-              id: "p4",              icon: FileText,
-              title: "Overdue Payments",              value: "AED 0"
-            }
-          ]}
-        />
+          <ProductCatalog
+            layout="page"
+            products={filteredApplicants}
+            searchValue={searchTerm}
+            onSearchChange={setSearchTerm}
+            searchPlaceholder="Search applicants..."
+            filters={[
+              {
+                label: "Payment Status",                options: ["All", "Paid", "Pending", "Rejected"],
+                selected: paymentFilter,
+                onChange: setPaymentFilter,
+              },
+            ]}
+            emptyMessage="No applicants found matching your criteria."
+            title="Applicant Overview"
+            description="Browse and filter applicants by name or payment status."
+            className="pb-10" // Add some padding to the bottom
+          />
+        </div>
       </div>
 
       <div id="footer" data-section="footer">
         <FooterSimple
-          columns={[
-            {
-              title: "Company",              items: [
-                { label: "About Us", href: "#about" },
-                { label: "Our Services", href: "#services" },
-                { label: "Executive Team", href: "#team" },
-                { label: "Properties", href: "#properties" },
-                { label: "Contact", href: "#contact" },
-                { label: "Apply Now", href: "/application-form" },
-                { label: "Admin Dashboard", href: "/admin-dashboard" }
-              ]
-            },
-            {
-              title: "Resources",              items: [
-                { label: "Investment Guide", href: "#" },
-                { label: "Market Reports", href: "#" },
-                { label: "FAQ", href: "#" },
-                { label: "Blog", href: "#" }
-              ]
-            },
-            {
-              title: "Legal",              items: [
-                { label: "Privacy Policy", href: "#" },
-                { label: "Terms of Service", href: "#" },
-                { label: "Cookie Policy", href: "#" }
-              ]
-            },
-            {
-              title: "Connect",              items: [
-                { label: "LinkedIn", href: "#" },
-                { label: "Instagram", href: "#" },
-                { label: "WhatsApp", href: "#" }
-              ]
-            }
-          ]}
-          bottomLeftText="© 2025 Luxe Properties Admin. All rights reserved."
-          bottomRightText="Dashboard Management"
+          columns={footerColumns}
+          bottomLeftText="© 2025 Luxe Properties Dubai. All rights reserved."
+          bottomRightText="Luxury Real Estate Excellence"
         />
       </div>
     </ThemeProvider>