Refactor: Use new services and types

Update frontend components to use the new services and types for job management, including facilities, jobs, and transactions. Remove old type definitions and integrate the new ones.

src/components/JobCard.tsx

@@ -1,33 +1,39 @@
+
 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 { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
 import { Calendar, Factory, TrendingUp, TrendingDown, Clock, Package, Wrench } from 'lucide-react';
-import { Job } from '@/services/jobService';
+import { IndJobResponse, IndTransactionResponse, IndBillitemResponse } from '@/lib/pbtypes';
 import { formatISK } from '@/utils/priceUtils';
 
 interface JobCardProps {
-  job: Job;
-  onEdit: (job: Job) => void;
+  job: IndJobResponse & {
+    expenditures: IndTransactionResponse[];
+    income: IndTransactionResponse[];
+    billOfMaterials: IndBillitemResponse[];
+    consumedMaterials: { name: string; required: number }[];
+  };
+  onEdit: (job: any) => void;
   onDelete: (jobId: string) => void;
 }
 
 const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete }) => {
-  const totalExpenditure = job.expenditures.reduce((sum, tx) => sum + Math.abs(tx.totalAmount), 0);
-  const totalIncome = job.income.reduce((sum, tx) => sum + tx.totalAmount, 0);
+  const totalExpenditure = job.expenditures.reduce((sum, tx) => sum + tx.totalPrice, 0);
+  const totalIncome = job.income.reduce((sum, tx) => sum + tx.totalPrice, 0);
   const profit = totalIncome - totalExpenditure;
   const margin = totalIncome > 0 ? ((profit / totalIncome) * 100) : 0;
   
   const itemsSold = job.income.reduce((sum, tx) => sum + tx.quantity, 0);
-  const saleStartTime = job.dates.saleStart?.getTime();
+  const saleStartTime = job.saleStart ? new Date(job.saleStart).getTime() : null;
   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 'Acquisition': return 'bg-yellow-600';
       case 'Running': return 'bg-blue-600';
       case 'Done': return 'bg-green-600';
       case 'Selling': return 'bg-purple-600';
@@ -36,9 +42,9 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete }) => {
     }
   };
 
-  const formatDateTime = (date: Date | null) => {
-    if (!date) return 'Not set';
-    return date.toLocaleString('en-CA', { 
+  const formatDateTime = (dateString: string | null | undefined) => {
+    if (!dateString) return 'Not set';
+    return new Date(dateString).toLocaleString('en-CA', { 
       year: 'numeric', 
       month: '2-digit', 
       day: '2-digit',
@@ -53,7 +59,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete }) => {
         <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>
+              <CardTitle className="text-blue-400">{job.outputItem}</CardTitle>
               <Badge className={`${getStatusColor(job.status)} text-white`}>
                 {job.status}
               </Badge>
@@ -102,7 +108,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete }) => {
                 </HoverCard>
               )}
             </div>
-            <p className="text-gray-400">Quantity: {job.outputItem.quantity.toLocaleString()}</p>
+            <p className="text-gray-400">Quantity: {job.outputQuantity.toLocaleString()}</p>
           </div>
           <div className="flex gap-2">
             <Button 
@@ -127,22 +133,22 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete }) => {
         <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.dates.creation)}
+            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.dates.start)}
+            Start: {formatDateTime(job.jobStart)}
           </div>
           <div className="flex items-center gap-2 text-sm text-gray-400">
             <Factory className="w-4 h-4" />
-            Facility: {job.facilityId}
+            Job ID: {job.id}
           </div>
         </div>
         
-        {job.dates.saleStart && (
+        {job.saleStart && (
           <div className="space-y-2">
             <div className="text-sm text-gray-400">
-              Sale Period: {formatDateTime(job.dates.saleStart)} - {formatDateTime(job.dates.saleEnd)}
+              Sale Period: {formatDateTime(job.saleStart)} - {formatDateTime(job.saleEnd)}
             </div>
             {itemsPerDay > 0 && (
               <div className="text-sm text-gray-400">