feat(client): add StepProgress segmented progress bar component

client/src/Components/design-elements/StepProgress.tsx

@@ -0,0 +1,42 @@
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+import { alpha } from "@mui/material/styles";
+import { LAYOUT } from "@/Utils/Theme/constants";
+
+interface StepProgressProps {
+	steps: number;
+	current: number;
+}
+
+export const StepProgress = ({ steps, current }: StepProgressProps) => {
+	const theme = useTheme();
+	const activeBg = `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`;
+	const completedBg = `linear-gradient(135deg, ${alpha(theme.palette.primary.light, 0.5)} 0%, ${alpha(theme.palette.primary.main, 0.5)} 100%)`;
+
+	return (
+		<Stack
+			direction="row"
+			gap={theme.spacing(LAYOUT.XS)}
+			width="100%"
+		>
+			{Array.from({ length: steps }).map((_, index) => {
+				const background =
+					index < current
+						? completedBg
+						: index === current
+							? activeBg
+							: theme.palette.divider;
+				return (
+					<Box
+						key={index}
+						flex={1}
+						height={theme.spacing(LAYOUT.XXS)}
+						borderRadius={theme.shape.borderRadius}
+						sx={{ background, transition: "background 0.2s ease" }}
+					/>
+				);
+			})}
+		</Stack>
+	);
+};

client/src/Components/design-elements/index.tsx

@@ -27,3 +27,4 @@ export * from "./OfflineBanner";
 export * from "./Avatar";
 export * from "./StatusCodeLabel";
 export * from "./StrategyBadge";
+export * from "./StepProgress";