From bc899d6e44fdf9d2b15f94d529c6f598246ae1e7 Mon Sep 17 00:00:00 2001 From: bender Date: Sun, 8 Mar 2026 22:37:13 +0000 Subject: [PATCH] Update src/app/applications/page.tsx --- src/app/applications/page.tsx | 448 +++++++++++++++------------------- 1 file changed, 195 insertions(+), 253 deletions(-) diff --git a/src/app/applications/page.tsx b/src/app/applications/page.tsx index a49b51c..1b80208 100644 --- a/src/app/applications/page.tsx +++ b/src/app/applications/page.tsx @@ -3,16 +3,15 @@ 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"; -import { Briefcase, Clock, CheckCircle, AlertCircle, MapPin, DollarSign, Building2, Calendar, ArrowRight } from "lucide-react"; const navItems = [ { name: "Search Jobs", id: "search" }, - { name: "Post a Job", id: "post-job" }, - { name: "Admin", id: "admin-login" }, + { name: "Post a Job", id: "/post-job" }, + { name: "Applications", id: "/applications" }, { name: "Browse", id: "browse" }, { name: "Contact", id: "contact" }, - { name: "Applications", id: "/applications" }, ]; const footerColumns = [ @@ -20,7 +19,7 @@ const footerColumns = [ title: "Product", items: [ { label: "Search Jobs", href: "/search" }, { label: "Post a Job", href: "/post-job" }, - { label: "Browse by Province", href: "#provinces" }, + { label: "My Applications", href: "/applications" }, { label: "For Employers", href: "#" }, ], }, @@ -46,80 +45,70 @@ interface Application { id: string; jobTitle: string; company: string; - location: string; - salary: string; + status: "pending" | "reviewing" | "accepted" | "rejected"; appliedDate: string; - status: "pending" | "reviewed" | "accepted" | "rejected"; - logoSrc?: string; + lastUpdate: string; + applicantName: string; + email: string; + appliedPosition?: 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: "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: "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: "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: "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: "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: "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: "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: "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"}, + 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"}, ]; -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 [applications, setApplications] = useState(mockApplications); + const [filterStatus, setFilterStatus] = useState("all"); + const [selectedApp, setSelectedApp] = useState(null); - const filteredApplications = statusFilter === "all" - ? mockApplications - : mockApplications.filter(app => app.status === statusFilter); + 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 ( -
-
- {/* Header Section */} -
+
+
+
- -

My Applications

+ + + My Applications +
-

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

+ Track Your Applications +

+

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

- - {/* 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 */} -
-
- -
-
+ {/* 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) => ( + + ))} +
- {/* Application Info */} -
-
-
-

{app.jobTitle}

-

{app.company}

-
- - {getStatusIcon(app.status)} - {getStatusLabel(app.status)} - -
- -
-
- - {app.location} -
-
- - {app.salary} -
-
- - {new Date(app.appliedDate).toLocaleDateString()} -
-
-
- - {/* Arrow Icon */} -
- -
-
-
- )) - )} + {/* Applications List */} +
+ {filteredApplications.length === 0 ? ( +
+

No applications found

-
- - {/* Application Details Panel */} -
- {selectedApplication ? ( -
-
-

{selectedApplication.jobTitle}

-

{selectedApplication.company}

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

Location

-
- -

{selectedApplication.location}

+ ) : ( + 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()}

- -
-

Salary Range

-
- -

{selectedApplication.salary}

-
-
- -
-

Applied Date

-
- -

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

-
-
-
- -
- -
- ) : ( -
- -

Select an application to view details

-
- )} -
+ )) + )}
-
+ + {/* 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()} +

+
+
+
+ +
+
+ + +
+
+
+
+
+ )} +