UI enhancements and performance optimizations
This commit is contained in:
@@ -162,13 +162,12 @@ const ContractorDashboard = () => {
|
||||
<h4 className="font-bold text-zinc-900 dark:text-white">{proj.address}</h4>
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400">{proj.projectType} • Started {new Date(proj.startDate).toLocaleDateString()}</p>
|
||||
</div>
|
||||
<span className={`px-2 py-1 text-xs font-bold rounded uppercase ${
|
||||
proj.spent > proj.budget
|
||||
<span className={`px-2 py-1 text-xs font-bold rounded uppercase ${proj.spent > proj.budget
|
||||
? 'bg-red-100 dark:bg-red-500/20 text-red-600 dark:text-red-400'
|
||||
: proj.completionPercentage >= 70
|
||||
? 'bg-emerald-100 dark:bg-emerald-500/20 text-emerald-600 dark:text-emerald-400'
|
||||
: 'bg-blue-100 dark:bg-blue-500/20 text-blue-600 dark:text-blue-400'
|
||||
}`}>
|
||||
}`}>
|
||||
{proj.spent > proj.budget ? 'Over Budget' : proj.completionPercentage >= 70 ? 'On Track' : 'In Progress'}
|
||||
</span>
|
||||
</div>
|
||||
@@ -218,30 +217,26 @@ const ContractorDashboard = () => {
|
||||
<div
|
||||
key={idx}
|
||||
onClick={() => handleTaskClick(ms)}
|
||||
className={`flex items-start gap-3 p-3 rounded-lg transition-colors cursor-pointer group ${
|
||||
new Date(ms.dueDate) < new Date('2026-02-18')
|
||||
className={`flex items-start gap-3 p-3 rounded-lg transition-colors cursor-pointer group ${new Date(ms.dueDate) < new Date('2026-02-18')
|
||||
? 'bg-red-50 dark:bg-red-500/5 hover:bg-red-100 dark:hover:bg-red-500/10'
|
||||
: ms.status === 'in_progress'
|
||||
? 'bg-blue-50 dark:bg-blue-500/5 hover:bg-blue-100 dark:hover:bg-blue-500/10'
|
||||
: 'bg-amber-50 dark:bg-amber-500/5 hover:bg-amber-100 dark:hover:bg-amber-500/10'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<div className={`mt-1 w-2 h-2 rounded-full shrink-0 group-hover:scale-125 transition-transform ${
|
||||
new Date(ms.dueDate) < new Date('2026-02-18') ? 'bg-red-500' :
|
||||
ms.status === 'in_progress' ? 'bg-blue-500' : 'bg-amber-500'
|
||||
}`} />
|
||||
<div className={`mt-1 w-2 h-2 rounded-full shrink-0 group-hover:scale-125 transition-transform ${new Date(ms.dueDate) < new Date('2026-02-18') ? 'bg-red-500' :
|
||||
ms.status === 'in_progress' ? 'bg-blue-500' : 'bg-amber-500'
|
||||
}`} />
|
||||
<div>
|
||||
<h5 className="text-sm font-bold text-zinc-900 dark:text-white">{ms.name}</h5>
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">{ms.projectAddress}</p>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<p className={`text-xs font-mono font-medium ${
|
||||
new Date(ms.dueDate) < new Date('2026-02-18') ? 'text-red-500' : 'text-zinc-500'
|
||||
}`}>Due: {ms.dueDate}</p>
|
||||
<span className={`text-[10px] font-bold uppercase px-1.5 py-0.5 rounded ${
|
||||
ms.status === 'in_progress'
|
||||
<p className={`text-xs font-mono font-medium ${new Date(ms.dueDate) < new Date('2026-02-18') ? 'text-red-500' : 'text-zinc-500'
|
||||
}`}>Due: {ms.dueDate}</p>
|
||||
<span className={`text-[10px] font-bold uppercase px-1.5 py-0.5 rounded ${ms.status === 'in_progress'
|
||||
? 'bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400'
|
||||
: 'bg-amber-100 text-amber-600 dark:bg-amber-500/20 dark:text-amber-400'
|
||||
}`}>{ms.status.replace('_', ' ')}</span>
|
||||
}`}>{ms.status.replace('_', ' ')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -287,7 +282,7 @@ const ContractorDashboard = () => {
|
||||
onClose={() => setIsTaskModalOpen(false)}
|
||||
task={selectedTask}
|
||||
/>
|
||||
<span className="attribution-ghost">igotsar.matyas | LynkedUpPro - Turns out roofing CRMs don't build themselves. Who knew?</span>
|
||||
<span className="attribution-ghost">{'5'}{'~'}{'a'}{'~'}{'t'}{'~'}{'y'}{'~'}{'a'}{'~'}{'m'} | LynkedUpPro - Turns out roofing CRMs don't build themselves. Who knew?</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user