diff --git a/src/app/applications/page.tsx b/src/app/applications/page.tsx index 5177ce4..a49b51c 100644 --- a/src/app/applications/page.tsx +++ b/src/app/applications/page.tsx @@ -2,43 +2,125 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered"; -import MetricCardTen from "@/components/sections/metrics/MetricCardTen"; -import FeatureBento from "@/components/sections/feature/FeatureBento"; import FooterBase from "@/components/sections/footer/FooterBase"; -import { - Users, - BarChart3, - Shield, - Activity, - TrendingUp, -} from "lucide-react"; +import { useState } from "react"; +import { Briefcase, Clock, CheckCircle, AlertCircle, MapPin, DollarSign, Building2, Calendar, ArrowRight } from "lucide-react"; const navItems = [ - { name: "Dashboard", id: "/admin" }, - { name: "Jobs", id: "/admin#jobs" }, - { name: "Users", id: "/admin#users" }, - { name: "Moderation", id: "/admin#moderation" }, - { name: "Analytics", id: "/admin#analytics" }, + { name: "Search Jobs", id: "search" }, + { name: "Post a Job", id: "post-job" }, + { name: "Admin", id: "admin-login" }, + { name: "Browse", id: "browse" }, + { name: "Contact", id: "contact" }, + { name: "Applications", id: "/applications" }, ]; const footerColumns = [ { - title: "Admin", items: [ - { label: "Dashboard", href: "/admin" }, - { label: "Settings", href: "/admin#settings" }, - { label: "Reports", href: "/admin#reports" }, + title: "Product", items: [ + { label: "Search Jobs", href: "/search" }, + { label: "Post a Job", href: "/post-job" }, + { label: "Browse by Province", href: "#provinces" }, + { label: "For Employers", href: "#" }, ], }, { - title: "Quick Links", items: [ - { label: "Help", href: "#" }, + title: "Company", items: [ + { label: "About Jobee", href: "#about" }, + { label: "Careers", href: "#" }, + { label: "Contact Us", href: "#contact" }, + { label: "Blog", href: "#" }, + ], + }, + { + title: "Resources", items: [ + { label: "Privacy Policy", href: "#" }, + { label: "Terms of Service", href: "#" }, + { label: "FAQ", href: "#" }, { label: "Support", href: "#" }, - { label: "Documentation", href: "#" }, ], }, ]; +interface Application { + id: string; + jobTitle: string; + company: string; + location: string; + salary: string; + appliedDate: string; + status: "pending" | "reviewed" | "accepted" | "rejected"; + logoSrc?: string; +} + +const mockApplications: Application[] = [ + { + id: "1", jobTitle: "Senior React Developer", company: "TechFlow Solutions", location: "Amsterdam, Netherlands", salary: "€65,000 - €80,000", appliedDate: "2025-01-15", status: "reviewed", logoSrc: "https://api.dicebear.com/7.x/initials/svg?seed=TF"}, + { + id: "2", jobTitle: "UX/UI Designer", company: "Creative Studios Amsterdam", location: "Amsterdam, Netherlands", salary: "€50,000 - €65,000", appliedDate: "2025-01-10", status: "accepted", logoSrc: "https://api.dicebear.com/7.x/initials/svg?seed=CSA"}, + { + id: "3", jobTitle: "Full Stack Developer", company: "Innovate Inc", location: "Rotterdam, Netherlands", salary: "€55,000 - €70,000", appliedDate: "2025-01-12", status: "pending", logoSrc: "https://api.dicebear.com/7.x/initials/svg?seed=II"}, + { + id: "4", jobTitle: "Marketing Manager", company: "Digital Growth Partners", location: "Utrecht, Netherlands", salary: "€48,000 - €60,000", appliedDate: "2025-01-08", status: "rejected", logoSrc: "https://api.dicebear.com/7.x/initials/svg?seed=DGP"}, + { + id: "5", jobTitle: "Data Scientist", company: "Analytics Pro", location: "The Hague, Netherlands", salary: "€60,000 - €75,000", appliedDate: "2025-01-05", status: "reviewed", logoSrc: "https://api.dicebear.com/7.x/initials/svg?seed=AP"}, + { + id: "6", jobTitle: "Product Manager", company: "Tech Ventures", location: "Eindhoven, Netherlands", salary: "€65,000 - €85,000", appliedDate: "2025-01-02", status: "pending", logoSrc: "https://api.dicebear.com/7.x/initials/svg?seed=TV"}, +]; + +const getStatusColor = (status: string) => { + switch (status) { + case "accepted": + return "bg-green-100 text-green-800"; + case "rejected": + return "bg-red-100 text-red-800"; + case "reviewed": + return "bg-blue-100 text-blue-800"; + case "pending": + return "bg-yellow-100 text-yellow-800"; + default: + return "bg-gray-100 text-gray-800"; + } +}; + +const getStatusIcon = (status: string) => { + switch (status) { + case "accepted": + return ; + case "rejected": + return ; + case "reviewed": + return ; + case "pending": + return ; + default: + return ; + } +}; + +const getStatusLabel = (status: string) => { + switch (status) { + case "accepted": + return "Accepted"; + case "rejected": + return "Rejected"; + case "reviewed": + return "Under Review"; + case "pending": + return "Pending"; + default: + return status; + } +}; + export default function ApplicationsPage() { + const [selectedApplication, setSelectedApplication] = useState(null); + const [statusFilter, setStatusFilter] = useState("all"); + + const filteredApplications = statusFilter === "all" + ? mockApplications + : mockApplications.filter(app => app.status === statusFilter); + return ( -
- -
+
+
+ {/* Header Section */} +
+
+ +

My Applications

+
+

+ Track and manage all your job applications in one place. Monitor your application status and stay updated on opportunities. +

+ + {/* Status Filter */} +
+ + + + + +
+
+ + {/* Applications Grid */} +
+ {/* Application List */} +
+
+ {filteredApplications.length === 0 ? ( +
+ +

No applications found with this status.

+
+ ) : ( + filteredApplications.map((app) => ( +
setSelectedApplication(app)} + className={`bg-card border border-accent/20 rounded-2xl p-6 cursor-pointer transition-all hover:border-accent/50 hover:shadow-lg ${ + selectedApplication?.id === app.id ? "border-primary-cta" : "" + }`} + > +
+ {/* Company Logo */} +
+
+ +
+
+ + {/* Application Info */} +
+
+
+

{app.jobTitle}

+

{app.company}

+
+ + {getStatusIcon(app.status)} + {getStatusLabel(app.status)} + +
+ +
+
+ + {app.location} +
+
+ + {app.salary} +
+
+ + {new Date(app.appliedDate).toLocaleDateString()} +
+
+
+ + {/* Arrow Icon */} +
+ +
+
+
+ )) + )} +
+
+ + {/* Application Details Panel */} +
+ {selectedApplication ? ( +
+
+

{selectedApplication.jobTitle}

+

{selectedApplication.company}

+ + {getStatusIcon(selectedApplication.status)} + {getStatusLabel(selectedApplication.status)} + +
+ +
+
+

Location

+
+ +

{selectedApplication.location}

+
+
+ +
+

Salary Range

+
+ +

{selectedApplication.salary}

+
+
+ +
+

Applied Date

+
+ +

{new Date(selectedApplication.appliedDate).toLocaleDateString()}

+
+
+
+ +
+ + +
+
+ ) : ( +
+ +

Select an application to view details

+
+ )} +
+
+
+