From c5b4a41b196bddeff1cde11ed071cd3227d2e3de Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Wed, 9 Jul 2025 22:52:35 +0000
Subject: [PATCH] Refactor: Style status navigation buttons

Make status navigation buttons wider, center text, and color them based on status.
---
 src/components/JobStatusNavigation.tsx | 28 +++++++++++---------------
 src/utils/jobStatusUtils.ts            | 14 ++++++-------
 2 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/components/JobStatusNavigation.tsx b/src/components/JobStatusNavigation.tsx
index 206a520..9eedc6a 100644
--- a/src/components/JobStatusNavigation.tsx
+++ b/src/components/JobStatusNavigation.tsx
@@ -2,7 +2,7 @@
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { IndJob } from '@/lib/types';
-import { getNextStatus, getPreviousStatus } from '@/utils/jobStatusUtils';
+import { getNextStatus, getPreviousStatus, getStatusColor } from '@/utils/jobStatusUtils';
 import { useJobs } from '@/hooks/useDataService';
 import { useToast } from '@/hooks/use-toast';
 
@@ -67,38 +67,34 @@ const JobStatusNavigation: React.FC<JobStatusNavigationProps> = ({ job }) => {
   };
 
   return (
-    <div className="flex gap-2 items-center">
+    <div className="flex gap-2 items-center justify-center">
       {previousStatus && (
-        <Button
-          variant="outline"
-          size="sm"
+        <button
           onClick={(e) => {
             e.stopPropagation();
             handleStatusChange(previousStatus);
           }}
-          className="border-gray-600 hover:bg-gray-800 px-3"
+          className={`${getStatusColor(previousStatus)} text-white px-4 py-2 rounded flex items-center justify-center gap-1 hover:opacity-80 transition-opacity w-32`}
           data-no-navigate
           title={`Move to ${previousStatus}`}
         >
-          <ChevronLeft className="w-4 h-4 mr-1" />
-          {previousStatus}
-        </Button>
+          <ChevronLeft className="w-4 h-4" />
+          <span className="text-center flex-1">{previousStatus}</span>
+        </button>
       )}
       {nextStatus && (
-        <Button
-          variant="outline"
-          size="sm"
+        <button
           onClick={(e) => {
             e.stopPropagation();
             handleStatusChange(nextStatus);
           }}
-          className="border-gray-600 hover:bg-gray-800 px-3"
+          className={`${getStatusColor(nextStatus)} text-white px-4 py-2 rounded flex items-center justify-center gap-1 hover:opacity-80 transition-opacity w-32`}
           data-no-navigate
           title={`Move to ${nextStatus}`}
         >
-          {nextStatus}
-          <ChevronRight className="w-4 h-4 ml-1" />
-        </Button>
+          <span className="text-center flex-1">{nextStatus}</span>
+          <ChevronRight className="w-4 h-4" />
+        </button>
       )}
     </div>
   );
diff --git a/src/utils/jobStatusUtils.ts b/src/utils/jobStatusUtils.ts
index 7891c07..448a758 100644
--- a/src/utils/jobStatusUtils.ts
+++ b/src/utils/jobStatusUtils.ts
@@ -52,20 +52,20 @@ export const getStatusPriority = (status: IndJobStatusOptions): number => {
   }
 };
 
-// Use the actual type values from the enum
-export const JOB_STATUSES: IndJobStatusOptions[] = [
+// Define the status sequence - using the actual enum values
+export const JOB_STATUSES = [
   'Planned', 'Acquisition', 'Staging', 'Inbound', 'Running', 'Done', 
   'Delivered', 'Outbound', 'Selling', 'Closed', 'Tracked'
-];
+] as const;
 
-export const getNextStatus = (currentStatus: string): IndJobStatusOptions | null => {
-  const currentIndex = JOB_STATUSES.indexOf(currentStatus as IndJobStatusOptions);
+export const getNextStatus = (currentStatus: string): string | null => {
+  const currentIndex = JOB_STATUSES.indexOf(currentStatus as any);
   if (currentIndex === -1 || currentIndex === JOB_STATUSES.length - 1) return null;
   return JOB_STATUSES[currentIndex + 1];
 };
 
-export const getPreviousStatus = (currentStatus: string): IndJobStatusOptions | null => {
-  const currentIndex = JOB_STATUSES.indexOf(currentStatus as IndJobStatusOptions);
+export const getPreviousStatus = (currentStatus: string): string | null => {
+  const currentIndex = JOB_STATUSES.indexOf(currentStatus as any);
   if (currentIndex <= 0) return null;
   return JOB_STATUSES[currentIndex - 1];
 };