resolution card

client/src/components/common/HeaderRange.tsx

@@ -7,10 +7,12 @@ export const HeaderRange = ({
   range,
   setRange,
   loading,
+  all = false,
 }: {
   range: string;
   setRange: Function;
   loading: boolean;
+  all?: boolean;
 }) => {
   const theme = useTheme();
   const isSmall = useMediaQuery(theme.breakpoints.down("md"));
@@ -26,34 +28,23 @@ export const HeaderRange = ({
         orientation={isSmall ? "vertical" : "horizontal"}
         fullWidth={isSmall}
         variant="contained"
-        color={"primary"}
+        color="secondary"
       >
-        <Button
-          color={range === "2h" ? "secondary" : "primary"}
-          onClick={() => setRange("2h")}
-          loading={loading}
-        >
+        {all && (
+          <Button onClick={() => setRange("all")} loading={loading}>
+            All
+          </Button>
+        )}
+        <Button onClick={() => setRange("2h")} loading={loading}>
           Recent
         </Button>
-        <Button
-          color={range === "24h" ? "secondary" : "primary"}
-          onClick={() => setRange("24h")}
-          loading={loading}
-        >
+        <Button onClick={() => setRange("24h")} loading={loading}>
           Day
         </Button>
-        <Button
-          color={range === "7d" ? "secondary" : "primary"}
-          onClick={() => setRange("7d")}
-          loading={loading}
-        >
+        <Button onClick={() => setRange("7d")} loading={loading}>
           7 days
         </Button>
-        <Button
-          color={range === "30d" ? "secondary" : "primary"}
-          onClick={() => setRange("30d")}
-          loading={loading}
-        >
+        <Button onClick={() => setRange("30d")} loading={loading}>
           30 days
         </Button>
       </ButtonGroup>

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

@@ -0,0 +1,69 @@
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { BaseBox } from "@/components/design-elements";
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+
+export interface ResolutionCardProps {
+  resolved: boolean;
+  type?: string;
+  by?: string;
+  note?: string;
+  timestampLabel: string; // preformatted timestamp label
+  durationLabel?: string; // optional preformatted duration
+}
+
+export const ResolutionCard = ({
+  resolved,
+  type,
+  by,
+  note,
+  timestampLabel,
+  durationLabel,
+}: ResolutionCardProps) => {
+  const theme = useTheme();
+  const bg = resolved
+    ? theme.palette.success.lowContrast
+    : theme.palette.error.lowContrast;
+
+  return (
+    <BaseBox sx={{ maxWidth: 560 }}>
+      <Box sx={{ bgcolor: bg, p: 6 }}>
+        <Typography variant="h6" color="textPrimary">
+          Resolution
+        </Typography>
+      </Box>
+      <Stack spacing={3} padding={6}>
+        <Typography variant="body2" color="textPrimary">
+          Status:{" "}
+          <span style={{ color: bg }}>
+            {resolved ? "resolved" : "unresolved"}
+          </span>
+        </Typography>
+        {resolved && (
+          <>
+            <Typography variant="body2" color="textPrimary">
+              Resolution type: {type || "N/A"}
+            </Typography>
+            <Typography variant="body2" color="textPrimary">
+              Resolved by: {by || "N/A"}
+            </Typography>
+          </>
+        )}
+        <Typography variant="body2" color="textPrimary">
+          {timestampLabel}
+        </Typography>
+        {durationLabel && (
+          <Typography variant="body2" color="textSecondary">
+            {durationLabel}
+          </Typography>
+        )}
+        <Typography variant="body2" color="textSecondary">
+          Note: {note || "N/A"}
+        </Typography>
+      </Stack>
+    </BaseBox>
+  );
+};
+
+export default ResolutionCard;

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

@@ -28,7 +28,7 @@ export const GradientBox: React.FC<GradientBox> = ({
       sx={{
         padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
         width: isSmall
-          ? `calc(50% - (1 * ${theme.spacing(8)} / 2))`
+          ? `100%`
           : `calc(25% - (3 * ${theme.spacing(8)} / 4))`,
 
         background: bg,
@@ -46,6 +46,7 @@ type StatBoxProps = React.PropsWithChildren<{
   palette?: PaletteKey;
   sx?: SxProps;
   tooltip?: string;
+  onClick?: () => void;
 }>;
 
 export const StatBox: React.FC<StatBoxProps> = ({
@@ -55,13 +56,22 @@ export const StatBox: React.FC<StatBoxProps> = ({
   children,
   sx,
   tooltip,
+  onClick,
 }) => {
   const theme = useTheme();
   const textColor = palette ? theme.palette[palette].contrastText : "inherit";
 
   return (
-    <GradientBox palette={palette} sx={sx}>
-      <Stack>
+    <GradientBox
+      palette={palette}
+      sx={{
+        ...(sx as object),
+        ...(onClick
+          ? { cursor: "pointer", '&:hover': { opacity: 0.95 } }
+          : {}),
+      }}
+    >
+      <Stack onClick={onClick}>
         <Box
           sx={{ display: "flex", alignItems: "center", gap: theme.spacing(2) }}
         >