Did the same to all of the dashboards

src/dashboards/IconCard.tsx

@@ -1,52 +1,43 @@
 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;
-  isSelected?: boolean;
-  className?: string;
+	Icon: IconType;
+	label: string;
+	value?: string | number;
+	color: "purple" | "rose" | "red" | "green";
+	tooltip?: string;
+	onClick?: () => void;
+	isSelected?: boolean;
+	isLoading?: boolean;
+	className?: string;
 }
 
-export default function IconCard({
-  Icon,
-  label,
-  value,
-  color,
-  tooltip,
-  onClick,
-  className,
-  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",
-  };
+export default function IconCard({Icon, label, value, color, tooltip, onClick, className, isLoading, 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",
-        isSelected && `border border-solid border-${colorClasses[color]}`,
-		className,
-      )}
-      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>
-  );
+	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]}`,
+				className,
+			)}
+			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]}`, isLoading && "animate-pulse")}>
+					{isLoading ? "..." : value}
+				</span>
+			</span>
+		</div>
+	);
 }