Fix: Job card visual improvements

- Aligned job status with the edit button in JobCard.
- Standardized the appearance of import/export buttons.
This commit is contained in:
gpt-engineer-app[bot]
2025-07-07 11:26:37 +00:00
parent 2a1382bf2e
commit b303d12cb1

View File

@@ -220,14 +220,7 @@ const JobCard: React.FC<JobCardProps> = ({
<CardHeader className="flex-shrink-0">
<div className="flex justify-between items-start">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-3 mb-2">
<CardTitle className="text-blue-400 truncate">{job.outputItem}</CardTitle>
<div className="flex items-center gap-2 flex-shrink-0">
<Badge className={`${getStatusColor(job.status)} text-white`}>
{job.status}
</Badge>
</div>
</div>
<CardTitle className="text-blue-400 truncate mb-2">{job.outputItem}</CardTitle>
<p className="text-gray-400 text-sm">
Quantity: {job.outputQuantity.toLocaleString()}
<span className="ml-4">
@@ -261,7 +254,10 @@ const JobCard: React.FC<JobCardProps> = ({
</p>
</div>
<div className="flex flex-col gap-2 flex-shrink-0 items-end">
<div className="flex gap-2">
<div className="flex items-center gap-2">
<Badge className={`${getStatusColor(job.status)} text-white`}>
{job.status}
</Badge>
<Button
variant="outline"
size="sm"
@@ -280,18 +276,18 @@ const JobCard: React.FC<JobCardProps> = ({
</div>
<div className="flex gap-1">
<Button
variant="ghost"
variant="outline"
size="sm"
className="p-1 h-6 w-6"
className="border-gray-600 hover:bg-gray-800"
onClick={handleImportClick}
title="Import BOM from clipboard"
>
<Import className="w-4 h-4 text-blue-400" />
<Import className="w-4 h-4" />
</Button>
<Button
variant="ghost"
variant="outline"
size="sm"
className="p-1 h-6 w-6"
className="border-gray-600 hover:bg-gray-800"
onClick={handleExportClick}
disabled={!job.billOfMaterials?.length}
title="Export BOM to clipboard"
@@ -299,7 +295,7 @@ const JobCard: React.FC<JobCardProps> = ({
{copyingBom ? (
<Check className="w-4 h-4 text-green-400" />
) : (
<Upload className="w-4 h-4 text-blue-400" />
<Upload className="w-4 h-4" />
)}
</Button>
</div>