init

2025-09-12 23:04:52 +03:00
commit 2277b11563
127 changed files with 23640 additions and 0 deletions
@@ -0,0 +1,284 @@
+import { useState, useEffect } from 'react';
+import { 
+  Server, 
+  Users, 
+  Shield, 
+  Mail, 
+  Calendar, 
+  FolderOpen, 
+  Wifi,
+  Activity,
+  CheckCircle,
+  XCircle,
+  AlertCircle
+} from 'lucide-react';
+import { cellAPI, servicesAPI } from '../services/api';
+
+function Dashboard({ isOnline }) {
+  const [cellStatus, setCellStatus] = useState(null);
+  const [servicesStatus, setServicesStatus] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (!isOnline) {
+        setIsLoading(false);
+        return;
+      }
+
+      try {
+        const [statusResponse, servicesResponse] = await Promise.all([
+          cellAPI.getStatus(),
+          servicesAPI.getAllStatus()
+        ]);
+        
+        setCellStatus(statusResponse.data);
+        setServicesStatus(servicesResponse.data);
+      } catch (error) {
+        console.error('Failed to fetch dashboard data:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchData();
+    const interval = setInterval(fetchData, 30000); // Refresh every 30 seconds
+
+    return () => clearInterval(interval);
+  }, [isOnline]);
+
+  const getStatusIcon = (status) => {
+    if (status === true || status?.status === 'online' || status?.running === true) {
+      return <CheckCircle className="h-5 w-5 text-success-500" />;
+    } else if (status === false || status?.status === 'offline' || status?.running === false) {
+      return <XCircle className="h-5 w-5 text-danger-500" />;
+    } else {
+      return <AlertCircle className="h-5 w-5 text-warning-500" />;
+    }
+  };
+
+  const getStatusText = (status) => {
+    if (status === true || status?.status === 'online' || status?.running === true) {
+      return 'Online';
+    } else if (status === false || status?.status === 'offline' || status?.running === false) {
+      return 'Offline';
+    } else {
+      return 'Unknown';
+    }
+  };
+
+  const getStatusColor = (status) => {
+    if (status === true || status?.status === 'online' || status?.running === true) {
+      return 'text-success-600';
+    } else if (status === false || status?.status === 'offline' || status?.running === false) {
+      return 'text-danger-600';
+    } else {
+      return 'text-warning-600';
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
+        <p className="mt-2 text-gray-600">
+          Overview of your Personal Internet Cell status and services
+        </p>
+      </div>
+
+      {/* Cell Status */}
+      {cellStatus && (
+        <div className="mb-8">
+          <h2 className="text-lg font-semibold text-gray-900 mb-4">Cell Status</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            <div className="card">
+              <div className="flex items-center">
+                <Server className="h-8 w-8 text-primary-500" />
+                <div className="ml-4">
+                  <p className="text-sm font-medium text-gray-500">Cell Name</p>
+                  <p className="text-lg font-semibold text-gray-900">{cellStatus.cell_name}</p>
+                </div>
+              </div>
+            </div>
+            
+            <div className="card">
+              <div className="flex items-center">
+                <Users className="h-8 w-8 text-primary-500" />
+                <div className="ml-4">
+                  <p className="text-sm font-medium text-gray-500">Peers</p>
+                  <p className="text-lg font-semibold text-gray-900">{cellStatus.peers_count}</p>
+                </div>
+              </div>
+            </div>
+            
+            <div className="card">
+              <div className="flex items-center">
+                <Activity className="h-8 w-8 text-primary-500" />
+                <div className="ml-4">
+                  <p className="text-sm font-medium text-gray-500">Uptime</p>
+                  <p className="text-lg font-semibold text-gray-900">
+                    {Math.floor((cellStatus.uptime || 0) / 3600)}h {Math.floor(((cellStatus.uptime || 0) % 3600) / 60)}m
+                  </p>
+                </div>
+              </div>
+            </div>
+            
+            <div className="card">
+              <div className="flex items-center">
+                <div className="h-8 w-8 rounded-full bg-primary-100 flex items-center justify-center">
+                  <div className="h-3 w-3 rounded-full bg-primary-600"></div>
+                </div>
+                <div className="ml-4">
+                  <p className="text-sm font-medium text-gray-500">Status</p>
+                  <p className="text-lg font-semibold text-gray-900">Active</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Services Status */}
+      {servicesStatus && (
+        <div className="mb-8">
+          <h2 className="text-lg font-semibold text-gray-900 mb-4">Services Status</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div className="card">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center">
+                  <Shield className="h-6 w-6 text-primary-500" />
+                  <span className="ml-3 text-sm font-medium text-gray-900">WireGuard</span>
+                </div>
+                <div className="flex items-center">
+                  {getStatusIcon(servicesStatus.wireguard)}
+                  <span className={`ml-2 text-sm font-medium ${getStatusColor(servicesStatus.wireguard)}`}>
+                    {getStatusText(servicesStatus.wireguard)}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="card">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center">
+                  <Mail className="h-6 w-6 text-primary-500" />
+                  <span className="ml-3 text-sm font-medium text-gray-900">Email</span>
+                </div>
+                <div className="flex items-center">
+                  {getStatusIcon(servicesStatus.email)}
+                  <span className={`ml-2 text-sm font-medium ${getStatusColor(servicesStatus.email)}`}>
+                    {getStatusText(servicesStatus.email)}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="card">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center">
+                  <Calendar className="h-6 w-6 text-primary-500" />
+                  <span className="ml-3 text-sm font-medium text-gray-900">Calendar</span>
+                </div>
+                <div className="flex items-center">
+                  {getStatusIcon(servicesStatus.calendar)}
+                  <span className={`ml-2 text-sm font-medium ${getStatusColor(servicesStatus.calendar)}`}>
+                    {getStatusText(servicesStatus.calendar)}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="card">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center">
+                  <FolderOpen className="h-6 w-6 text-primary-500" />
+                  <span className="ml-3 text-sm font-medium text-gray-900">Files</span>
+                </div>
+                <div className="flex items-center">
+                  {getStatusIcon(servicesStatus.files)}
+                  <span className={`ml-2 text-sm font-medium ${getStatusColor(servicesStatus.files)}`}>
+                    {getStatusText(servicesStatus.files)}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="card">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center">
+                  <Wifi className="h-6 w-6 text-primary-500" />
+                  <span className="ml-3 text-sm font-medium text-gray-900">Routing</span>
+                </div>
+                <div className="flex items-center">
+                  {getStatusIcon(servicesStatus.routing)}
+                  <span className={`ml-2 text-sm font-medium ${getStatusColor(servicesStatus.routing)}`}>
+                    {getStatusText(servicesStatus.routing)}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="card">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center">
+                  <Server className="h-6 w-6 text-primary-500" />
+                  <span className="ml-3 text-sm font-medium text-gray-900">Network</span>
+                </div>
+                <div className="flex items-center">
+                  {getStatusIcon(servicesStatus.network)}
+                  <span className={`ml-2 text-sm font-medium ${getStatusColor(servicesStatus.network)}`}>
+                    {getStatusText(servicesStatus.network)}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Quick Actions */}
+      <div>
+        <h2 className="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <button className="card hover:shadow-md transition-shadow cursor-pointer">
+            <div className="flex items-center">
+              <Users className="h-6 w-6 text-primary-500" />
+              <span className="ml-3 text-sm font-medium text-gray-900">Manage Peers</span>
+            </div>
+          </button>
+          
+          <button className="card hover:shadow-md transition-shadow cursor-pointer">
+            <div className="flex items-center">
+              <Shield className="h-6 w-6 text-primary-500" />
+              <span className="ml-3 text-sm font-medium text-gray-900">WireGuard Config</span>
+            </div>
+          </button>
+          
+          <button className="card hover:shadow-md transition-shadow cursor-pointer">
+            <div className="flex items-center">
+              <Wifi className="h-6 w-6 text-primary-500" />
+              <span className="ml-3 text-sm font-medium text-gray-900">Routing Rules</span>
+            </div>
+          </button>
+          
+          <button className="card hover:shadow-md transition-shadow cursor-pointer">
+            <div className="flex items-center">
+              <Activity className="h-6 w-6 text-primary-500" />
+              <span className="ml-3 text-sm font-medium text-gray-900">View Logs</span>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Dashboard;