From 29b5647ea2781688e0d74dcf493335209e0478e0 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 7 Jul 2025 12:09:21 +0000
Subject: [PATCH] Enhance job card with status colors and editability

- Added background colors to job cards based on status.
- Implemented editable date fields and projected costs/profit.
- Added a dropdown for status selection.
---
 src/components/JobCard.tsx        |  15 +++-
 src/components/JobCardDetails.tsx | 128 +++++++++++++++++++++++++-----
 src/components/JobCardHeader.tsx  |  53 ++++++++++++-
 src/components/JobCardMetrics.tsx |  88 +++++++++++++++++++-
 4 files changed, 255 insertions(+), 29 deletions(-)

diff --git a/src/components/JobCard.tsx b/src/components/JobCard.tsx
index eb81e79..c0b5945 100644
--- a/src/components/JobCard.tsx
+++ b/src/components/JobCard.tsx
@@ -29,9 +29,22 @@ const JobCard: React.FC<JobCardProps> = ({
     navigate(`/${job.id}`);
   };
 
+  const getStatusBackgroundColor = (status: string) => {
+    switch (status) {
+      case 'Planned': return 'bg-gray-600/20';
+      case 'Acquisition': return 'bg-yellow-600/20';
+      case 'Running': return 'bg-blue-600/20';
+      case 'Done': return 'bg-purple-600/20';
+      case 'Selling': return 'bg-orange-600/20';
+      case 'Closed': return 'bg-green-600/20';
+      case 'Tracked': return 'bg-cyan-600/20';
+      default: return 'bg-gray-600/20';
+    }
+  };
+
   return (
     <Card
-      className={`bg-gray-900 border-gray-700 text-white h-full flex flex-col cursor-pointer hover:bg-gray-800/50 transition-colors ${job.status === 'Tracked' ? 'border-l-4 border-l-cyan-600' : ''}`}
+      className={`bg-gray-900 border-gray-700 text-white h-full flex flex-col cursor-pointer hover:bg-gray-800/50 transition-colors ${job.status === 'Tracked' ? 'border-l-4 border-l-cyan-600' : ''} ${getStatusBackgroundColor(job.status)}`}
       onClick={handleCardClick}
     >
       <CardHeader className="flex-shrink-0">
diff --git a/src/components/JobCardDetails.tsx b/src/components/JobCardDetails.tsx
index 050ee6a..5df153e 100644
--- a/src/components/JobCardDetails.tsx
+++ b/src/components/JobCardDetails.tsx
@@ -1,13 +1,22 @@
 
+import { useState } from 'react';
 import { Calendar, Factory, Clock } from 'lucide-react';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
+import { Input } from '@/components/ui/input';
 import { IndJob } from '@/lib/types';
+import { useJobs } from '@/hooks/useDataService';
+import { useToast } from '@/hooks/use-toast';
 
 interface JobCardDetailsProps {
   job: IndJob;
 }
 
 const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
+  const [editingField, setEditingField] = useState<string | null>(null);
+  const [tempValues, setTempValues] = useState<{ [key: string]: string }>({});
+  const { updateJob } = useJobs();
+  const { toast } = useToast();
+
   const formatDateTime = (dateString: string | null | undefined) => {
     if (!dateString) return 'Not set';
     return new Date(dateString).toLocaleString('en-CA', {
@@ -19,6 +28,41 @@ const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
     }).replace(',', '');
   };
 
+  const handleFieldClick = (fieldName: string, currentValue: string | null, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setEditingField(fieldName);
+    setTempValues({ ...tempValues, [fieldName]: currentValue || '' });
+  };
+
+  const handleFieldUpdate = async (fieldName: string, value: string) => {
+    try {
+      const dateValue = value ? new Date(value).toISOString() : null;
+      await updateJob(job.id, { [fieldName]: dateValue });
+      setEditingField(null);
+      toast({
+        title: "Updated",
+        description: `${fieldName} updated successfully`,
+        duration: 2000,
+      });
+    } catch (error) {
+      console.error('Error updating field:', error);
+      toast({
+        title: "Error",
+        description: "Failed to update field",
+        variant: "destructive",
+        duration: 2000,
+      });
+    }
+  };
+
+  const handleKeyPress = (fieldName: string, e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleFieldUpdate(fieldName, tempValues[fieldName]);
+    } else if (e.key === 'Escape') {
+      setEditingField(null);
+    }
+  };
+
   const sortedIncome = [...job.income].sort((a, b) =>
     new Date(b.date).getTime() - new Date(a.date).getTime()
   );
@@ -28,33 +72,77 @@ const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
   const daysSinceStart = saleStartTime ? Math.max(1, Math.ceil((Date.now() - saleStartTime) / (1000 * 60 * 60 * 24))) : 0;
   const itemsPerDay = daysSinceStart > 0 ? itemsSold / daysSinceStart : 0;
 
+  const DateField = ({ label, value, fieldName, icon }: { label: string; value: string | null; fieldName: string; icon: React.ReactNode }) => (
+    <div className="flex items-center gap-2 text-sm text-gray-400">
+      {icon}
+      <span className="w-16">{label}:</span>
+      {editingField === fieldName ? (
+        <Input
+          type="datetime-local"
+          value={tempValues[fieldName] || ''}
+          onChange={(e) => setTempValues({ ...tempValues, [fieldName]: e.target.value })}
+          onBlur={() => handleFieldUpdate(fieldName, tempValues[fieldName])}
+          onKeyDown={(e) => handleKeyPress(fieldName, e)}
+          onClick={(e) => e.stopPropagation()}
+          className="h-6 px-2 py-1 bg-gray-800 border-gray-600 text-white text-xs"
+          autoFocus
+        />
+      ) : (
+        <span
+          onClick={(e) => handleFieldClick(fieldName, value, e)}
+          className="cursor-pointer hover:text-blue-400 flex-1"
+          title="Click to edit"
+        >
+          {formatDateTime(value)}
+        </span>
+      )}
+    </div>
+  );
+
   return (
     <div className="flex-shrink-0">
       <div className="grid grid-cols-1 gap-2">
-        <div className="flex items-center gap-2 text-sm text-gray-400">
-          <Calendar className="w-4 h-4" />
-          Created: {formatDateTime(job.created)}
-        </div>
-        <div className="flex items-center gap-2 text-sm text-gray-400">
-          <Clock className="w-4 h-4" />
-          Start: {formatDateTime(job.jobStart)}
-        </div>
         <div className="flex items-center gap-2 text-sm text-gray-400">
           <Factory className="w-4 h-4" />
-          Job ID: {job.id}
+          <span className="w-16">Job ID:</span>
+          <span>{job.id}</span>
         </div>
+        <div className="flex items-center gap-2 text-sm text-gray-400">
+          <Calendar className="w-4 h-4" />
+          <span className="w-16">Created:</span>
+          <span>{formatDateTime(job.created)}</span>
+        </div>
+        
+        <DateField
+          label="Start"
+          value={job.jobStart}
+          fieldName="jobStart"
+          icon={<Clock className="w-4 h-4" />}
+        />
+        <DateField
+          label="End"
+          value={job.jobEnd}
+          fieldName="jobEnd"
+          icon={<Clock className="w-4 h-4" />}
+        />
+        
+        <DateField
+          label="Sale Start"
+          value={job.saleStart}
+          fieldName="saleStart"
+          icon={<Calendar className="w-4 h-4" />}
+        />
+        <DateField
+          label="Sale End"
+          value={job.saleEnd}
+          fieldName="saleEnd"
+          icon={<Calendar className="w-4 h-4" />}
+        />
       </div>
 
-      {job.saleStart && (
-        <div className="space-y-2 mt-4">
-          <div className="text-sm text-gray-400">
-            Sale Period: {formatDateTime(job.saleStart)} - {formatDateTime(job.saleEnd)}
-          </div>
-          {itemsPerDay > 0 && (
-            <div className="text-sm text-gray-400">
-              Items/Day: {itemsPerDay.toFixed(2)}
-            </div>
-          )}
+      {itemsPerDay > 0 && (
+        <div className="text-sm text-gray-400 mt-2">
+          Items/Day: {itemsPerDay.toFixed(2)}
         </div>
       )}
 
@@ -65,7 +153,7 @@ const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
               BOM: {job.billOfMaterials.length} items (hover to view)
             </div>
           </HoverCardTrigger>
-          <HoverCardContent className="w-80 bg-gray-800 border-gray-600 text-white">
+          <HoverCardContent className="w-80 bg-gray-800/50 border-gray-600 text-white">
             <div className="space-y-2">
               <h4 className="text-sm font-semibold text-blue-400">Bill of Materials</h4>
               <div className="text-xs space-y-1 max-h-48 overflow-y-auto">
diff --git a/src/components/JobCardHeader.tsx b/src/components/JobCardHeader.tsx
index 213205c..3bab29d 100644
--- a/src/components/JobCardHeader.tsx
+++ b/src/components/JobCardHeader.tsx
@@ -1,11 +1,17 @@
-
 import { useState } from 'react';
 import { CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Import, Upload, Check, Copy } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { IndJob } from '@/lib/types';
 import { useToast } from '@/hooks/use-toast';
+import { useJobs } from '@/hooks/useDataService';
 
 interface JobCardHeaderProps {
   job: IndJob;
@@ -27,6 +33,9 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
   const [copyingBom, setCopyingBom] = useState(false);
   const [copyingName, setCopyingName] = useState(false);
   const { toast } = useToast();
+  const { updateJob } = useJobs();
+
+  const statuses = ['Planned', 'Acquisition', 'Running', 'Done', 'Selling', 'Closed', 'Tracked'];
 
   const getStatusColor = (status: string) => {
     switch (status) {
@@ -41,6 +50,26 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
     }
   };
 
+  const handleStatusChange = async (newStatus: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await updateJob(job.id, { status: newStatus });
+      toast({
+        title: "Status Updated",
+        description: `Job status changed to ${newStatus}`,
+        duration: 2000,
+      });
+    } catch (error) {
+      console.error('Error updating status:', error);
+      toast({
+        title: "Error",
+        description: "Failed to update status",
+        variant: "destructive",
+        duration: 2000,
+      });
+    }
+  };
+
   const handleProducedUpdate = () => {
     const newValue = parseInt(producedValue);
     if (!isNaN(newValue) && onUpdateProduced) {
@@ -248,9 +277,25 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
       </div>
       <div className="flex flex-col gap-2 flex-shrink-0 items-end">
         <div className="flex items-center gap-2">
-          <div className={`${getStatusColor(job.status)} text-white px-3 py-1 rounded text-xs font-semibold`}>
-            {job.status}
-          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <div className={`${getStatusColor(job.status)} text-white px-3 py-1 rounded-sm text-xs font-semibold cursor-pointer hover:opacity-80 transition-opacity`}>
+                {job.status}
+              </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="bg-gray-800/50 border-gray-600 text-white">
+              {statuses.map((status) => (
+                <DropdownMenuItem
+                  key={status}
+                  onClick={(e) => handleStatusChange(status, e)}
+                  className="hover:bg-gray-700 cursor-pointer"
+                >
+                  <div className={`w-3 h-3 rounded-sm ${getStatusColor(status)} mr-2`} />
+                  {status}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
           <Button
             variant="outline"
             size="sm"
diff --git a/src/components/JobCardMetrics.tsx b/src/components/JobCardMetrics.tsx
index beee06a..d4beaae 100644
--- a/src/components/JobCardMetrics.tsx
+++ b/src/components/JobCardMetrics.tsx
@@ -1,12 +1,21 @@
 
-import { formatISK } from '@/utils/priceUtils';
+import { useState } from 'react';
+import { formatISK, parseISKAmount } from '@/utils/priceUtils';
 import { IndJob } from '@/lib/types';
+import { Input } from '@/components/ui/input';
+import { useJobs } from '@/hooks/useDataService';
+import { useToast } from '@/hooks/use-toast';
 
 interface JobCardMetricsProps {
   job: IndJob;
 }
 
 const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
+  const [editingField, setEditingField] = useState<string | null>(null);
+  const [tempValues, setTempValues] = useState<{ [key: string]: string }>({});
+  const { updateJob } = useJobs();
+  const { toast } = useToast();
+
   const sortedExpenditures = [...job.expenditures].sort((a, b) =>
     new Date(b.date).getTime() - new Date(a.date).getTime()
   );
@@ -19,14 +28,67 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
   const profit = totalIncome - totalExpenditure;
   const margin = totalIncome > 0 ? ((profit / totalIncome) * 100) : 0;
 
+  const handleFieldClick = (fieldName: string, currentValue: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setEditingField(fieldName);
+    setTempValues({ ...tempValues, [fieldName]: formatISK(currentValue) });
+  };
+
+  const handleFieldUpdate = async (fieldName: string, value: string) => {
+    try {
+      const numericValue = parseISKAmount(value);
+      await updateJob(job.id, { [fieldName]: numericValue });
+      setEditingField(null);
+      toast({
+        title: "Updated",
+        description: `${fieldName} updated successfully`,
+        duration: 2000,
+      });
+    } catch (error) {
+      console.error('Error updating field:', error);
+      toast({
+        title: "Error",
+        description: "Failed to update field",
+        variant: "destructive",
+        duration: 2000,
+      });
+    }
+  };
+
+  const handleKeyPress = (fieldName: string, e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleFieldUpdate(fieldName, tempValues[fieldName]);
+    } else if (e.key === 'Escape') {
+      setEditingField(null);
+    }
+  };
+
   return (
-    <div className="grid grid-cols-3 gap-3 pt-4 border-t border-gray-700 flex-shrink-0">
+    <div className="grid grid-cols-3 gap-3 pt-4 border-t border-gray-700/50 flex-shrink-0">
       <div className="text-center space-y-1">
         <div className="text-xs font-medium text-red-400 uppercase tracking-wide">Costs</div>
         <div className="text-lg font-bold text-red-400">{formatISK(totalExpenditure)}</div>
         {job.projectedCost > 0 && (
           <div className="text-xs text-gray-400">
-            vs {formatISK(job.projectedCost)}
+            vs {editingField === 'projectedCost' ? (
+              <Input
+                value={tempValues.projectedCost || ''}
+                onChange={(e) => setTempValues({ ...tempValues, projectedCost: e.target.value })}
+                onBlur={() => handleFieldUpdate('projectedCost', tempValues.projectedCost)}
+                onKeyDown={(e) => handleKeyPress('projectedCost', e)}
+                onClick={(e) => e.stopPropagation()}
+                className="w-24 h-6 px-2 py-1 inline-block bg-gray-800 border-gray-600 text-white text-xs"
+                autoFocus
+              />
+            ) : (
+              <span
+                onClick={(e) => handleFieldClick('projectedCost', job.projectedCost, e)}
+                className="cursor-pointer hover:text-blue-400"
+                title="Click to edit"
+              >
+                {formatISK(job.projectedCost)}
+              </span>
+            )}
             <div className={`text-xs font-medium ${totalExpenditure <= job.projectedCost ? 'text-green-400' : 'text-red-400'}`}>
               {((totalExpenditure / job.projectedCost) * 100).toFixed(0)}%
             </div>
@@ -38,7 +100,25 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
         <div className="text-lg font-bold text-green-400">{formatISK(totalIncome)}</div>
         {job.projectedRevenue > 0 && (
           <div className="text-xs text-gray-400">
-            vs {formatISK(job.projectedRevenue)}
+            vs {editingField === 'projectedRevenue' ? (
+              <Input
+                value={tempValues.projectedRevenue || ''}
+                onChange={(e) => setTempValues({ ...tempValues, projectedRevenue: e.target.value })}
+                onBlur={() => handleFieldUpdate('projectedRevenue', tempValues.projectedRevenue)}
+                onKeyDown={(e) => handleKeyPress('projectedRevenue', e)}
+                onClick={(e) => e.stopPropagation()}
+                className="w-24 h-6 px-2 py-1 inline-block bg-gray-800 border-gray-600 text-white text-xs"
+                autoFocus
+              />
+            ) : (
+              <span
+                onClick={(e) => handleFieldClick('projectedRevenue', job.projectedRevenue, e)}
+                className="cursor-pointer hover:text-blue-400"
+                title="Click to edit"
+              >
+                {formatISK(job.projectedRevenue)}
+              </span>
+            )}
             <div className={`text-xs font-medium ${totalIncome >= job.projectedRevenue ? 'text-green-400' : 'text-red-400'}`}>
               {((totalIncome / job.projectedRevenue) * 100).toFixed(0)}%
             </div>