Feat: Refactored the whole ui
This commit is contained in:
Anushlinux
@@ -19,18 +19,18 @@ export default async function JobsListPage() {
|
||||
const jobsWithCompany = await getAllJobsWithCompany();
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-10 space-y-8">
|
||||
<h1 className="text-3xl font-bold mb-6">All Jobs</h1>
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div className="py-10 space-y-8 bg-[#f8fafc] min-h-screen">
|
||||
<h1 className="text-3xl font-bold mb-6 text-blue-800">All Jobs</h1>
|
||||
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
{jobsWithCompany.length === 0 && (
|
||||
<p className="text-muted-foreground">No jobs found.</p>
|
||||
<p className="text-gray-400">No jobs found.</p>
|
||||
)}
|
||||
{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>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<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'}
|
||||
</span>
|
||||
</CardTitle>
|
||||
@@ -46,23 +46,23 @@ export default async function JobsListPage() {
|
||||
<div className="text-xs text-gray-500">{job.company?.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<div className="text-sm"><strong>Location:</strong> {job.location}</div>
|
||||
<div className="text-sm"><strong>Salary:</strong> {job.salary}</div>
|
||||
<div className="text-sm"><strong>Deadline:</strong> {job.applicationDeadline.toLocaleDateString()}</div>
|
||||
<div className="text-sm"><strong>Min CGPA:</strong> {job.minCGPA}</div>
|
||||
<div className="text-sm"><strong>Min SSC:</strong> {job.minSSC}</div>
|
||||
<div className="text-sm"><strong>Min HSC:</strong> {job.minHSC}</div>
|
||||
<div className="text-sm"><strong>Allow Dead KT:</strong> {job.allowDeadKT ? 'Yes' : 'No'}</div>
|
||||
<div className="text-sm"><strong>Allow 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="mt-2 grid grid-cols-2 gap-x-4 gap-y-1 text-sm">
|
||||
<div><strong>Location:</strong> {job.location}</div>
|
||||
<div><strong>Salary:</strong> {job.salary}</div>
|
||||
<div><strong>Deadline:</strong> {job.applicationDeadline.toLocaleDateString()}</div>
|
||||
<div><strong>Min CGPA:</strong> {job.minCGPA}</div>
|
||||
<div><strong>Min SSC:</strong> {job.minSSC}</div>
|
||||
<div><strong>Min HSC:</strong> {job.minHSC}</div>
|
||||
<div><strong>Dead KT:</strong> {job.allowDeadKT ? 'Yes' : 'No'}</div>
|
||||
<div><strong>Live KT:</strong> {job.allowLiveKT ? 'Yes' : 'No'}</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>
|
||||
</div>
|
||||
</CardContent>
|
||||
<div className="p-4 pt-0 mt-auto flex gap-2">
|
||||
<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>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -1,72 +1,36 @@
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuTrigger,
|
||||
navigationMenuTriggerStyle,
|
||||
} from '@workspace/ui/components/navigation-menu';
|
||||
import Link from 'next/link';
|
||||
|
||||
const navLinks = [
|
||||
{ href: '/', label: 'Home', icon: '🏠' },
|
||||
{ href: '/students', label: 'Students', icon: '🎓' },
|
||||
{ href: '/jobs', label: 'Jobs', icon: '💼' },
|
||||
{ href: '/', label: 'Dashboard' },
|
||||
{ href: '/students', label: 'Students' },
|
||||
{ href: '/jobs', label: 'Jobs' },
|
||||
];
|
||||
|
||||
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 (
|
||||
<div className="flex min-h-screen bg-background text-foreground">
|
||||
{/* Sidebar */}
|
||||
<aside className="hidden md:flex flex-col w-64 p-6 gap-8">
|
||||
<div className="sticky top-8">
|
||||
<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 mb-6">
|
||||
<img src="/favicon.ico" alt="Logo" className="w-10 h-10" />
|
||||
<span className="font-extrabold text-xl tracking-tight text-sidebar-primary">Admin Portal</span>
|
||||
<div className="min-h-screen bg-[#f8fafc] font-sans">
|
||||
{/* Sticky top navbar */}
|
||||
<header className="sticky top-0 z-30 w-full bg-[#1e293b] shadow-lg">
|
||||
<div className="max-w-7xl mx-auto flex items-center justify-between px-6 py-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<img src="/favicon.ico" alt="Logo" className="w-9 h-9 rounded-lg shadow" />
|
||||
<span className="font-extrabold text-2xl tracking-tight text-white">NextPlacement</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">
|
||||
<nav className="flex gap-2 md:gap-6">
|
||||
{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)}
|
||||
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}
|
||||
>
|
||||
<span className="text-lg">{link.icon}</span>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
{/* Main content */}
|
||||
<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>
|
||||
<main className="max-w-7xl mx-auto px-4 py-8 md:py-12 bg-[#f8fafc] min-h-screen">{children}</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -73,15 +73,15 @@ export default async function DashboardPage() {
|
||||
const data = await getDashboardData();
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-10 space-y-10">
|
||||
<section className="flex justify-between items-center">
|
||||
<div className="space-y-12">
|
||||
<section className="flex flex-col md:flex-row md:justify-between md:items-center gap-6 md:gap-0">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-primary">Companies Dashboard</h1>
|
||||
<p className="text-muted-foreground mt-1">Manage companies and their job openings.</p>
|
||||
<h1 className="text-4xl font-extrabold text-blue-700 tracking-tight mb-1">Companies Dashboard</h1>
|
||||
<p className="text-gray-500 text-lg">Manage companies and their job openings.</p>
|
||||
</div>
|
||||
<Dialog>
|
||||
<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>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
@@ -96,44 +96,45 @@ export default async function DashboardPage() {
|
||||
<Input name="link" placeholder="Website / careers link" />
|
||||
<Input name="imageURL" placeholder="Image URL" />
|
||||
<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>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</section>
|
||||
|
||||
<section className="space-y-6">
|
||||
{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>}
|
||||
<section className="space-y-8">
|
||||
{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) => (
|
||||
<Card key={company.id} className="flex flex-col shadow-xl border border-border bg-card rounded-2xl overflow-hidden">
|
||||
<CardHeader className="p-6">
|
||||
<CardTitle className="flex items-center gap-4">
|
||||
<img src={company.imageURL} alt={company.name} className="w-14 h-14 rounded-xl border-2 border-border object-cover" />
|
||||
<div>
|
||||
<h3 className="font-bold text-lg">{company.name}</h3>
|
||||
<a href={company.link} target="_blank" rel="noopener noreferrer" className="text-sm text-primary hover:underline">{company.link}</a>
|
||||
<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 pb-2 flex flex-row 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" />
|
||||
<div className="flex-1">
|
||||
<h3 className="font-bold text-xl text-blue-700">{company.name}</h3>
|
||||
<a href={company.link} target="_blank" rel="noopener noreferrer" className="text-sm text-blue-500 hover:underline">{company.link}</a>
|
||||
</div>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-6 pb-2 space-y-3">
|
||||
<h4 className="font-semibold text-muted-foreground">Open Positions</h4>
|
||||
{company.jobs.length === 0 && <p className="text-sm text-muted-foreground/80">No jobs yet.</p>}
|
||||
<div className="text-gray-500 text-sm mb-2">{company.description}</div>
|
||||
<h4 className="font-semibold text-gray-700 mb-1">Open Positions</h4>
|
||||
{company.jobs.length === 0 && <p className="text-sm text-gray-400">No jobs yet.</p>}
|
||||
<div className="flex flex-col gap-2">
|
||||
{company.jobs.map((job) => (
|
||||
<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">
|
||||
<span>{job.title}</span>
|
||||
<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">
|
||||
<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>
|
||||
<CardFooter className="mt-auto p-0">
|
||||
<Accordion type="single" collapsible className="w-full">
|
||||
<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
|
||||
</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">
|
||||
<input type="hidden" name="companyId" value={company.id} />
|
||||
<Input name="title" placeholder="Job title" required />
|
||||
@@ -142,7 +143,7 @@ export default async function DashboardPage() {
|
||||
<Input name="salary" placeholder="Salary" />
|
||||
<Input name="deadline" type="date" />
|
||||
<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>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
Reference in New Issue
Block a user