feat(overview): update envelope statistics and localization in AnalyticsWidgetSummary

src/client/dd-hub-react/src/_mock/_data.ts

@@ -114,12 +114,7 @@ export const _langs = [
     value: 'de',
     label: 'German',
     icon: '/assets/icons/flags/ic-flag-de.svg',
-  },
+  }
-  {
-    value: 'fr',
-    label: 'French',
-    icon: '/assets/icons/flags/ic-flag-fr.svg',
-  },
 ];
 
 // ----------------------------------------------------------------------

src/client/dd-hub-react/src/layouts/dashboard/css-vars.ts

@@ -5,7 +5,7 @@ import type { Theme } from '@mui/material/styles';
 export function dashboardLayoutVars(theme: Theme) {
   return {
     '--layout-transition-easing': 'linear',
-    '--layout-transition-duration': '120ms',
+    '--layout-transition-duration': '100ms',
     '--layout-nav-vertical-width': '300px',
     '--layout-dashboard-content-pt': theme.spacing(1),
     '--layout-dashboard-content-pb': theme.spacing(8),

src/client/dd-hub-react/src/layouts/dashboard/layout.tsx

@@ -6,6 +6,8 @@ import { useBoolean } from 'minimal-shared/hooks';
 import Box from '@mui/material/Box';
 import Alert from '@mui/material/Alert';
 import { useTheme } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 import { _langs, _notifications } from 'src/_mock';
 
@@ -48,8 +50,19 @@ export function DashboardLayout({
   layoutQuery = 'lg',
 }: DashboardLayoutProps) {
   const theme = useTheme();
+  const isDesktop = useMediaQuery(theme.breakpoints.up(layoutQuery));
 
-  const { value: open, onFalse: onClose, onToggle } = useBoolean();
+  const {
+    value: mobileOpen,
+    onFalse: onMobileClose,
+    onToggle: onMobileToggle,
+  } = useBoolean();
+
+  const {
+    value: desktopOpen,
+    onFalse: onDesktopClose,
+    onToggle: onDesktopToggle,
+  } = useBoolean(true);
 
   const renderHeader = () => {
     const headerSlotProps: HeaderSectionProps['slotProps'] = {
@@ -94,17 +107,23 @@ export function DashboardLayout({
         </Alert>
       ),
       leftArea: (
-        <>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25 }}>
           {/** @slot Nav mobile */}
-          <MenuButton onClick={onToggle} sx={{ mr: 1, ml: -1 }} />
+          <MenuButton
+            onClick={isDesktop ? onDesktopToggle : onMobileToggle}
+            sx={{ ml: -1 }}
+          />
+          <Typography variant="h6" sx={{ fontWeight: 700 }}>
+            Digital Data Hub
+          </Typography>
           <NavMobile
             data={navData}
-            open={open}
+            open={mobileOpen}
-            onClose={onClose}
+            onClose={onMobileClose}
             workspaces={_workspaces}
             layoutQuery={layoutQuery}
           />
-        </>
+        </Box>
       ),
       rightArea: (
         <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 0, sm: 0.75 } }}>
@@ -150,7 +169,12 @@ export function DashboardLayout({
        * @Sidebar
        *************************************** */
       sidebarSection={
-        <NavDesktop data={navData} layoutQuery={layoutQuery} workspaces={_workspaces} />
+        <NavDesktop
+          open={desktopOpen}
+          data={navData}
+          layoutQuery={layoutQuery}
+          workspaces={_workspaces}
+        />
       }
       /** **************************************
        * @Footer
@@ -164,7 +188,7 @@ export function DashboardLayout({
         {
           [`& .${layoutClasses.main}`]: {
             [theme.breakpoints.up(layoutQuery)]: {
-              pl: 'var(--layout-nav-vertical-width)',
+              pl: desktopOpen ? 'var(--layout-nav-vertical-width)' : 0,
               transition: theme.transitions.create(['padding-left'], {
                 easing: 'var(--layout-transition-easing)',
                 duration: 'var(--layout-transition-duration)',

src/client/dd-hub-react/src/layouts/dashboard/nav.tsx

@@ -39,7 +39,8 @@ export function NavDesktop({
   slots,
   workspaces,
   layoutQuery,
-}: NavContentProps & { layoutQuery: Breakpoint }) {
+  open = true,
+}: NavContentProps & { layoutQuery: Breakpoint; open?: boolean }) {
   const theme = useTheme();
 
   return (
@@ -55,9 +56,15 @@ export function NavDesktop({
         flexDirection: 'column',
         zIndex: 'var(--layout-nav-zIndex)',
         width: 'var(--layout-nav-vertical-width)',
-        bgcolor: '#ffe8ed',
+        bgcolor: '#ffffff',
-        color: '#4a0f14',
+        color: '#5a1a22',
-        borderRight: `1px solid ${varAlpha('74 15 20', 0.12)}`,
+        borderRight: `1px solid ${varAlpha('90 24 34', 0.08)}`,
+        transform: open ? 'translateX(0)' : 'translateX(-100%)',
+        transition: theme.transitions.create(['transform'], {
+          easing: 'var(--layout-transition-easing)',
+          duration: 'var(--layout-transition-duration)',
+        }),
+        pointerEvents: open ? 'auto' : 'none',
         [theme.breakpoints.up(layoutQuery)]: {
           display: 'flex',
         },
@@ -102,8 +109,8 @@ export function NavMobile({
           overflow: 'unset',
           height: 'calc(100% - var(--layout-header-mobile-height))',
           width: 'var(--layout-nav-mobile-width)',
-          bgcolor: '#ffe8ed',
+          bgcolor: '#ffffff',
-          color: '#4a0f14',
+          color: '#5a1a22',
           [theme.breakpoints.up(layoutQuery)]: {
             top: 'var(--layout-header-desktop-height)',
             height: 'calc(100% - var(--layout-header-desktop-height))',
@@ -164,14 +171,14 @@ export function NavContent({ data, slots, workspaces, sx }: NavContentProps) {
                         borderRadius: 0.75,
                         typography: 'body2',
                         fontWeight: 'fontWeightMedium',
-                        color: '#4a0f14',
+                        color: '#5a1a22',
                         minHeight: 44,
                         ...(isActived && {
                           fontWeight: 'fontWeightSemiBold',
-                          color: '#4a0f14',
+                          color: '#5a1a22',
-                          bgcolor: 'rgba(74, 15, 20, 0.12)',
+                          bgcolor: 'rgba(90, 24, 34, 0.08)',
                           '&:hover': {
-                            bgcolor: 'rgba(74, 15, 20, 0.18)',
+                            bgcolor: 'rgba(90, 24, 34, 0.14)',
                           },
                         }),
                       }),
@@ -196,7 +203,7 @@ export function NavContent({ data, slots, workspaces, sx }: NavContentProps) {
 
       {slots?.bottomArea}
 
-      <NavUpgrade />
+      {/* <NavUpgrade /> */}
     </>
   );
 }

src/client/dd-hub-react/src/sections/overview/view/overview-analytics-view.tsx

@@ -51,6 +51,14 @@ export function OverviewAnalyticsView() {
     },
   ];
 
