Initial commit: Digital Home dashboard

src/app/(dashboard)/system/page.tsx

@@ -0,0 +1,145 @@
+"use client";
+import { useState } from "react";
+import { Cpu, MemoryStick, HardDrive, Clock } from "lucide-react";
+
+const TABS = ["Моя машина", "Сервисы", "Рига"] as const;
+
+const MOCK_DATA = {
+  "Моя машина": { cpu: 23, ram: { used: 8.2, total: 16 }, disk: { used: 124, total: 512 }, uptime: "3д 14ч" },
+  "Сервисы": { cpu: 41, ram: { used: 6.8, total: 9.7 }, disk: { used: 47, total: 97 }, uptime: "12д 2ч" },
+  "Рига": { cpu: 8, ram: { used: 1.1, total: 2 }, disk: { used: 18, total: 40 }, uptime: "45д 7ч" },
+};
+
+function Sparkline({ values }: { values: number[] }) {
+  const max = Math.max(...values);
+  const min = Math.min(...values);
+  const range = max - min || 1;
+  const h = 32;
+  const w = 80;
+  const pts = values.map((v, i) => {
+    const x = (i / (values.length - 1)) * w;
+    const y = h - ((v - min) / range) * h;
+    return `${x},${y}`;
+  }).join(" ");
+  return (
+    <svg width={w} height={h} className="opacity-60">
+      <polyline points={pts} fill="none" stroke="rgb(99,102,241)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function StatCard({ icon: Icon, label, value, sub, sparkData, color }: {
+  icon: React.ElementType;
+  label: string;
+  value: string;
+  sub?: string;
+  sparkData?: number[];
+  color: string;
+}) {
+  return (
+    <div className="glass-card p-5">
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <Icon className={`w-4 h-4 ${color}`} />
+          <span className="text-sm text-slate-400">{label}</span>
+        </div>
+        {sparkData && <Sparkline values={sparkData} />}
+      </div>
+      <div className="text-2xl font-bold text-white">{value}</div>
+      {sub && <div className="text-xs text-slate-500 mt-1">{sub}</div>}
+    </div>
+  );
+}
+
+export default function SystemPage() {
+  const [activeTab, setActiveTab] = useState<typeof TABS[number]>("Моя машина");
+  const data = MOCK_DATA[activeTab];
+  
+  const cpuHistory = Array.from({ length: 12 }, () => Math.floor(Math.random() * 40 + data.cpu - 10));
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-white">System</h1>
+        <p className="text-slate-400 text-sm">Мониторинг систем (mock данные)</p>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex gap-1 bg-slate-800/50 p-1 rounded-lg w-fit">
+        {TABS.map((tab) => (
+          <button
+            key={tab}
+            onClick={() => setActiveTab(tab)}
+            className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
+              activeTab === tab
+                ? "bg-indigo-600 text-white shadow"
+                : "text-slate-400 hover:text-slate-200"
+            }`}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard
+          icon={Cpu}
+          label="CPU"
+          value={`${data.cpu}%`}
+          sub="Загрузка процессора"
+          sparkData={cpuHistory}
+          color="text-blue-400"
+        />
+        <StatCard
+          icon={MemoryStick}
+          label="RAM"
+          value={`${data.ram.used} GB`}
+          sub={`из ${data.ram.total} GB`}
+          color="text-violet-400"
+        />
+        <StatCard
+          icon={HardDrive}
+          label="Disk"
+          value={`${data.disk.used} GB`}
+          sub={`из ${data.disk.total} GB`}
+          color="text-emerald-400"
+        />
+        <StatCard
+          icon={Clock}
+          label="Uptime"
+          value={data.uptime}
+          sub="Время работы"
+          color="text-amber-400"
+        />
+      </div>
+
+      {/* Usage bars */}
+      <div className="glass-card p-5 space-y-4">
+        <h3 className="text-sm font-medium text-slate-300">Использование ресурсов</h3>
+        {[
+          { label: "CPU", value: data.cpu, color: "bg-blue-500" },
+          { label: "RAM", value: (data.ram.used / data.ram.total) * 100, color: "bg-violet-500" },
+          { label: "Disk", value: (data.disk.used / data.disk.total) * 100, color: "bg-emerald-500" },
+        ].map((item) => (
+          <div key={item.label} className="space-y-1.5">
+            <div className="flex justify-between text-xs">
+              <span className="text-slate-400">{item.label}</span>
+              <span className="text-slate-300">{item.value.toFixed(0)}%</span>
+            </div>
+            <div className="h-2 bg-slate-800 rounded-full overflow-hidden">
+              <div
+                className={`h-full ${item.color} rounded-full transition-all duration-500`}
+                style={{ width: `${item.value}%` }}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="text-xs text-slate-600 text-center">
+        ⚠️ Данные примерные. Реальный мониторинг будет добавлен позже.
+      </div>
+    </div>
+  );
+}