Arnab-Afk/nextplacement
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: Refactored the whole ui

Browse Source
This commit is contained in:
Anushlinux
2025-07-03 01:21:40 +05:30
parent ef98f8e1ba
commit 57e25f663b
3 changed files with 73 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
apps/admin/app/(main)/jobs/page.tsx
View File

@@ -19,18 +19,18 @@ export default async function JobsListPage() {
const jobsWithCompany = await getAllJobsWithCompany(); const jobsWithCompany = await getAllJobsWithCompany();
return ( return (
<div className="container mx-auto py-10 space-y-8"> <div className="py-10 space-y-8 bg-[#f8fafc] min-h-screen">
<h1 className="text-3xl font-bold mb-6">All Jobs</h1> <h1 className="text-3xl font-bold mb-6 text-blue-800">All Jobs</h1>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
{jobsWithCompany.length === 0 && ( {jobsWithCompany.length === 0 && (
<p className="text-muted-foreground">No jobs found.</p> <p className="text-gray-400">No jobs found.</p>
)} )}
{jobsWithCompany.map((job) => ( {jobsWithCompany.map((job) => (
<Card key={job.id} className="flex flex-col bg-white text-black border border-gray-200"> <Card key={job.id} className="flex flex-col bg-white text-[#1e293b] border-l-8 border-blue-500 border border-gray-200 shadow-md rounded-2xl">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<span>{job.title}</span> <span>{job.title}</span>
<span className="ml-auto text-xs px-2 py-1 rounded bg-gray-100 border text-gray-600"> <span className={`ml-auto text-xs px-2 py-1 rounded font-semibold ${job.active ? 'bg-blue-100 text-blue-700' : 'bg-red-100 text-red-700'}`}>
{job.active ? 'Active' : 'Inactive'} {job.active ? 'Active' : 'Inactive'}
</span> </span>
</CardTitle> </CardTitle>
@@ -46,23 +46,23 @@ export default async function JobsListPage() {
<div className="text-xs text-gray-500">{job.company?.email}</div> <div className="text-xs text-gray-500">{job.company?.email}</div>
</div> </div>
</div> </div>
<div className="mt-2"> <div className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1 text-sm">
<div className="text-sm"><strong>Location:</strong> {job.location}</div> <div><strong>Location:</strong> {job.location}</div>
<div className="text-sm"><strong>Salary:</strong> {job.salary}</div> <div><strong>Salary:</strong> {job.salary}</div>
<div className="text-sm"><strong>Deadline:</strong> {job.applicationDeadline.toLocaleDateString()}</div> <div><strong>Deadline:</strong> {job.applicationDeadline.toLocaleDateString()}</div>
<div className="text-sm"><strong>Min CGPA:</strong> {job.minCGPA}</div> <div><strong>Min CGPA:</strong> {job.minCGPA}</div>
<div className="text-sm"><strong>Min SSC:</strong> {job.minSSC}</div> <div><strong>Min SSC:</strong> {job.minSSC}</div>
<div className="text-sm"><strong>Min HSC:</strong> {job.minHSC}</div> <div><strong>Min HSC:</strong> {job.minHSC}</div>
<div className="text-sm"><strong>Allow Dead KT:</strong> {job.allowDeadKT ? 'Yes' : 'No'}</div> <div><strong>Dead KT:</strong> {job.allowDeadKT ? 'Yes' : 'No'}</div>
<div className="text-sm"><strong>Allow Live KT:</strong> {job.allowLiveKT ? 'Yes' : 'No'}</div> <div><strong>Live KT:</strong> {job.allowLiveKT ? 'Yes' : 'No'}</div>
<div className="text-sm"><strong>Job Link:</strong> <a href={job.link} target="_blank" rel="noopener noreferrer" className="underline text-primary">{job.link}</a></div>
<div className="text-sm"><strong>Description:</strong> <span className="whitespace-pre-line">{job.description}</span></div>
<div className="text-xs text-gray-400 mt-2">Created: {job.createdAt.toLocaleDateString()} | Updated: {job.updatedAt.toLocaleDateString()}</div>
</div> </div>
<div className="text-sm mt-2"><strong>Job Link:</strong> <a href={job.link} target="_blank" rel="noopener noreferrer" className="underline text-blue-700 hover:text-red-600">{job.link}</a></div>
<div className="text-sm"><strong>Description:</strong> <span className="whitespace-pre-line">{job.description}</span></div>
<div className="text-xs text-gray-400 mt-2">Created: {job.createdAt.toLocaleDateString()} | Updated: {job.updatedAt.toLocaleDateString()}</div>
</CardContent> </CardContent>
<div className="p-4 pt-0 mt-auto flex gap-2"> <div className="p-4 pt-0 mt-auto flex gap-2">
<Link href={`/jobs/${job.id}`}> <Link href={`/jobs/${job.id}`}>
<Button variant="outline" className="bg-white text-primary border-primary">View Details</Button> <Button variant="outline" className="bg-blue-700 text-white border-blue-700 hover:bg-red-600 hover:border-red-600 transition">View Details</Button>
</Link> </Link>
</div> </div>
</Card> </Card>

84
apps/admin/app/(main)/layout.tsx
View File

@@ -1,72 +1,36 @@
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
navigationMenuTriggerStyle,
} from '@workspace/ui/components/navigation-menu';
import Link from 'next/link'; import Link from 'next/link';
const navLinks = [ const navLinks = [
{ href: '/', label: 'Home', icon: '🏠' }, { href: '/', label: 'Dashboard' },
{ href: '/students', label: 'Students', icon: '🎓' }, { href: '/students', label: 'Students' },
{ href: '/jobs', label: 'Jobs', icon: '💼' }, { href: '/jobs', label: 'Jobs' },
]; ];
export default function MainLayout({ children }: { children: React.ReactNode }) { export default function MainLayout({ children }: { children: React.ReactNode }) {
// Helper to check active link (client-side only)
const isActive = (href: string) => {
if (typeof window === 'undefined') return false;
if (href === '/') return window.location.pathname === '/';
return window.location.pathname.startsWith(href);
};
return ( return (
<div className="flex min-h-screen bg-background text-foreground"> <div className="min-h-screen bg-[#f8fafc] font-sans">
{/* Sidebar */} {/* Sticky top navbar */}
<aside className="hidden md:flex flex-col w-64 p-6 gap-8"> <header className="sticky top-0 z-30 w-full bg-[#1e293b] shadow-lg">
<div className="sticky top-8"> <div className="max-w-7xl mx-auto flex items-center justify-between px-6 py-3">
<div className="flex flex-col gap-6 rounded-2xl shadow-xl bg-sidebar border border-sidebar-border p-6"> <div className="flex items-center gap-3">
<div className="flex items-center gap-3 mb-6"> <img src="/favicon.ico" alt="Logo" className="w-9 h-9 rounded-lg shadow" />
<img src="/favicon.ico" alt="Logo" className="w-10 h-10" /> <span className="font-extrabold text-2xl tracking-tight text-white">NextPlacement</span>
<span className="font-extrabold text-xl tracking-tight text-sidebar-primary">Admin Portal</span>
</div>
<div className="text-xs uppercase font-semibold text-muted-foreground mb-2 tracking-widest pl-1">Navigation</div>
<nav className="flex flex-col gap-2">
{navLinks.map((link) => (
<Link
key={link.href}
href={link.href}
className="flex items-center gap-3 px-4 py-2 rounded-xl font-medium transition-colors text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-accent data-[active=true]:bg-primary data-[active=true]:text-primary-foreground"
data-active={typeof window !== 'undefined' && isActive(link.href)}
>
<span className="text-lg">{link.icon}</span>
{link.label}
</Link>
))}
</nav>
</div> </div>
<nav className="flex gap-2 md:gap-6">
{navLinks.map((link) => (
<Link
key={link.href}
href={link.href}
className="px-4 py-2 rounded-lg font-medium text-white hover:underline hover:underline-offset-8 hover:decoration-4 hover:decoration-red-500 transition-colors focus-visible:ring-2 focus-visible:ring-blue-300"
prefetch={false}
>
{link.label}
</Link>
))}
</nav>
</div> </div>
</aside> </header>
{/* Main content */} <main className="max-w-7xl mx-auto px-4 py-8 md:py-12 bg-[#f8fafc] min-h-screen">{children}</main>
<div className="flex-1 flex flex-col min-h-screen">
<header className="md:hidden flex items-center justify-between h-16 border-b bg-background px-4">
<NavigationMenu>
<NavigationMenuList>
{navLinks.map((link) => (
<NavigationMenuItem key={link.href}>
<NavigationMenuLink asChild>
<Link href={link.href}>{link.label}</Link>
</NavigationMenuLink>
</NavigationMenuItem>
))}
</NavigationMenuList>
</NavigationMenu>
</header>
<main className="flex-1 bg-background text-foreground p-4 md:p-10">{children}</main>
</div>
</div> </div>
); );
} }

59
apps/admin/app/(main)/page.tsx
View File

@@ -73,15 +73,15 @@ export default async function DashboardPage() {
const data = await getDashboardData(); const data = await getDashboardData();
return ( return (
<div className="container mx-auto py-10 space-y-10"> <div className="space-y-12">
<section className="flex justify-between items-center"> <section className="flex flex-col md:flex-row md:justify-between md:items-center gap-6 md:gap-0">
<div> <div>
<h1 className="text-3xl font-bold text-primary">Companies Dashboard</h1> <h1 className="text-4xl font-extrabold text-blue-700 tracking-tight mb-1">Companies Dashboard</h1>
<p className="text-muted-foreground mt-1">Manage companies and their job openings.</p> <p className="text-gray-500 text-lg">Manage companies and their job openings.</p>
</div> </div>
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button className="bg-primary text-primary-foreground hover:bg-primary/90 transition-colors">Add New Company</Button> <Button className="bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg hover:from-blue-600 hover:to-purple-600 transition">Add New Company</Button>
</DialogTrigger> </DialogTrigger>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
@@ -96,44 +96,45 @@ export default async function DashboardPage() {
<Input name="link" placeholder="Website / careers link" /> <Input name="link" placeholder="Website / careers link" />
<Input name="imageURL" placeholder="Image URL" /> <Input name="imageURL" placeholder="Image URL" />
<Textarea name="description" placeholder="Short description" /> <Textarea name="description" placeholder="Short description" />
<Button type="submit" className="w-fit">Add Company</Button> <Button type="submit" className="w-fit bg-blue-600 text-white hover:bg-blue-700">Add Company</Button>
</form> </form>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</section> </section>
<section className="space-y-6"> <section className="space-y-8">
{data.length === 0 && <Card className="p-10 text-muted-foreground text-center shadow-lg border-border bg-card">No companies yet. Add your first company to get started!</Card>} {data.length === 0 && <Card className="p-10 text-gray-400 text-center shadow-lg border border-gray-200 bg-white">No companies yet. Add your first company to get started!</Card>}
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-10 md:grid-cols-2 lg:grid-cols-3">
{data.map((company) => ( {data.map((company) => (
<Card key={company.id} className="flex flex-col shadow-xl border border-border bg-card rounded-2xl overflow-hidden"> <Card key={company.id} className="flex flex-col shadow-xl border-l-8 border-blue-400 border border-gray-200 bg-white rounded-2xl overflow-hidden">
<CardHeader className="p-6"> <CardHeader className="p-6 pb-2 flex flex-row items-center gap-4">
<CardTitle className="flex items-center gap-4"> <img src={company.imageURL} alt={company.name} className="w-16 h-16 rounded-xl border-2 border-blue-200 object-cover shadow" />
<img src={company.imageURL} alt={company.name} className="w-14 h-14 rounded-xl border-2 border-border object-cover" /> <div className="flex-1">
<div> <h3 className="font-bold text-xl text-blue-700">{company.name}</h3>
<h3 className="font-bold text-lg">{company.name}</h3> <a href={company.link} target="_blank" rel="noopener noreferrer" className="text-sm text-blue-500 hover:underline">{company.link}</a>
<a href={company.link} target="_blank" rel="noopener noreferrer" className="text-sm text-primary hover:underline">{company.link}</a> </div>
</div>
</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="px-6 pb-2 space-y-3"> <CardContent className="px-6 pb-2 space-y-3">
<h4 className="font-semibold text-muted-foreground">Open Positions</h4> <div className="text-gray-500 text-sm mb-2">{company.description}</div>
{company.jobs.length === 0 && <p className="text-sm text-muted-foreground/80">No jobs yet.</p>} <h4 className="font-semibold text-gray-700 mb-1">Open Positions</h4>
{company.jobs.map((job) => ( {company.jobs.length === 0 && <p className="text-sm text-gray-400">No jobs yet.</p>}
<Link key={job.id} href={`/jobs/${job.id}`} className="flex justify-between items-center p-3 rounded-lg hover:bg-background transition-colors border border-transparent hover:border-border"> <div className="flex flex-col gap-2">
<span>{job.title}</span> {company.jobs.map((job) => (
<Badge variant={job.active ? "secondary" : "outline"}>{job.active ? "Active" : "Inactive"}</Badge> <Link key={job.id} href={`/jobs/${job.id}`} className="flex justify-between items-center p-3 rounded-lg hover:bg-blue-50 transition-colors border border-transparent hover:border-blue-200">
</Link> <span className="font-medium text-gray-800">{job.title}</span>
))} <Badge variant={job.active ? "secondary" : "outline"} className={job.active ? 'bg-blue-100 text-blue-700 border-blue-200' : 'bg-gray-100 text-gray-500 border-gray-200'}>{job.active ? "Active" : "Inactive"}</Badge>
</Link>
))}
</div>
</CardContent> </CardContent>
<CardFooter className="mt-auto p-0"> <CardFooter className="mt-auto p-0">
<Accordion type="single" collapsible className="w-full"> <Accordion type="single" collapsible className="w-full">
<AccordionItem value="add-job"> <AccordionItem value="add-job">
<AccordionTrigger className="px-6 text-primary hover:text-primary/90 font-semibold"> <AccordionTrigger className="px-6 text-blue-700 hover:text-blue-900 font-semibold">
Add New Job Add New Job
</AccordionTrigger> </AccordionTrigger>
<AccordionContent className="p-6 bg-background border-t"> <AccordionContent className="p-6 bg-blue-50 border-t border-blue-100">
<form action={createJob} className="flex flex-col w-full gap-3"> <form action={createJob} className="flex flex-col w-full gap-3">
<input type="hidden" name="companyId" value={company.id} /> <input type="hidden" name="companyId" value={company.id} />
<Input name="title" placeholder="Job title" required /> <Input name="title" placeholder="Job title" required />
@@ -142,7 +143,7 @@ export default async function DashboardPage() {
<Input name="salary" placeholder="Salary" /> <Input name="salary" placeholder="Salary" />
<Input name="deadline" type="date" /> <Input name="deadline" type="date" />
<Textarea name="jobDescription" placeholder="Job description" /> <Textarea name="jobDescription" placeholder="Job description" />
<Button type="submit" size="sm" className="bg-accent text-accent-foreground hover:bg-accent/90 transition-colors self-start">Add Job</Button> <Button type="submit" size="sm" className="bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:from-blue-600 hover:to-purple-600 transition self-start">Add Job</Button>
</form> </form>
</AccordionContent> </AccordionContent>
</AccordionItem> </AccordionItem>