From 5e2caefaaf068245e4a45a2afdb34e0033c55e2c 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:49:53 +0000
Subject: [PATCH] Refactor: Move status navigation buttons

Relocate the status navigation buttons to below the header, between the header and details sections of the job card. This change aims to improve the layout and address the issue of long job names. Also, ensure no duplicate code.
---
 src/components/JobCardHeader.tsx       | 124 +++++++++++++------------
 src/components/JobStatusNavigation.tsx |  12 ++-
 src/utils/jobStatusUtils.ts            |  14 ++-
 3 files changed, 80 insertions(+), 70 deletions(-)

diff --git a/src/components/JobCardHeader.tsx b/src/components/JobCardHeader.tsx
index 1063e07..07b249b 100644
--- a/src/components/JobCardHeader.tsx
+++ b/src/components/JobCardHeader.tsx
@@ -1,4 +1,3 @@
-
 import { CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Copy, BarChart3 } from 'lucide-react';
@@ -43,68 +42,73 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
   };
 
   return (
-    <div className="flex justify-between items-start">
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2 mb-2">
-          <CardTitle
-            className="text-blue-400 truncate cursor-pointer hover:text-blue-300 transition-colors flex items-center gap-1 leading-normal"
-            onClick={handleJobNameClick}
-            title="Click to copy job name"
-            data-no-navigate
-            style={{ lineHeight: '1.4' }}
-          >
-            {job.outputItem}
-            {copying === 'name' && <Copy className="w-4 h-4 text-green-400" />}
-          </CardTitle>
+    <>
+      <div className="flex justify-between items-start">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-2">
+            <CardTitle
+              className="text-blue-400 truncate cursor-pointer hover:text-blue-300 transition-colors flex items-center gap-1 leading-normal"
+              onClick={handleJobNameClick}
+              title="Click to copy job name"
+              data-no-navigate
+              style={{ lineHeight: '1.4' }}
+            >
+              {job.outputItem}
+              {copying === 'name' && <Copy className="w-4 h-4 text-green-400" />}
+            </CardTitle>
+          </div>
+          <div className="text-gray-400 text-sm leading-relaxed" style={{ lineHeight: '1.4' }}>
+            <div className="mb-1">
+              Runs: {job.outputQuantity.toLocaleString()}
+              <span className="ml-4">
+                Produced: <EditableProduced job={job} onUpdateProduced={onUpdateProduced} />
+              </span>
+              <span className="ml-4 items-center gap-1">
+                Sold: <span className="text-green-400">{itemsSold.toLocaleString()}</span>
+              </span>
+            </div>
+          </div>
         </div>
-        <div className="text-gray-400 text-sm leading-relaxed" style={{ lineHeight: '1.4' }}>
-          <div className="mb-1">
-            Runs: {job.outputQuantity.toLocaleString()}
-            <span className="ml-4">
-              Produced: <EditableProduced job={job} onUpdateProduced={onUpdateProduced} />
-            </span>
-            <span className="ml-4 items-center gap-1">
-              Sold: <span className="text-green-400">{itemsSold.toLocaleString()}</span>
-            </span>
+        <div className="flex flex-col gap-2 flex-shrink-0 items-end">
+          <div className="flex items-center gap-2">
+            <JobStatusDropdown job={job} />
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onEdit(job)}
+              className="border-gray-600 hover:bg-gray-800"
+              data-no-navigate
+            >
+              Edit
+            </Button>
+            <Button
+              variant="destructive"
+              size="sm"
+              onClick={() => onDelete(job.id)}
+              data-no-navigate
+            >
+              Delete
+            </Button>
+          </div>
+          <div className="flex">
+            <button
+              className="text-gray-400 hover:text-blue-300 transition-colors px-2"
+              onClick={(e) => {
+                e.stopPropagation();
+                setOverviewChartOpen(true);
+              }}
+              data-no-navigate
+              title="View transaction charts"
+            >
+              <BarChart3 className="w-4 h-4" />
+            </button>
+            <BOMActions job={job} onImportBOM={onImportBOM} />
           </div>
         </div>
       </div>
