TasksWidget.tsx
2.06 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { CheckCircle2 } from 'lucide-react';
export function TasksWidget() {
return (
<Card className="col-span-1 shadow-sm">
<CardHeader className="flex flex-row items-center justify-between pb-2">
<div className="flex items-center gap-2">
<CheckCircle2 className="w-5 h-5 text-gray-700" />
<CardTitle className="text-base font-semibold">Tasks</CardTitle>
</div>
<span className="text-xs font-semibold text-blue-600 bg-blue-50 px-2 py-1 rounded-full">6 pending</span>
</CardHeader>
<CardContent>
<div className="text-xs text-muted-foreground mb-4">Pending and assigned tasks</div>
<div className="space-y-4">
<div className="flex items-start justify-between border-l-2 border-green-500 pl-3">
<div>
<div className="text-sm font-semibold text-gray-900">Inventory check</div>
<div className="text-xs text-gray-500">Main warehouse</div>
</div>
<span className="text-[10px] bg-green-100 text-green-700 px-1.5 py-0.5 rounded">Today</span>
</div>
<div className="flex items-start justify-between border-l-2 border-yellow-500 pl-3">
<div>
<div className="text-sm font-semibold text-gray-900">Supplier review</div>
<div className="text-xs text-gray-500">Quality assessment</div>
</div>
<span className="text-[10px] bg-yellow-100 text-yellow-700 px-1.5 py-0.5 rounded">Tomorrow</span>
</div>
<div className="flex items-start justify-between border-l-2 border-blue-500 pl-3">
<div>
<div className="text-sm font-semibold text-gray-900">Sensor calibration</div>
<div className="text-xs text-gray-500">Production line #2</div>
</div>
<span className="text-[10px] bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded">Next week</span>
</div>
</div>
</CardContent>
</Card>
);
}