Optimize in-house table layout and improve page structure across application

- Implemented PageContainer component for consistent page structure across all pages
- Fixed layout spacing issues by removing padding from main layout and adding it to individual pages
- Redesigned navbar with glassmorphism effect for modern, sleek appearance
- Optimized in-house table with smaller fonts (text-xs) and reduced padding (px-1 py-1)
- Increased pagination to 50 items per page for better content display
- Made all UI elements in in-house table more compact (badges, buttons, icons)
- Fixed weird spacing issues across dashboard, applicants, kanban, clients, and settings pages
- Enhanced performance with prefetching and memoization in sidebar navigation
- Improved page loading animation to only cover content area, not sidebar

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: Zeff01

apps/codebility/app/home/_components/LeftSidebar.tsx

@@ -99,7 +99,7 @@ const LeftSidebar = () => {
       initial={false}
       animate={isToggleOpen ? "open" : "closed"}
       variants={sidebarVariants}
-      className="background-navbar sticky left-0 top-0 z-40 hidden h-screen flex-col gap-8 overflow-hidden p-1 shadow-lg lg:flex"
+      className="background-navbar sticky left-0 top-0 z-40 hidden h-screen flex-col gap-8 overflow-hidden p-1 border-r border-gray-200 dark:border-gray-800 lg:flex"
       role="complementary"
       aria-label="Main navigation sidebar"
     >

apps/codebility/app/home/_components/Navbar.tsx

@@ -57,7 +57,7 @@ const Navbar = () => {
   return (
     <>
       <nav
-        className="background-navbar fixed top-0 z-20 w-full shadow-sm"
+        className="fixed top-0 z-20 w-full bg-white/80 dark:bg-gray-950/80 backdrop-blur-xl border-b border-gray-200/50 dark:border-gray-800/50 shadow-sm"
         role="banner"
       >
       <div className="flex w-full min-w-full items-center justify-end px-8 py-2">
@@ -106,10 +106,10 @@ const Navbar = () => {
                 className="hidden flex-col items-end md:flex"
                 aria-hidden="true"
               >
-                <p className="capitalize dark:text-white">
+                <p className="capitalize text-gray-900 dark:text-gray-100">
                   {first_name} {last_name}
                 </p>
-                <p className="text-dark100_light900 text-sm">{email_address}</p>
+                <p className="text-gray-600 dark:text-gray-400 text-sm">{email_address}</p>
               </div>
               <div className="from-customViolet-300 to-customBlue-500 relative size-[44px] rounded-full bg-gradient-to-b p-[1.5px]">
                 <Image
@@ -122,7 +122,7 @@ const Navbar = () => {
                 />
               </div>
               <IconDropdown
-                className="hidden invert dark:invert-0 md:block"
+                className="hidden text-gray-600 dark:text-gray-400 md:block"
                 aria-hidden="true"
               />
               <span className="sr-only">
@@ -131,7 +131,7 @@ const Navbar = () => {
             </DropdownMenuTrigger>
 
             <DropdownMenuContent
-              className="dark:bg-dark-100 absolute -left-24 top-3 border-white dark:border-zinc-700 md:w-[200px]"
+              className="bg-white dark:bg-gray-800 absolute -left-24 top-3 border-gray-200 dark:border-gray-700 md:w-[200px] shadow-lg"
               role="menu"
               aria-label="User account options"
             >

apps/codebility/app/home/_components/PageContainer.tsx

@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+interface PageContainerProps {
+  children: ReactNode;
+  className?: string;
+  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "7xl" | "full";
+  noPadding?: boolean;
+}
+
+export default function PageContainer({ 
+  children, 
+  className,
+  maxWidth = "7xl",
+  noPadding = false
+}: PageContainerProps) {
+  const maxWidthClasses = {
+    sm: "max-w-screen-sm",
+    md: "max-w-screen-md",
+    lg: "max-w-screen-lg",
+    xl: "max-w-screen-xl",
+    "2xl": "max-w-screen-2xl",
+    "7xl": "max-w-7xl",
+    full: "max-w-full"
+  };
+
+  return (
+    <div className={cn(
+      "min-h-screen bg-white dark:bg-gray-950",
+      className
+    )}>
+      <div className={cn(
+        "mx-auto h-full",
+        maxWidthClasses[maxWidth],
+        !noPadding && "px-2 pt-6 pb-6 sm:px-4 sm:pt-8 sm:pb-8 md:px-8 md:pt-10 md:pb-10 lg:px-12 lg:pt-12 lg:pb-12",
+        "max-md:pb-14", // Extra bottom padding for mobile navigation
+        className?.includes("flex") && "flex flex-col"
+      )}>
+        {children}
+      </div>
+    </div>
+  );
+}

apps/codebility/app/home/_components/PageLoadingAnimation.tsx

@@ -4,7 +4,7 @@ import { motion } from "framer-motion";
 
 export default function PageLoadingAnimation() {
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-white dark:bg-gray-950">
+    <div className="absolute inset-0 z-50 flex items-center justify-center bg-white dark:bg-gray-950 min-h-[400px]">
       {/* Background gradient animation */}
       <motion.div
         className="absolute inset-0 opacity-30"

apps/codebility/app/home/_components/PageTransitionWrapper.tsx

@@ -67,7 +67,7 @@ export default function PageTransitionWrapper({ children }: PageTransitionWrappe
   }, [pathname, displayedPathname, animationEnabled, animationDuration]);
 
   return (
-    <>
+    <div className="relative min-h-[400px]">
       <AnimatePresence mode="wait">
         {isLoading && (
           <motion.div
@@ -77,6 +77,7 @@ export default function PageTransitionWrapper({ children }: PageTransitionWrappe
               opacity: 0,
               transition: { duration: 0.3, ease: "easeOut" }
             }}
+            className="absolute inset-0"
           >
             <PageLoadingAnimation />
           </motion.div>
@@ -97,6 +98,6 @@ export default function PageTransitionWrapper({ children }: PageTransitionWrappe
       >
         {children}
       </motion.div>
-    </>
+    </div>
   );
 }

apps/codebility/app/home/applicants/_components/_table/applicantColumns.tsx

@@ -49,7 +49,7 @@ export const applicantsColumns: ColumnDef<NewApplicantType>[] = [
     id: "applicant",
     accessorKey: "first_name",
     meta: {
-      className: "min-w-[200px]",
+      className: "min-w-[250px] max-w-[350px]",
     },
     header: ({ column }) => {
       return (
@@ -97,7 +97,7 @@ export const applicantsColumns: ColumnDef<NewApplicantType>[] = [
       );
     },
     meta: {
-      className: "w-32",
+      className: "min-w-[120px] max-w-[150px]",
     },
   },
   {
@@ -413,5 +413,8 @@ export const applicantsColumns: ColumnDef<NewApplicantType>[] = [
         </div>
       );
     },
+    meta: {
+      className: "w-16 max-w-[64px]",
+    },
   },
 ];

apps/codebility/app/home/applicants/_components/_table/applicantDataTable.tsx

@@ -173,7 +173,7 @@ function ApplicantDataTableComponent<TData extends NewApplicantType, TValue>({
         </div>
 
         {/* Table for larger screens */}
-        <Table className="hidden xl:table table-fixed">
+        <Table className="hidden xl:table table-auto">
           {/* Table header */}
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (

apps/codebility/app/home/applicants/page.tsx

@@ -1,5 +1,6 @@
 import React, { Suspense } from "react";
 import AsyncErrorBoundary from "@/components/AsyncErrorBoundary";
+import PageContainer from "../_components/PageContainer";
 
 import NewApplicantFetchComp from "./_components/applicantFetchComp";
 import ApplicantsLoading from "./loading";
@@ -9,20 +10,22 @@ export const revalidate = 0;
 
 export default async function NewApplicants() {
   return (
-    <AsyncErrorBoundary
-      fallback={
-        <div className="flex min-h-[400px] flex-col items-center justify-center p-8 text-center">
-          <div className="mb-4 text-4xl">📋</div>
-          <h2 className="mb-2 text-xl font-semibold">Failed to load applicants</h2>
-          <p className="text-gray-600 dark:text-gray-400">
-            We couldn't load the applicants data. Please try refreshing the page.
-          </p>
-        </div>
-      }
-    >
-      <Suspense fallback={<ApplicantsLoading />}>
-        <NewApplicantFetchComp />
-      </Suspense>
-    </AsyncErrorBoundary>
+    <PageContainer>
+      <AsyncErrorBoundary
+        fallback={
+          <div className="flex min-h-[400px] flex-col items-center justify-center p-8 text-center">
+            <div className="mb-4 text-4xl">📋</div>
+            <h2 className="mb-2 text-xl font-semibold">Failed to load applicants</h2>
+            <p className="text-gray-600 dark:text-gray-400">
+              We couldn't load the applicants data. Please try refreshing the page.
+            </p>
+          </div>
+        }
+      >
+        <Suspense fallback={<ApplicantsLoading />}>
+          <NewApplicantFetchComp />
+        </Suspense>
+      </AsyncErrorBoundary>
+    </PageContainer>
   );
 }

apps/codebility/app/home/clients/page.tsx

@@ -2,6 +2,7 @@ import H1 from "@/components/shared/dashboard/H1";
 import AsyncErrorBoundary from "@/components/AsyncErrorBoundary";
 import { getClients } from "@/lib/server/codev.service";
 import { Client } from "@/types/home/codev";
+import PageContainer from "../_components/PageContainer";
 
 import ClientButtons from "./_components/ClientsButton";
 import ClientCards from "./_components/ClientsCard";
@@ -21,32 +22,34 @@ export default async function Clients() {
   });
 
   return (
-    <AsyncErrorBoundary
-      fallback={
-        <div className="flex min-h-[400px] flex-col items-center justify-center p-8 text-center">
-          <div className="mb-4 text-4xl">👥</div>
-          <h2 className="mb-2 text-xl font-semibold">Unable to load clients</h2>
-          <p className="text-gray-600 dark:text-gray-400">
-            We couldn't retrieve your client list. Please check your connection and try again.
-          </p>
-        </div>
-      }
-    >
-      <div className="mx-auto flex max-w-screen-xl flex-col gap-4">
-        <div className="flex flex-row justify-between gap-4">
-          <H1>Clients</H1>
-          <div className="flex items-center gap-4">
-            <ClientButtons />
+    <PageContainer maxWidth="xl">
+      <AsyncErrorBoundary
+        fallback={
+          <div className="flex min-h-[400px] flex-col items-center justify-center p-8 text-center">
+            <div className="mb-4 text-4xl">👥</div>
+            <h2 className="mb-2 text-xl font-semibold">Unable to load clients</h2>
+            <p className="text-gray-600 dark:text-gray-400">
+              We couldn't retrieve your client list. Please check your connection and try again.
+            </p>
+          </div>
+        }
+      >
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-row justify-between gap-4">
+            <H1>Clients</H1>
+            <div className="flex items-center gap-4">
+              <ClientButtons />
+            </div>
           </div>
-        </div>
 
-        {error ? (
-          <div className="text-white">ERROR</div>
-        ) : (
-          // Pass our sorted array to the client-card component
-          <ClientCards clients={clients} />
-        )}
-      </div>
-    </AsyncErrorBoundary>
+          {error ? (
+            <div className="text-white">ERROR</div>
+          ) : (
+            // Pass our sorted array to the client-card component
+            <ClientCards clients={clients} />
+          )}
+        </div>
+      </AsyncErrorBoundary>
+    </PageContainer>
   );
 }

apps/codebility/app/home/hire/_components/EditJobModal.tsx

@@ -18,6 +18,7 @@ import {
 } from "@codevs/ui/select";
 import { Switch } from "@codevs/ui/switch";
 import { useToast } from "@/components/ui/use-toast";
+import { updateJobListing } from "../actions";
 import {
   Dialog,
   DialogContent,
@@ -89,31 +90,21 @@ export default function EditJobModal({ job, isOpen, onClose, onJobUpdated }: Edi
         .map(req => req.trim())
         .filter(req => req.length > 0);
 
-      // Import Supabase client
-      const { createClientClientComponent } = await import("@/utils/supabase/client");
-      const supabase = createClientClientComponent();
-
-      // Update the job in the database
-      const { data: updatedJob, error } = await supabase
-        .from('job_listings')
-        .update({
-          title: data.title,
-          department: data.department,
-          location: data.location,
-          type: data.type,
-          level: data.level,
-          description: data.description,
-          requirements: requirementsArray,
-          salary_range: data.salary_range || null,
-          remote: data.remote,
-          updated_at: new Date().toISOString(),
-        })
-        .eq('id', job.id)
-        .select()
-        .single();
+      // Use server action to update the job
+      const result = await updateJobListing(job.id, {
+        title: data.title,
+        department: data.department,
+        location: data.location,
+        type: data.type,
+        level: data.level,
+        description: data.description,
+        requirements: requirementsArray,
+        salary_range: data.salary_range || null,
+        remote: data.remote,
+      });
 
-      if (error) {
-        throw error;
+      if (!result.success) {
+        throw new Error(result.error || "Failed to update job");
       }
 
       toast({