Sync with main

frontend/src/components/JobForm.tsx

@@ -1,15 +1,13 @@
+
 import React, { useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { IndJobStatusOptions, IndJobRecordNoId, IndBillitemRecord } from '@/lib/pbtypes';
-import MaterialsImportExport from './MaterialsImportExport';
+import { IndJobStatusOptions, IndJobRecordNoId } from '@/lib/pbtypes';
 import { IndJob } from '@/lib/types';
 import { parseISKAmount } from '@/utils/priceUtils';
-// import { getFacilities } from '@/services/facilityService';
 
 interface JobFormProps {
   job?: IndJob;
@@ -17,54 +15,36 @@ interface JobFormProps {
   onCancel: () => void;
 }
 
+const formatDateForInput = (dateString: string | undefined | null): string => {
+  if (!dateString) return '';
+  // Convert ISO string to datetime-local format (YYYY-MM-DDTHH:MM)
+  return new Date(dateString).toISOString().slice(0, 16);
+};
+
 const JobForm: React.FC<JobFormProps> = ({ job, onSubmit, onCancel }) => {
-  // const [facilities, setFacilities] = useState<IndFacilityRecord[]>([]);
-  const [billOfMaterials, setBillOfMaterials] = useState<IndBillitemRecord[]>(job?.billOfMaterials || []);
-  const [consumedMaterials, setConsumedMaterials] = useState<IndBillitemRecord[]>(job?.consumedMaterials || []);
   const [formData, setFormData] = useState({
     outputItem: job?.outputItem || '',
     outputQuantity: job?.outputQuantity || 0,
-    jobStart: job?.jobStart ? job.jobStart.slice(0, 16) : '',
-    jobEnd: job?.jobEnd ? job.jobEnd.slice(0, 16) : '',
-    saleStart: job?.saleStart ? job.saleStart.slice(0, 16) : '',
-    saleEnd: job?.saleEnd ? job.saleEnd.slice(0, 16) : '',
+    jobStart: formatDateForInput(job?.jobStart),
+    jobEnd: formatDateForInput(job?.jobEnd),
+    saleStart: formatDateForInput(job?.saleStart),
+    saleEnd: formatDateForInput(job?.saleEnd),
     status: job?.status || IndJobStatusOptions.Planned,
-    billOfMaterials: job?.billOfMaterials || [],
-    consumedMaterials: job?.consumedMaterials || [],
-    expenditures: job?.expenditures || [],
-    income: job?.income || [],
     projectedCost: job?.projectedCost || 0,
     projectedRevenue: job?.projectedRevenue || 0
   });
 
-  // useEffect(() => {
-  //   const loadFacilities = async () => {
-  //     try {
-  //       const fetchedFacilities = await getFacilities();
-  //       setFacilities(fetchedFacilities);
-  //     } catch (error) {
-  //       console.error('Error loading facilities:', error);
-  //     }
-  //   };
-
-  //   loadFacilities();
-  // }, []);
-
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
 
     onSubmit({
       outputItem: formData.outputItem,
       outputQuantity: formData.outputQuantity,
-      jobStart: formData.jobStart ? formData.jobStart : undefined,
-      jobEnd: formData.jobEnd ? formData.jobEnd : undefined,
-      saleStart: formData.saleStart ? formData.saleStart : undefined,
-      saleEnd: formData.saleEnd ? formData.saleEnd : undefined,
+      jobStart: formData.jobStart || undefined,
+      jobEnd: formData.jobEnd || undefined,
+      saleStart: formData.saleStart || undefined,
+      saleEnd: formData.saleEnd || undefined,
       status: formData.status,
-      billOfMaterials: formData.billOfMaterials.map(item => item.id),
-      consumedMaterials: formData.consumedMaterials.map(item => item.id),
-      expenditures: formData.expenditures.map(item => item.id),
-      income: formData.income.map(item => item.id),
       projectedCost: formData.projectedCost,
       projectedRevenue: formData.projectedRevenue
     });
@@ -80,190 +60,157 @@ const JobForm: React.FC<JobFormProps> = ({ job, onSubmit, onCancel }) => {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <Tabs defaultValue="basic" className="w-full">
-          <TabsList className="grid w-full grid-cols-2 bg-gray-800">
-            <TabsTrigger value="basic" className="text-white">Basic Info</TabsTrigger>
-            <TabsTrigger value="materials" className="text-white">Materials</TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="basic" className="space-y-4">
-            <form onSubmit={handleSubmit} className="space-y-4">
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label htmlFor="itemName" className="text-gray-300">Output Item Name</Label>
-                  <Input
-                    id="itemName"
-                    value={formData.outputItem}
-                    onChange={(e) => setFormData({
-                      ...formData,
-                      outputItem: e.target.value
-                    })}
-                    className="bg-gray-800 border-gray-600 text-white"
-                    required
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="itemQuantity" className="text-gray-300">Quantity</Label>
-                  <Input
-                    id="itemQuantity"
-                    type="number"
-                    value={formData.outputQuantity}
-                    onChange={(e) => setFormData({
-                      ...formData,
-                      outputQuantity: parseInt(e.target.value) || 0
-                    })}
-                    className="bg-gray-800 border-gray-600 text-white"
-                    required
-                  />
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="status" className="text-gray-300">Status</Label>
-                <Select
-                  value={formData.status}
-                  onValueChange={(value) => setFormData({ ...formData, status: value as IndJobStatusOptions })}
-                >
-                  <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 className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label htmlFor="startDate" className="text-gray-300">Start Date & Time</Label>
-                  <Input
-                    id="startDate"
-                    type="datetime-local"
-                    value={formData.jobStart}
-                    onChange={(e) => setFormData({
-                      ...formData,
-                      jobStart: e.target.value
-                    })}
-                    className="bg-gray-800 border-gray-600 text-white"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="endDate" className="text-gray-300">End Date & Time</Label>
-                  <Input
-                    id="endDate"
-                    type="datetime-local"
-                    value={formData.jobEnd}
-                    onChange={(e) => setFormData({
-                      ...formData,
-                      jobEnd: e.target.value
-                    })}
-                    className="bg-gray-800 border-gray-600 text-white"
-                  />
-                </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 & Time</Label>
-                  <Input
-                    id="saleStartDate"
-                    type="datetime-local"
-                    value={formData.saleStart}
-                    onChange={(e) => setFormData({
-                      ...formData,
-                      saleStart: e.target.value
-                    })}
-                    className="bg-gray-800 border-gray-600 text-white"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="saleEndDate" className="text-gray-300">Sale End Date & Time</Label>
-                  <Input
-                    id="saleEndDate"
-                    type="datetime-local"
-                    value={formData.saleEnd}
-                    onChange={(e) => setFormData({
-                      ...formData,
-                      saleEnd: e.target.value
-                    })}
-                    className="bg-gray-800 border-gray-600 text-white"
-                  />
-                </div>
-              </div>
-
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label htmlFor="projectedCost" className="text-gray-300">Projected Cost</Label>
-                  <Input
-                    id="projectedCost"
-                    type="text"
-                    value={formData.projectedCost ? `${formData.projectedCost.toLocaleString()} ISK` : ''}
-                    onChange={(e) => setFormData({
-                      ...formData,
-                      projectedCost: parseISKAmount(e.target.value)
-                    })}
-                    className="bg-gray-800 border-gray-600 text-white"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="projectedRevenue" className="text-gray-300">Projected Revenue</Label>
-                  <Input
-                    id="projectedRevenue"
-                    type="text"
-                    value={formData.projectedRevenue ? `${formData.projectedRevenue.toLocaleString()} ISK` : ''}
-                    onChange={(e) => setFormData({
-                      ...formData,
-                      projectedRevenue: parseISKAmount(e.target.value)
-                    })}
-                    className="bg-gray-800 border-gray-600 text-white"
-                  />
-                </div>
-              </div>
-
-              <div className="flex gap-2 pt-4">
-                <Button type="submit" className="flex-1 bg-blue-600 hover:bg-blue-700">
-                  {job ? 'Update Job' : 'Create Job'}
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={onCancel}
-                  className="border-gray-600 hover:bg-gray-800"
-                >
-                  Cancel
-                </Button>
-              </div>
-            </form>
-          </TabsContent>
-
-          <TabsContent value="materials" className="space-y-4">
-            <MaterialsImportExport
-              job={job}
-              billOfMaterials={billOfMaterials}
-              consumedMaterials={consumedMaterials}
-              onBillOfMaterialsUpdate={setBillOfMaterials}
-              onConsumedMaterialsUpdate={setConsumedMaterials}
-            />
-
-            <div className="flex gap-2 pt-4">
-              <Button onClick={handleSubmit} className="flex-1 bg-blue-600 hover:bg-blue-700">
-                {job ? 'Update Job' : 'Create Job'}
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                onClick={onCancel}
-                className="border-gray-600 hover:bg-gray-800"
-              >
-                Cancel
-              </Button>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="itemName" className="text-gray-300">Output Item Name</Label>
+              <Input
+                id="itemName"
+                value={formData.outputItem}
+                onChange={(e) => setFormData({
+                  ...formData,
+                  outputItem: e.target.value
+                })}
+                className="bg-gray-800 border-gray-600 text-white"
+                required
+              />
             </div>
-          </TabsContent>
-        </Tabs>
+            <div className="space-y-2">
+              <Label htmlFor="itemQuantity" className="text-gray-300">Quantity</Label>
+              <Input
+                id="itemQuantity"
+                type="number"
+                value={formData.outputQuantity}
+                onChange={(e) => setFormData({
+                  ...formData,
+                  outputQuantity: parseInt(e.target.value) || 0
+                })}
+                className="bg-gray-800 border-gray-600 text-white"
+                required
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="status" className="text-gray-300">Status</Label>
+            <Select
+              value={formData.status}
+              onValueChange={(value) => setFormData({ ...formData, status: value as IndJobStatusOptions })}
+            >
+              <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 className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="startDate" className="text-gray-300">Start Date & Time</Label>
+              <Input
+                id="startDate"
+                type="datetime-local"
+                value={formData.jobStart}
+                onChange={(e) => setFormData({
+                  ...formData,
+                  jobStart: e.target.value
+                })}
+                className="bg-gray-800 border-gray-600 text-white"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="endDate" className="text-gray-300">End Date & Time</Label>
+              <Input
+                id="endDate"
+                type="datetime-local"
+                value={formData.jobEnd}
+                onChange={(e) => setFormData({
+                  ...formData,
+                  jobEnd: e.target.value
+                })}
+                className="bg-gray-800 border-gray-600 text-white"
+              />
+            </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 & Time</Label>
+              <Input
+                id="saleStartDate"
+                type="datetime-local"
+                value={formData.saleStart}
+                onChange={(e) => setFormData({
+                  ...formData,
+                  saleStart: e.target.value
+                })}
+                className="bg-gray-800 border-gray-600 text-white"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="saleEndDate" className="text-gray-300">Sale End Date & Time</Label>
+              <Input
+                id="saleEndDate"
+                type="datetime-local"
+                value={formData.saleEnd}
+                onChange={(e) => setFormData({
+                  ...formData,
+                  saleEnd: e.target.value
+                })}
+                className="bg-gray-800 border-gray-600 text-white"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="projectedCost" className="text-gray-300">Projected Cost</Label>
+              <Input
+                id="projectedCost"
+                type="text"
+                value={formData.projectedCost ? `${formData.projectedCost.toLocaleString()} ISK` : ''}
+                onChange={(e) => setFormData({
+                  ...formData,
+                  projectedCost: parseISKAmount(e.target.value)
+                })}
+                className="bg-gray-800 border-gray-600 text-white"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="projectedRevenue" className="text-gray-300">Projected Revenue</Label>
+              <Input
+                id="projectedRevenue"
+                type="text"
+                value={formData.projectedRevenue ? `${formData.projectedRevenue.toLocaleString()} ISK` : ''}
+                onChange={(e) => setFormData({
+                  ...formData,
+                  projectedRevenue: parseISKAmount(e.target.value)
+                })}
+                className="bg-gray-800 border-gray-600 text-white"
+              />
+            </div>
+          </div>
+
+          <div className="flex gap-2 pt-4">
+            <Button type="submit" className="flex-1 bg-blue-600 hover:bg-blue-700">
+              {job ? 'Update Job' : 'Create Job'}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onCancel}
+              className="border-gray-600 hover:bg-gray-800"
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
       </CardContent>
     </Card>
   );