resolution card

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;