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