Add job status navigation buttons

Adds forward and backward buttons to job cards to change job status. Implements new statuses and highlights jobs needing attention.
2025-07-09 22:46:02 +00:00
parent d05d0180b8
commit fbda209db4
5 changed files with 158 additions and 11 deletions
--- a/src/components/JobStatusNavigation.tsx
+++ b/src/components/JobStatusNavigation.tsx
@@ -0,0 +1,105 @@
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { IndJob } from '@/lib/types';
+import { getNextStatus, getPreviousStatus } from '@/utils/jobStatusUtils';
+import { useJobs } from '@/hooks/useDataService';
+import { useToast } from '@/hooks/use-toast';
+
+interface JobStatusNavigationProps {
+  job: IndJob;
+}
+
+const JobStatusNavigation: React.FC<JobStatusNavigationProps> = ({ job }) => {
+  const { updateJob } = useJobs();
+  const { toast } = useToast();
+
+  const nextStatus = getNextStatus(job.status);
+  const previousStatus = getPreviousStatus(job.status);
+
+  const handleStatusChange = async (newStatus: string) => {
+    try {
+      const currentTime = new Date().toISOString();
+      const updates: { status: string; [key: string]: any } = { status: newStatus };
+
+      // Automatically assign dates based on status
+      switch (newStatus) {
+        case 'Running':
+          updates.jobStart = currentTime;
+          break;
+        case 'Done':
+          updates.jobEnd = currentTime;
+          break;
+        case 'Selling':
+          updates.saleStart = currentTime;
+          break;
+        case 'Closed':
+          updates.saleEnd = currentTime;
+          break;
+      }
+
+      await updateJob(job.id, updates);
+      
+      const dateMessages = [];
+      if (updates.jobStart) dateMessages.push('job start date set');
+      if (updates.jobEnd) dateMessages.push('job end date set');
+      if (updates.saleStart) dateMessages.push('sale start date set');
+      if (updates.saleEnd) dateMessages.push('sale end date set');
+      
+      const description = dateMessages.length > 0 
+        ? `Job status changed to ${newStatus} and ${dateMessages.join(', ')}`
+        : `Job status changed to ${newStatus}`;
+
+      toast({
+        title: "Status Updated",
+        description,
+        duration: 2000,
+      });
+    } catch (error) {
+      console.error('Error updating status:', error);
+      toast({
+        title: "Error",
+        description: "Failed to update status",
+        variant: "destructive",
+        duration: 2000,
+      });
+    }
+  };
+
+  return (
+    <div className="flex gap-1">
+      {previousStatus && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            handleStatusChange(previousStatus);
+          }}
+          className="border-gray-600 hover:bg-gray-800 p-2"
+          data-no-navigate
+          title={`Move to ${previousStatus}`}
+        >
+          <ChevronLeft className="w-4 h-4" />
+        </Button>
+      )}
+      {nextStatus && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            handleStatusChange(nextStatus);
+          }}
+          className="border-gray-600 hover:bg-gray-800 p-2"
+          data-no-navigate
+          title={`Move to ${nextStatus}`}
+        >
+          <ChevronRight className="w-4 h-4" />
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default JobStatusNavigation;