chore(frontend): improve code formatting for readability

Standardize multiline formatting across components, tests, and API hooks for better consistency and clarity:
- Adjusted function and object property indentation.
- Updated tests and components to align with clean coding practices.

frontend/src/components/dashboard/DashboardQuickStats.tsx

@@ -25,7 +25,11 @@ export interface DashboardQuickStatsProps {
   className?: string;
 }
 
-export function DashboardQuickStats({ stats, isLoading = false, className }: DashboardQuickStatsProps) {
+export function DashboardQuickStats({
+  stats,
+  isLoading = false,
+  className,
+}: DashboardQuickStatsProps) {
   return (
     <div className={className}>
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">

frontend/src/components/dashboard/EmptyState.tsx

@@ -31,8 +31,8 @@ export function EmptyState({ userName = 'there', className }: EmptyStateProps) {
 
         <h2 className="text-2xl font-bold">Welcome to Syndarix, {userName}!</h2>
         <p className="mx-auto mt-2 max-w-md text-muted-foreground">
-          Get started by creating your first project. Our AI agents will help you
-          turn your ideas into reality.
+          Get started by creating your first project. Our AI agents will help you turn your ideas
+          into reality.
         </p>
 
         <Button size="lg" asChild className="mt-6">

frontend/src/components/dashboard/PendingApprovals.tsx

@@ -66,7 +66,10 @@ const typeConfig: Record<
   },
 };
 
-const priorityConfig: Record<PendingApproval['priority'], { label: string; variant: 'default' | 'secondary' | 'destructive' | 'outline' }> = {
+const priorityConfig: Record<
+  PendingApproval['priority'],
+  { label: string; variant: 'default' | 'secondary' | 'destructive' | 'outline' }
+> = {
   low: { label: 'Low', variant: 'outline' },
   medium: { label: 'Medium', variant: 'secondary' },
   high: { label: 'High', variant: 'default' },
@@ -105,7 +108,12 @@ function ApprovalItem({ approval, onApprove, onReject }: ApprovalItemProps) {
 
   return (
     <div className="flex flex-col gap-4 rounded-lg border p-4 sm:flex-row sm:items-start">
-      <div className={cn('flex h-10 w-10 items-center justify-center rounded-full bg-muted', config.color)}>
+      <div
+        className={cn(
+          'flex h-10 w-10 items-center justify-center rounded-full bg-muted',
+          config.color
+        )}
+      >
         <Icon className="h-5 w-5" />
       </div>
 

frontend/src/components/dashboard/RecentProjects.tsx

@@ -118,10 +118,7 @@ export function RecentProjects({ projects, isLoading = false, className }: Recen
       {isLoading ? (
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {[1, 2, 3, 4, 5, 6].map((i) => (
-            <div
-              key={i}
-              className={cn(i > 3 && 'hidden lg:block')}
-            >
+            <div key={i} className={cn(i > 3 && 'hidden lg:block')}>
               <ProjectCardSkeleton />
             </div>
           ))}
@@ -138,10 +135,7 @@ export function RecentProjects({ projects, isLoading = false, className }: Recen
       ) : (
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {displayProjects.map((project, index) => (
-            <div
-              key={project.id}
-              className={cn(index >= 3 && 'hidden lg:block')}
-            >
+            <div key={project.id} className={cn(index >= 3 && 'hidden lg:block')}>
               <ProjectCard project={project} />
             </div>
           ))}

frontend/src/components/projects/ProjectCard.tsx

@@ -49,10 +49,7 @@ function ComplexityIndicator({ complexity }: { complexity: 'low' | 'medium' | 'h
       {[1, 2, 3].map((i) => (
         <div
           key={i}
-          className={cn(
-            'h-1.5 w-1.5 rounded-full',
-            i <= level ? 'bg-primary' : 'bg-muted'
-          )}
+          className={cn('h-1.5 w-1.5 rounded-full', i <= level ? 'bg-primary' : 'bg-muted')}
         />
       ))}
     </div>
@@ -140,10 +137,7 @@ export function ProjectCard({ project, onClick, onAction, className }: ProjectCa
                     Archive Project
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
-                  <DropdownMenuItem
-                    className="text-destructive"
-                    onClick={() => onAction('delete')}
-                  >
+                  <DropdownMenuItem className="text-destructive" onClick={() => onAction('delete')}>
                     Delete Project
                   </DropdownMenuItem>
                 </DropdownMenuContent>

frontend/src/components/projects/ProjectFilters.tsx

@@ -14,14 +14,7 @@
 'use client';
 
 import { useState } from 'react';
-import {
-  Search,
-  Filter,
-  LayoutGrid,
-  List,
-  ChevronDown,
-  X,
-} from 'lucide-react';
+import { Search, Filter, LayoutGrid, List, ChevronDown, X } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';

frontend/src/components/projects/ProjectsGrid.tsx

@@ -27,7 +27,10 @@ export interface ProjectsGridProps {
   /** Called when a project card is clicked */
   onProjectClick?: (project: ProjectListItem) => void;
   /** Called when a project action is selected */
-  onProjectAction?: (project: ProjectListItem, action: 'archive' | 'pause' | 'resume' | 'delete') => void;
+  onProjectAction?: (
+    project: ProjectListItem,
+    action: 'archive' | 'pause' | 'resume' | 'delete'
+  ) => void;
   /** Whether filters are currently applied (affects empty state message) */
   hasFilters?: boolean;
   /** Additional CSS classes */
@@ -67,11 +70,7 @@ function EmptyState({ hasFilters }: { hasFilters: boolean }) {
 function LoadingSkeleton({ viewMode }: { viewMode: ViewMode }) {
   return (
     <div
-      className={cn(
-        viewMode === 'grid'
-          ? 'grid gap-4 sm:grid-cols-2 lg:grid-cols-3'
-          : 'space-y-4'
-      )}
+      className={cn(viewMode === 'grid' ? 'grid gap-4 sm:grid-cols-2 lg:grid-cols-3' : 'space-y-4')}
     >
       {[1, 2, 3, 4, 5, 6].map((i) => (
         <ProjectCardSkeleton key={i} />
@@ -100,9 +99,7 @@ export function ProjectsGrid({
   return (
     <div
       className={cn(
-        viewMode === 'grid'
-          ? 'grid gap-4 sm:grid-cols-2 lg:grid-cols-3'
-          : 'space-y-4',
+        viewMode === 'grid' ? 'grid gap-4 sm:grid-cols-2 lg:grid-cols-3' : 'space-y-4',
         className
       )}
     >

frontend/src/components/projects/index.ts

@@ -51,5 +51,11 @@ export type {
 } from './wizard';
 
 export type { ProjectCardProps } from './ProjectCard';
-export type { ProjectFiltersProps, ViewMode, SortBy, SortOrder, Complexity } from './ProjectFilters';
+export type {
+  ProjectFiltersProps,
+  ViewMode,
+  SortBy,
+  SortOrder,
+  Complexity,
+} from './ProjectFilters';
 export type { ProjectsGridProps } from './ProjectsGrid';