UN-3380 [FIX] Dashboard UI/UX improvements

frontend/src/components/metrics-dashboard/LLMUsageTable.jsx

@@ -2,11 +2,9 @@ import {
   CheckCircleOutlined,
   CloseCircleOutlined,
   InfoCircleOutlined,
-  ReloadOutlined,
 } from "@ant-design/icons";
 import {
   Alert,
-  Button,
   Card,
   Empty,
   Spin,
@@ -17,7 +15,7 @@ import {
   Typography,
 } from "antd";
 import PropTypes from "prop-types";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { ApiDeployments, ETLIcon, Task, Workflows } from "../../assets/index";
 import { useDeploymentUsage } from "../../hooks/useMetricsData";
@@ -110,12 +108,14 @@ const columns = [
     title: "Last Run",
     dataIndex: "last_execution_at",
     key: "last_execution_at",
+    sorter: (a, b) =>
+      (a.last_execution_at || "").localeCompare(b.last_execution_at || ""),
     render: (value) => (value ? value.split("T")[0] : "-"),
     width: 110,
   },
 ];
 
-function DeploymentUsageTable({ startDate, endDate }) {
+function DeploymentUsageTable({ startDate, endDate, refetchRef }) {
   const [activeType, setActiveType] = useState("API");
 
   const { data, loading, error, refetch } = useDeploymentUsage(
@@ -124,6 +124,18 @@ function DeploymentUsageTable({ startDate, endDate }) {
     endDate,
   );
 
+  // Expose refetch to parent via ref
+  useEffect(() => {
+    if (refetchRef) {
+      refetchRef.current = refetch;
+    }
+    return () => {
+      if (refetchRef) {
+        refetchRef.current = null;
+      }
+    };
+  }, [refetch, refetchRef]);
+
   const handleTabChange = (key) => {
     setActiveType(key);
   };
@@ -167,17 +179,6 @@ function DeploymentUsageTable({ startDate, endDate }) {
     },
   ];
 
-  const refreshButton = (
-    <Tooltip title="Refresh (bypasses cache)">
-      <Button
-        icon={<ReloadOutlined />}
-        size="small"
-        onClick={refetch}
-        loading={loading}
-      />
-    </Tooltip>
-  );
-
   const renderContent = () => {
     if (loading) {
       return (
@@ -222,7 +223,6 @@ function DeploymentUsageTable({ startDate, endDate }) {
         <Text strong className="llm-usage-title">
           Usage by Deployment
         </Text>
-        {refreshButton}
       </div>
       <Tabs
         items={deploymentTabs}
@@ -244,11 +244,13 @@ function DeploymentUsageTable({ startDate, endDate }) {
 DeploymentUsageTable.propTypes = {
   startDate: PropTypes.string,
   endDate: PropTypes.string,
+  refetchRef: PropTypes.shape({ current: PropTypes.func }),
 };
 
 DeploymentUsageTable.defaultProps = {
   startDate: null,
   endDate: null,
+  refetchRef: null,
 };
 
 export { DeploymentUsageTable };

frontend/src/components/metrics-dashboard/MetricsDashboard.css

@@ -1,21 +1,24 @@
 /* Metrics Dashboard Styles */
 
 .metrics-dashboard {
-  padding: 24px;
+  padding: 12px;
   background: #f5f5f5;
   height: calc(100vh - 64px);
+}
+
+.metrics-dashboard-container {
+  background: #ffffff;
+  height: 100%;
   overflow-y: auto;
 }
 
-/* Topbar - Full width covering entire space */
+/* Topbar */
 .metrics-topbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin: -24px -24px 20px -24px;
-  padding: 12px 24px;
-  background: white;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  padding: 12px 14px;
+  border-bottom: 1px solid #f0f0f0;
 }
 
 .metrics-topbar-left {
@@ -48,6 +51,16 @@
   margin-bottom: 16px;
 }
 
+/* Tabs alignment */
+.metrics-dashboard .ant-tabs > .ant-tabs-nav {
+  padding: 0 14px;
+}
+
+/* Tab content padding */
+.metrics-dashboard .ant-tabs-content {
+  padding: 16px;
+}
+
 /* Summary Cards - Matching Reference Design */
 .metrics-summary {
   margin-bottom: 24px;
@@ -228,8 +241,7 @@
     flex-direction: column;
     align-items: stretch;
     gap: 12px;
-    margin: -16px -16px 16px -16px;
-    padding: 12px 16px;
+    padding: 12px 14px;
   }
 
   .metrics-topbar-left {
@@ -242,7 +254,7 @@
   }
 
   .metrics-dashboard {
-    padding: 16px;
+    padding: 12px;
   }
 }
 
@@ -320,7 +332,7 @@
   font-size: 12px;
 }
 
-/* Subscription Usage Tab */
+/* Subscription Usage Tab — Legacy */
 .subscription-usage-tab {
   max-width: 600px;
   margin: 0 auto;
@@ -348,6 +360,144 @@
   color: #595959;
 }
 
+/* Subscription Usage Tab — V2 */
+.subscription-usage-tab-v2 {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.subscription-loading {
+  display: flex;
+  justify-content: center;
+  padding: 60px;
+}
+
+.subscription-overdue-tag-v2 {
+  margin-bottom: 4px;
+}
+
+/* Plan Card V2 */
+.subscription-plan-card-v2 {
+  border-radius: 8px;
+}
+
+.subscription-plan-info {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.subscription-plan-total {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.subscription-plan-total-value {
+  font-size: 32px;
+  font-weight: 700;
+  color: #262626;
+  line-height: 1;
+}
+
+.subscription-plan-total-label {
+  font-size: 14px;
+  color: #8c8c8c;
+}
+
+.subscription-plan-renewal {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #595959;
+}
+
+.subscription-upgrade-btn {
+  align-self: flex-start;
+  margin-top: 4px;
+  color: #52c41a;
+  border-color: #52c41a;
+}
+
+.subscription-upgrade-btn:hover {
+  color: #389e0d;
+  border-color: #389e0d;
+}
+
+/* Stat cards inside plan card */
+.subscription-stat {
+  text-align: center;
+  padding: 12px 8px;
+  background: #fafafa;
+  border-radius: 8px;
+}
+
+.subscription-stat-icon {
+  font-size: 16px;
+  color: #1890ff;
+  margin-bottom: 6px;
+}
+
+.subscription-stat-value {
+  font-size: 20px;
+  font-weight: 600;
+  color: #262626;
+  line-height: 1.2;
+}
+
+.subscription-stat-label {
+  font-size: 11px;
+  color: #8c8c8c;
+  margin-top: 2px;
+}
+
+/* Chart & Table cards */
+.subscription-chart-card,
+.subscription-table-card {
+  border-radius: 8px;
+}
+
+.subscription-chart-card .ant-card-head-title,
+.subscription-table-card .ant-card-head-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+/* Stat sub-label (e.g. peak date) */
+.subscription-stat-sub {
+  font-size: 10px;
+  color: #b0b0b0;
+  margin-top: 2px;
+}
+
+/* Window note on chart card */
+.subscription-window-note {
+  font-size: 12px;
+  color: #8c8c8c;
+  font-weight: 400;
+}
+
+/* Peak day row highlight in table */
+.subscription-peak-row td {
+  background: #fff7e6 !important;
+}
+
+.subscription-peak-row:hover td {
+  background: #fff1cc !important;
+}
+
+@media (max-width: 768px) {
+  .subscription-plan-total-value {
+    font-size: 24px;
+  }
+
+  .subscription-stat-value {
+    font-size: 16px;
+  }
+}
+
 .subscription-overdue-tag {
   margin-bottom: 12px;
 }