Browse Source

refactor(ui): optimize header layout and improve calendar summary performance

- Replaced inline effect callback with useCallback for loadPriorImports to prevent unnecessary re-renders
- Simplified header container classes by removing redundant container wrapper
- Moved DarkModeToggle to consistent rightmost position for both auth states
- Removed duplicate Sign Up button from unauthenticated header view
- Adjusted padding classes for better visual alignment
vidane 6 months ago
parent
commit
a98e24d44c
2 changed files with 13 additions and 17 deletions
  1. 9 9
      app/cintas-calendar-summary/page.tsx
  2. 4 8
      app/components/header.tsx

+ 9 - 9
app/cintas-calendar-summary/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Upload, FileText, Database, BarChart3, CheckCircle, Loader2, History, PlusCircle } from 'lucide-react';
@@ -57,13 +57,7 @@ export default function CintasCalendarSummaryPage() {
   const [selectedImport, setSelectedImport] = useState<ImportRecord | null>(null);
   const [loadingImports, setLoadingImports] = useState(true);
 
-  useEffect(() => {
-    if (user) {
-      loadPriorImports();
-    }
-  }, [user]);
-
-  const loadPriorImports = async () => {
+  const loadPriorImports = useCallback(async () => {
     try {
       setLoadingImports(true);
       setError(null); // Clear any previous errors
@@ -98,7 +92,13 @@ export default function CintasCalendarSummaryPage() {
     } finally {
       setLoadingImports(false);
     }
-  };
+  }, [user]);
+
+  useEffect(() => {
+    if (user) {
+      loadPriorImports();
+    }
+  }, [loadPriorImports, user]);
 
   const handleFileUploaded = (file: FileData) => {
     setUploadedFile(file);

+ 4 - 8
app/components/header.tsx

@@ -44,7 +44,7 @@ export default function Header() {
   if (isLoading) {
     return (
       <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <div className="container flex h-16 items-center justify-between">
+        <div className="flex h-16 items-center justify-between">
           <div className="flex items-center gap-6 pl-4 md:pl-6">
             <Link href="/dashboard" className="flex items-center space-x-2">
               <Image
@@ -67,7 +67,7 @@ export default function Header() {
 
   return (
     <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container flex h-16 items-center justify-between">
+      <div className="flex h-16 items-center justify-between pr-6">
         <div className="flex items-center gap-6 pl-4 md:pl-6">
           <Link href="/dashboard" className="flex items-center space-x-2">
             <Image
@@ -81,9 +81,7 @@ export default function Header() {
           </Link>
         </div>
 
-        <div className="flex items-center gap-4 pr-4 md:pr-6">
-          <DarkModeToggle />
-          
+        <div className="flex items-center gap-4 pr-0 md:pr-0">
           {isAuthenticated ? (
             <>
               <NavigationMenu className="hidden md:flex">
@@ -145,11 +143,9 @@ export default function Header() {
                   Login
                 </Button>
               </LoginLink>
-              <RegisterLink>
-                <Button size="sm">Sign Up</Button>
-              </RegisterLink>
             </div>
           )}
+          <DarkModeToggle />
 
           {/* Mobile Menu */}
           <Sheet>