dave/eve-industrializer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor UI for improved visuals

Browse Source 
- Fixed tag alignment in JobCard.
- Styled category headers with their respective colors and removed the arrow icon.
- Improved the display of "expenditure", "income", and "profit" information.
This commit is contained in:
gpt-engineer-app[bot]
2025-07-07 11:23:14 +00:00
parent fa03bdb207
commit 2a1382bf2e
2 changed files with 48 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/JobCard.tsx
View File

@@ -220,11 +220,13 @@ 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-2 mb-2">
<div className="flex items-center gap-3 mb-2">
<CardTitle className="text-blue-400 truncate">{job.outputItem}</CardTitle>
<Badge className={`${getStatusColor(job.status)} text-white flex-shrink-0`}>
{job.status}
</Badge>
<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">
Quantity: {job.outputQuantity.toLocaleString()}
@@ -258,7 +260,7 @@ const JobCard: React.FC<JobCardProps> = ({
</span>
</p>
</div>
<div className="flex flex-col gap-2 flex-shrink-0">
<div className="flex flex-col gap-2 flex-shrink-0 items-end">
<div className="flex gap-2">
<Button
variant="outline"
@@ -276,7 +278,7 @@ const JobCard: React.FC<JobCardProps> = ({
Delete
</Button>
</div>
<div className="flex gap-1 justify-end">
<div className="flex gap-1">
<Button
variant="ghost"
size="sm"
@@ -360,62 +362,42 @@ const JobCard: React.FC<JobCardProps> = ({
<div className="flex-1" />
<div className="grid grid-cols-3 gap-4 pt-4 border-t border-gray-700 flex-shrink-0">
<div className="text-center">
<div className="flex items-center justify-center gap-1 text-red-400">
<TrendingDown className="w-4 h-4" />
<span className="text-sm">Expenditure</span>
</div>
<div className="font-semibold text-sm">{formatISK(totalExpenditure)}</div>
<div className="grid grid-cols-3 gap-3 pt-4 border-t border-gray-700 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 Projected: {formatISK(job.projectedCost)}
<Badge
variant={totalExpenditure <= job.projectedCost ? 'default' : 'destructive'}
className="ml-1 text-xs"
>
{((totalExpenditure / job.projectedCost) * 100).toFixed(1)}%
</Badge>
vs {formatISK(job.projectedCost)}
<div className={`text-xs font-medium ${totalExpenditure <= job.projectedCost ? 'text-green-400' : 'text-red-400'}`}>
{((totalExpenditure / job.projectedCost) * 100).toFixed(0)}%
</div>
</div>
)}
</div>
<div className="text-center">
<div className="flex items-center justify-center gap-1 text-green-400">
<TrendingUp className="w-4 h-4" />
<span className="text-sm">Income</span>
</div>
<div className="font-semibold text-sm">{formatISK(totalIncome)}</div>
<div className="text-center space-y-1">
<div className="text-xs font-medium text-green-400 uppercase tracking-wide">Revenue</div>
<div className="text-lg font-bold text-green-400">{formatISK(totalIncome)}</div>
{job.projectedRevenue > 0 && (
<div className="text-xs text-gray-400">
vs Projected: {formatISK(job.projectedRevenue)}
<Badge
variant={totalIncome >= job.projectedRevenue ? 'default' : 'destructive'}
className="ml-1 text-xs"
>
{((totalIncome / job.projectedRevenue) * 100).toFixed(1)}%
</Badge>
vs {formatISK(job.projectedRevenue)}
<div className={`text-xs font-medium ${totalIncome >= job.projectedRevenue ? 'text-green-400' : 'text-red-400'}`}>
{((totalIncome / job.projectedRevenue) * 100).toFixed(0)}%
</div>
</div>
)}
</div>
<div className="text-center">
<div className="flex items-center justify-center gap-1 text-gray-400">
<span className="text-sm">Profit</span>
</div>
<div className={`font-semibold text-sm ${profit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
<div className="text-center space-y-1">
<div className="text-xs font-medium text-gray-300 uppercase tracking-wide">Profit</div>
<div className={`text-lg font-bold ${profit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
{formatISK(profit)}
<Badge variant={profit >= 0 ? 'default' : 'destructive'} className="ml-1 text-xs">
{margin.toFixed(1)}%
</Badge>
</div>
<div className={`text-xs font-medium ${profit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
{margin.toFixed(1)}% margin
</div>
{job.projectedRevenue > 0 && job.projectedCost > 0 && (
<div className="text-xs text-gray-400">
vs Projected: {formatISK(job.projectedRevenue - job.projectedCost)}
<Badge
variant={profit >= (job.projectedRevenue - job.projectedCost) ? 'default' : 'destructive'}
className="ml-1 text-xs"
>
{((profit / (job.projectedRevenue - job.projectedCost)) * 100).toFixed(1)}%
</Badge>
vs {formatISK(job.projectedRevenue - job.projectedCost)}
</div>
)}
</div>