Major updates on Master Statistical

src/dashboards/IconCard.tsx

@@ -1,36 +1,49 @@
 import clsx from "clsx";
-import {IconType} from "react-icons";
+import { IconType } from "react-icons";
 
 interface Props {
-	Icon: IconType;
-	label: string;
-	value?: string | number;
-	color: "purple" | "rose" | "red" | "green";
-	tooltip?: string;
-	onClick?: () => void;
+  Icon: IconType;
+  label: string;
+  value?: string | number;
+  color: "purple" | "rose" | "red" | "green";
+  tooltip?: string;
+  onClick?: () => void;
+  isSelected?: boolean;
 }
 
-export default function IconCard({Icon, label, value, color, tooltip, onClick}: Props) {
-	const colorClasses: {[key in typeof color]: string} = {
-		purple: "text-mti-purple-light",
-		red: "text-mti-red-light",
-		rose: "text-mti-rose-light",
-		green: "text-mti-green-light",
-	};
+export default function IconCard({
+  Icon,
+  label,
+  value,
+  color,
+  tooltip,
+  onClick,
+  isSelected,
+}: Props) {
+  const colorClasses: { [key in typeof color]: string } = {
+    purple: "mti-purple-light",
+    red: "mti-red-light",
+    rose: "mti-rose-light",
+    green: "mti-green-light",
+  };
 
-	return (
-		<div
-			onClick={onClick}
-			className={clsx(
-				"bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300",
-				tooltip && "tooltip tooltip-bottom",
-			)}
-			data-tip={tooltip}>
-			<Icon className={clsx("text-6xl", colorClasses[color])} />
-			<span className="flex flex-col gap-1 items-center text-xl">
-				<span className="text-lg">{label}</span>
-				<span className={clsx("font-semibold", colorClasses[color])}>{value}</span>
-			</span>
-		</div>
-	);
+  return (
+    <div
+      onClick={onClick}
+      className={clsx(
+        "bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300",
+        tooltip && "tooltip tooltip-bottom",
+        isSelected && `border border-solid border-${colorClasses[color]}`
+      )}
+      data-tip={tooltip}
+    >
+      <Icon className={clsx("text-6xl", `text-${colorClasses[color]}`)} />
+      <span className="flex flex-col gap-1 items-center text-xl">
+        <span className="text-lg">{label}</span>
+        <span className={clsx("font-semibold", `text-${colorClasses[color]}`)}>
+          {value}
+        </span>
+      </span>
+    </div>
+  );
 }