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.
This commit is contained in:
gpt-engineer-app[bot]
2025-07-07 12:09:21 +00:00
parent 2ada112178
commit 29b5647ea2
4 changed files with 255 additions and 29 deletions

View File

@@ -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">