-      <div className="flex flex-col gap-2 flex-shrink-0 items-end">
-        <div className="flex items-center gap-2">
-          <JobStatusNavigation job={job} />
-          <JobStatusDropdown job={job} />
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => onEdit(job)}
-            className="border-gray-600 hover:bg-gray-800"
-            data-no-navigate
-          >
-            Edit
-          </Button>
-          <Button
-            variant="destructive"
-            size="sm"
-            onClick={() => onDelete(job.id)}
-            data-no-navigate
-          >
-            Delete
-          </Button>
-        </div>
-        <div className="flex">
-          <button
-            className="text-gray-400 hover:text-blue-300 transition-colors px-2"
-            onClick={(e) => {
-              e.stopPropagation();
-              setOverviewChartOpen(true);
-            }}
-            data-no-navigate
-            title="View transaction charts"
-          >
-            <BarChart3 className="w-4 h-4" />
-          </button>
-          <BOMActions job={job} onImportBOM={onImportBOM} />
-        </div>
+
+      <div className="flex justify-center mt-2 mb-2">
+        <JobStatusNavigation job={job} />
       </div>
 
       <TransactionChart
@@ -127,7 +131,7 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
         isOpen={totalProfitChartOpen}
         onClose={() => setTotalProfitChartOpen(false)}
       />
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/JobStatusNavigation.tsx b/src/components/JobStatusNavigation.tsx
index 9028e3d..206a520 100644
--- a/src/components/JobStatusNavigation.tsx
+++ b/src/components/JobStatusNavigation.tsx
@@ -67,7 +67,7 @@ const JobStatusNavigation: React.FC<JobStatusNavigationProps> = ({ job }) => {
   };
 
   return (
-    <div className="flex gap-1">
+    <div className="flex gap-2 items-center">
       {previousStatus && (
         <Button
           variant="outline"
@@ -76,11 +76,12 @@ const JobStatusNavigation: React.FC<JobStatusNavigationProps> = ({ job }) => {
             e.stopPropagation();
             handleStatusChange(previousStatus);
           }}
-          className="border-gray-600 hover:bg-gray-800 p-2"
+          className="border-gray-600 hover:bg-gray-800 px-3"
           data-no-navigate
           title={`Move to ${previousStatus}`}
         >
-          <ChevronLeft className="w-4 h-4" />
+          <ChevronLeft className="w-4 h-4 mr-1" />
+          {previousStatus}
         </Button>
       )}
       {nextStatus && (
@@ -91,11 +92,12 @@ const JobStatusNavigation: React.FC<JobStatusNavigationProps> = ({ job }) => {
             e.stopPropagation();
             handleStatusChange(nextStatus);
           }}
-          className="border-gray-600 hover:bg-gray-800 p-2"
+          className="border-gray-600 hover:bg-gray-800 px-3"
           data-no-navigate
           title={`Move to ${nextStatus}`}
         >
-          <ChevronRight className="w-4 h-4" />
+          {nextStatus}
+          <ChevronRight className="w-4 h-4 ml-1" />
         </Button>
       )}
     </div>
diff --git a/src/utils/jobStatusUtils.ts b/src/utils/jobStatusUtils.ts
index f04a82d..7891c07 100644
--- a/src/utils/jobStatusUtils.ts
+++ b/src/utils/jobStatusUtils.ts
@@ -52,16 +52,20 @@ export const getStatusPriority = (status: IndJobStatusOptions): number => {
   }
 };
 
-export const JOB_STATUSES = ['Planned', 'Acquisition', 'Staging', 'Inbound', 'Running', 'Done', 'Delivered', 'Outbound', 'Selling', 'Closed', 'Tracked'] as const;
+// Use the actual type values from the enum
+export const JOB_STATUSES: IndJobStatusOptions[] = [
+  'Planned', 'Acquisition', 'Staging', 'Inbound', 'Running', 'Done', 
+  'Delivered', 'Outbound', 'Selling', 'Closed', 'Tracked'
+];
 
-export const getNextStatus = (currentStatus: string): string | null => {
-  const currentIndex = JOB_STATUSES.indexOf(currentStatus as any);
+export const getNextStatus = (currentStatus: string): IndJobStatusOptions | null => {
+  const currentIndex = JOB_STATUSES.indexOf(currentStatus as IndJobStatusOptions);
   if (currentIndex === -1 || currentIndex === JOB_STATUSES.length - 1) return null;
   return JOB_STATUSES[currentIndex + 1];
 };
 
-export const getPreviousStatus = (currentStatus: string): string | null => {
-  const currentIndex = JOB_STATUSES.indexOf(currentStatus as any);
+export const getPreviousStatus = (currentStatus: string): IndJobStatusOptions | null => {
+  const currentIndex = JOB_STATUSES.indexOf(currentStatus as IndJobStatusOptions);
   if (currentIndex <= 0) return null;
   return JOB_STATUSES[currentIndex - 1];
 };