build ok,

002_source/cms/src/app/dashboard/settings/account/page.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import { config } from '@/config';
+import { AccountDetails } from '@/components/dashboard/settings/account-details';
+import { DeleteAccount } from '@/components/dashboard/settings/delete-account';
+import { Privacy } from '@/components/dashboard/settings/privacy';
+import { ThemeSwitch } from '@/components/dashboard/settings/theme-switch';
+
+export const metadata = { title: `Account | Settings | Dashboard | ${config.site.name}` } satisfies Metadata;
+
+export default function Page(): React.JSX.Element {
+  return (
+    <Stack spacing={4}>
+      <div>
+        <Typography variant="h4">Account</Typography>
+      </div>
+      <Stack spacing={4}>
+        <AccountDetails />
+        <ThemeSwitch />
+        <Privacy />
+        <DeleteAccount />
+      </Stack>
+    </Stack>
+  );
+}

002_source/cms/src/app/dashboard/settings/billing/page.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import { config } from '@/config';
+import { dayjs } from '@/lib/dayjs';
+import { Invoices } from '@/components/dashboard/settings/invoices';
+import { Plans } from '@/components/dashboard/settings/plans';
+
+export const metadata = { title: `Billing | Settings | Dashboard | ${config.site.name}` } satisfies Metadata;
+
+export default function Page(): React.JSX.Element {
+  return (
+    <Stack spacing={4}>
+      <div>
+        <Typography variant="h4">Billing & plans</Typography>
+      </div>
+      <Stack spacing={4}>
+        <Plans />
+        <Invoices
+          invoices={[
+            { id: 'INV-003', currency: 'USD', totalAmount: 14.99, issueDate: dayjs().subtract(1, 'month').toDate() },
+            { id: 'INV-002', currency: 'USD', totalAmount: 14.99, issueDate: dayjs().subtract(2, 'months').toDate() },
+            { id: 'INV-001', currency: 'USD', totalAmount: 14.99, issueDate: dayjs().subtract(3, 'months').toDate() },
+          ]}
+        />
+      </Stack>
+    </Stack>
+  );
+}

002_source/cms/src/app/dashboard/settings/integrations/page.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import { config } from '@/config';
+import { Integrations } from '@/components/dashboard/settings/integrations';
+
+export const metadata = { title: `Integrations | Settings | Dashboard | ${config.site.name}` } satisfies Metadata;
+
+export default function Page(): React.JSX.Element {
+  return (
+    <Stack spacing={4}>
+      <div>
+        <Typography variant="h4">Integrations</Typography>
+      </div>
+      <Integrations
+        integrations={[
+          {
+            id: 'vercel',
+            name: 'Vercel',
+            icon: '/assets/company-avatar-4.png',
+            description: 'See your usage and manage your apps',
+            installed: false,
+          },
+          {
+            id: 'auth0',
+            name: 'Auth0',
+            icon: '/assets/company-avatar-3.png',
+            description: 'Manage your users and roles with Auth0',
+            installed: false,
+          },
+          {
+            id: 'google_calendar',
+            name: 'Google Calendar',
+            icon: '/assets/company-avatar-2.png',
+            description: 'Add your personal calendar right into the app',
+            installed: false,
+          },
+          {
+            id: 'stripe',
+            name: 'Stripe',
+            icon: '/assets/company-avatar-1.png',
+            description: 'See your Stripe balance and manage your products',
+            installed: false,
+          },
+        ]}
+      />
+    </Stack>
+  );
+}

002_source/cms/src/app/dashboard/settings/layout.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+
+import { SideNav } from '@/components/dashboard/settings/side-nav';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps): React.JSX.Element {
+  return (
+    <Box
+      sx={{
+        maxWidth: 'var(--Content-maxWidth)',
+        m: 'var(--Content-margin)',
+        p: 'var(--Content-padding)',
+        width: 'var(--Content-width)',
+      }}
+    >
+      <Stack direction={{ xs: 'column', md: 'row' }} spacing={4} sx={{ position: 'relative' }}>
+        <SideNav />
+        <Box sx={{ flex: '1 1 auto', minWidth: 0 }}>{children}</Box>
+      </Stack>
+    </Box>
+  );
+}

002_source/cms/src/app/dashboard/settings/notifications/page.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import { config } from '@/config';
+import { EmailNotifications } from '@/components/dashboard/settings/email-notifications';
+import { PhoneNotifications } from '@/components/dashboard/settings/phone-notifications';
+
+export const metadata = { title: `Notifications | Settings | Dashboard | ${config.site.name}` } satisfies Metadata;
+
+export default function Page(): React.JSX.Element {
+  return (
+    <Stack spacing={4}>
+      <div>
+        <Typography variant="h4">Notifications</Typography>
+      </div>
+      <Stack spacing={4}>
+        <EmailNotifications />
+        <PhoneNotifications />
+      </Stack>
+    </Stack>
+  );
+}

002_source/cms/src/app/dashboard/settings/security/page.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import { config } from '@/config';
+import { dayjs } from '@/lib/dayjs';
+import { LoginHistory } from '@/components/dashboard/settings/login-history';
+import { MultiFactor } from '@/components/dashboard/settings/multi-factor';
+import { PasswordForm } from '@/components/dashboard/settings/password-form';
+
+export const metadata = { title: `Security | Settings | Dashboard | ${config.site.name}` } satisfies Metadata;
+
+export default function Page(): React.JSX.Element {
+  return (
+    <Stack spacing={4}>
+      <div>
+        <Typography variant="h4">Security</Typography>
+      </div>
+      <Stack spacing={4}>
+        <PasswordForm />
+        <MultiFactor />
+        <LoginHistory
+          events={[
+            {
+              id: 'EV-002',
+              type: 'Credential login',
+              ip: '95.130.17.84',
+              userAgent: 'Chrome, Mac OS 10.15.7',
+              createdAt: dayjs().subtract(1, 'day').subtract(1, 'hour').subtract(5, 'minute').toDate(),
+            },
+            {
+              id: 'EV-001',
+              type: 'Credential login',
+              ip: '95.130.17.84',
+              userAgent: 'Chrome, Mac OS 10.15.7',
+              createdAt: dayjs().subtract(1, 'day').subtract(1, 'hour').subtract(25, 'minute').toDate(),
+            },
+          ]}
+        />
+      </Stack>
+    </Stack>
+  );
+}

002_source/cms/src/app/dashboard/settings/team/page.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import { config } from '@/config';
+import { Members } from '@/components/dashboard/settings/members';
+
+export const metadata = { title: `Team | Settings | Dashboard | ${config.site.name}` } satisfies Metadata;
+
+export default function Page(): React.JSX.Element {
+  return (
+    <Stack spacing={4}>
+      <div>
+        <Typography variant="h4">Team</Typography>
+      </div>
+      <Members
+        members={[
+          {
+            id: 'USR-000',
+            name: 'Sofia Rivers',
+            avatar: '/assets/avatar.png',
+            email: 'sofia@devias.io',
+            role: 'Owner',
+          },
+          {
+            id: 'USR-002',
+            name: 'Siegbert Gottfried',
+            avatar: '/assets/avatar-2.png',
+            email: 'siegbert.gottfried@domain.com',
+            role: 'Standard',
+          },
+        ]}
+      />
+    </Stack>
+  );
+}