Make the rest of the application use "new" services

src/components/JobCard.tsx

@@ -5,16 +5,11 @@ 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 { IndJobResponse, IndTransactionResponse, IndBillitemResponse } from '@/lib/pbtypes';
 import { formatISK } from '@/utils/priceUtils';
+import { IndJob } from '@/lib/types';
 
 interface JobCardProps {
-  job: IndJobResponse & {
-    expenditures: IndTransactionResponse[];
-    income: IndTransactionResponse[];
-    billOfMaterials: IndBillitemResponse[];
-    consumedMaterials: { name: string; required: number }[];
-  };
+  job: IndJob;
   onEdit: (job: any) => void;
   onDelete: (jobId: string) => void;
 }
@@ -24,7 +19,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete }) => {
   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.saleStart ? new Date(job.saleStart).getTime() : null;
   const daysSinceStart = saleStartTime ? Math.max(1, Math.ceil((Date.now() - saleStartTime) / (1000 * 60 * 60 * 24))) : 0;
@@ -44,9 +39,9 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete }) => {
 
   const formatDateTime = (dateString: string | null | undefined) => {
     if (!dateString) return 'Not set';
-    return new Date(dateString).toLocaleString('en-CA', { 
-      year: 'numeric', 
-      month: '2-digit', 
+    return new Date(dateString).toLocaleString('en-CA', {
+      year: 'numeric',
+      month: '2-digit',
       day: '2-digit',
       hour: '2-digit',
       minute: '2-digit'
@@ -99,7 +94,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete }) => {
                         {job.consumedMaterials.map((item, index) => (
                           <div key={index} className="flex justify-between">
                             <span>{item.name}</span>
-                            <span className="text-gray-300">{item.required.toLocaleString()}</span>
+                            <span className="text-gray-300">{item.quantity.toLocaleString()}</span>
                           </div>
                         ))}
                       </div>
@@ -111,17 +106,17 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete }) => {
             <p className="text-gray-400">Quantity: {job.outputQuantity.toLocaleString()}</p>
           </div>
           <div className="flex gap-2">
-            <Button 
-              variant="outline" 
-              size="sm" 
+            <Button
+              variant="outline"
+              size="sm"
               onClick={() => onEdit(job)}
               className="border-gray-600 hover:bg-gray-800"
             >
               Edit
             </Button>
-            <Button 
-              variant="destructive" 
-              size="sm" 
+            <Button
+              variant="destructive"
+              size="sm"
               onClick={() => onDelete(job.id)}
             >
               Delete
@@ -144,7 +139,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete }) => {
             Job ID: {job.id}
           </div>
         </div>
-        
+
         {job.saleStart && (
           <div className="space-y-2">
             <div className="text-sm text-gray-400">
@@ -157,7 +152,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete }) => {
             )}
           </div>
         )}
-        
+
         <div className="grid grid-cols-3 gap-4 pt-4 border-t border-gray-700">
           <div className="text-center">
             <div className="flex items-center justify-center gap-1 text-red-400">