File transfer

resources/scripts/addons/advanced-admin/network/LiveTrafficCards.tsx

@@ -0,0 +1,44 @@
+/**
+ * Live Traffic Cards
+ * Ball Studios <https://git.balls.studio>
+ */
+
+import React from 'react';
+
+interface LiveStats {
+    rx_bytes: number;
+    tx_bytes: number;
+    recorded_at: string;
+}
+
+function formatBytes(bytes: number): string {
+    if (bytes < 1024)          return `${bytes} B`;
+    if (bytes < 1024 * 1024)   return `${(bytes / 1024).toFixed(1)} KB`;
+    if (bytes < 1024 ** 3)     return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
+    return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
+}
+
+interface Props { live: LiveStats | null; }
+
+export default function LiveTrafficCards({ live }: Props) {
+    return (
+        <div className='addon-stat-grid'>
+            <div className='addon-stat-card inbound'>
+                <div className='addon-stat-label'>⬇ Inbound</div>
+                <div className='addon-stat-value'>{live ? formatBytes(live.rx_bytes) : '—'}</div>
+            </div>
+            <div className='addon-stat-card outbound'>
+                <div className='addon-stat-label'>⬆ Outbound</div>
+                <div className='addon-stat-value'>{live ? formatBytes(live.tx_bytes) : '—'}</div>
+            </div>
+            <div className='addon-stat-card total'>
+                <div className='addon-stat-label'>⇅ Total</div>
+                <div className='addon-stat-value'>{live ? formatBytes(live.rx_bytes + live.tx_bytes) : '—'}</div>
+            </div>
+            <div className='addon-stat-card updated'>
+                <div className='addon-stat-label'>🕐 Last Update</div>
+                <div className='addon-stat-value'>{live ? new Date(live.recorded_at).toLocaleTimeString() : '—'}</div>
+            </div>
+        </div>
+    );
+}