Refactor: Make job fields editable, add status

-   Allow editing of job fields.
-   Use ISO8601 date format.
-   Add job status with predefined states.

src/components/JobCard.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Calendar, Factory, TrendingUp, TrendingDown } from 'lucide-react';
+import { Calendar, Factory, TrendingUp, TrendingDown, Clock } from 'lucide-react';
 import { Job } from '@/services/jobService';
 import { formatISK } from '@/utils/priceUtils';
 
@@ -20,15 +20,44 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete }) => {
   const margin = totalIncome > 0 ? ((profit / totalIncome) * 100) : 0;
   
   const itemsSold = job.income.reduce((sum, tx) => sum + tx.quantity, 0);
-  const daysSinceStart = Math.max(1, Math.ceil((Date.now() - job.dates.saleStart.getTime()) / (1000 * 60 * 60 * 24)));
+  const saleStartTime = job.dates.saleStart?.getTime();
-  const itemsPerDay = itemsSold / daysSinceStart;
+  const daysSinceStart = saleStartTime ? Math.max(1, Math.ceil((Date.now() - saleStartTime) / (1000 * 60 * 60 * 24))) : 0;
+  const itemsPerDay = daysSinceStart > 0 ? itemsSold / daysSinceStart : 0;
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'Planned': return 'bg-gray-600';
+      case 'Transporting Materials': return 'bg-yellow-600';
+      case 'Running': return 'bg-blue-600';
+      case 'Done': return 'bg-green-600';
+      case 'Selling': return 'bg-purple-600';
+      case 'Closed': return 'bg-gray-800';
+      default: return 'bg-gray-600';
+    }
+  };
+
+  const formatDateTime = (date: Date | null) => {
+    if (!date) return 'Not set';
+    return date.toLocaleString('en-CA', { 
+      year: 'numeric', 
+      month: '2-digit', 
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit'
+    }).replace(',', '');
+  };
 
   return (
     <Card className="bg-gray-900 border-gray-700 text-white">
       <CardHeader>
         <div className="flex justify-between items-start">
           <div>
+            <div className="flex items-center gap-2 mb-2">
               <CardTitle className="text-blue-400">{job.outputItem.name}</CardTitle>
+              <Badge className={`${getStatusColor(job.status)} text-white`}>
+                {job.status}
+              </Badge>
+            </div>
             <p className="text-gray-400">Quantity: {job.outputItem.quantity.toLocaleString()}</p>
           </div>
           <div className="flex gap-2">
@@ -51,26 +80,33 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete }) => {
         </div>
       </CardHeader>
       <CardContent className="space-y-4">
-        <div className="grid grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 gap-2">
-          <div className="space-y-2">
           <div className="flex items-center gap-2 text-sm text-gray-400">
             <Calendar className="w-4 h-4" />
-              Created: {job.dates.creation.toLocaleDateString()}
+            Created: {formatDateTime(job.dates.creation)}
+          </div>
+          <div className="flex items-center gap-2 text-sm text-gray-400">
+            <Clock className="w-4 h-4" />
+            Start: {formatDateTime(job.dates.start)}
           </div>
           <div className="flex items-center gap-2 text-sm text-gray-400">
             <Factory className="w-4 h-4" />
             Facility: {job.facilityId}
           </div>
         </div>
+        
+        {job.dates.saleStart && (
           <div className="space-y-2">
             <div className="text-sm text-gray-400">
-              Sale Period: {job.dates.saleStart.toLocaleDateString()} - {job.dates.saleEnd.toLocaleDateString()}
+              Sale Period: {formatDateTime(job.dates.saleStart)} - {formatDateTime(job.dates.saleEnd)}
             </div>
+            {itemsPerDay > 0 && (
               <div className="text-sm text-gray-400">
                 Items/Day: {itemsPerDay.toFixed(2)}
               </div>
+            )}
           </div>
-        </div>
+        )}
         
         <div className="grid grid-cols-3 gap-4 pt-4 border-t border-gray-700">
           <div className="text-center">

src/components/JobForm.tsx

@@ -23,12 +23,13 @@ const JobForm: React.FC<JobFormProps> = ({ job, onSubmit, onCancel }) => {
       quantity: job?.outputItem.quantity || 0
     },
     dates: {
-      creation: job?.dates.creation ? job.dates.creation.toISOString().split('T')[0] : new Date().toISOString().split('T')[0],
+      creation: job?.dates.creation ? job.dates.creation.toISOString().slice(0, 16) : new Date().toISOString().slice(0, 16),
-      start: job?.dates.start ? job.dates.start.toISOString().split('T')[0] : '',
+      start: job?.dates.start ? job.dates.start.toISOString().slice(0, 16) : '',
-      end: job?.dates.end ? job.dates.end.toISOString().split('T')[0] : '',
+      end: job?.dates.end ? job.dates.end.toISOString().slice(0, 16) : '',
-      saleStart: job?.dates.saleStart ? job.dates.saleStart.toISOString().split('T')[0] : '',
+      saleStart: job?.dates.saleStart ? job.dates.saleStart.toISOString().slice(0, 16) : '',
-      saleEnd: job?.dates.saleEnd ? job.dates.saleEnd.toISOString().split('T')[0] : ''
+      saleEnd: job?.dates.saleEnd ? job.dates.saleEnd.toISOString().slice(0, 16) : ''
     },
+    status: job?.status || 'Planned' as const,
     facilityId: job?.facilityId || ''
   });
 
