@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/common/themeProvider/themeConfig.js

@@ -0,0 +1,558 @@
+// ─── Brand Palette (derived from medplat logo) ─────────────────────
+// Logo features: emerald green blocks, sky-blue blocks, blue "MED" text
+// Primary axis: blue | Accent axis: green | Neutral axis: slate
+const brand = {
+  blue: '#1C6FB7',
+  blueBright: '#4DA8DA',
+  blueLight: '#7DD3FC',
+  green: '#27AE60',
+  red: '#EB5757',
+  amber: '#E2B93B',
+  info: '#2F80ED',
+};
+
+// ─── Shared tokens ─────────────────────────────────────────────────
+const shape = {
+  borderRadius: 14,
+  cardRadius: 20,
+  dropdownRadius: 16,
+  chipRadius: 12,
+};
+
+const typography = {
+  fontFamily: '"Mulish", "Roboto", "Helvetica", "Arial", sans-serif',
+  overline: {
+    fontSize: '0.75rem',
+    fontWeight: 700,
+    color: '#64748B',
+    textTransform: 'uppercase',
+    letterSpacing: '-0.02em',
+  },
+  h1: { fontSize: '56px', lineHeight: '70px', fontWeight: 700 },
+  h2: { fontSize: '48px', lineHeight: '60px', fontWeight: 700 },
+  h3: { fontSize: '40px', lineHeight: '50px', fontWeight: 700 },
+  h4: { fontSize: '32px', lineHeight: '40px', fontWeight: 700 },
+  h5: { fontSize: '24px', lineHeight: '30px', fontWeight: 600 },
+  h6: { fontSize: '20px', lineHeight: '25px', fontWeight: 600 },
+  body1: { fontSize: '0.875rem', lineHeight: '1.7857rem' },
+};
+
+// Shared component styles that are identical in both themes
+const sharedComponents = {
+  MuiTextField: (bg, borderIdle, borderHover, borderFocus, textColor) => ({
+    styleOverrides: {
+      root: {
+        borderRadius: `${shape.borderRadius}px`,
+        margin: '8px 0',
+        '& .MuiOutlinedInput-root': {
+          borderRadius: `${shape.borderRadius}px`,
+          fontSize: '14px',
+          padding: '10px 14px',
+          margin: 0,
+          backgroundColor: bg,
+          color: textColor,
+          '& fieldset': { borderColor: borderIdle },
+          '&:hover fieldset': { borderColor: borderHover },
+          '&.Mui-focused fieldset': { borderColor: borderFocus },
+          '&.Mui-error .MuiOutlinedInput-notchedOutline': {
+            borderColor: brand.red,
+          },
+          '& input': { padding: 0, color: textColor },
+        },
+      },
+    },
+  }),
+
+  MuiSelect: () => ({
+    styleOverrides: {
+      root: {
+        margin: '8px 0',
+        borderRadius: `${shape.borderRadius}px`,
+      },
+    },
+  }),
+
+  MuiCard: (surfaceBg, borderColor, elevatedBg, elevatedShadow) => ({
+    styleOverrides: {
+      root: {
+        backgroundColor: surfaceBg,
+        backgroundImage: 'none',
+        borderRadius: `${shape.cardRadius}px`,
+      },
+    },
+    variants: [
+      {
+        props: { variant: 'bordered' },
+        style: {
+          border: `1px solid ${borderColor}`,
+          boxShadow: 'none',
+          borderRadius: `${shape.cardRadius}px`,
+        },
+      },
+      {
+        props: { variant: 'elevated' },
+        style: {
+          backgroundColor: elevatedBg,
+          boxShadow: elevatedShadow,
+          borderRadius: `${shape.cardRadius}px`,
+        },
+      },
+    ],
+  }),
+
+  MuiCardHeader: (textColor) => ({
+    styleOverrides: { root: { padding: '16px', color: textColor } },
+  }),
+
+  MuiCardContent: (textColor) => ({
+    styleOverrides: { root: { padding: '16px', flexGrow: 1, color: textColor } },
+  }),
+
+  MuiCardActions: (borderColor) => ({
+    styleOverrides: {
+      root: {
+        padding: '12px 16px',
+        justifyContent: 'flex-end',
+        borderTop: `1px solid ${borderColor}`,
+      },
+    },
+  }),
+
+  MuiDropdown: (paperBg, borderColor, shadow, hoverBg, selectedBg, selectedText) => ({
+    MuiMenu: {
+      styleOverrides: {
+        paper: {
+          marginTop: '5px',
+          borderRadius: `${shape.dropdownRadius}px`,
+          border: `1px solid ${borderColor}`,
+          boxShadow: shadow,
+          backgroundColor: paperBg,
+        },
+        list: {
+          padding: '8px 14px',
+          '& .MuiMenuItem-root': {
+            marginBottom: '8px',
+            minHeight: '38px',
+            borderRadius: `${shape.chipRadius}px`,
+            transition: 'background-color 180ms ease, color 180ms ease',
+            '&:hover': { cursor: 'pointer', backgroundColor: hoverBg },
+            '&:last-child': { marginBottom: 0 },
+            '&[aria-selected="true"]': {
+              backgroundColor: selectedBg,
+              color: selectedText,
+            },
+          },
+        },
+      },
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          marginBottom: '8px',
+          borderRadius: `${shape.chipRadius}px`,
+          transition: 'background-color 180ms ease, color 180ms ease',
+          '&:hover': { cursor: 'pointer', backgroundColor: hoverBg },
+          '&:last-child': { marginBottom: 0 },
+          '&[aria-selected="true"]': {
+            backgroundColor: selectedBg,
+            color: selectedText,
+          },
+        },
+      },
+    },
+  }),
+
+  MuiAutocomplete: (paperBg, borderColor, shadow, hoverBg, selectedBg, selectedText) => ({
+    styleOverrides: {
+      paper: {
+        marginTop: '5px',
+        borderRadius: `${shape.dropdownRadius}px`,
+        border: `1px solid ${borderColor}`,
+        boxShadow: shadow,
+        backgroundColor: paperBg,
+      },
+      listbox: {
+        padding: '8px',
+        '& > *': {
+          marginBottom: '8px',
+          padding: '10px 16px',
+          borderRadius: `${shape.chipRadius}px`,
+          transition: 'background-color 180ms ease, color 180ms ease',
+          '&:hover': { cursor: 'pointer', backgroundColor: hoverBg },
+          '&:last-child': { marginBottom: 0 },
+          '&[aria-selected="true"]': {
+            backgroundColor: selectedBg,
+            color: selectedText,
+          },
+        },
+      },
+    },
+  }),
+
+  MuiAccordion: (bg, borderColor) => ({
+    styleOverrides: {
+      root: {
+        backgroundColor: bg,
+        backgroundImage: 'none',
+        // borderRadius: '12px !important',
+        '&:before': { display: 'none' },
+        border: `1px solid ${borderColor}`,
+        boxShadow: 'none',
+        '&.Mui-expanded': { margin: '0' },
+        overflow: 'hidden',
+      },
+    },
+  }),
+
+  MuiAccordionSummary: (textColor) => ({
+    styleOverrides: {
+      root: {
+        color: textColor,
+        minHeight: '48px',
+        '&.Mui-expanded': { minHeight: '48px' },
+      },
+      content: {
+        margin: '12px 0',
+        '&.Mui-expanded': { margin: '12px 0' },
+      },
+    },
+  }),
+
+  MuiAccordionDetails: (bg, borderTopColor) => ({
+    styleOverrides: {
+      root: {
+        backgroundColor: bg,
+        borderTop: `1px solid ${borderTopColor}`,
+        padding: '16px',
+      },
+    },
+  }),
+};
+
+// ─── Light Theme ───────────────────────────────────────────────────
+const lightThemeConfig = {
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: `${shape.borderRadius}px`,
+          fontSize: '14px',
+          fontWeight: 700,
+          textTransform: 'none',
+          transition: 'all 180ms ease',
+        },
+        containedPrimary: {
+          padding: '8px 24px',
+          color: '#ffffff',
+          boxShadow: '0 4px 14px rgba(28, 111, 183, 0.22)',
+          '&:hover': {
+            boxShadow: '0 6px 20px rgba(28, 111, 183, 0.28)',
+          },
+        },
+        containedSecondary: {
+          padding: '8px 24px',
+          backgroundColor: 'rgba(255, 255, 255, 0.88)',
+          border: '1px solid rgba(148, 163, 184, 0.22)',
+          color: '#38506C',
+          boxShadow: 'none',
+          '&:hover': {
+            backgroundColor: '#F8FBFF',
+            border: '1px solid rgba(125, 211, 252, 0.3)',
+          },
+        },
+      },
+    },
+
+    MuiTextField: sharedComponents.MuiTextField(
+      'rgba(255, 255, 255, 0.82)',
+      'rgba(148, 163, 184, 0.24)',
+      'rgba(28, 111, 183, 0.28)',
+      brand.blue,
+      undefined
+    ),
+
+    MuiSelect: sharedComponents.MuiSelect(),
+
+    ...sharedComponents.MuiDropdown(
+      '#ffffff',
+      'rgba(148, 163, 184, 0.18)',
+      '0 12px 32px rgba(15, 23, 42, 0.1)',
+      'rgba(28, 111, 183, 0.08)',
+      'rgba(28, 111, 183, 0.12)',
+      '#20354B'
+    ),
+
+    MuiAutocomplete: sharedComponents.MuiAutocomplete(
+      '#ffffff',
+      'rgba(148, 163, 184, 0.18)',
+      '0 12px 32px rgba(15, 23, 42, 0.1)',
+      'rgba(28, 111, 183, 0.08)',
+      'rgba(28, 111, 183, 0.12)',
+      '#20354B'
+    ),
+
+    MuiCard: sharedComponents.MuiCard(
+      '#ffffff',
+      'rgba(148, 163, 184, 0.2)',
+      '#ffffff',
+      '0 12px 32px rgba(148, 163, 184, 0.14)'
+    ),
+    MuiCardHeader: sharedComponents.MuiCardHeader(undefined),
+    MuiCardContent: sharedComponents.MuiCardContent(undefined),
+    MuiCardActions: sharedComponents.MuiCardActions('rgba(148, 163, 184, 0.16)'),
+
+    MuiAccordion: sharedComponents.MuiAccordion('#FFFFFF', 'rgba(148, 163, 184, 0.18)'),
+    MuiAccordionSummary: sharedComponents.MuiAccordionSummary('#102033'),
+    MuiAccordionDetails: sharedComponents.MuiAccordionDetails('#F8FBFF', 'rgba(148, 163, 184, 0.12)'),
+
+    MuiPickersCalendarHeader: {
+      styleOverrides: {
+        label: { color: '#243A50', fontWeight: 600 },
+        switchViewButton: { color: '#243A50' },
+        root: { '& button': { color: '#243A50' } },
+      },
+    },
+    MuiDayCalendar: {
+      styleOverrides: {
+        weekDayLabel: { color: '#243A50', fontWeight: 600 },
+      },
+    },
+
+    MuiTableContainer: {
+      styleOverrides: { root: { backgroundColor: 'transparent' } },
+    },
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          backgroundColor: 'rgba(255, 255, 255, 0.92)',
+          backgroundImage: 'none',
+          borderBottom: '1px solid rgba(148, 163, 184, 0.18)',
+          boxShadow: '0 4px 16px rgba(148, 163, 184, 0.1)',
+        },
+        colorInherit: { backgroundColor: 'rgba(255, 255, 255, 0.92)' },
+      },
+    },
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          backgroundColor: '#F7FBFF',
+          backgroundImage: 'none',
+          borderRight: '1px solid rgba(148, 163, 184, 0.18)',
+        },
+      },
+    },
+    MuiFormLabel: {
+      styleOverrides: { asterisk: { color: brand.red, whiteSpace: 'nowrap' } },
+    },
+    MuiInputLabel: {
+      styleOverrides: { asterisk: { whiteSpace: 'nowrap' } },
+    },
+  },
+
+  palette: {
+    mode: 'light',
+    primary: { main: brand.blue, contrastText: '#FFFFFF' },
+    secondary: { main: brand.blueBright, contrastText: '#FFFFFF' },
+    error: { main: brand.red, contrastText: '#FFFFFF' },
+    warning: { main: brand.amber, contrastText: '#000000' },
+    info: { main: brand.info, contrastText: '#FFFFFF' },
+    success: { main: brand.green, contrastText: '#FFFFFF' },
+    background: { default: '#EDF4FB', paper: '#FFFFFF' },
+    text: { primary: '#102033', secondary: '#5D7188', disabled: '#97A6B8' },
+    custom: {
+      tableHeader: '#203A56',
+      featureList: '#3576BA',
+      black1: '#252525',
+      black2: '#1D1D1D',
+      gray1: '#4F4F4F',
+      gray2: '#808080',
+      gray3: '#BFBFBF',
+      gray4: '#F3F3F3',
+      customBlue: brand.blue,
+      customBackground: '#F7FBFF',
+      sidebarBg: '#1D3D61',
+      sidebarText: '#E7E8E9',
+      sidebarTextHover: '#FFFFFF',
+      sidebarIcon: '#B8CEE3',
+      sidebarIconHover: '#FFFFFF',
+      sidebarHoverBg: 'rgba(125, 211, 252, 0.16)',
+      sidebarBorder: 'rgba(148, 163, 184, 0.2)',
+      sidebarActiveBg: 'rgba(255, 255, 255, 0.08)',
+      shellBg: '#EDF4FB',
+      shellSurface: '#FFFFFF',
+      shellSurfaceAlt: '#F7FBFF',
+      shellMuted: '#647B92',
+      shellBorder: 'rgba(148, 163, 184, 0.2)',
+      shellAccent: brand.blue,
+      shellAccentSoft: 'rgba(28, 111, 183, 0.12)',
+      shellGlow: 'rgba(77, 168, 218, 0.14)',
+    },
+  },
+
+  typography,
+};
+
+// ─── Dark Theme ────────────────────────────────────────────────────
+const darkThemeConfig = {
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: `${shape.borderRadius}px`,
+          fontSize: '14px',
+          fontWeight: 700,
+          textTransform: 'none',
+          transition: 'all 180ms ease',
+        },
+        containedPrimary: {
+          padding: '8px 24px',
+          color: '#FFFFFF',
+          boxShadow: '0 4px 14px rgba(6, 182, 212, 0.22)',
+          '&:hover': {
+            boxShadow: '0 6px 20px rgba(6, 182, 212, 0.3)',
+          },
+        },
+        containedSecondary: {
+          padding: '8px 24px',
+          backgroundColor: 'rgba(255, 255, 255, 0.06)',
+          border: '1px solid rgba(148, 163, 184, 0.22)',
+          color: '#E6EDF3',
+          boxShadow: 'none',
+          '&:hover': {
+            backgroundColor: 'rgba(6, 182, 212, 0.14)',
+            border: '1px solid rgba(6, 182, 212, 0.32)',
+          },
+        },
+      },
+    },
+
+    MuiTextField: sharedComponents.MuiTextField(
+      '#1A1A1A',
+      'rgba(148, 163, 184, 0.22)',
+      '#06B6D4',
+      '#06B6D4',
+      '#EDF2F7'
+    ),
+
+    MuiSelect: sharedComponents.MuiSelect(),
+
+    ...sharedComponents.MuiDropdown(
+      '#262626',
+      '#333333',
+      '0 12px 32px rgba(0, 0, 0, 0.42)',
+      'rgba(255, 255, 255, 0.07)',
+      'rgba(6, 182, 212, 0.22)',
+      '#FFFFFF'
+    ),
+
+    MuiAutocomplete: sharedComponents.MuiAutocomplete(
+      '#262626',
+      '#333333',
+      '0 12px 32px rgba(0, 0, 0, 0.42)',
+      'rgba(255, 255, 255, 0.07)',
+      'rgba(6, 182, 212, 0.22)',
+      '#FFFFFF'
+    ),
+
+    MuiCard: sharedComponents.MuiCard(
+      '#1E1E1E',
+      'rgba(255, 255, 255, 0.12)',
+      '#262626',
+      '0 12px 32px rgba(0, 0, 0, 0.34)'
+    ),
+    MuiCardHeader: sharedComponents.MuiCardHeader('#EDF2F7'),
+    MuiCardContent: sharedComponents.MuiCardContent('#EDF2F7'),
+    MuiCardActions: sharedComponents.MuiCardActions('rgba(255, 255, 255, 0.1)'),
+
+    MuiAccordion: sharedComponents.MuiAccordion('#1E1E1E', 'rgba(255, 255, 255, 0.08)'),
+    MuiAccordionSummary: sharedComponents.MuiAccordionSummary('#EDF2F7'),
+    MuiAccordionDetails: sharedComponents.MuiAccordionDetails('#181818', 'rgba(255, 255, 255, 0.06)'),
+
+    MuiPickersCalendarHeader: {
+      styleOverrides: {
+        label: { color: '#EDF2F7', fontWeight: 600 },
+        switchViewButton: { color: '#EDF2F7' },
+        root: { '& button': { color: '#EDF2F7' } },
+      },
+    },
+    MuiDayCalendar: {
+      styleOverrides: {
+        weekDayLabel: { color: '#94A3B8', fontWeight: 600 },
+      },
+    },
+
+    MuiTableContainer: {
+      styleOverrides: { root: { backgroundColor: 'transparent' } },
+    },
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#121212',
+          backgroundImage: 'none',
+          borderBottom: '1px solid rgba(255, 255, 255, 0.08)',
+          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.3)',
+        },
+        colorInherit: { backgroundColor: '#121212' },
+      },
+    },
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          backgroundColor: '#161616',
+          backgroundImage: 'none',
+          borderRight: '1px solid rgba(255, 255, 255, 0.08)',
+        },
+      },
+    },
+    MuiFormLabel: {
+      styleOverrides: { asterisk: { color: '#F44336', whiteSpace: 'nowrap' } },
+    },
+    MuiInputLabel: {
+      styleOverrides: { asterisk: { whiteSpace: 'nowrap' } },
+    },
+  },
+
+  palette: {
+    mode: 'dark',
+    primary: { main: '#11B666', contrastText: '#FFFFFF' },
+    secondary: { main: brand.blueLight, contrastText: '#FFFFFF' },
+    error: { main: '#F44336', contrastText: '#FFFFFF' },
+    warning: { main: '#E0A100', contrastText: '#000000' },
+    info: { main: brand.info, contrastText: '#FFFFFF' },
+    success: { main: brand.green, contrastText: '#FFFFFF' },
+    background: { default: '#121212', paper: '#1E1E1E' },
+    text: { primary: '#EDF2F7', secondary: '#94A3B8', disabled: '#4A5A72' },
+    custom: {
+      tableHeader: '#1E293B',
+      featureList: '#1e1e1e',
+      black1: '#CBD5E1',
+      black2: '#A4B8CC',
+      gray1: '#6B849E',
+      gray2: '#4A5A72',
+      gray3: '#2D3F55',
+      gray4: '#1e1e1e',
+      customBlue: '#06B6D4',
+      customBackground: '#1E1E1E',
+      sidebarBg: '#1E293B',
+      sidebarText: '#E2EBF4',
+      sidebarTextHover: '#FFFFFF',
+      sidebarIcon: '#8BB5D4',
+      sidebarIconHover: '#FFFFFF',
+      sidebarHoverBg: 'rgba(255, 255, 255, 0.04)',
+      sidebarBorder: 'rgba(255, 255, 255, 0.08)',
+      sidebarActiveBg: 'rgba(255, 255, 255, 0.1)',
+      shellBg: '#121212',
+      shellSurface: '#1E1E1E',
+      shellSurfaceAlt: '#262626',
+      shellMuted: '#94A3B8',
+      shellBorder: 'rgba(255, 255, 255, 0.1)',
+      shellAccent: '#06B6D4',
+      shellAccentSoft: 'rgba(6, 182, 212, 0.18)',
+      shellGlow: 'rgba(6, 182, 212, 0.2)',
+    },
+  },
+
+  typography,
+};
+
+export { lightThemeConfig, darkThemeConfig };

