reorganized web-app

apps/stock/web-app/src/features/monitoring/components/ProxyStatsCard.tsx

@@ -0,0 +1,90 @@
+/**
+ * Proxy Stats Card Component
+ */
+
+import type { ProxyStats } from '../types';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { StatusBadge } from './StatusBadge';
+import { formatPercentage } from '../utils/formatters';
+
+interface ProxyStatsCardProps {
+  stats: ProxyStats;
+}
+
+export function ProxyStatsCard({ stats }: ProxyStatsCardProps) {
+  const successRate = stats.totalProxies > 0 
+    ? (stats.workingProxies / stats.totalProxies) * 100
+    : 0;
+
+  const formatDate = (dateString?: string) => {
+    if (!dateString) return 'Never';
+    const date = new Date(dateString);
+    return date.toLocaleString();
+  };
+
+  return (
+    <Card className="p-4">
+      <CardHeader className="p-0 pb-3">
+        <div className="flex items-center justify-between">
+          <h2 className="text-base font-semibold text-text-primary">Proxy Status</h2>
+          <StatusBadge 
+            variant={stats.enabled ? 'success' : 'default'} 
+            size="md"
+          >
+            {stats.enabled ? 'Enabled' : 'Disabled'}
+          </StatusBadge>
+        </div>
+      </CardHeader>
+
+      <CardContent className="p-0">
+        {stats.enabled ? (
+          <div className="space-y-3">
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <p className="text-sm text-text-secondary">Total Proxies</p>
+                <p className="text-xl font-bold text-text-primary">{stats.totalProxies}</p>
+              </div>
+              <div>
+                <p className="text-sm text-text-secondary">Success Rate</p>
+                <p className="text-xl font-bold text-text-primary">{formatPercentage(successRate)}</p>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <p className="text-sm text-text-secondary">Working</p>
+                <p className="text-base font-semibold text-success">{stats.workingProxies}</p>
+              </div>
+              <div>
+                <p className="text-sm text-text-secondary">Failed</p>
+                <p className="text-base font-semibold text-danger">{stats.failedProxies}</p>
+              </div>
+            </div>
+
+            <div className="border-t border-border pt-3 space-y-2">
+              <div className="flex justify-between text-sm">
+                <span className="text-text-secondary">Last Update:</span>
+                <span className="font-medium text-text-primary">{formatDate(stats.lastUpdate)}</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-text-secondary">Last Fetch:</span>
+                <span className="font-medium text-text-primary">{formatDate(stats.lastFetchTime)}</span>
+              </div>
+            </div>
+
+            {stats.totalProxies === 0 && (
+              <div className="bg-warning/10 border border-warning rounded p-3 text-sm text-warning">
+                No proxies available. Check WebShare API configuration.
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="text-center py-8 text-text-secondary">
+            <p>Proxy service is disabled</p>
+            <p className="text-sm mt-2">Enable it in the configuration to use proxies</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}