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:
@@ -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>
|
||||||
|
Reference in New Issue
Block a user