Update src/app/admin-dashboard/page.tsx
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user