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.
2025-07-07 12:09:21 +00:00
parent 2ada112178
commit 29b5647ea2
4 changed files with 255 additions and 29 deletions
--- 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">
--- 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,35 +72,79 @@ 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>
        
-      {job.saleStart && (
-        <div className="space-y-2 mt-4">
-          <div className="text-sm text-gray-400">
-            Sale Period: {formatDateTime(job.saleStart)} - {formatDateTime(job.saleEnd)}
+        <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>
+
      {itemsPerDay > 0 && (
-            <div className="text-sm text-gray-400">
+        <div className="text-sm text-gray-400 mt-2">
          Items/Day: {itemsPerDay.toFixed(2)}
        </div>
      )}
-        </div>
-      )}

      {job.billOfMaterials && job.billOfMaterials.length > 0 && (
        <HoverCard>
@@ -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">
--- 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`}>
+          <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"
--- 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>