@ebubekirylmaz/link-test 1.2.44 → 1.2.46

package/src/widgets/SettingsDialog.jsx

@@ -1,10 +1,19 @@
+import Iconify from "../components/Iconify";
+import config from "../config/config";
+import { useEvent } from "@nucleoidai/react-event";
+import useSettings from "../hooks/useSettings";
+import { useSettingsContext } from "../components/settings/context";
+import { useUser } from "../hooks/use-user";
+
 import {
   Avatar,
   Box,
+  Chip,
   FormControl,
   Grow,
   IconButton,
   InputLabel,
+  Link,
   List,
   ListItem,
   ListItemAvatar,
@@ -12,6 +21,7 @@ import {
   ListItemText,
   NativeSelect,
   Stack,
+  Switch,
   Tab,
   Tabs,
   TextField,
@@ -20,11 +30,17 @@ import {
 import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
 import React, { useEffect, useState } from "react";
 
-import Iconify from "../components/Iconify";
-import config from "../config/config";
-import { useEvent } from "@nucleoidai/react-event";
-import useSettings from "../hooks/useSettings";
-import { useUser } from "../hooks/use-user";
+let pkg = {
+  name: "",
+  version: "",
+  description: "",
+};
+
+try {
+  pkg = require("../../../../../../package.json");
+} catch (error) {
+  console.error("Failed to load package.json for About tab:", error);
+}
 
 function a11yProps(index) {
   return {
@@ -42,6 +58,9 @@ const TabPanel = (props) => {
 const SettingsDialogTabs = ({ tabs }) => {
   const [value, setValue] = useState(0);
 
+  const hasPkgInfo =
+    pkg && (pkg.name || pkg.version || pkg.description) ? true : false;
+
   const handleChange = (event, newValue) => {
     setValue(newValue);
   };
@@ -95,13 +114,20 @@ const SettingsDialogTabs = ({ tabs }) => {
             sx={{ "& label": { color: "custom.grey" } }}
             {...a11yProps(1)}
           />
+          {hasPkgInfo && (
+            <Tab
+              label={"About"}
+              sx={{ "& label": { color: "custom.grey" } }}
+              {...a11yProps(2)}
+            />
+          )}
           {tabs?.map((tab, index) => (
             <Tab
               key={tab.label}
               iconPosition="start"
               label={tab.label}
               sx={{ "& label": { color: "custom.grey" } }}
-              {...a11yProps(index + 2)}
+              {...a11yProps(index + (hasPkgInfo ? 3 : 2))}
             />
           ))}
         </Tabs>
@@ -112,8 +138,17 @@ const SettingsDialogTabs = ({ tabs }) => {
           <TabPanel value={value} index={1}>
             <Settings />
           </TabPanel>
+          {hasPkgInfo && (
+            <TabPanel value={value} index={2}>
+              <About />
+            </TabPanel>
+          )}
           {tabs?.map((tab, index) => (
-            <TabPanel key={tab.label} value={value} index={index + 2}>
+            <TabPanel
+              key={tab.label}
+              value={value}
+              index={index + (hasPkgInfo ? 3 : 2)}
+            >
               <tab.panel />
             </TabPanel>
           ))}
@@ -132,11 +167,13 @@ function SettingsDialog({ handleClose, open }) {
       maxWidth={"md"}
       onClose={() => handleClose()}
       sx={{ bgcolor: "custom.darkDialogBg", zIndex: 2147483647 }}
-      PaperProps={{
-        style: {
-          color: "white",
-          minHeight: 600,
-        },
+      slotProps={{
+        paper: {
+          style: {
+            color: "white",
+            minHeight: 600,
+          },
+        }
       }}
     >
       <DialogContent>
@@ -177,9 +214,13 @@ const Permission = () => {
   }, [event, event2]);
 
   return (
-    <Stack direction="column" spacing={2} p={2}>
+    <Stack direction="column" spacing={2} sx={{
+      p: 2
+    }}>
       <Typography variant="h6">Users</Typography>
-      <Typography variant="subtitle2" color="text.secondary">
+      <Typography variant="subtitle2" sx={{
+        color: "text.secondary"
+      }}>
         Users with access to the project.
       </Typography>
       <List>
@@ -249,6 +290,7 @@ const Permission = () => {
 const Settings = () => {
   const projectId = localStorage.getItem("projectId");
   const { settings, updateSettings } = useSettings(projectId);
+  const { beta, onUpdate } = useSettingsContext();
 
   const timeZones = [
     "Asia/Kolkata",
@@ -264,9 +306,13 @@ const Settings = () => {
   };
 
   return (
-    <Stack direction="column" spacing={2} p={2}>
+    <Stack direction="column" spacing={2} sx={{
+      p: 2
+    }}>
       <Typography variant="h6">Settings</Typography>
-      <Typography variant="subtitle2" color="text.secondary">
+      <Typography variant="subtitle2" sx={{
+        color: "text.secondary"
+      }}>
         Configure your application settings.
       </Typography>
       <List>
@@ -300,9 +346,153 @@ const Settings = () => {
             </NativeSelect>
           </FormControl>
         </ListItem>
+        <ListItem
+          sx={{
+            backgroundColor: "background.paper",
+            boxShadow: 1,
+            borderRadius: 1,
+            m: 1,
+            p: 2,
+            ":hover": { boxShadow: 3 },
+            transition: "all 0.2s ease-in-out",
+          }}
+        >
+          <ListItemText primary="Beta" secondary="Enable beta features" />
+          <Switch checked={beta} onChange={() => onUpdate("beta", !beta)} />
+        </ListItem>
       </List>
     </Stack>
   );
 };
 
+const About = () => {
+  const iconSrc = config().template?.login?.icon || "";
+
+  const appName = pkg.name;
+  const version = pkg.version;
+  const description = pkg.description;
+
+  return (
+    <Stack direction="column" spacing={2} sx={{
+      p: 2
+    }}>
+      <Box
+        sx={{
+          p: 3,
+          borderRadius: 3,
+          border: "1px solid",
+          borderColor: "divider",
+          background:
+            "linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01))",
+        }}
+      >
+        <Stack direction="row" spacing={2.5} sx={{
+          alignItems: "center"
+        }}>
+          <Avatar
+            src={iconSrc}
+            variant="rounded"
+            sx={{
+              width: 56,
+              height: 56,
+              borderRadius: 2,
+              bgcolor: "background.paper",
+              boxShadow: 1,
+            }}
+          >
+            <Iconify icon="solar:widget-bold-duotone" width={28} />
+          </Avatar>
+
+          <Box sx={{ flex: 1, minWidth: 0 }}>
+            <Typography variant="h5" sx={{
+              fontWeight: 600
+            }}>
+              {appName.toUpperCase()}
+            </Typography>
+
+            {description && (
+              <Typography
+                variant="body2"
+                sx={{
+                  color: "text.secondary",
+                  mt: 0.5,
+                  maxWidth: 520
+                }}>
+                {description}
+              </Typography>
+            )}
+
+            <Stack direction="row" spacing={1} sx={{ mt: 1 }}>
+              <Chip size="small" label={`v${version}`} />
+            </Stack>
+          </Box>
+        </Stack>
+
+        <Box
+          sx={{
+            my: 2,
+            borderBottom: "1px dashed",
+            borderColor: "divider",
+          }}
+        />
+
+        <Stack spacing={1.2}>
+          <InfoRow label="Version" value={version} />
+          <InfoRow label="Deployment" value="On-Premise" />
+          <InfoRow
+            label="Support"
+            value="support@greycollar.ai"
+            link="mailto:support@greycollar.ai"
+          />
+          <InfoRow
+            label="Documentation"
+            value="greycollar.ai/docs"
+            link="https://greycollar.ai/docs"
+          />
+        </Stack>
+
+        <Box
+          sx={{
+            mt: 3,
+            pt: 2,
+            borderTop: "1px dashed",
+            borderColor: "divider",
+            textAlign: "center",
+          }}
+        >
+          <Typography variant="caption" sx={{
+            color: "text.secondary"
+          }}>
+            © 2026 greycollar.ai. All rights reserved.
+          </Typography>
+        </Box>
+      </Box>
+    </Stack>
+  );
+};
+
+const InfoRow = ({ label, value, link }) => {
+  return (
+    <Stack direction="row" spacing={1.5} sx={{
+      alignItems: "center"
+    }}>
+      <Typography
+        variant="body2"
+        sx={{
+          color: "text.secondary",
+          minWidth: 110
+        }}>
+        {label}
+      </Typography>
+      {link ? (
+        <Link href={link} target="_blank" rel="noreferrer" underline="hover">
+          {value}
+        </Link>
+      ) : (
+        <Typography variant="body2">{value}</Typography>
+      )}
+    </Stack>
+  );
+};
+
 export default SettingsDialog;