Hugging Face's logo

Karmasheks
/
TT

Model card Files
xet
Community
TT
File size: 3,332 Bytes 
4d76deb
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
import React from 'react';
import { Line, Pie } from 'react-chartjs-2';
import 'chart.js/auto';

function Dashboard({ equipment, maintenanceEvents }) {
  const stats = {
    total: equipment?.length || 0,
    active: equipment?.filter(e => e.status === 'active').length || 0,
    maintenance: equipment?.filter(e => e.status === 'maintenance').length || 0,
    repair: equipment?.filter(e => e.status === 'repair').length || 0
  };

  const chartData = {
    labels: ['Активно', 'ТО', 'Ремонт'],
    datasets: [{
      data: [stats.active, stats.maintenance, stats.repair],
      backgroundColor: ['#10B981', '#F59E0B', '#EF4444'],
      borderWidth: 0
    }]
  };

  const chartOptions = {
    responsive: true,
    plugins: {
      legend: {
        position: 'bottom',
      }
    }
  };

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div className="bg-white rounded-lg shadow p-6 border-l-4 border-blue-500">
          <h4 className="font-medium text-gray-500">Всего оборудования</h4>
          <p className="text-2xl font-bold">{stats.total}</p>
        </div>
        <div className="bg-white rounded-lg shadow p-6 border-l-4 border-green-500">
          <h4 className="font-medium text-gray-500">Активно</h4>
          <p className="text-2xl font-bold">{stats.active}</p>
        </div>
        <div className="bg-white rounded-lg shadow p-6 border-l-4 border-yellow-500">
          <h4 className="font-medium text-gray-500">На ТО</h4>
          <p className="text-2xl font-bold">{stats.maintenance}</p>
        </div>
        <div className="bg-white rounded-lg shadow p-6 border-l-4 border-red-500">
          <h4 className="font-medium text-gray-500">В ремонте</h4>
          <p className="text-2xl font-bold">{stats.repair}</p>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white rounded-lg shadow p-6">
          <h3 className="text-lg font-semibold mb-4">Статус оборудования</h3>
          <div className="h-64">
            <Pie data={chartData} options={chartOptions} />
          </div>
        </div>
        <div className="bg-white rounded-lg shadow p-6">
          <h3 className="text-lg font-semibold mb-4">Последние события</h3>
          <div className="space-y-4">
            {maintenanceEvents?.slice(0, 5).map(event => (
              <div key={event.id} className="flex items-center justify-between border-b pb-2">
                <div>
                  <p className="font-medium">{equipment?.find(e => e.id === event.equipment_id)?.name}</p>
                  <p className="text-sm text-gray-500">{new Date(event.date).toLocaleDateString()}</p>
                </div>
                <span className={`px-2 py-1 rounded-full text-xs font-semibold ${
                  event.status === 'completed' ? 'bg-green-100 text-green-800' :
                  event.status === 'planned' ? 'bg-blue-100 text-blue-800' :
                  'bg-yellow-100 text-yellow-800'
                }`}>
                  {event.status}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Dashboard;