Fix jwt-token

management/src/pages/System.jsx

@@ -0,0 +1,196 @@
+import React, { useState, useEffect } from 'react'
+import api from '../services/api'
+import toast from 'react-hot-toast'
+import { 
+  CogIcon, 
+  ServerIcon, 
+  DatabaseIcon,
+  ShieldCheckIcon,
+  ClockIcon
+} from '@heroicons/react/24/outline'
+
+const System = () => {
+  const [systemInfo, setSystemInfo] = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    loadSystemInfo()
+  }, [])
+
+  const loadSystemInfo = async () => {
+    try {
+      setLoading(true)
+      // This would be a real API endpoint in production
+      const response = await api.get('/system/info')
+      setSystemInfo(response.data.data)
+    } catch (error) {
+      // Mock data for development
+      setSystemInfo({
+        version: '1.0.0',
+        environment: 'development',
+        uptime: '7d 14h 32m',
+        database: {
+          status: 'connected',
+          version: 'PostgreSQL 14.2',
+          connections: 5,
+          maxConnections: 100
+        },
+        memory: {
+          used: '256MB',
+          total: '1GB',
+          percentage: 25
+        },
+        lastBackup: '2024-01-15T10:30:00Z',
+        ssl: {
+          status: 'valid',
+          expiresAt: '2024-03-15T00:00:00Z'
+        }
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const StatusCard = ({ title, icon: Icon, children }) => (
+    <div className="bg-white rounded-lg shadow p-6">
+      <div className="flex items-center mb-4">
+        <Icon className="h-6 w-6 text-blue-600 mr-2" />
+        <h3 className="text-lg font-medium text-gray-900">{title}</h3>
+      </div>
+      {children}
+    </div>
+  )
+
+  const StatusIndicator = ({ status }) => {
+    const colors = {
+      connected: 'bg-green-100 text-green-800',
+      valid: 'bg-green-100 text-green-800',
+      warning: 'bg-yellow-100 text-yellow-800',
+      error: 'bg-red-100 text-red-800'
+    }
+    
+    return (
+      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${colors[status] || colors.error}`}>
+        {status.charAt(0).toUpperCase() + status.slice(1)}
+      </span>
+    )
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-gray-900">System</h1>
+        <p className="text-gray-600">Monitor system health and configuration</p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+        <StatusCard title="Server Status" icon={ServerIcon}>
+          <div className="space-y-3">
+            <div className="flex justify-between">
+              <span className="text-sm text-gray-500">Version</span>
+              <span className="text-sm font-medium">{systemInfo.version}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-sm text-gray-500">Environment</span>
+              <span className="text-sm font-medium capitalize">{systemInfo.environment}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-sm text-gray-500">Uptime</span>
+              <span className="text-sm font-medium">{systemInfo.uptime}</span>
+            </div>
+          </div>
+        </StatusCard>
+
+        <StatusCard title="Database" icon={DatabaseIcon}>
+          <div className="space-y-3">
+            <div className="flex justify-between">
+              <span className="text-sm text-gray-500">Status</span>
+              <StatusIndicator status={systemInfo.database.status} />
+            </div>
+            <div className="flex justify-between">
+              <span className="text-sm text-gray-500">Version</span>
+              <span className="text-sm font-medium">{systemInfo.database.version}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-sm text-gray-500">Connections</span>
+              <span className="text-sm font-medium">
+                {systemInfo.database.connections}/{systemInfo.database.maxConnections}
+              </span>
+            </div>
+          </div>
+        </StatusCard>
+
+        <StatusCard title="SSL Certificate" icon={ShieldCheckIcon}>
+          <div className="space-y-3">
+            <div className="flex justify-between">
+              <span className="text-sm text-gray-500">Status</span>
+              <StatusIndicator status={systemInfo.ssl.status} />
+            </div>
+            <div className="flex justify-between">
+              <span className="text-sm text-gray-500">Expires</span>
+              <span className="text-sm font-medium">
+                {new Date(systemInfo.ssl.expiresAt).toLocaleDateString()}
+              </span>
+            </div>
+          </div>
+        </StatusCard>
+      </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-medium text-gray-900 mb-4 flex items-center">
+            <CogIcon className="h-5 w-5 text-blue-600 mr-2" />
+            Memory Usage
+          </h3>
+          <div className="space-y-3">
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-500">Used</span>
+              <span className="font-medium">{systemInfo.memory.used}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-500">Total</span>
+              <span className="font-medium">{systemInfo.memory.total}</span>
+            </div>
+            <div className="w-full bg-gray-200 rounded-full h-2">
+              <div 
+                className="bg-blue-600 h-2 rounded-full" 
+                style={{ width: `${systemInfo.memory.percentage}%` }}
+              ></div>
+            </div>
+            <div className="text-xs text-gray-500 text-center">
+              {systemInfo.memory.percentage}% used
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center">
+            <ClockIcon className="h-5 w-5 text-blue-600 mr-2" />
+            Last Backup
+          </h3>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-gray-900">
+              {new Date(systemInfo.lastBackup).toLocaleDateString()}
+            </div>
+            <div className="text-sm text-gray-500">
+              {new Date(systemInfo.lastBackup).toLocaleTimeString()}
+            </div>
+            <button className="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
+              Run Backup Now
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default System