@@ -52,15 +53,25 @@ const JobForm: React.FC<JobFormProps> = ({ job, onSubmit, onCancel }) => {
       outputItem: formData.outputItem,
       dates: {
         creation: new Date(formData.dates.creation),
-        start: new Date(formData.dates.start),
+        start: formData.dates.start ? new Date(formData.dates.start) : null,
-        end: new Date(formData.dates.end),
+        end: formData.dates.end ? new Date(formData.dates.end) : null,
-        saleStart: new Date(formData.dates.saleStart),
+        saleStart: formData.dates.saleStart ? new Date(formData.dates.saleStart) : null,
-        saleEnd: new Date(formData.dates.saleEnd)
+        saleEnd: formData.dates.saleEnd ? new Date(formData.dates.saleEnd) : null
       },
+      status: formData.status,
       facilityId: formData.facilityId
     });
   };
 
+  const statusOptions = [
+    'Planned',
+    'Transporting Materials',
+    'Running',
+    'Done',
+    'Selling',
+    'Closed'
+  ] as const;
+
   return (
     <Card className="bg-gray-900 border-gray-700 text-white">
       <CardHeader>
@@ -100,6 +111,7 @@ const JobForm: React.FC<JobFormProps> = ({ job, onSubmit, onCancel }) => {
             </div>
           </div>
 
+          <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
               <Label htmlFor="facility" className="text-gray-300">Facility</Label>
               <Select 
@@ -118,13 +130,31 @@ const JobForm: React.FC<JobFormProps> = ({ job, onSubmit, onCancel }) => {
                 </SelectContent>
               </Select>
             </div>
-
-          <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
-              <Label htmlFor="creationDate" className="text-gray-300">Creation Date</Label>
+              <Label htmlFor="status" className="text-gray-300">Status</Label>
+              <Select 
+                value={formData.status} 
+                onValueChange={(value) => setFormData({ ...formData, status: value as any })}
+              >
+                <SelectTrigger className="bg-gray-800 border-gray-600 text-white">
+                  <SelectValue placeholder="Select status" />
+                </SelectTrigger>
+                <SelectContent className="bg-gray-800 border-gray-600">
+                  {statusOptions.map((status) => (
+                    <SelectItem key={status} value={status} className="text-white">
+                      {status}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="creationDate" className="text-gray-300">Creation Date & Time</Label>
             <Input
               id="creationDate"
-                type="date"
+              type="datetime-local"
               value={formData.dates.creation}
               onChange={(e) => setFormData({
                 ...formData,
@@ -134,67 +164,64 @@ const JobForm: React.FC<JobFormProps> = ({ job, onSubmit, onCancel }) => {
               required
             />
           </div>
+
+          <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
-              <Label htmlFor="startDate" className="text-gray-300">Start Date</Label>
+              <Label htmlFor="startDate" className="text-gray-300">Start Date & Time</Label>
               <Input
                 id="startDate"
-                type="date"
+                type="datetime-local"
                 value={formData.dates.start}
                 onChange={(e) => setFormData({
                   ...formData,
                   dates: { ...formData.dates, start: e.target.value }
                 })}
                 className="bg-gray-800 border-gray-600 text-white"
-                required
               />
             </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
-              <Label htmlFor="endDate" className="text-gray-300">End Date</Label>
+              <Label htmlFor="endDate" className="text-gray-300">End Date & Time</Label>
               <Input
                 id="endDate"
-                type="date"
+                type="datetime-local"
                 value={formData.dates.end}
                 onChange={(e) => setFormData({
                   ...formData,
                   dates: { ...formData.dates, end: e.target.value }
                 })}
                 className="bg-gray-800 border-gray-600 text-white"
-                required
               />
             </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
-              <Label htmlFor="saleStartDate" className="text-gray-300">Sale Start Date</Label>
+              <Label htmlFor="saleStartDate" className="text-gray-300">Sale Start Date & Time</Label>
               <Input
                 id="saleStartDate"
-                type="date"
+                type="datetime-local"
                 value={formData.dates.saleStart}
                 onChange={(e) => setFormData({
                   ...formData,
                   dates: { ...formData.dates, saleStart: e.target.value }
                 })}
                 className="bg-gray-800 border-gray-600 text-white"
-                required
               />
             </div>
-          </div>
-
             <div className="space-y-2">
-            <Label htmlFor="saleEndDate" className="text-gray-300">Sale End Date</Label>
+              <Label htmlFor="saleEndDate" className="text-gray-300">Sale End Date & Time</Label>
               <Input
                 id="saleEndDate"
-              type="date"
+                type="datetime-local"
                 value={formData.dates.saleEnd}
                 onChange={(e) => setFormData({
                   ...formData,
                   dates: { ...formData.dates, saleEnd: e.target.value }
                 })}
                 className="bg-gray-800 border-gray-600 text-white"
-              required
               />
             </div>
+          </div>
 
           <div className="flex gap-2 pt-4">
             <Button type="submit" className="flex-1 bg-blue-600 hover:bg-blue-700">

src/services/jobService.ts

@@ -8,11 +8,12 @@ export interface Job {
   };
   dates: {
     creation: Date;
-    start: Date;
+    start: Date | null;
-    end: Date;
+    end: Date | null;
-    saleStart: Date;
+    saleStart: Date | null;
-    saleEnd: Date;
+    saleEnd: Date | null;
   };
+  status: 'Planned' | 'Transporting Materials' | 'Running' | 'Done' | 'Selling' | 'Closed';
   facilityId: string;
   expenditures: Transaction[];
   income: Transaction[];