Merge branch 'feat/saas' of github.com:bluewave-labs/Checkmate into feat/saas

client/src/components/design-elements/Breadcrumb.tsx

@@ -65,13 +65,15 @@ export const Breadcrumb = ({
         const last = index === pathnames.length - 1;
         const to = `/${pathnames.slice(0, index + 1).join("/")}`;
 
-        let displayName =
-          t(`common.breadcrumbs.${value}`) ||
-          value.charAt(0).toUpperCase() + value.slice(1);
+        let displayName = "";
 
         // Paths that are IDs should be detail pages
         if (value.length === 24 || value.match(/^[a-f0-9-]{36}$/)) {
           displayName = "Details";
+        } else {
+          displayName =
+            t(`common.breadcrumbs.${value}`) ||
+            value.charAt(0).toUpperCase() + value.slice(1);
         }
 
         return last ? (

client/src/components/monitors/HistogramPageSpeedScores.tsx

@@ -1,6 +1,8 @@
 import { BaseChart } from "@/components/monitors/Chart";
 import { TrendingUp } from "lucide-react";
+import { XTick } from "./ChartResponseTime";
 import {
+  XAxis,
   AreaChart,
   Area,
   Tooltip,
@@ -48,8 +50,10 @@ const config: Record<string, ConfigItem> = {
 
 export const HistogramPageSpeedScores = ({
   checks,
+  range,
 }: {
   checks: GroupedCheck[];
+  range: string;
 }) => {
   const theme = useTheme();
   return (
@@ -59,6 +63,10 @@ export const HistogramPageSpeedScores = ({
     >
       <ResponsiveContainer width="100%" minWidth={25} height={215}>
         <AreaChart data={checks}>
+          <XAxis
+            dataKey={"_id"}
+            tick={(props) => <XTick {...props} range={range} />}
+          />
           <CartesianGrid
             stroke={theme.palette.divider}
             strokeWidth={1}

client/src/components/monitors/HistogramStatus.tsx

@@ -82,13 +82,13 @@ export const HistogramStatus = ({
   const normalChecks = normalizeResponseTimes(checks, "avgResponseTime");
 
   const CustomTooltip = ({ active, payload }: any) => {
+    const uiTimezone = useAppSelector((state: any) => state.ui.timezone);
     if (!active || !payload?.length) return null;
     const d = payload[0]?.payload as GroupedCheck & {
       avgResponseTime?: number;
     };
     const avg = d?.avgResponseTime ?? 0;
     const titleText = t("common.charts.uptime.avgResponseTime");
-    const uiTimezone = useAppSelector((state: any) => state.ui.timezone);
     const fmt = range === "30d" ? "MMM D, YYYY" : "ddd, MMM D, YYYY, h:mm A";
     let dateLabel = "";
     if (d?._id) {

client/src/pages/pagespeed/PageSpeedDetails.tsx

@@ -87,7 +87,7 @@ const PageSpeedDetailsPage = () => {
         />
       </Stack>
       <HeaderRange loading={isValidating} range={range} setRange={setRange} />
-      <HistogramPageSpeedScores checks={checks} />
+      <HistogramPageSpeedScores checks={checks} range={range} />
       <Stack direction={isSmall ? "column" : "row"} gap={theme.spacing(10)}>
         <ChartPageSpeedReport latestCheck={checks?.[0]} />
         <ChartPageSpeedReportLegend latestCheck={checks?.[0]} />