Fix: React hook order and refactor

Fixed React hook order issues in `Index.tsx` and refactored large files for better maintainability.

src/pages/Index.tsx

@@ -1,4 +1,3 @@
-
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -31,6 +30,10 @@ const Index = () => {
   const [editingJob, setEditingJob] = useState<IndJob | null>(null);
   const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
   const [showBatchForm, setShowBatchForm] = useState(false);
+  const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>(() => {
+    const saved = localStorage.getItem('jobGroupsCollapsed');
+    return saved ? JSON.parse(saved) : {};
+  });
 
   const selectedJob = useJob(selectedJobId);
 
@@ -185,11 +188,6 @@ const Index = () => {
     return groups;
   }, {} as Record<string, IndJob[]>);
 
-  const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>(() => {
-    const saved = localStorage.getItem('jobGroupsCollapsed');
-    return saved ? JSON.parse(saved) : {};
-  });
-
   const toggleGroup = (status: string) => {
     const newState = { ...collapsedGroups, [status]: !collapsedGroups[status] };
     setCollapsedGroups(newState);