refactor: add animations

src/app/(modules)/project/page.tsx

@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { Loader2, CheckCircle2, FolderPlus, MapPin, Building2, Route, X } from "lucide-react"
+import { Loader2, CheckCircle2, Layers, MapPin, Building2, Route, X } from "lucide-react"
 import { DataTable } from "@/components/data-table"
 import { PageHeader } from "@/components/page-header"
 import { createProject, fetchProjects, updateProject, deleteProject, type ProjectCreate, type Project, type ProjectUpdate } from "@/lib/api"
@@ -18,6 +18,7 @@ import { PoweredBy } from "@/components/powered-by"
 
 export default function ProjectPage() {
     const [projects, setProjects] = useState<Project[]>([])
+    const [totalItems, setTotalItems] = useState(0)
     const [isLoading, setIsLoading] = useState(true)
     const [isModalOpen, setIsModalOpen] = useState(false)
     const [isSubmitting, setIsSubmitting] = useState(false)
@@ -46,11 +47,15 @@ export default function ProjectPage() {
             setIsLoading(true)
             setError(null)
             const data = await fetchProjects({ skip: currentSkip, limit: currentLimit })
-            setProjects(data)
+            setProjects(data.items)
+            setTotalItems(data.totalItems)
         } catch (err) {
             setError("Failed to load projects. Please check if the backend is running.")
         } finally {
-            setIsLoading(false)
+            // Add a small delay for animation stability
+            setTimeout(() => {
+                setIsLoading(false)
+            }, 800)
         }
     }
 
@@ -233,12 +238,12 @@ export default function ProjectPage() {
                         <PageHeader
                             title="Project Management"
                             description="Manage road infrastructure projects"
-                            icon={FolderPlus}
+                            icon={Layers}
                             actions={
                                 <Button 
                                     onClick={() => { setIsEditing(false); setIsModalOpen(true); }}
                                 >
-                                    <FolderPlus className="mr-2 h-5 w-5" />
+                                    <Layers className="mr-2 h-5 w-5" />
                                     Add New Project
                                 </Button>
                             }
@@ -258,6 +263,7 @@ export default function ProjectPage() {
                             pagination={{
                                 skip,
                                 limit,
+                                totalItems,
                                 onPageChange: setSkip,
                                 onLimitChange: (newLimit) => {
                                     setLimit(newLimit);
@@ -280,7 +286,7 @@ export default function ProjectPage() {
                     <DialogHeader className="gap-2">
                         <DialogTitle className="flex items-center gap-3 text-xl">
                             <div className="p-2 rounded-lg bg-primary text-primary-foreground shadow-sm">
-                                <FolderPlus className="h-5 w-5" />
+                                <Layers className="h-5 w-5" />
                             </div>
                             {isEditing ? 'Edit Project Details' : 'Create New Project'}
                         </DialogTitle>
@@ -431,7 +437,7 @@ export default function ProjectPage() {
                                     </div>
                                 ) : (
                                     <div className="flex items-center gap-2">
-                                        {isEditing ? <CheckCircle2 className="h-4 w-4" /> : <FolderPlus className="h-4 w-4" />}
+                                        {isEditing ? <CheckCircle2 className="h-4 w-4" /> : <Layers className="h-4 w-4" />}
                                         <span>{isEditing ? 'Update Project' : 'Create Project'}</span>
                                     </div>
                                 )}