+  const envelopeStats = {
+    fullySigned: 140,
+    partiallySigned: 68,
+    declined: 26,
+  };
+
+  const envelopeTotal = envelopeStats.fullySigned + envelopeStats.partiallySigned + envelopeStats.declined;
+
   useEffect(() => {
     let active = true;
 
@@ -123,15 +131,29 @@ export function OverviewAnalyticsView() {
 
         <Grid size={{ xs: 12, sm: 6, md: 3 }}>
           <AnalyticsWidgetSummary
-            title="Messages"
+            title="Envelopes versendet"
             percent={3.6}
-            total={234}
+            total={envelopeTotal}
             color="error"
-            icon={<img alt="Messages" src="/assets/icons/glass/ic-glass-message.svg" />}
+            icon={<img alt="Envelopes versendet" src="/assets/icons/glass/ic-glass-message.svg" />}
             chart={{
-              categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
+              categories: ['Vollständig signiert', 'Teilsigniert', 'Abgelehnt'],
-              series: [56, 30, 23, 54, 47, 40, 62, 73],
+              series: [envelopeStats.fullySigned, envelopeStats.partiallySigned, envelopeStats.declined],
             }}
+            details={[
+              {
+                label: 'Vollständig signiert',
+                value: envelopeStats.fullySigned,
+              },
+              {
+                label: 'Teilsigniert',
+                value: envelopeStats.partiallySigned,
+              },
+              {
+                label: 'Abgelehnt',
+                value: envelopeStats.declined,
+              },
+            ]}
           />
         </Grid>