Update src/app/admin-dashboard/page.tsx

Merge version_5 into main

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,47 @@ 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"
-            }
-          ]}
-        />
+          <h2 className="mb-4 text-3xl font-bold tracking-tight lg:text-4xl">Applicant Overview</h2>
+          <p className="mb-8 text-lg text-gray-600 dark:text-gray-400">
+            Browse and filter applicants by name or payment status.
+          </p>
+          <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."
+            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>

src/app/application-form/page.tsx

@@ -23,12 +23,11 @@ export default function ApplicationFormPage() {
     { name: "Services", id: "/#services" },
     { name: "Team", id: "/#team" },
     { name: "Testimonials", id: "/#testimonials" },
-    { name: "Contact", id: "/#contact" },
-    { name: "Apply Now", id: "/application-form" }
+    { name: "Contact", id: "/#contact" }
   ];
 
-  // Footer columns for FooterSimple, adjusted to link back to homepage sections
-  const applicationFormFooterColumns = [
+  // Footer columns for FooterSimple, adjusted for consistency
+  const commonFooterColumns = [
     {
       title: "Company",      items: [
         { label: "About Us", href: "/#about" },
@@ -129,6 +128,56 @@ export default function ApplicationFormPage() {
                       className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
                     />
                   </div>
+                  <div className="md:col-span-2"> {/* Street Address takes full width */}
+                    <label htmlFor="streetAddress" className="block text-sm font-medium text-foreground mb-2">Street Address</label>
+                    <input
+                      type="text"
+                      id="streetAddress"
+                      name="streetAddress"
+                      required
+                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="city" className="block text-sm font-medium text-foreground mb-2">City</label>
+                    <input
+                      type="text"
+                      id="city"
+                      name="city"
+                      required
+                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="stateProvince" className="block text-sm font-medium text-foreground mb-2">State/Province</label>
+                    <input
+                      type="text"
+                      id="stateProvince"
+                      name="stateProvince"
+                      required
+                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="postalCode" className="block text-sm font-medium text-foreground mb-2">Postal Code</label>
+                    <input
+                      type="text"
+                      id="postalCode"
+                      name="postalCode"
+                      required
+                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="country" className="block text-sm font-medium text-foreground mb-2">Country</label>
+                    <input
+                      type="text"
+                      id="country"
+                      name="country"
+                      required
+                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    />
+                  </div>
                 </div>
               </div>
 
@@ -136,6 +185,33 @@ export default function ApplicationFormPage() {
               <div>
                 <h2 className="text-2xl font-semibold text-foreground mb-4">Employment Information</h2>
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div>
+                    <label htmlFor="employmentStatus" className="block text-sm font-medium text-foreground mb-2">Employment Status</label>
+                    <select
+                      id="employmentStatus"
+                      name="employmentStatus"
+                      required
+                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    >
+                      <option value="">Select status</option>
+                      <option value="employed">Employed</option>
+                      <option value="self-employed">Self-employed</option>
+                      <option value="unemployed">Unemployed</option>
+                      <option value="student">Student</option>
+                      <option value="retired">Retired</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label htmlFor="monthlyIncome" className="block text-sm font-medium text-foreground mb-2">Monthly Income (AED)</label>
+                    <input
+                      type="number"
+                      id="monthlyIncome"
+                      name="monthlyIncome"
+                      required
+                      min="0"
+                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    />
+                  </div>
                   <div>
                     <label htmlFor="occupation" className="block text-sm font-medium text-foreground mb-2">Occupation</label>
                     <input
@@ -156,34 +232,36 @@ export default function ApplicationFormPage() {
                       className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
                     />
                   </div>
-                  <div className="md:col-span-2">
-                    <label htmlFor="annualIncome" className="block text-sm font-medium text-foreground mb-2">Annual Income (AED)</label>
-                    <input
-                      type="number"
-                      id="annualIncome"
-                      name="annualIncome"
-                      required
-                      min="0"
-                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
-                    />
-                  </div>
                 </div>
               </div>
 
               {/* Document Upload */}
               <div>
                 <h2 className="text-2xl font-semibold text-foreground mb-4">Document Upload</h2>
-                <p className="text-sm text-foreground/80 mb-4">Please upload necessary documents (e.g., ID, proof of income). Max file size 5MB per file.</p>
-                <div>
-                  <label htmlFor="documents" className="block text-sm font-medium text-foreground mb-2">Upload Documents</label>
-                  <input
-                    type="file"
-                    id="documents"
-                    name="documents"
-                    multiple
-                    accept=".pdf,.doc,.docx,.jpg,.png"
-                    className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-primary-cta file:text-white hover:file:bg-primary-cta/90"
-                  />
+                <p className="text-sm text-foreground/80 mb-4">Please upload necessary documents (Max file size 5MB per file).</p>
+                <div className="space-y-4">
+                  <div>
+                    <label htmlFor="idDocument" className="block text-sm font-medium text-foreground mb-2">ID Document (e.g., Passport, Emirates ID)</label>
+                    <input
+                      type="file"
+                      id="idDocument"
+                      name="idDocument"
+                      required
+                      accept=".pdf,.jpg,.jpeg,.png"
+                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-primary-cta file:text-white hover:file:bg-primary-cta/90"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="proofOfIncome" className="block text-sm font-medium text-foreground mb-2">Proof of Income (e.g., Salary Certificate, Bank Statement)</label>
+                    <input
+                      type="file"
+                      id="proofOfIncome"
+                      name="proofOfIncome"
+                      required
+                      accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
+                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-primary-cta file:text-white hover:file:bg-primary-cta/90"
+                    />
+                  </div>
                 </div>
               </div>
 
@@ -216,7 +294,7 @@ export default function ApplicationFormPage() {
 
       <div id="footer" data-section="footer">
         <FooterSimple
-          columns={applicationFormFooterColumns}
+          columns={commonFooterColumns}
           bottomLeftText="© 2025 Luxe Properties Dubai. All rights reserved."
           bottomRightText="Luxury Real Estate Excellence"
         />

src/app/page.tsx

@@ -247,7 +247,7 @@ export default function LandingPage() {
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
           buttons={[
-            { text: "Schedule Consultation", href: "#" },
+            { text: "Get Expert Guidance Now", href: "#" },
             { text: "Browse Listings", href: "#properties" }
           ]}
         />