feat: implement communications module with SMTP settings, email logging, and frontend UI

src/frontend/src/apps/communications/components/CommunicationsLayout.tsx

@@ -0,0 +1,36 @@
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import { Box, Paper, Tab, Tabs } from "@mui/material";
+
+export default function CommunicationsLayout() {
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const getActiveTab = () => {
+        const path = location.pathname;
+        if (path.includes("/communications/logs")) return "/communications/logs";
+        return "/communications/settings";
+    };
+
+    const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
+        navigate(newValue);
+    };
+
+    return (
+        <Box sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
+            <Paper sx={{ mb: 2 }}>
+                <Tabs
+                    value={getActiveTab()}
+                    onChange={handleChange}
+                    indicatorColor="primary"
+                    textColor="primary"
+                >
+                    <Tab label="Configurazione" value="/communications/settings" />
+                    <Tab label="Logs" value="/communications/logs" />
+                </Tabs>
+            </Paper>
+            <Box sx={{ flex: 1, overflow: "auto" }}>
+                <Outlet />
+            </Box>
+        </Box>
+    );
+}