From c2dae3421e4623f12b70a084c706e4d841c97ec1 Mon Sep 17 00:00:00 2001 From: bender Date: Sun, 8 Mar 2026 22:38:52 +0000 Subject: [PATCH] Add src/app/applications/page.tsx --- src/app/applications/page.tsx | 298 ++++++++++++++++++++++++++++++++++ 1 file changed, 298 insertions(+) create mode 100644 src/app/applications/page.tsx diff --git a/src/app/applications/page.tsx b/src/app/applications/page.tsx new file mode 100644 index 0000000..1b80208 --- /dev/null +++ b/src/app/applications/page.tsx @@ -0,0 +1,298 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered"; +import FooterBase from "@/components/sections/footer/FooterBase"; +import { FileText, Clock, CheckCircle, XCircle, Mail } from "lucide-react"; +import { useState } from "react"; + +const navItems = [ + { name: "Search Jobs", id: "search" }, + { name: "Post a Job", id: "/post-job" }, + { name: "Applications", id: "/applications" }, + { name: "Browse", id: "browse" }, + { name: "Contact", id: "contact" }, +]; + +const footerColumns = [ + { + title: "Product", items: [ + { label: "Search Jobs", href: "/search" }, + { label: "Post a Job", href: "/post-job" }, + { label: "My Applications", href: "/applications" }, + { label: "For Employers", 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: "#" }, + ], + }, +]; + +interface Application { + id: string; + jobTitle: string; + company: string; + status: "pending" | "reviewing" | "accepted" | "rejected"; + appliedDate: string; + lastUpdate: string; + applicantName: string; + email: string; + appliedPosition?: string; +} + +const mockApplications: Application[] = [ + { + id: "1", jobTitle: "Senior Frontend Developer", company: "Tech Innovations BV", status: "reviewing", appliedDate: "2025-01-15", lastUpdate: "2025-01-18", applicantName: "John Doe", email: "john.doe@example.com"}, + { + id: "2", jobTitle: "Product Manager", company: "Digital Solutions Inc", status: "pending", appliedDate: "2025-01-20", lastUpdate: "2025-01-20", applicantName: "Jane Smith", email: "jane.smith@example.com"}, + { + id: "3", jobTitle: "UX/UI Designer", company: "Creative Studio Amsterdam", status: "accepted", appliedDate: "2025-01-10", lastUpdate: "2025-01-17", applicantName: "Alice Johnson", email: "alice.johnson@example.com"}, + { + id: "4", jobTitle: "Data Scientist", company: "AI Labs Netherlands", status: "rejected", appliedDate: "2025-01-05", lastUpdate: "2025-01-16", applicantName: "Bob Wilson", email: "bob.wilson@example.com"}, + { + id: "5", jobTitle: "Backend Developer", company: "Cloud Systems Ltd", status: "reviewing", appliedDate: "2025-01-12", lastUpdate: "2025-01-19", applicantName: "Charlie Brown", email: "charlie.brown@example.com"}, +]; + +export default function ApplicationsPage() { + const [applications, setApplications] = useState(mockApplications); + const [filterStatus, setFilterStatus] = useState("all"); + const [selectedApp, setSelectedApp] = useState(null); + + const filteredApplications = + filterStatus === "all" + ? applications + : applications.filter((app) => app.status === filterStatus); + + const getStatusIcon = (status: string) => { + switch (status) { + case "pending": + return ; + case "reviewing": + return ; + case "accepted": + return ; + case "rejected": + return ; + default: + return null; + } + }; + + const getStatusBadgeColor = (status: string) => { + switch (status) { + case "pending": + return "bg-yellow-100 text-yellow-800"; + case "reviewing": + return "bg-blue-100 text-blue-800"; + case "accepted": + return "bg-green-100 text-green-800"; + case "rejected": + return "bg-red-100 text-red-800"; + default: + return "bg-slate-100 text-slate-800"; + } + }; + + const getStatusLabel = (status: string) => { + return status.charAt(0).toUpperCase() + status.slice(1); + }; + + return ( + + + +
+
+
+
+ + + My Applications + +
+

+ Track Your Applications +

+

+ Monitor the status of all your job applications and stay updated on each + opportunity. +

+
+ + {/* Filter Tabs */} +
+ {[ + { label: "All", value: "all", count: applications.length }, + { + label: "Pending", value: "pending", count: applications.filter((a) => a.status === "pending").length, + }, + { + label: "Reviewing", value: "reviewing", count: applications.filter((a) => a.status === "reviewing").length, + }, + { + label: "Accepted", value: "accepted", count: applications.filter((a) => a.status === "accepted").length, + }, + { + label: "Rejected", value: "rejected", count: applications.filter((a) => a.status === "rejected").length, + }, + ].map((filter) => ( + + ))} +
+ + {/* Applications List */} +
+ {filteredApplications.length === 0 ? ( +
+

No applications found

+
+ ) : ( + filteredApplications.map((app) => ( +
setSelectedApp(app)} + > +
+
+
+

{app.jobTitle}

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

{app.company}

+
+

Applied: {new Date(app.appliedDate).toLocaleDateString()}

+

Last Update: {new Date(app.lastUpdate).toLocaleDateString()}

+
+
+
+
+ )) + )} +
+
+ + {/* Detail Modal */} + {selectedApp && ( +
+
+
+
+
+

+ {selectedApp.jobTitle} +

+

{selectedApp.company}

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

Applicant Name

+

{selectedApp.applicantName}

+
+
+

Email Address

+

{selectedApp.email}

+
+
+
+

Applied Date

+

+ {new Date(selectedApp.appliedDate).toLocaleDateString()} +

+
+
+

Last Update

+

+ {new Date(selectedApp.lastUpdate).toLocaleDateString()} +

+
+
+
+ +
+
+ + +
+
+
+
+
+ )} +
+ + + + ); +}