fix: address PR review feedback for icon migration

- Use AlertCircle for error and AlertTriangle for warning icons
- Use Icon color prop instead of CSS fill for Lucide stroke-based icons
- Replace wildcard import with explicit named imports for tree-shaking
- Replace sx prop with style prop on Icon components
- Add Trash2 to Icon component imports

client/src/Components/v1/Alert/index.jsx

@@ -18,7 +18,7 @@ const icons = {
 	),
 	error: (
 		<Icon
-			name="AlertTriangle"
+			name="AlertCircle"
 			size={24}
 		/>
 	),

client/src/Components/v1/Check/Check.jsx

@@ -39,17 +39,11 @@ const Check = ({ text, noHighlightText, variant = "info", outlined = false }) =>
 					size={20}
 				/>
 			) : (
-				<Box
-					lineHeight={0}
-					sx={{
-						"& svg > path": { fill: colors[variant] },
-					}}
-				>
-					<Icon
-						name="Check"
-						size={16}
-					/>
-				</Box>
+				<Icon
+					name="Check"
+					size={16}
+					color={colors[variant]}
+				/>
 			)}
 			<Typography
 				component="span"

client/src/Components/v1/Icon/index.jsx

@@ -1,6 +1,138 @@
 import { useTheme } from "@mui/material";
-import * as LucideIcons from "lucide-react";
 import PropTypes from "prop-types";
+import {
+	Activity,
+	AlertCircle,
+	AlertTriangle,
+	ArrowDown,
+	ArrowLeft,
+	ArrowUp,
+	ArrowUpRight,
+	Bell,
+	Calendar,
+	Check,
+	CheckCircle,
+	CheckSquare,
+	ChevronDown,
+	ChevronLeft,
+	ChevronRight,
+	ChevronsLeft,
+	ChevronsRight,
+	ChevronsUpDown,
+	Circle,
+	CircleDot,
+	Clock,
+	Code,
+	Cpu,
+	Database,
+	ExternalLink,
+	Eye,
+	EyeOff,
+	FileText,
+	Gauge,
+	Globe,
+	GripVertical,
+	HelpCircle,
+	History,
+	Image,
+	Info,
+	Key,
+	Layers,
+	Link,
+	Lock,
+	LogOut,
+	Mail,
+	Menu,
+	MessageCircle,
+	MoreVertical,
+	Pause,
+	PauseCircle,
+	Play,
+	PlayCircle,
+	PlusCircle,
+	RefreshCw,
+	Ruler,
+	Search,
+	Settings,
+	Square,
+	Trash2,
+	TrendingUp,
+	Upload,
+	User,
+	Users,
+	Wifi,
+	Wrench,
+	X,
+} from "lucide-react";
+
+/**
+ * Map of icon names to Lucide icon components.
+ * Only includes icons that are actually used in the application.
+ */
+const iconComponents = {
+	Activity,
+	AlertCircle,
+	AlertTriangle,
+	ArrowDown,
+	ArrowLeft,
+	ArrowUp,
+	ArrowUpRight,
+	Bell,
+	Calendar,
+	Check,
+	CheckCircle,
+	CheckSquare,
+	ChevronDown,
+	ChevronLeft,
+	ChevronRight,
+	ChevronsLeft,
+	ChevronsRight,
+	ChevronsUpDown,
+	Circle,
+	CircleDot,
+	Clock,
+	Code,
+	Cpu,
+	Database,
+	ExternalLink,
+	Eye,
+	EyeOff,
+	FileText,
+	Gauge,
+	Globe,
+	GripVertical,
+	HelpCircle,
+	History,
+	Image,
+	Info,
+	Key,
+	Layers,
+	Link,
+	Lock,
+	LogOut,
+	Mail,
+	Menu,
+	MessageCircle,
+	MoreVertical,
+	Pause,
+	PauseCircle,
+	Play,
+	PlayCircle,
+	PlusCircle,
+	RefreshCw,
+	Ruler,
+	Search,
+	Settings,
+	Square,
+	Trash2,
+	TrendingUp,
+	Upload,
+	User,
+	Users,
+	Wifi,
+	Wrench,
+	X,
+};
 
 /**
  * Theme-aware icon component wrapping Lucide icons
@@ -34,10 +166,10 @@ const Icon = ({ name, size = 20, color, strokeWidth = 1.5, fill = "none", ...pro
 		return colorValue;
 	};
 
-	const LucideIcon = LucideIcons[name];
+	const LucideIcon = iconComponents[name];
 
 	if (!LucideIcon) {
-		console.warn(`Icon "${name}" not found in Lucide icons`);
+		console.warn(`Icon "${name}" not found in Icon component`);
 		return null;
 	}
 

client/src/Components/v1/Toast/index.jsx

@@ -18,7 +18,7 @@ const icons = {
 	),
 	error: (
 		<Icon
-			name="AlertTriangle"
+			name="AlertCircle"
 			size={24}
 		/>
 	),

client/src/Pages/Maintenance/CreateMaintenance/Components/MonitorList/index.jsx

@@ -17,7 +17,7 @@ const MonitorListItem = ({ monitor, onDelete }) => {
 			<Icon
 				name="Trash2"
 				size={20}
-				sx={{ cursor: "pointer" }}
+				style={{ cursor: "pointer" }}
 				onClick={() => onDelete(monitor)}
 			/>
 		</Stack>

client/src/Pages/StatusPage/Create/Components/MonitorList/index.jsx

@@ -35,7 +35,7 @@ const MonitorListItem = ({
 			<Icon
 				name="Trash2"
 				size={20}
-				sx={{ marginLeft: "auto" }}
+				style={{ marginLeft: "auto", cursor: "pointer" }}
 				onClick={() => {
 					onDelete(monitor);
 				}}