package/src/common/toaster/toaster.jsx

@@ -0,0 +1,30 @@
+import { toast, ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { useTheme } from '@mui/material/styles';
+
+export const showToast = ({ message, type }) => {
+  toast[type](message, {
+    position: 'top-right',
+  });
+};
+
+const ToastProvider = () => {
+  const theme = useTheme();
+  return (
+    <ToastContainer
+      position="top-right"
+      autoClose={2500}
+      hideProgressBar={false}
+      newestOnTop={true}
+      closeOnClick
+      rtl={false}
+      pauseOnFocusLoss
+      draggable
+      pauseOnHover
+      theme={theme.palette.mode}
+      style={{ zIndex: 99999 }}
+    />
+  );
+};
+
+export default ToastProvider;

package/src/firebaseConfig.js

@@ -0,0 +1,24 @@
+import { firebaseConfig } from "@/common/constants/app.constant";
+import { initializeApp } from "firebase/app";
+import { getMessaging, isSupported } from "firebase/messaging";
+
+const firebaseOptionsConfig = {
+  apiKey: firebaseConfig.apiKey,
+  authDomain: firebaseConfig.authDomain,
+  projectId: firebaseConfig.projectId,
+  storageBucket: firebaseConfig.storageBucket,
+  messagingSenderId: firebaseConfig.messagingSenderId,
+  appId: firebaseConfig.appId,
+  measurementId: firebaseConfig.measurementId,
+};
+
+const firebaseApp = initializeApp(firebaseOptionsConfig);
+
+export const getMessagingInstance = async () => {
+  const supported = await isSupported();
+  if (!supported) {
+    console.warn("Firebase Messaging not supported in this browser or context.");
+    return null;
+  }
+  return getMessaging(firebaseApp);
+};