From 7ecdc917d607f29d1b4f9fb74578de92f879425b Mon Sep 17 00:00:00 2001 From: root Date: Sat, 2 May 2026 14:18:45 +0500 Subject: [PATCH] fix: ui bugs --- src/app/dashboard/ai-analytics/page.tsx | 37 +++++------------------ src/app/dashboard/page.tsx | 40 ++++++++++--------------- src/app/globals.css | 27 ++++++++++++++++- src/app/supplier/page.tsx | 3 +- src/lib/charts/rechartsTooltip.ts | 31 +++++++++++++++++++ 5 files changed, 82 insertions(+), 56 deletions(-) create mode 100644 src/lib/charts/rechartsTooltip.ts diff --git a/src/app/dashboard/ai-analytics/page.tsx b/src/app/dashboard/ai-analytics/page.tsx index 2af5b10..ec659d6 100644 --- a/src/app/dashboard/ai-analytics/page.tsx +++ b/src/app/dashboard/ai-analytics/page.tsx @@ -19,6 +19,7 @@ import { } from "recharts" import { Loader2, Sparkles } from "lucide-react" import { useTheme } from "@/components/ThemeProvider" +import { chartTooltipProps } from "@/lib/charts/rechartsTooltip" import { cn } from "@/lib/utils" type ModelEvaluationPayload = { @@ -120,8 +121,7 @@ export default function AiAnalyticsPage() { const chartMuted = isLight ? "#64748b" : "#94a3b8" const gridStroke = isLight ? "rgba(0,0,0,0.06)" : "rgba(255,255,255,0.08)" - const tooltipBg = isLight ? "#ffffff" : "#0f172a" - const tooltipBorder = isLight ? "#e2e8f0" : "rgba(255,255,255,0.12)" + const tt = useMemo(() => chartTooltipProps(isLight), [isLight]) const barData = useMemo( () => @@ -284,15 +284,7 @@ export default function AiAnalyticsPage() { tickLine={false} tickFormatter={(v) => `${v}%`} /> - [`${Number(v ?? 0)}%`, "F1"]} - /> + [`${Number(v ?? 0)}%`, "F1"]} /> @@ -402,12 +394,7 @@ export default function AiAnalyticsPage() { tickLine={false} /> { const g = (item as { payload?: { gmailAutoReplies?: number } })?.payload ?.gmailAutoReplies @@ -460,13 +447,8 @@ export default function AiAnalyticsPage() { tickLine={false} /> {barData.map((entry, i) => ( @@ -508,14 +490,9 @@ export default function AiAnalyticsPage() { tickLine={false} tickFormatter={(v) => `${v}m`} /> - + name === "AI" ? [`${Number(value ?? 0)} min (median)`, "AI"] diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index 1337852..6f4b799 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -34,6 +34,7 @@ import { Legend, } from "recharts" import { useTheme } from "@/components/ThemeProvider" +import { chartTooltipProps } from "@/lib/charts/rechartsTooltip" import { cn } from "@/lib/utils" type TimeRange = "7days" | "30days" | "1year" @@ -212,6 +213,7 @@ export default function DashboardPage() { const currency = business?.currency ?? "USD" const gridStroke = isLight ? "rgba(0,0,0,0.06)" : "rgba(255,255,255,0.08)" const chartMuted = isLight ? "#64748b" : "#94a3b8" + const chartTt = chartTooltipProps(isLight) const donutColors = ["#6366f1", "#a855f7", "#f43f5e", "#f97316"] const kpiAccent: Record = { @@ -384,12 +386,7 @@ export default function DashboardPage() { tickFormatter={(v) => formatMoney(Number(v), currency)} /> [formatMoney(Number(v ?? 0), currency), "Profit (est.)"]} /> @@ -425,16 +422,13 @@ export default function DashboardPage() { ))} - - formatMoney(Number(v ?? 0), currency)} - contentStyle={{ - borderRadius: 12, - border: isLight ? "1px solid #e2e8f0" : "1px solid rgba(255,255,255,0.12)", - background: isLight ? "#fff" : "#0f172a", - fontWeight: 700, - }} + + formatMoney(Number(v ?? 0), currency)} /> @@ -479,8 +473,8 @@ export default function DashboardPage() {

Product-level margins (est.)

-
- +
+
@@ -520,7 +514,9 @@ export default function DashboardPage() { )} > -

{business.aiInsight}

+

+ {business.aiInsight} +

)} @@ -590,13 +586,9 @@ export default function DashboardPage() { tickFormatter={(val) => `$${val > 999 ? (val / 1000).toFixed(1) + "k" : val}`} /> { diff --git a/src/app/globals.css b/src/app/globals.css index 1ac9212..fbd9519 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -199,9 +199,10 @@ html { -webkit-transform: translateZ(0); } -/* Scrollbar styling */ +/* Scrollbar styling — width + height so horizontal tracks aren’t oversized fat bars */ ::-webkit-scrollbar { width: 6px; + height: 6px; } ::-webkit-scrollbar-track { @@ -218,6 +219,30 @@ html { background: rgba(16, 185, 129, 0.5); } +html[data-theme="light"] ::-webkit-scrollbar-track { + background: var(--dashboard-bg, #f9fafb); +} + +html[data-theme="light"] ::-webkit-scrollbar-thumb { + background: rgba(15, 23, 42, 0.18); +} + +html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { + background: rgba(79, 70, 229, 0.35); +} + +/* Nested horizontal scroll (e.g. data tables): thin bar, avoids a heavy slab above footers */ +.table-horizontal-scroll { + overflow-x: auto; + overflow-y: visible; + scrollbar-width: thin; + scrollbar-color: rgba(255, 255, 255, 0.18) transparent; +} + +html[data-theme="light"] .table-horizontal-scroll { + scrollbar-color: rgba(15, 23, 42, 0.22) transparent; +} + /* Smooth scrolling container optimization */ [data-scroll-container] { scroll-behavior: smooth; diff --git a/src/app/supplier/page.tsx b/src/app/supplier/page.tsx index 7509801..8a5ac26 100644 --- a/src/app/supplier/page.tsx +++ b/src/app/supplier/page.tsx @@ -255,8 +255,9 @@ export default function SupplierDashboardPage() { { const num = typeof value === "number" ? value : Number(value) diff --git a/src/lib/charts/rechartsTooltip.ts b/src/lib/charts/rechartsTooltip.ts new file mode 100644 index 0000000..146a439 --- /dev/null +++ b/src/lib/charts/rechartsTooltip.ts @@ -0,0 +1,31 @@ +import type { CSSProperties } from "react" + +export type RechartsTooltipChrome = { + contentStyle: CSSProperties + labelStyle: CSSProperties + itemStyle: CSSProperties + wrapperStyle: CSSProperties +} + +/** + * Theme-aware defaults for Recharts . Recharts often ignores `color` on + * `contentStyle` for label/value rows — labelStyle + itemStyle keep dark mode readable. + */ +export function chartTooltipProps(isLight: boolean): RechartsTooltipChrome { + const fg = isLight ? "#0f172a" : "#f8fafc" + return { + contentStyle: { + borderRadius: 12, + border: isLight ? "1px solid #e2e8f0" : "1px solid rgba(255,255,255,0.16)", + background: isLight ? "#ffffff" : "#334155", + color: fg, + fontWeight: 700, + boxShadow: isLight + ? "0 10px 15px -3px rgba(15, 23, 42, 0.08)" + : "0 14px 28px rgba(0, 0, 0, 0.55)", + }, + labelStyle: { color: fg, fontWeight: 700 }, + itemStyle: { color: fg }, + wrapperStyle: { outline: "none", zIndex: 50 }, + } +}
Product