Blame view

泰额版/Food Labeling Management Platform/src/components/dashboard/RightPanel.tsx 4.01 KB
884054fb   “wangming”   项目初始化
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>
    );
  }