RightPanel.tsx
4.01 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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import React from 'react';
import { Calendar as CalendarIcon, Clock } from 'lucide-react';
import { Progress } from '../ui/progress';
export function RightPanel() {
return (
<div className="space-y-8">
{/* System Status */}
<div>
<h3 className="text-sm font-bold text-gray-900 mb-4">System Status</h3>
<div className="space-y-4">
<div>
<div className="flex justify-between text-xs mb-1">
<span className="font-medium text-gray-700">Operations Status</span>
<span className="text-green-600 flex items-center gap-1">● Normal</span>
</div>
</div>
<div>
<div className="flex justify-between text-xs mb-1">
<span className="text-gray-600">Storage Capacity</span>
<span className="text-gray-900 font-medium">73%</span>
</div>
<Progress value={73} className="h-1.5 bg-blue-100 [&>[data-slot=progress-indicator]]:bg-blue-600" />
</div>
<div>
<div className="flex justify-between text-xs mb-1">
<span className="text-gray-600">System Load</span>
<span className="text-gray-900 font-medium">42%</span>
</div>
<Progress value={42} className="h-1.5 bg-green-100 [&>[data-slot=progress-indicator]]:bg-green-500" />
</div>
</div>
</div>
{/* Upcoming Events */}
<div>
<div className="flex items-center justify-between mb-4">
<h3 className="text-sm font-bold text-gray-900">Upcoming Events</h3>
<CalendarIcon className="w-4 h-4 text-blue-500" />
</div>
<div className="space-y-4">
<div className="flex gap-3">
<div className="w-8 h-8 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center shrink-0">
<CalendarIcon className="w-4 h-4" />
</div>
<div>
<div className="text-sm font-semibold text-gray-900">Quarterly Review</div>
<div className="text-xs text-gray-500">Dec 5, 2025 | 10:00 AM</div>
</div>
</div>
<div className="flex gap-3">
<div className="w-8 h-8 rounded-lg bg-green-100 text-green-600 flex items-center justify-center shrink-0">
<CalendarIcon className="w-4 h-4" />
</div>
<div>
<div className="text-sm font-semibold text-gray-900">Supplier Meeting</div>
<div className="text-xs text-gray-500">Nov 30, 2025 | 2:30 PM</div>
</div>
</div>
</div>
</div>
{/* Recent Activities */}
<div>
<h3 className="text-sm font-bold text-gray-900 mb-4">Recent Activities</h3>
<div className="space-y-6 relative pl-2">
{/* Vertical Line */}
<div className="absolute left-0 top-2 bottom-2 w-px bg-gray-200" />
<div className="relative pl-4">
<div className="absolute left-[-2px] top-1.5 w-1.5 h-1.5 rounded-full bg-blue-500 ring-4 ring-white" />
<div className="text-sm text-gray-900 font-medium leading-none mb-1">David Wilson updated sensor configuration</div>
<div className="text-xs text-gray-500">45 minutes ago</div>
</div>
<div className="relative pl-4">
<div className="absolute left-[-2px] top-1.5 w-1.5 h-1.5 rounded-full bg-gray-300 ring-4 ring-white" />
<div className="text-sm text-gray-900 font-medium leading-none mb-1">System generated monthly reports</div>
<div className="text-xs text-gray-500">2 hours ago</div>
</div>
<div className="relative pl-4">
<div className="absolute left-[-2px] top-1.5 w-1.5 h-1.5 rounded-full bg-gray-300 ring-4 ring-white" />
<div className="text-sm text-gray-900 font-medium leading-none mb-1">Sarah Chen added new products</div>
<div className="text-xs text-gray-500">3 hours ago</div>
</div>
</div>
</div>
</div>
);
}