Fe

client/src/pages/diagnostic/DiagnosticPage.tsx

@@ -1,7 +1,8 @@
 import { BasePage, Tab, Tabs, InfoBox } from "@/components/design-elements";
 import { DiagnosticsLogTab } from "@/pages/diagnostic/DiagnosticsLogTab";
 import { DiagnosticsQueueTab } from "@/pages/diagnostic/DiagnosticsQueueTab";
-import { FileText, ListTodo } from "lucide-react";
+import DiagnosticsConfigTab from "@/pages/diagnostic/DiagnosticsConfigTab";
+import { FileText, ListTodo, Settings } from "lucide-react";
 import { useState } from "react";
 
 const DiagnosticPage = () => {
@@ -28,9 +29,15 @@ const DiagnosticPage = () => {
           value="jobs"
           icon={<ListTodo size={18} strokeWidth={1.5} />}
         />
+        <Tab
+          label="Config"
+          value="config"
+          icon={<Settings size={18} strokeWidth={1.5} />}
+        />
       </Tabs>
       {tabValue === "logs" && <DiagnosticsLogTab />}
       {tabValue === "jobs" && <DiagnosticsQueueTab />}
+      {tabValue === "config" && <DiagnosticsConfigTab />}
     </BasePage>
   );
 };

client/src/pages/diagnostic/DiagnosticsConfigTab.tsx

@@ -0,0 +1,57 @@
+import { Box, Typography, Paper, Stack, Divider } from "@mui/material";
+import { useGet } from "@/hooks/UseApi";
+
+type EnvConfig = {
+  NODE_ENV: string;
+  DEPLOYMENT_MODE: string;
+  LOG_LEVEL: string;
+  ORIGIN: string;
+  JWT_SECRET: string;
+  PORT: number;
+  PAGESPEED_API_KEY: string;
+  SMTP_HOST: string;
+  SMTP_PORT: number;
+  SMTP_USER: string;
+  SMTP_PASS: string;
+  STRIPE_SECRET: string;
+  STRIPE_WEBHOOK_SECRET: string;
+};
+
+export default function DiagnosticsConfigTab() {
+  const { response, loading, error } = useGet<{
+    message: string;
+    data: EnvConfig;
+  }>("/diagnostic/env");
+
+  const data = response?.data;
+
+  return (
+    <Box p={2}>
+      <Typography variant="h6" gutterBottom>
+        Environment Configuration
+      </Typography>
+      {loading && <Typography variant="body2">Loading…</Typography>}
+      {error && (
+        <Typography color="error" variant="body2">
+          {error}
+        </Typography>
+      )}
+      {data && (
+        <Paper variant="outlined">
+          <Stack divider={<Divider />}>
+            {Object.entries(data).map(([key, value]) => (
+              <Box key={key} px={2} py={1.5} display="flex" gap={2}>
+                <Typography sx={{ minWidth: 220 }} color="text.secondary">
+                  {key}
+                </Typography>
+                <Typography sx={{ wordBreak: "break-all" }}>
+                  {String(value)}
+                </Typography>
+              </Box>
+            ))}
+          </Stack>
+        </Paper>
+      )}
+    </Box>
+  );
+}