From 57e25f663b36432d1b7b84b5e13da907245ed4ad Mon Sep 17 00:00:00 2001
From: Anushlinux <anushrutpandit@gmail.com>
Date: Thu, 3 Jul 2025 01:21:40 +0530
Subject: [PATCH] Feat: Refactored the whole ui

---
 apps/admin/app/(main)/jobs/page.tsx | 38 ++++++-------
 apps/admin/app/(main)/layout.tsx    | 84 +++++++++--------------------
 apps/admin/app/(main)/page.tsx      | 59 ++++++++++----------
 3 files changed, 73 insertions(+), 108 deletions(-)

diff --git a/apps/admin/app/(main)/jobs/page.tsx b/apps/admin/app/(main)/jobs/page.tsx
index 964c1ff..ecf3b63 100644
--- a/apps/admin/app/(main)/jobs/page.tsx
+++ b/apps/admin/app/(main)/jobs/page.tsx
@@ -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="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 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>
             </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>
diff --git a/apps/admin/app/(main)/layout.tsx b/apps/admin/app/(main)/layout.tsx
index acf3d42..63fc7cb 100644
--- a/apps/admin/app/(main)/layout.tsx
+++ b/apps/admin/app/(main)/layout.tsx
@@ -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>
-            <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 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>
+          <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>
-      </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>
+      </header>
+      <main className="max-w-7xl mx-auto px-4 py-8 md:py-12 bg-[#f8fafc] min-h-screen">{children}</main>
     </div>
   );
 }
diff --git a/apps/admin/app/(main)/page.tsx b/apps/admin/app/(main)/page.tsx
index 08b8992..e9ff9d3 100644
--- a/apps/admin/app/(main)/page.tsx
+++ b/apps/admin/app/(main)/page.tsx
@@ -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>
-                  </div>
-                </CardTitle>
+            <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>
               </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>}
-                {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>
-                ))}
+                <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-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>