-
{get(errors, convertedName, {})?.message && (
@@ -496,7 +558,9 @@ export const CippFormComponent = (props) => {
@@ -673,7 +748,6 @@ export const CippFormComponent = (props) => {
{
},
}}
views={
- other.dateTimeType === "date"
+ dateTimeType === "date"
? ["year", "month", "day"]
: ["year", "month", "day", "hours", "minutes"]
}
+ format="yyyy/MM/dd HH:mm" // Display format
label={label}
value={field.value ? new Date(field.value * 1000) : null} // Convert Unix timestamp to Date object
onChange={(date) => {
@@ -698,24 +773,27 @@ export const CippFormComponent = (props) => {
onClose={field.onBlur}
ampm={false}
minutesStep={15}
- inputFormat="yyyy/MM/dd HH:mm" // Display format
- renderInput={(inputProps) => (
-
{helperText && (
- -
+ {libraries.map((lib) => {
+ const blocked = isBlockedLibrary(lib)
+ const selected = selectedLibrary?.Id === lib.Id
+ return (
+
-
+ {sites.map((site) => (
+
-
+ {mcpRoleIpWarnings.map((warning) => (
+
- + {warning.appName} — {warning.role} allows only{" "} + {warning.ranges.join(", ")} + + ))} +
*.azurewebsites.net hostname always remains available.
- *.azurewebsites.net hostname always remains available.
+ Point the domain directly at the App Service — a proxy or CDN in front of CIPP blocks
+ certificate issuance and renewal.
+ asuid.<domain> record.
@@ -589,21 +698,23 @@ export const CippAppServiceDomains = () => {
isFetching={domainsQuery.isFetching}
refreshFunction={domainsQuery.refetch}
simpleColumns={["Hostname", "Status"]}
- actions={actions}
+ actions={isHosted ? [] : actions}
offCanvas={offCanvas}
cardButton={
-
+ isHosted ? null : (
+
+ )
}
/>
• Manual Remediation: Sends email notifications for review, allowing you to accept or deny detected changes
• Detects changes made outside of CIPP @@ -336,28 +350,46 @@ const CippStandardsSideBar = ({
2. Tenant Group - Overrides "All Tenants" settings
3. All Tenants - Lowest priority, default baseline
{label}
)}>
+ • The Function App's managed identity must have Reader{" "} - permissions on the Application Insights resource -
• Queries are executed using Kusto Query Language (KQL) -
• The Function App's managed identity must have Reader{" "} + permissions on the Application Insights resource +
• Queries are executed using Kusto Query Language (KQL) +
-
+
{Array.isArray(values.PolicyId) && values.PolicyId.length > 1
? 'Policies'
: 'Policy'}
@@ -274,7 +286,9 @@ export const CippWizardVacationConfirmation = (props) => {
{values.createTravelPolicy && (
-
+
Temporary Travel Policy
@@ -284,7 +298,9 @@ export const CippWizardVacationConfirmation = (props) => {
? values.travelCountries.map((c) => c.label || c.value).join(', ')
: 'Not set'}
-
+
The policy and named location are deleted at the end date
@@ -324,13 +340,17 @@ export const CippWizardVacationConfirmation = (props) => {
-
+
Delegates
{formatUsers(values.delegates)}
-
+
Permission Types
@@ -341,7 +361,9 @@ export const CippWizardVacationConfirmation = (props) => {
{values.includeCalendar && (
-
+
Calendar
@@ -367,13 +389,17 @@ export const CippWizardVacationConfirmation = (props) => {
-
+
Destination
{formatForwardingTarget()}
-
+
Forwarding Type
@@ -383,7 +409,9 @@ export const CippWizardVacationConfirmation = (props) => {
-
+
Keep Copy
@@ -407,7 +435,9 @@ export const CippWizardVacationConfirmation = (props) => {
+ {Object.entries(item)
+ .filter(([key]) => key !== "language")
+ .map(([key, value]) => (
+
+
+ {key
+ .replace(/([A-Z])/g, " $1")
+ .replace(/^./, (str) => str.toUpperCase())}
+
+ {value}
+
+ ))}
+
+
+ ),
+ })),
+ },
+ }
+ : {};
+
+ // Simplified columns for the table
+ const simpleColumns = [
+ "Name",
+ "ReleaseActionPreference",
+ "Delete",
+ "Preview",
+ "BlockSender",
+ "AllowSender",
+ "QuarantineNotification",
+ "IncludeMessagesFromBlockedSenderAddress",
+ "WhenCreated",
+ "WhenChanged",
+ ];
+
+ // Prepare data for CippInfoBar as a const to clean up the code
+ const infoBarData = [
+ {
+ icon:
+
+
+
+
+
+
+
+
+ }
+ >
+ Deploy Custom Policy
+
+
+ }
+ />
+ {page} ;
+
+export default Page;
diff --git a/src/pages/email/spamfilter/list-spamfilter/add.jsx b/src/pages/email/spamfilter/list-spamfilter/add.jsx
index 824844d8bdf0..418ff9732395 100644
--- a/src/pages/email/spamfilter/list-spamfilter/add.jsx
+++ b/src/pages/email/spamfilter/list-spamfilter/add.jsx
@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
import { Divider } from "@mui/material";
import { Grid } from "@mui/system";
import { useForm, useWatch } from "react-hook-form";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
import CippFormPage from "../../../../components/CippFormPages/CippFormPage";
import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
import { CippFormTenantSelector } from "../../../../components/CippComponents/CippFormTenantSelector";
diff --git a/src/pages/email/spamfilter/list-spamfilter/index.js b/src/pages/email/spamfilter/list-spamfilter/index.js
deleted file mode 100644
index dc2123ea8f93..000000000000
--- a/src/pages/email/spamfilter/list-spamfilter/index.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { Button } from "@mui/material";
-import { Book, Block, Check } from "@mui/icons-material";
-import { TrashIcon } from "@heroicons/react/24/outline";
-import Link from "next/link";
-import { RocketLaunch } from "@mui/icons-material";
-
-const Page = () => {
- const pageTitle = "Spam Filters";
- const apiUrl = "/api/ListSpamfilter";
-
- const actions = [
- {
- label: "Create template based on rule",
- type: "POST",
- icon:
- }
- >
- Deploy Spamfilter
-
-
- }
- />
- );
-};
-
-Page.getLayout = (page) => {page} ;
-export default Page;
diff --git a/src/pages/email/spamfilter/list-spamfilter/index.jsx b/src/pages/email/spamfilter/list-spamfilter/index.jsx
new file mode 100644
index 000000000000..37612523084f
--- /dev/null
+++ b/src/pages/email/spamfilter/list-spamfilter/index.jsx
@@ -0,0 +1,116 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import { Button } from "@mui/material";
+import Link from "next/link";
+
+const Page = () => {
+ const pageTitle = "Spam Filters";
+ const apiUrl = "/api/ListSpamfilter";
+
+ const actions = [
+ {
+ label: "Create template based on rule",
+ type: "POST",
+ icon:
+ }
+ >
+ Deploy Spamfilter
+
+
+ }
+ />
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+export default Page;
diff --git a/src/pages/email/spamfilter/list-templates/index.js b/src/pages/email/spamfilter/list-templates/index.js
deleted file mode 100644
index 3abe32d9d210..000000000000
--- a/src/pages/email/spamfilter/list-templates/index.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { TrashIcon } from "@heroicons/react/24/outline";
-import { GitHub } from "@mui/icons-material";
-import { ApiGetCall } from "../../../../api/ApiCall";
-
-const Page = () => {
- const pageTitle = "Spamfilter Templates";
- const integrations = ApiGetCall({
- url: "/api/ListExtensionsConfig",
- queryKey: "Integrations",
- refetchOnMount: false,
- refetchOnReconnect: false,
- });
- const actions = [
- {
- label: "Save to GitHub",
- type: "POST",
- url: "/api/ExecCommunityRepo",
- icon: {page} ;
-export default Page;
diff --git a/src/pages/email/spamfilter/list-templates/index.jsx b/src/pages/email/spamfilter/list-templates/index.jsx
new file mode 100644
index 000000000000..0db4af52d083
--- /dev/null
+++ b/src/pages/email/spamfilter/list-templates/index.jsx
@@ -0,0 +1,101 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import { ApiGetCall } from "../../../../api/ApiCall";
+
+const Page = () => {
+ const pageTitle = "Spamfilter Templates";
+ const integrations = ApiGetCall({
+ url: "/api/ListExtensionsConfig",
+ queryKey: "Integrations",
+ refetchOnMount: false,
+ refetchOnReconnect: false,
+ });
+ const actions = [
+ {
+ label: "Save to GitHub",
+ type: "POST",
+ url: "/api/ExecCommunityRepo",
+ icon: {page} ;
+export default Page;
diff --git a/src/pages/email/tools/mail-test/index.js b/src/pages/email/tools/mail-test/index.js
deleted file mode 100644
index 0f9871807038..000000000000
--- a/src/pages/email/tools/mail-test/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-
-const Page = () => {
- const pageTitle = "Mail Test";
-
- return (
- {page} ;
-
-export default Page;
diff --git a/src/pages/email/tools/mail-test/index.jsx b/src/pages/email/tools/mail-test/index.jsx
new file mode 100644
index 000000000000..d1d176841a4f
--- /dev/null
+++ b/src/pages/email/tools/mail-test/index.jsx
@@ -0,0 +1,17 @@
+
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+
+const Page = () => {
+ const pageTitle = "Mail Test";
+
+ return (
+ {page} ;
+
+export default Page;
diff --git a/src/pages/email/tools/mailbox-restore-wizard/index.js b/src/pages/email/tools/mailbox-restore-wizard/index.js
deleted file mode 100644
index fb7521dfd4cb..000000000000
--- a/src/pages/email/tools/mailbox-restore-wizard/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-
-const Page = () => {
- const pageTitle = "Mailbox Restore Wizard";
-
- return (
- {page} ;
-
-export default Page;
diff --git a/src/pages/email/tools/mailbox-restore-wizard/index.jsx b/src/pages/email/tools/mailbox-restore-wizard/index.jsx
new file mode 100644
index 000000000000..714d5eaddc4d
--- /dev/null
+++ b/src/pages/email/tools/mailbox-restore-wizard/index.jsx
@@ -0,0 +1,17 @@
+
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+
+const Page = () => {
+ const pageTitle = "Mailbox Restore Wizard";
+
+ return (
+ {page} ;
+
+export default Page;
diff --git a/src/pages/email/tools/mailbox-restores/add.jsx b/src/pages/email/tools/mailbox-restores/add.jsx
index 3d15bd28d01c..8e83d1c7a3d6 100644
--- a/src/pages/email/tools/mailbox-restores/add.jsx
+++ b/src/pages/email/tools/mailbox-restores/add.jsx
@@ -1,7 +1,7 @@
import { useEffect } from "react";
import { Grid } from "@mui/system";
import { useForm, useWatch } from "react-hook-form";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
import CippFormPage from "../../../../components/CippFormPages/CippFormPage";
import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
import { useSettings } from "../../../../hooks/use-settings";
diff --git a/src/pages/email/tools/mailbox-restores/index.js b/src/pages/email/tools/mailbox-restores/index.js
deleted file mode 100644
index bc2e200ce30c..000000000000
--- a/src/pages/email/tools/mailbox-restores/index.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { RestoreFromTrash, PlayArrow, Pause, Delete } from "@mui/icons-material";
-import MailboxRestoreDetails from "../../../../components/CippComponents/MailboxRestoreDetails";
-import { CippMailboxRestoreDrawer } from "../../../../components/CippComponents/CippMailboxRestoreDrawer";
-import { useSettings } from "../../../../hooks/use-settings";
-
-const Page = () => {
- const pageTitle = "Mailbox Restores";
- const tenantDomain = useSettings().currentTenant;
- const actions = [
- {
- label: "Resume Restore Request",
- type: "POST",
- url: "/api/ExecMailboxRestore",
- icon: {page} ;
-export default Page;
diff --git a/src/pages/email/tools/mailbox-restores/index.jsx b/src/pages/email/tools/mailbox-restores/index.jsx
new file mode 100644
index 000000000000..b0f8437579b9
--- /dev/null
+++ b/src/pages/email/tools/mailbox-restores/index.jsx
@@ -0,0 +1,72 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import MailboxRestoreDetails from "../../../../components/CippComponents/MailboxRestoreDetails";
+import { CippMailboxRestoreDrawer } from "../../../../components/CippComponents/CippMailboxRestoreDrawer";
+import { useSettings } from "../../../../hooks/use-settings";
+
+const Page = () => {
+ const pageTitle = "Mailbox Restores";
+ const tenantDomain = useSettings().currentTenant;
+ const actions = [
+ {
+ label: "Resume Restore Request",
+ type: "POST",
+ url: "/api/ExecMailboxRestore",
+ icon: {page} ;
+export default Page;
diff --git a/src/pages/email/tools/message-encryption/index.js b/src/pages/email/tools/message-encryption/index.js
deleted file mode 100644
index 7fc7c1641d9b..000000000000
--- a/src/pages/email/tools/message-encryption/index.js
+++ /dev/null
@@ -1,237 +0,0 @@
-import { useEffect } from 'react'
-import { useForm } from 'react-hook-form'
-import { Alert, Button, Link, Typography } from '@mui/material'
-import { Grid } from '@mui/system'
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import CippFormPage from '../../../../components/CippFormPages/CippFormPage'
-import CippFormComponent from '../../../../components/CippComponents/CippFormComponent'
-import { CippPropertyListCard } from '../../../../components/CippCards/CippPropertyListCard'
-import { CippApiResults } from '../../../../components/CippComponents/CippApiResults'
-import { ApiGetCall, ApiPostCall } from '../../../../api/ApiCall'
-import { useSettings } from '../../../../hooks/use-settings.js'
-
-const yesNo = (value) => (value ? 'Yes' : 'No')
-
-const Page = () => {
- const tenant = useSettings().currentTenant
- const queryKey = `IRMConfiguration-${tenant}`
-
- const formControl = useForm({ mode: 'onChange' })
-
- const irmRequest = ApiGetCall({
- url: '/api/ListIRMConfiguration',
- data: { tenantFilter: tenant },
- queryKey: queryKey,
- })
-
- const irm = irmRequest.data
-
- const testCall = ApiPostCall({ datafromUrl: true })
-
- useEffect(() => {
- // Blank everything the moment the tenant changes, before the new GET lands. Otherwise a
- // switch toggled for tenant A stays dirty and Submit stays enabled, which would write A's
- // pending value against B's tenantFilter, and A's test output would read as B's.
- formControl.reset({
- AzureRMSLicensingEnabled: false,
- SimplifiedClientAccessEnabled: false,
- Sender: '',
- Recipient: '',
- })
- testCall.reset()
- }, [tenant])
-
- useEffect(() => {
- if (irmRequest.isSuccess) {
- // Spread the current values so a refetch does not wipe a half-typed test address.
- formControl.reset({
- ...formControl.getValues(),
- AzureRMSLicensingEnabled: !!irm?.AzureRMSLicensingEnabled,
- SimplifiedClientAccessEnabled: !!irm?.SimplifiedClientAccessEnabled,
- })
- }
- }, [irmRequest.isSuccess, irm])
-
- const [testSender, testRecipient] = formControl.watch(['Sender', 'Recipient'])
-
- const runTest = () => {
- testCall.mutate({
- url: '/api/ExecIRMConfiguration',
- data: {
- tenantFilter: tenant,
- Action: 'Test',
- Sender: testSender?.value ?? testSender,
- Recipient: testRecipient?.value ?? testRecipient,
- },
- })
- }
-
- const propertyItems = [
- {
- label: 'Purview Message Encryption',
- value: irm?.AzureRMSLicensingEnabled ? 'Enabled' : 'Disabled',
- },
- {
- label: 'Internal Licensing Enabled',
- value: yesNo(irm?.InternalLicensingEnabled),
- },
- {
- label: 'External Licensing Enabled',
- value: yesNo(irm?.ExternalLicensingEnabled),
- },
- {
- label: 'Encrypt Button in Outlook',
- value: yesNo(irm?.SimplifiedClientAccessEnabled),
- },
- {
- label: 'Transport Decryption',
- value: irm?.TransportDecryptionSetting ?? 'Unknown',
- },
- {
- label: 'Journal Report Decryption',
- value: yesNo(irm?.JournalReportDecryptionEnabled),
- },
- {
- label: 'Licensing Location',
- value: irm?.LicensingLocation?.length
- ? irm.LicensingLocation.join(', ')
- : 'None',
- },
- ]
-
- return (
- ({
- tenantFilter: tenant,
- Action: 'Set',
- AzureRMSLicensingEnabled: !!values?.AzureRMSLicensingEnabled,
- SimplifiedClientAccessEnabled: !!values?.SimplifiedClientAccessEnabled,
- })}
- addedButtons={
-
- }
- >
-
-
-
- Microsoft Purview Message Encryption lets users send protected email
- to any recipient, including Gmail and Outlook.com. The only
- prerequisite is that Azure Rights Management is active for the
- tenant.
-
-
- {irmRequest.isError && (
-
-
- Failed to load the IRM configuration for this tenant.
-
-
- )}
- {irm?.AdRmsDetected && (
-
-
- This tenant has an on-premises AD RMS licensing location ({' '}
- {irm.LicensingLocation.join(', ')} ). Purview Message Encryption
- is not compatible with AD RMS, so the tenant has to be{' '}
-
- migrated to Azure RMS
- {' '}
- before enabling it.
-
-
- )}
- {(irm || irmRequest.isFetching) && (
-
-
- )}
-
-
-
-
-
- Test the configuration
-
- Runs Test-IRMConfiguration, which verifies that RMS templates can be
- acquired and that encryption and decryption both work. Use any
- mailbox in the tenant for both addresses.
-
-
-
- `${option.displayName} (${option.UPN})`,
- valueField: 'UPN',
- }}
- />
-
-
- `${option.displayName} (${option.UPN})`,
- valueField: 'UPN',
- }}
- />
-
-
-
-
-
- )
-}
-
-Page.getLayout = (page) => {page}
-
-export default Page
diff --git a/src/pages/email/tools/message-encryption/index.jsx b/src/pages/email/tools/message-encryption/index.jsx
new file mode 100644
index 000000000000..85a23bb00f30
--- /dev/null
+++ b/src/pages/email/tools/message-encryption/index.jsx
@@ -0,0 +1,241 @@
+import { useEffect } from 'react'
+import { useForm } from 'react-hook-form'
+import { Alert, Button, Link, Typography } from '@mui/material'
+import { Grid } from '@mui/system'
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import CippFormPage from '../../../../components/CippFormPages/CippFormPage'
+import CippFormComponent from '../../../../components/CippComponents/CippFormComponent'
+import { CippPropertyListCard } from '../../../../components/CippCards/CippPropertyListCard'
+import { CippApiResults } from '../../../../components/CippComponents/CippApiResults'
+import { ApiGetCall, ApiPostCall } from '../../../../api/ApiCall'
+import { useSettings } from '../../../../hooks/use-settings.js'
+
+const yesNo = (value) => (value ? 'Yes' : 'No')
+
+const Page = () => {
+ const tenant = useSettings().currentTenant
+ const queryKey = `IRMConfiguration-${tenant}`
+
+ const formControl = useForm({ mode: 'onChange' })
+
+ const irmRequest = ApiGetCall({
+ url: '/api/ListIRMConfiguration',
+ data: { tenantFilter: tenant },
+ queryKey: queryKey,
+ })
+
+ const irm = irmRequest.data
+
+ const testCall = ApiPostCall({ datafromUrl: true })
+
+ useEffect(() => {
+ // Blank everything the moment the tenant changes, before the new GET lands. Otherwise a
+ // switch toggled for tenant A stays dirty and Submit stays enabled, which would write A's
+ // pending value against B's tenantFilter, and A's test output would read as B's.
+ formControl.reset({
+ AzureRMSLicensingEnabled: false,
+ SimplifiedClientAccessEnabled: false,
+ Sender: '',
+ Recipient: '',
+ })
+ testCall.reset()
+ }, [tenant])
+
+ useEffect(() => {
+ if (irmRequest.isSuccess) {
+ // Spread the current values so a refetch does not wipe a half-typed test address.
+ formControl.reset({
+ ...formControl.getValues(),
+ AzureRMSLicensingEnabled: !!irm?.AzureRMSLicensingEnabled,
+ SimplifiedClientAccessEnabled: !!irm?.SimplifiedClientAccessEnabled,
+ })
+ }
+ }, [irmRequest.isSuccess, irm])
+
+ const [testSender, testRecipient] = formControl.watch(['Sender', 'Recipient'])
+
+ const runTest = () => {
+ testCall.mutate({
+ url: '/api/ExecIRMConfiguration',
+ data: {
+ tenantFilter: tenant,
+ Action: 'Test',
+ Sender: testSender?.value ?? testSender,
+ Recipient: testRecipient?.value ?? testRecipient,
+ },
+ })
+ }
+
+ const propertyItems = [
+ {
+ label: 'Purview Message Encryption',
+ value: irm?.AzureRMSLicensingEnabled ? 'Enabled' : 'Disabled',
+ },
+ {
+ label: 'Internal Licensing Enabled',
+ value: yesNo(irm?.InternalLicensingEnabled),
+ },
+ {
+ label: 'External Licensing Enabled',
+ value: yesNo(irm?.ExternalLicensingEnabled),
+ },
+ {
+ label: 'Encrypt Button in Outlook',
+ value: yesNo(irm?.SimplifiedClientAccessEnabled),
+ },
+ {
+ label: 'Transport Decryption',
+ value: irm?.TransportDecryptionSetting ?? 'Unknown',
+ },
+ {
+ label: 'Journal Report Decryption',
+ value: yesNo(irm?.JournalReportDecryptionEnabled),
+ },
+ {
+ label: 'Licensing Location',
+ value: irm?.LicensingLocation?.length
+ ? irm.LicensingLocation.join(', ')
+ : 'None',
+ },
+ ]
+
+ return (
+ ({
+ tenantFilter: tenant,
+ Action: 'Set',
+ AzureRMSLicensingEnabled: !!values?.AzureRMSLicensingEnabled,
+ SimplifiedClientAccessEnabled: !!values?.SimplifiedClientAccessEnabled,
+ })}
+ addedButtons={
+
+ }
+ >
+
+
+
+ Microsoft Purview Message Encryption lets users send protected email
+ to any recipient, including Gmail and Outlook.com. The only
+ prerequisite is that Azure Rights Management is active for the
+ tenant.
+
+
+ {irmRequest.isError && (
+
+
+ Failed to load the IRM configuration for this tenant.
+
+
+ )}
+ {irm?.AdRmsDetected && (
+
+
+ This tenant has an on-premises AD RMS licensing location ({' '}
+ {irm.LicensingLocation.join(', ')} ). Purview Message Encryption
+ is not compatible with AD RMS, so the tenant has to be{' '}
+
+ migrated to Azure RMS
+ {' '}
+ before enabling it.
+
+
+ )}
+ {(irm || irmRequest.isFetching) && (
+
+
+ )}
+
+
+
+
+
+ Test the configuration
+
+ Runs Test-IRMConfiguration, which verifies that RMS templates can be
+ acquired and that encryption and decryption both work. Use any
+ mailbox in the tenant for both addresses.
+
+
+
+ `${option.displayName} (${option.UPN})`,
+ valueField: 'UPN',
+ }}
+ />
+
+
+ `${option.displayName} (${option.UPN})`,
+ valueField: 'UPN',
+ }}
+ />
+
+
+
+
+
+ );
+}
+
+Page.getLayout = (page) => {page}
+
+export default Page
diff --git a/src/pages/email/tools/message-trace/historical-search/index.jsx b/src/pages/email/tools/message-trace/historical-search/index.jsx
new file mode 100644
index 000000000000..dbe67a718afa
--- /dev/null
+++ b/src/pages/email/tools/message-trace/historical-search/index.jsx
@@ -0,0 +1,358 @@
+import { Layout as DashboardLayout } from '../../../../../layouts/index'
+import { CippIcons } from '../../../../../utils/icon-registry'
+import { TabbedLayout } from '../../../../../layouts/TabbedLayout'
+import { Alert, Button, Stack, Typography } from '@mui/material'
+import { useForm } from 'react-hook-form'
+import { useState } from 'react'
+import { Grid } from '@mui/system'
+import { CippTablePage } from '../../../../../components/CippComponents/CippTablePage.jsx'
+import { CippOffCanvas } from '../../../../../components/CippComponents/CippOffCanvas'
+import CippFormComponent from '../../../../../components/CippComponents/CippFormComponent'
+import { CippApiResults } from '../../../../../components/CippComponents/CippApiResults'
+import { ApiPostCall } from '../../../../../api/ApiCall'
+import { useSettings } from '../../../../../hooks/use-settings'
+import tabOptions from '../tabOptions.json'
+
+const queryKey = 'HistoricalSearches'
+
+// Start-HistoricalSearch report types
+const reportTypeOptions = [
+ { label: 'Message trace', value: 'MessageTrace' },
+ { label: 'Message trace detail', value: 'MessageTraceDetail' },
+ { label: 'Defender for Office 365 (ATP)', value: 'ATPReport' },
+ { label: 'Spam', value: 'SPAM' },
+ { label: 'Spoof', value: 'Spoof' },
+ { label: 'DLP', value: 'DLP' },
+ { label: 'Unified DLP', value: 'UnifiedDLP' },
+ { label: 'Transport rule', value: 'TransportRule' },
+ { label: 'Connector', value: 'ConnectorReport' },
+ { label: 'Outbound security', value: 'OutboundSecurityReport' },
+ { label: 'P2 sender attribution', value: 'P2SenderAttribution' },
+]
+
+const Page = () => {
+ const tenantFilter = useSettings().currentTenant
+ const [drawerVisible, setDrawerVisible] = useState(false)
+ const formControl = useForm({
+ defaultValues: {
+ reportType: { label: 'Message trace', value: 'MessageTrace' },
+ direction: 'All',
+ startDate: Math.floor(Date.now() / 1000) - 30 * 24 * 60 * 60,
+ endDate: Math.floor(Date.now() / 1000),
+ },
+ mode: 'onChange',
+ })
+
+ const startSearch = ApiPostCall({
+ relatedQueryKeys: [queryKey],
+ })
+
+ const onSubmit = () => {
+ const formData = formControl.getValues()
+ startSearch.mutate({
+ url: '/api/ExecHistoricalSearch',
+ data: {
+ tenantFilter: tenantFilter,
+ Action: 'Start',
+ reportTitle: formData.reportTitle,
+ reportType: formData.reportType,
+ startDate: formData.startDate,
+ endDate: formData.endDate,
+ senderAddress: formData.senderAddress,
+ recipientAddress: formData.recipientAddress,
+ messageId: formData.messageId,
+ direction: formData.direction,
+ deliveryStatus: formData.deliveryStatus,
+ originalClientIP: formData.originalClientIP,
+ notifyAddress: formData.notifyAddress,
+ },
+ })
+ }
+
+ const actions = [
+ {
+ // The download opens Microsoft's legacy report endpoint, which requires a customer-native
+ // admin login and is not GDAP-aware; delegated partners should use a customer NotifyAddress.
+ label: 'Download CSV',
+ link: '[FileUrl]',
+ external: true,
+ noConfirm: true,
+ icon:
+
+ Historical searches run asynchronously in Exchange Online and
+ cover up to 90 days of data, delivered as CSV (up to 100,000
+ rows). Each tenant can run 250 searches per day; this list shows
+ searches submitted in the last 10 days.
+
+
+
+ Downloading the CSV requires a customer-tenant admin login.
+ {' '}
+ Microsoft's report download endpoint is not GDAP-aware, so
+ the delegated partner session cannot retrieve the file. To get the
+ report, sign in to the customer tenant as an admin with the
+ Message Tracking role (Global Administrator or Exchange
+ Administrator) and use Download CSV there, or set a Notify Address
+ in the customer tenant to have the CSV emailed on completion.
+
+
+ }
+ />
+ setDrawerVisible(false)}
+ footer={
+
+
+
+
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+ option.UPN,
+ valueField: 'UPN',
+ queryKey: `ListMailboxes-${tenantFilter}`,
+ manualSearch: true,
+ searchParam: 'Anr',
+ data: { Minimal: true },
+ }}
+ formControl={formControl}
+ />
+
+
+ option.UPN,
+ valueField: 'UPN',
+ queryKey: `ListMailboxes-${tenantFilter}`,
+ manualSearch: true,
+ searchParam: 'Anr',
+ data: { Minimal: true },
+ }}
+ formControl={formControl}
+ />
+
+
+
+
+
+
+
+
+
+
+ option.UPN,
+ valueField: 'UPN',
+ queryKey: `ListMailboxes-${tenantFilter}`,
+ manualSearch: true,
+ searchParam: 'Anr',
+ data: { Minimal: true },
+ }}
+ formControl={formControl}
+ />
+
+
+
+ Large searches can take several hours. Results stay available from
+ this page for 10 days.
+
+
+
+
+
+
+
+ );
+}
+
+Page.getLayout = (page) => (
+
+ {page}
+
+)
+export default Page
diff --git a/src/pages/email/tools/message-trace/index.js b/src/pages/email/tools/message-trace/index.js
deleted file mode 100644
index d5876859b182..000000000000
--- a/src/pages/email/tools/message-trace/index.js
+++ /dev/null
@@ -1,351 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import {
- Button,
- Dialog,
- DialogTitle,
- DialogContent,
- IconButton,
- Stack,
- Typography,
- CircularProgress,
-} from "@mui/material";
-import { useForm } from "react-hook-form";
-import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
-import { ApiPostCall } from "../../../../api/ApiCall";
-import { useSettings } from "../../../../hooks/use-settings";
-import CippButtonCard from "../../../../components/CippCards/CippButtonCard";
-import { CippDataTable } from "../../../../components/CippTable/CippDataTable";
-import { useState } from "react";
-import { Search, Close, ClearAll } from "@mui/icons-material";
-import { Grid } from "@mui/system";
-import { DocumentTextIcon } from "@heroicons/react/24/outline";
-
-const simpleColumns = ["Received", "Status", "SenderAddress", "RecipientAddress", "Subject"];
-const detailColumns = ["Date", "Event", "Action", "Detail"];
-const apiUrl = "/api/ListMessageTrace";
-const pageTitle = "Message Trace";
-
-const Page = () => {
- const tenantFilter = useSettings().currentTenant;
- const [searchResults, setSearchResults] = useState([]);
- const [messageTraceId, setMessageTraceId] = useState(null);
- const [messageTraceRecipient, setMessageTraceRecipient] = useState(null);
- const [dialogOpen, setDialogOpen] = useState(false);
- const [traceDetails, setTraceDetails] = useState([]);
- const formControl = useForm({
- defaultValues: {
- dateFilter: "relative",
- days: 2,
- endDate: Math.floor(Date.now() / 1000),
- startDate: Math.floor(new Date().getTime() / 1000) - 2 * 24 * 60 * 60,
- },
- mode: "onChange",
- });
-
- const messageTrace = ApiPostCall({
- urlFromData: true,
- queryKey: "MessageTrace",
- onResult: (result) => {
- setSearchResults(result);
- },
- });
-
- const messageTraceDetail = ApiPostCall({
- urlFromData: true,
- queryKey: `MessageTraceDetail-${messageTraceId}-${messageTraceRecipient}`,
- onResult: (result) => {
- setTraceDetails(result);
- },
- });
-
- const startMessageTraceDetail = (row) => {
- setMessageTraceId(row.MessageTraceId);
- setMessageTraceRecipient(row.RecipientAddress);
- messageTraceDetail.mutate({
- url: "/api/ListMessageTrace",
- data: {
- tenantFilter: tenantFilter,
- id: row.MessageTraceId,
- recipient: row.RecipientAddress,
- traceDetail: true,
- },
- });
- };
-
- const actions = [
- {
- label: "View Details",
- noConfirm: true,
- customFunction: (row) => {
- startMessageTraceDetail(row);
- setDialogOpen(true);
- },
- icon:
-
-
-
-
- {formControl.watch("dateFilter") === "relative" && (
-
-
- )}
- {formControl.watch("dateFilter") === "startEnd" && (
- <>
-
-
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Submit and Clear Buttons */}
-
- }>
- Search
-
- }>
- Clear
-
-
-
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-export default Page;
diff --git a/src/pages/email/tools/message-trace/index.jsx b/src/pages/email/tools/message-trace/index.jsx
new file mode 100644
index 000000000000..02541b11a1c9
--- /dev/null
+++ b/src/pages/email/tools/message-trace/index.jsx
@@ -0,0 +1,446 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippIcons } from '../../../../utils/icon-registry'
+import { TabbedLayout } from '../../../../layouts/TabbedLayout'
+import { Alert, Button, Stack, Typography } from '@mui/material'
+import { useForm } from 'react-hook-form'
+import CippFormComponent from '../../../../components/CippComponents/CippFormComponent'
+import { ApiPostCall } from '../../../../api/ApiCall'
+import { useSettings } from '../../../../hooks/use-settings'
+import CippButtonCard from '../../../../components/CippCards/CippButtonCard'
+import { CippDataTable } from '../../../../components/CippTable/CippDataTable'
+import { CippOffCanvas } from '../../../../components/CippComponents/CippOffCanvas'
+import { useState } from 'react'
+import { Grid } from '@mui/system'
+import tabOptions from './tabOptions.json'
+import { getCippError } from '../../../../utils/get-cipp-error'
+
+const simpleColumns = [
+ 'Received',
+ 'Status',
+ 'SenderAddress',
+ 'RecipientAddress',
+ 'Subject',
+ 'Size',
+]
+const detailColumns = ['Date', 'Event', 'Action', 'Detail']
+const apiUrl = '/api/ListMessageTrace'
+const pageTitle = 'Message Trace'
+
+// Get-MessageTraceV2 status values ("None" existed on V1 only)
+const statusOptions = [
+ { label: 'Delivered', value: 'Delivered' },
+ { label: 'Expanded', value: 'Expanded' },
+ { label: 'Failed', value: 'Failed' },
+ { label: 'Filtered As Spam', value: 'FilteredAsSpam' },
+ { label: 'Getting Status', value: 'GettingStatus' },
+ { label: 'Pending', value: 'Pending' },
+ { label: 'Quarantined', value: 'Quarantined' },
+]
+
+// Backend errors carry Metadata.Error; fall back to a Results string, then the generic axios message.
+const getMessageTraceError = (error) => {
+ const body = error?.response?.data
+ return body?.Metadata?.Error || (typeof body?.Results === 'string' ? body.Results : null) || getCippError(error)
+}
+
+const subjectHelp = {
+ Contains:
+ 'Matches anywhere in the subject, e.g. "Invoice" finds "Your Invoice 4482"',
+ StartsWith:
+ 'Matches the start of the subject, e.g. "Invoice" finds "Invoice 4482 overdue"',
+ EndsWith:
+ 'Matches the end of the subject, e.g. "overdue" finds "Invoice 4482 is overdue"',
+}
+
+const Page = () => {
+ const tenantFilter = useSettings().currentTenant
+ const [searchResults, setSearchResults] = useState([])
+ const [metadata, setMetadata] = useState(null)
+ const [selectedRow, setSelectedRow] = useState(null)
+ const [detailVisible, setDetailVisible] = useState(false)
+ const [traceDetails, setTraceDetails] = useState([])
+ const [filterExpanded, setFilterExpanded] = useState(true)
+ const formControl = useForm({
+ defaultValues: {
+ dateFilter: '2',
+ endDate: Math.floor(Date.now() / 1000),
+ startDate: Math.floor(new Date().getTime() / 1000) - 2 * 24 * 60 * 60,
+ subjectFilterType: 'Contains',
+ advancedFilters: false,
+ },
+ mode: 'onChange',
+ })
+
+ const messageTrace = ApiPostCall({
+ urlFromData: true,
+ queryKey: 'MessageTrace',
+ onResult: (result) => {
+ setMetadata(result?.Metadata ?? null)
+ setSearchResults(result?.Results ?? [])
+ },
+ })
+
+ const messageTraceDetail = ApiPostCall({
+ urlFromData: true,
+ queryKey: `MessageTraceDetail-${selectedRow?.MessageTraceId}-${selectedRow?.RecipientAddress}`,
+ onResult: (result) => {
+ setTraceDetails(result?.Results ?? [])
+ },
+ })
+
+ const startMessageTraceDetail = (row) => {
+ setSelectedRow(row)
+ messageTraceDetail.mutate({
+ url: apiUrl,
+ data: {
+ tenantFilter: tenantFilter,
+ id: row.MessageTraceId,
+ recipient: row.RecipientAddress,
+ traceDetail: true,
+ },
+ })
+ }
+
+ const actions = [
+ {
+ label: 'View Details',
+ noConfirm: true,
+ customFunction: (row) => {
+ startMessageTraceDetail(row)
+ setDetailVisible(true)
+ },
+ icon:
+ setFilterExpanded(expanded)}
+ >
+
+
+
+ {formControl.watch('dateFilter') === 'custom' && (
+ <>
+
+
+
+
+
+ )}
+
+ option.UPN,
+ valueField: 'UPN',
+ queryKey: `ListMailboxes-${tenantFilter}`,
+ manualSearch: true,
+ searchParam: 'Anr',
+ data: { Minimal: true },
+ }}
+ formControl={formControl}
+ />
+
+
+ option.UPN,
+ valueField: 'UPN',
+ queryKey: `ListMailboxes-${tenantFilter}`,
+ manualSearch: true,
+ searchParam: 'Anr',
+ data: { Minimal: true },
+ }}
+ formControl={formControl}
+ />
+
+
+
+ {formControl.watch('advancedFilters') && (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ }
+ >
+ Search
+
+ }
+ >
+ Clear
+
+
+ Searches cover up to 10 days at a time, going back 90 days. For
+ anything older, use the Historical Search tab.
+
+
+
+
+ {metadata?.Error && {metadata.Error} }
+ {metadata?.Note && {metadata.Note} }
+
+ setDetailVisible(false)}
+ isFetching={messageTraceDetail.isPending}
+ extendedInfoFields={[
+ 'Subject',
+ 'SenderAddress',
+ 'RecipientAddress',
+ 'Status',
+ 'Received',
+ 'MessageId',
+ 'MessageTraceId',
+ ]}
+ extendedData={selectedRow ?? {}}
+ >
+
+ selectedRow && startMessageTraceDetail(selectedRow)
+ }
+ isFetching={messageTraceDetail.isPending}
+ mobileCard={{ primary: 'Event', secondary: 'Detail' }}
+ />
+
+
+ );
+}
+
+Page.getLayout = (page) => (
+
+ {page}
+
+)
+export default Page
diff --git a/src/pages/email/tools/message-trace/tabOptions.json b/src/pages/email/tools/message-trace/tabOptions.json
new file mode 100644
index 000000000000..9cb55d2e3088
--- /dev/null
+++ b/src/pages/email/tools/message-trace/tabOptions.json
@@ -0,0 +1,12 @@
+[
+ {
+ "label": "Message Trace",
+ "path": "/email/tools/message-trace",
+ "icon": "ManageSearch"
+ },
+ {
+ "label": "Historical Search",
+ "path": "/email/tools/message-trace/historical-search",
+ "icon": "Storage"
+ }
+]
diff --git a/src/pages/email/tools/message-viewer/index.js b/src/pages/email/tools/message-viewer/index.js
deleted file mode 100644
index 2521f67b1e22..000000000000
--- a/src/pages/email/tools/message-viewer/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import CippMessageViewerPage from "../../../../components/CippComponents/CippMessageViewer";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-
-const Page = () => {
- return {page} ;
-
-export default Page;
diff --git a/src/pages/email/tools/message-viewer/index.jsx b/src/pages/email/tools/message-viewer/index.jsx
new file mode 100644
index 000000000000..2b3617732be7
--- /dev/null
+++ b/src/pages/email/tools/message-viewer/index.jsx
@@ -0,0 +1,10 @@
+import CippMessageViewerPage from "../../../../components/CippComponents/CippMessageViewer";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+
+const Page = () => {
+ return {page} ;
+
+export default Page;
diff --git a/src/pages/email/transport/list-connector-templates/index.js b/src/pages/email/transport/list-connector-templates/index.js
deleted file mode 100644
index 4357ed52af23..000000000000
--- a/src/pages/email/transport/list-connector-templates/index.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { Button } from "@mui/material";
-import Link from "next/link";
-import { RocketLaunch } from "@mui/icons-material";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { TrashIcon } from "@heroicons/react/24/outline";
-import { GitHub } from "@mui/icons-material";
-import ConnectorTemplateDetails from "../../../../components/CippComponents/ConnectorTemplateDetails";
-import { CippAddConnectorDrawer } from "../../../../components/CippComponents/CippAddConnectorDrawer";
-import { ApiGetCall } from "../../../../api/ApiCall";
-
-const Page = () => {
- const pageTitle = "Exchange Connector Templates";
- const cardButtonPermissions = ["Exchange.Connector.ReadWrite"];
- const integrations = ApiGetCall({
- url: "/api/ListExtensionsConfig",
- queryKey: "Integrations",
- refetchOnMount: false,
- refetchOnReconnect: false,
- });
- const actions = [
- {
- label: "Save to GitHub",
- type: "POST",
- url: "/api/ExecCommunityRepo",
- icon: {page} ;
-export default Page;
diff --git a/src/pages/email/transport/list-connector-templates/index.jsx b/src/pages/email/transport/list-connector-templates/index.jsx
new file mode 100644
index 000000000000..2c75eed0ec47
--- /dev/null
+++ b/src/pages/email/transport/list-connector-templates/index.jsx
@@ -0,0 +1,96 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import ConnectorTemplateDetails from "../../../../components/CippComponents/ConnectorTemplateDetails";
+import { CippAddConnectorDrawer } from "../../../../components/CippComponents/CippAddConnectorDrawer";
+import { ApiGetCall } from "../../../../api/ApiCall";
+
+const Page = () => {
+ const pageTitle = "Exchange Connector Templates";
+ const cardButtonPermissions = ["Exchange.Connector.ReadWrite"];
+ const integrations = ApiGetCall({
+ url: "/api/ListExtensionsConfig",
+ queryKey: "Integrations",
+ refetchOnMount: false,
+ refetchOnReconnect: false,
+ });
+ const actions = [
+ {
+ label: "Save to GitHub",
+ type: "POST",
+ url: "/api/ExecCommunityRepo",
+ icon: {page} ;
+export default Page;
diff --git a/src/pages/email/transport/list-connectors/index.js b/src/pages/email/transport/list-connectors/index.js
deleted file mode 100644
index 8bc44bbe7f81..000000000000
--- a/src/pages/email/transport/list-connectors/index.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { Book, Check, Block, Delete } from "@mui/icons-material";
-import { CippAddConnectorDrawer } from "../../../../components/CippComponents/CippAddConnectorDrawer";
-
-const Page = () => {
- const pageTitle = "Connector List";
- const cardButtonPermissions = ["Exchange.Connector.ReadWrite"];
-
- const actions = [
- {
- label: "Create template based on connector",
- type: "POST",
- url: "/api/AddExConnectorTemplate",
- icon: {page} ;
-export default Page;
diff --git a/src/pages/email/transport/list-connectors/index.jsx b/src/pages/email/transport/list-connectors/index.jsx
new file mode 100644
index 000000000000..360439362a60
--- /dev/null
+++ b/src/pages/email/transport/list-connectors/index.jsx
@@ -0,0 +1,109 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import { CippAddConnectorDrawer } from "../../../../components/CippComponents/CippAddConnectorDrawer";
+
+const Page = () => {
+ const pageTitle = "Connector List";
+ const cardButtonPermissions = ["Exchange.Connector.ReadWrite"];
+
+ const actions = [
+ {
+ label: "Create template based on connector",
+ type: "POST",
+ url: "/api/AddExConnectorTemplate",
+ icon: {page} ;
+export default Page;
diff --git a/src/pages/email/transport/list-rules/index.js b/src/pages/email/transport/list-rules/index.js
deleted file mode 100644
index 75e3f66366b5..000000000000
--- a/src/pages/email/transport/list-rules/index.js
+++ /dev/null
@@ -1,149 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { Book, DoDisturb, Done, Edit } from "@mui/icons-material";
-import { TrashIcon } from "@heroicons/react/24/outline";
-import { CippAddTransportRuleDrawer } from "../../../../components/CippComponents/CippAddTransportRuleDrawer";
-import { CippTransportRuleDrawer } from "../../../../components/CippComponents/CippTransportRuleDrawer";
-import { useSettings } from "../../../../hooks/use-settings";
-import { useRef } from "react";
-
-const Page = () => {
- const pageTitle = "Transport Rules";
- const cardButtonPermissions = ["Exchange.TransportRule.ReadWrite"];
- const tableRef = useRef();
- const currentTenant = useSettings().currentTenant;
-
- const handleRuleSuccess = () => {
- // Refresh the table after successful create/edit
- if (tableRef.current) {
- tableRef.current.refreshData();
- }
- };
-
- const actions = [
- {
- label: "Create template based on rule",
- type: "POST",
- url: "/api/AddTransportTemplate",
- postEntireRow: true,
- confirmText: "Are you sure you want to create a template based on this rule?",
- icon:
- {page} ;
-export default Page;
diff --git a/src/pages/email/transport/list-rules/index.jsx b/src/pages/email/transport/list-rules/index.jsx
new file mode 100644
index 000000000000..95aa3a761afd
--- /dev/null
+++ b/src/pages/email/transport/list-rules/index.jsx
@@ -0,0 +1,150 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import { CippAddTransportRuleDrawer } from "../../../../components/CippComponents/CippAddTransportRuleDrawer";
+import { CippTransportRuleDrawer } from "../../../../components/CippComponents/CippTransportRuleDrawer";
+import { useSettings } from "../../../../hooks/use-settings";
+import { useRef } from "react";
+
+const Page = () => {
+ const pageTitle = "Transport Rules";
+ const cardButtonPermissions = ["Exchange.TransportRule.ReadWrite"];
+ const tableRef = useRef();
+ const currentTenant = useSettings().currentTenant;
+
+ const handleRuleSuccess = () => {
+ // Refresh the table after successful create/edit
+ if (tableRef.current) {
+ tableRef.current.refreshData();
+ }
+ };
+
+ const actions = [
+ {
+ label: "Create template based on rule",
+ type: "POST",
+ url: "/api/AddTransportTemplate",
+ postEntireRow: true,
+ // The bulk menu nests each row under a numeric key, which loses the row's properties.
+ hideBulk: true,
+ confirmText: "Are you sure you want to create a template based on this rule?",
+ icon:
+ {page} ;
+export default Page;
diff --git a/src/pages/email/transport/list-templates/index.js b/src/pages/email/transport/list-templates/index.js
deleted file mode 100644
index 3a9ee1947f52..000000000000
--- a/src/pages/email/transport/list-templates/index.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { TrashIcon } from "@heroicons/react/24/outline";
-import { GitHub } from "@mui/icons-material";
-import { ApiGetCall } from "../../../../api/ApiCall";
-import { CippAddTransportRuleDrawer } from "../../../../components/CippComponents/CippAddTransportRuleDrawer";
-
-const Page = () => {
- const pageTitle = "Transport Rule Templates";
- const cardButtonPermissions = ["Exchange.TransportRule.ReadWrite"];
- const integrations = ApiGetCall({
- url: "/api/ListExtensionsConfig",
- queryKey: "Integrations",
- refetchOnMount: false,
- refetchOnReconnect: false,
- });
- const actions = [
- {
- label: "Save to GitHub",
- type: "POST",
- url: "/api/ExecCommunityRepo",
- icon: {page} ;
-export default Page;
diff --git a/src/pages/email/transport/list-templates/index.jsx b/src/pages/email/transport/list-templates/index.jsx
new file mode 100644
index 000000000000..889f8f322700
--- /dev/null
+++ b/src/pages/email/transport/list-templates/index.jsx
@@ -0,0 +1,92 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import { ApiGetCall } from "../../../../api/ApiCall";
+import { CippAddTransportRuleDrawer } from "../../../../components/CippComponents/CippAddTransportRuleDrawer";
+
+const Page = () => {
+ const pageTitle = "Transport Rule Templates";
+ const cardButtonPermissions = ["Exchange.TransportRule.ReadWrite"];
+ const integrations = ApiGetCall({
+ url: "/api/ListExtensionsConfig",
+ queryKey: "Integrations",
+ refetchOnMount: false,
+ refetchOnReconnect: false,
+ });
+ const actions = [
+ {
+ label: "Save to GitHub",
+ type: "POST",
+ url: "/api/ExecCommunityRepo",
+ icon: {page} ;
+export default Page;
diff --git a/src/pages/endpoint/MEM/approval-requests/index.js b/src/pages/endpoint/MEM/approval-requests/index.js
deleted file mode 100644
index 604b7141a503..000000000000
--- a/src/pages/endpoint/MEM/approval-requests/index.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import { OpenInNew } from '@mui/icons-material'
-import {
- Alert,
- Button,
- Dialog,
- DialogActions,
- DialogContent,
- DialogContentText,
- DialogTitle,
-} from '@mui/material'
-import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { useSettings } from '../../../../hooks/use-settings'
-import { useDialog } from '../../../../hooks/use-dialog'
-
-const Page = () => {
- const pageTitle = 'MAA Requests'
- const tenantFilter = useSettings().currentTenant
- const handoffDialog = useDialog()
-
- // This page deliberately has no row actions. Intune answers approve and reject with "Valid user
- // identity required while Multi Admin Approval is enabled" for the delegated partner identity and
- // for the application identity alike, and a requestor may never approve its own request - which
- // CIPP always is. Delete is not offered either: the request is the tenant's record of a pending
- // decision, and removing it neither applies nor cancels the change behind it. The decision has to
- // be made by an account inside the tenant, so all this page offers is a handoff to Intune.
- const offCanvas = {
- extendedInfoFields: [
- 'id',
- 'status',
- 'operation',
- 'target',
- 'operationTypes',
- 'requestJustification',
- 'approvalJustification',
- 'requestedBy',
- 'approvedBy',
- 'requestDateTime',
- 'expirationDateTime',
- 'lastModifiedDateTime',
- ],
- }
-
- // requestedBy and approvedBy are kept out of the table: Intune leaves the requestor and approver
- // identity sets null, so as columns they would be dead space on every row.
- const simpleColumns = [
- 'status',
- 'operation',
- 'target',
- 'operationTypes',
- 'requestJustification',
- 'requestDateTime',
- 'expirationDateTime',
- ]
-
- return (
- <>
-
- Multi-admin approval holds these changes until a second
- administrator approves them, and the decision cannot be made from
- CIPP. Once a request is approved, anything CIPP raised is reapplied
- automatically. Requests expire after 3 days.
-
- }
- apiUrl="/api/ListIntuneApprovalRequests"
- queryKey="ListIntuneApprovalRequests"
- offCanvas={offCanvas}
- simpleColumns={simpleColumns}
- />
-
-
- )
-}
-
-Page.getLayout = (page) => {page}
-
-export default Page
diff --git a/src/pages/endpoint/MEM/approval-requests/index.jsx b/src/pages/endpoint/MEM/approval-requests/index.jsx
new file mode 100644
index 000000000000..450fa079edfd
--- /dev/null
+++ b/src/pages/endpoint/MEM/approval-requests/index.jsx
@@ -0,0 +1,135 @@
+import { CippIcons } from '../../../../utils/icon-registry'
+import {
+ Alert,
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ DialogTitle,
+} from '@mui/material'
+import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { useSettings } from '../../../../hooks/use-settings'
+import { useDialog } from '../../../../hooks/use-dialog'
+
+const Page = () => {
+ const pageTitle = 'MAA Requests'
+ const tenantFilter = useSettings().currentTenant
+ const handoffDialog = useDialog()
+
+ // This page deliberately has no row actions. Intune answers approve and reject with "Valid user
+ // identity required while Multi Admin Approval is enabled" for the delegated partner identity and
+ // for the application identity alike, and a requestor may never approve its own request - which
+ // CIPP always is. Delete is not offered either: the request is the tenant's record of a pending
+ // decision, and removing it neither applies nor cancels the change behind it. The decision has to
+ // be made by an account inside the tenant, so all this page offers is a handoff to Intune.
+ const offCanvas = {
+ extendedInfoFields: [
+ 'id',
+ 'status',
+ 'operation',
+ 'target',
+ 'operationTypes',
+ 'requestJustification',
+ 'approvalJustification',
+ 'requestedBy',
+ 'approvedBy',
+ 'requestDateTime',
+ 'expirationDateTime',
+ 'lastModifiedDateTime',
+ ],
+ }
+
+ // requestedBy and approvedBy are kept out of the table: Intune leaves the requestor and approver
+ // identity sets null, so as columns they would be dead space on every row.
+ const simpleColumns = [
+ 'status',
+ 'operation',
+ 'target',
+ 'operationTypes',
+ 'requestJustification',
+ 'requestDateTime',
+ 'expirationDateTime',
+ ]
+
+ return (
+ <>
+
+ Multi-admin approval holds these changes until a second
+ administrator approves them, and the decision cannot be made from
+ CIPP. Once a request is approved, anything CIPP raised is reapplied
+ automatically. Requests expire after 3 days.
+
+ }
+ apiUrl="/api/ListIntuneApprovalRequests"
+ queryKey="ListIntuneApprovalRequests"
+ offCanvas={offCanvas}
+ simpleColumns={simpleColumns}
+ />
+
+
+ )
+}
+
+Page.getLayout = (page) => {page}
+
+export default Page
diff --git a/src/pages/endpoint/MEM/assignment-filter-templates/add.jsx b/src/pages/endpoint/MEM/assignment-filter-templates/add.jsx
index e955a271bc99..4e7850ae7846 100644
--- a/src/pages/endpoint/MEM/assignment-filter-templates/add.jsx
+++ b/src/pages/endpoint/MEM/assignment-filter-templates/add.jsx
@@ -1,6 +1,6 @@
import { Box } from "@mui/material";
import CippFormPage from "../../../../components/CippFormPages/CippFormPage";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
import { useForm } from "react-hook-form";
import { useSettings } from "../../../../hooks/use-settings";
import CippAddAssignmentFilterTemplateForm from "../../../../components/CippFormPages/CippAddAssignmentFilterTemplateForm";
diff --git a/src/pages/endpoint/MEM/assignment-filter-templates/deploy.js b/src/pages/endpoint/MEM/assignment-filter-templates/deploy.js
deleted file mode 100644
index 4943b2868ef9..000000000000
--- a/src/pages/endpoint/MEM/assignment-filter-templates/deploy.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippWizardConfirmation } from "../../../../components/CippWizard/CippWizardConfirmation";
-import CippWizardPage from "../../../../components/CippWizard/CippWizardPage.jsx";
-import { CippTenantStep } from "../../../../components/CippWizard/CippTenantStep.jsx";
-import { CippWizardAssignmentFilterTemplates } from "../../../../components/CippWizard/CippWizardAssignmentFilterTemplates";
-
-const Page = () => {
- const steps = [
- {
- title: "Step 1",
- description: "Tenant Selection",
- component: CippTenantStep,
- componentProps: {
- allTenants: false,
- type: "multiple",
- },
- },
- {
- title: "Step 2",
- description: "Choose Template",
- component: CippWizardAssignmentFilterTemplates,
- },
- {
- title: "Step 3",
- description: "Confirmation",
- component: CippWizardConfirmation,
- },
- ];
-
- return (
- <>
- {page} ;
-
-export default Page;
diff --git a/src/pages/endpoint/MEM/assignment-filter-templates/deploy.jsx b/src/pages/endpoint/MEM/assignment-filter-templates/deploy.jsx
new file mode 100644
index 000000000000..c54419789021
--- /dev/null
+++ b/src/pages/endpoint/MEM/assignment-filter-templates/deploy.jsx
@@ -0,0 +1,43 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippWizardConfirmation } from "../../../../components/CippWizard/CippWizardConfirmation";
+import CippWizardPage from "../../../../components/CippWizard/CippWizardPage.jsx";
+import { CippTenantStep } from "../../../../components/CippWizard/CippTenantStep.jsx";
+import { CippWizardAssignmentFilterTemplates } from "../../../../components/CippWizard/CippWizardAssignmentFilterTemplates";
+
+const Page = () => {
+ const steps = [
+ {
+ title: "Step 1",
+ description: "Tenant Selection",
+ component: CippTenantStep,
+ componentProps: {
+ allTenants: false,
+ type: "multiple",
+ },
+ },
+ {
+ title: "Step 2",
+ description: "Choose Template",
+ component: CippWizardAssignmentFilterTemplates,
+ },
+ {
+ title: "Step 3",
+ description: "Confirmation",
+ component: CippWizardConfirmation,
+ },
+ ];
+
+ return (
+ <>
+ {page} ;
+
+export default Page;
diff --git a/src/pages/endpoint/MEM/assignment-filter-templates/edit.jsx b/src/pages/endpoint/MEM/assignment-filter-templates/edit.jsx
index 0eb68a160c8a..e436da13fa22 100644
--- a/src/pages/endpoint/MEM/assignment-filter-templates/edit.jsx
+++ b/src/pages/endpoint/MEM/assignment-filter-templates/edit.jsx
@@ -1,6 +1,6 @@
import { Box, CircularProgress } from "@mui/material";
import CippFormPage from "../../../../components/CippFormPages/CippFormPage";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
import { useForm } from "react-hook-form";
import { useSettings } from "../../../../hooks/use-settings";
import CippAddAssignmentFilterTemplateForm from "../../../../components/CippFormPages/CippAddAssignmentFilterTemplateForm";
diff --git a/src/pages/endpoint/MEM/assignment-filter-templates/index.js b/src/pages/endpoint/MEM/assignment-filter-templates/index.js
deleted file mode 100644
index 5634b8b7e699..000000000000
--- a/src/pages/endpoint/MEM/assignment-filter-templates/index.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import { Button } from "@mui/material";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { AddBox, RocketLaunch, Delete, GitHub, Edit } from "@mui/icons-material";
-import Link from "next/link";
-import { ApiGetCall } from "../../../../api/ApiCall";
-import { CippPropertyListCard } from "../../../../components/CippCards/CippPropertyListCard";
-import { getCippTranslation } from "../../../../utils/get-cipp-translation";
-import { getCippFormatting } from "../../../../utils/get-cipp-formatting";
-
-const Page = () => {
- const pageTitle = "Assignment Filter Templates";
- const integrations = ApiGetCall({
- url: "/api/ListExtensionsConfig",
- queryKey: "Integrations",
- refetchOnMount: false,
- refetchOnReconnect: false,
- });
- const actions = [
- {
- label: "Edit Template",
- icon:
- }>
- Add Assignment Filter Template
-
- }>
- Deploy Assignment Filter Template
-
-
- }
- offCanvas={offCanvas}
- simpleColumns={["displayName", "description", "platform", "GUID"]}
- />
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/endpoint/MEM/assignment-filter-templates/index.jsx b/src/pages/endpoint/MEM/assignment-filter-templates/index.jsx
new file mode 100644
index 000000000000..e7ab411a2bd7
--- /dev/null
+++ b/src/pages/endpoint/MEM/assignment-filter-templates/index.jsx
@@ -0,0 +1,134 @@
+import { Button } from "@mui/material";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import Link from "next/link";
+import { ApiGetCall } from "../../../../api/ApiCall";
+import { CippPropertyListCard } from "../../../../components/CippCards/CippPropertyListCard";
+import { getCippTranslation } from "../../../../utils/get-cipp-translation";
+import { getCippFormatting } from "../../../../utils/get-cipp-formatting";
+
+const Page = () => {
+ const pageTitle = "Assignment Filter Templates";
+ const integrations = ApiGetCall({
+ url: "/api/ListExtensionsConfig",
+ queryKey: "Integrations",
+ refetchOnMount: false,
+ refetchOnReconnect: false,
+ });
+ const actions = [
+ {
+ label: "Edit Template",
+ pinned: true,
+ icon:
+ }>
+ Add Assignment Filter Template
+
+ }>
+ Deploy Assignment Filter Template
+
+
+ }
+ offCanvas={offCanvas}
+ simpleColumns={["displayName", "description", "platform", "GUID"]}
+ />
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/endpoint/MEM/assignment-filters/add.jsx b/src/pages/endpoint/MEM/assignment-filters/add.jsx
index c4aead07619d..3e58416ba0db 100644
--- a/src/pages/endpoint/MEM/assignment-filters/add.jsx
+++ b/src/pages/endpoint/MEM/assignment-filters/add.jsx
@@ -1,6 +1,6 @@
import { Box } from "@mui/material";
import CippFormPage from "../../../../components/CippFormPages/CippFormPage";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
import { useForm } from "react-hook-form";
import { useSettings } from "../../../../hooks/use-settings";
import { useEffect } from "react";
diff --git a/src/pages/endpoint/MEM/assignment-filters/edit.jsx b/src/pages/endpoint/MEM/assignment-filters/edit.jsx
index f5a6dbad163f..a3f41addda2d 100644
--- a/src/pages/endpoint/MEM/assignment-filters/edit.jsx
+++ b/src/pages/endpoint/MEM/assignment-filters/edit.jsx
@@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
-import { Box } from "@mui/material";
+import { Box, Alert } from "@mui/material";
import { useForm } from "react-hook-form";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
import CippFormPage from "../../../../components/CippFormPages/CippFormPage";
import { useRouter } from "next/router";
import { ApiGetCall } from "../../../../api/ApiCall";
@@ -55,19 +55,29 @@ const EditAssignmentFilter = () => {
}
}, [filterInfo.isSuccess, filterInfo.data, tenantFilter]);
+ const filterName = filterInfo.data?.[0]?.displayName || filterInfo.data?.displayName;
+
return (
<>
-
-
+ {!filterId && (
+
+ No filter selected. Open this page from the Assignment Filters list to edit a filter.
+
+ )}
+ {filterId && (
+
+
+ )}
);
diff --git a/src/pages/endpoint/MEM/assignment-filters/index.js b/src/pages/endpoint/MEM/assignment-filters/index.js
deleted file mode 100644
index e41259dad6a6..000000000000
--- a/src/pages/endpoint/MEM/assignment-filters/index.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import { Button } from "@mui/material";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import Link from "next/link";
-import { TrashIcon } from "@heroicons/react/24/outline";
-import { Edit, Add, Book } from "@mui/icons-material";
-import { Stack } from "@mui/system";
-import { useCippReportDB } from "../../../../components/CippComponents/CippReportDBControls";
-
-const Page = () => {
- const pageTitle = "Assignment Filters";
-
- const reportDB = useCippReportDB({
- apiUrl: "/api/ListAssignmentFilters",
- queryKey: "assignment-filters",
- cacheName: "IntuneAssignmentFilters",
- syncTitle: "Sync Assignment Filters Report",
- allowToggle: true,
- defaultCached: false,
- });
-
- const actions = [
- {
- label: "Create template based on filter",
- type: "POST",
- url: "/api/AddAssignmentFilterTemplate",
- icon:
- }>
- Add Assignment Filter
-
-
- }
- dataSourceControls={reportDB.controls}
- apiUrl={reportDB.resolvedApiUrl}
- queryKey={reportDB.resolvedQueryKey}
- actions={actions}
- offCanvas={offCanvas}
- simpleColumns={simpleColumns}
- />
- {reportDB.syncDialog}
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/endpoint/MEM/assignment-filters/index.jsx b/src/pages/endpoint/MEM/assignment-filters/index.jsx
new file mode 100644
index 000000000000..b88a40ddf636
--- /dev/null
+++ b/src/pages/endpoint/MEM/assignment-filters/index.jsx
@@ -0,0 +1,109 @@
+import { Button } from "@mui/material";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import Link from "next/link";
+import { Stack } from "@mui/system";
+import { useCippReportDB } from "../../../../components/CippComponents/CippReportDBControls";
+
+const Page = () => {
+ const pageTitle = "Assignment Filters";
+
+ const reportDB = useCippReportDB({
+ apiUrl: "/api/ListAssignmentFilters",
+ queryKey: "assignment-filters",
+ cacheName: "IntuneAssignmentFilters",
+ syncTitle: "Sync Assignment Filters Report",
+ allowToggle: true,
+ defaultCached: false,
+ });
+
+ const actions = [
+ {
+ label: "Create template based on filter",
+ type: "POST",
+ url: "/api/AddAssignmentFilterTemplate",
+ icon:
+ }>
+ Add Assignment Filter
+
+
+ }
+ dataSourceControls={reportDB.controls}
+ apiUrl={reportDB.resolvedApiUrl}
+ queryKey={reportDB.resolvedQueryKey}
+ actions={actions}
+ offCanvas={offCanvas}
+ simpleColumns={simpleColumns}
+ />
+ {reportDB.syncDialog}
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/endpoint/MEM/bitlocker-search/index.js b/src/pages/endpoint/MEM/bitlocker-search/index.js
deleted file mode 100644
index 5192f2ceece0..000000000000
--- a/src/pages/endpoint/MEM/bitlocker-search/index.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import { useState } from "react";
-import { Box, Button, Container } from "@mui/material";
-import { Grid } from "@mui/system";
-import { Search } from "@mui/icons-material";
-import { useForm, useWatch } from "react-hook-form";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { useSettings } from "../../../../hooks/use-settings";
-import CippButtonCard from "../../../../components/CippCards/CippButtonCard";
-import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
-import { CippBitlockerKeySearch } from "../../../../components/CippComponents/CippBitlockerKeySearch";
-import { CippHead } from "../../../../components/CippComponents/CippHead";
-
-const Page = () => {
- const currentTenant = useSettings().currentTenant;
-
- const formControl = useForm({
- mode: "onChange",
- defaultValues: {
- lookupType: "keyId",
- searchTerm: "",
- },
- });
-
- const lookupType = useWatch({ control: formControl.control, name: "lookupType" });
- const searchTerm = useWatch({ control: formControl.control, name: "searchTerm" });
-
- const [submitted, setSubmitted] = useState(null);
-
- const handleSearch = () => {
- const trimmed = searchTerm?.trim();
- if (!trimmed) return;
- setSubmitted({
- term: trimmed,
- type: lookupType || "keyId",
- key: Date.now(),
- });
- };
-
- return (
- <>
-
-
-
-
-
-
-
-
-
- {
- if (event.key === "Enter") {
- event.preventDefault();
- handleSearch();
- }
- }}
- />
-
-
- }
- onClick={handleSearch}
- disabled={!searchTerm?.trim()}
- >
- Search
-
-
-
-
-
-
- {submitted && (
-
-
- )}
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/endpoint/MEM/bitlocker-search/index.jsx b/src/pages/endpoint/MEM/bitlocker-search/index.jsx
new file mode 100644
index 000000000000..ed532b2ee451
--- /dev/null
+++ b/src/pages/endpoint/MEM/bitlocker-search/index.jsx
@@ -0,0 +1,122 @@
+import { useState } from "react";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { Box, Button, Container } from "@mui/material";
+import { Grid } from "@mui/system";
+import { useForm, useWatch } from "react-hook-form";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { useSettings } from "../../../../hooks/use-settings";
+import CippButtonCard from "../../../../components/CippCards/CippButtonCard";
+import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
+import { CippBitlockerKeySearch } from "../../../../components/CippComponents/CippBitlockerKeySearch";
+import { CippHead } from "../../../../components/CippComponents/CippHead";
+
+const Page = () => {
+ const currentTenant = useSettings().currentTenant;
+
+ const formControl = useForm({
+ mode: "onChange",
+ defaultValues: {
+ lookupType: "keyId",
+ searchTerm: "",
+ },
+ });
+
+ const lookupType = useWatch({ control: formControl.control, name: "lookupType" });
+ const searchTerm = useWatch({ control: formControl.control, name: "searchTerm" });
+
+ const [submitted, setSubmitted] = useState(null);
+
+ const handleSearch = () => {
+ const trimmed = searchTerm?.trim();
+ if (!trimmed) return;
+ setSubmitted({
+ term: trimmed,
+ type: lookupType || "keyId",
+ key: Date.now(),
+ });
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ {
+ if (event.key === "Enter") {
+ event.preventDefault();
+ handleSearch();
+ }
+ }}
+ />
+
+
+ }
+ onClick={handleSearch}
+ disabled={!searchTerm?.trim()}
+ >
+ Search
+
+
+
+
+
+
+ {submitted && (
+
+
+ )}
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/endpoint/MEM/compare-policies/index.js b/src/pages/endpoint/MEM/compare-policies/index.js
deleted file mode 100644
index 64cd745bd4b0..000000000000
--- a/src/pages/endpoint/MEM/compare-policies/index.js
+++ /dev/null
@@ -1,388 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { useForm, useWatch } from "react-hook-form";
-import { ApiPostCall } from "../../../../api/ApiCall";
-import { CippFormComponent } from "../../../../components/CippComponents/CippFormComponent";
-import { CippFormCondition } from "../../../../components/CippComponents/CippFormCondition";
-import { CippFormTenantSelector } from "../../../../components/CippComponents/CippFormTenantSelector";
-import CippJsonView from "../../../../components/CippFormPages/CippJSONView";
-import {
- Box,
- Button,
- Card,
- CardContent,
- CardHeader,
- Alert,
- Stack,
- Skeleton,
-} from "@mui/material";
-import { CippPolicyDiffTable } from "../../../../components/CippComponents/CippPolicyDiffTable";
-import {
- CompareArrows as CompareArrowsIcon,
- CheckCircle as CheckCircleIcon,
- Error as ErrorIcon,
-} from "@mui/icons-material";
-import { useEffect, useMemo } from "react";
-import { Grid } from "@mui/system";
-import CippPageCard from "../../../../components/CippCards/CippPageCard";
-
-const sourceTypeOptions = [
- { label: "CIPP Template", value: "template" },
- { label: "Tenant Policy", value: "tenantPolicy" },
- { label: "Community Repository", value: "communityRepo" },
-];
-
-const SourceSelector = ({ prefix, formControl, label }) => {
- const tenantValue = useWatch({ control: formControl.control, name: `${prefix}.tenantFilter` });
- const repoValue = useWatch({ control: formControl.control, name: `${prefix}.repo` });
- const branchValue = useWatch({ control: formControl.control, name: `${prefix}.branch` });
-
- useEffect(() => {
- if (repoValue?.addedFields?.defaultBranch) {
- formControl.setValue(`${prefix}.branch`, {
- label: repoValue.addedFields.defaultBranch,
- value: repoValue.addedFields.defaultBranch,
- });
- } else {
- formControl.setValue(`${prefix}.branch`, null);
- }
- formControl.setValue(`${prefix}.repoFile`, null);
- }, [repoValue?.value]);
-
- useEffect(() => {
- formControl.setValue(`${prefix}.repoFile`, null);
- }, [branchValue?.value]);
-
- return (
-
-
-
-
-
- `${item.Displayname || item.displayName}${item.Type ? ` (${item.Type})` : ""}`,
- valueField: "GUID",
- addedField: { type: "Type" },
- }}
- validators={{ required: { value: true, message: "Template is required" } }}
- />
-
-
-
-
- {
- const name = item.displayName || item.name || "Unnamed Policy";
- const type = item.PolicyTypeName || item.URLName || "";
- return type ? `${name} (${type})` : name;
- },
- valueField: "id",
- addedField: { urlName: "URLName" },
- }
- : undefined
- }
- validators={{ required: { value: true, message: "Policy is required" } }}
- />
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-const Page = () => {
- const formControl = useForm({
- mode: "onChange",
- defaultValues: {
- sourceA: { type: "template" },
- sourceB: { type: "template" },
- },
- });
-
- const compareApi = ApiPostCall({ relatedQueryKeys: [] });
-
- const sourceAType = useWatch({ control: formControl.control, name: "sourceA.type" });
- const sourceBType = useWatch({ control: formControl.control, name: "sourceB.type" });
- const sourceATemplate = useWatch({ control: formControl.control, name: "sourceA.template" });
- const sourceBTemplate = useWatch({ control: formControl.control, name: "sourceB.template" });
- const sourceAPolicy = useWatch({ control: formControl.control, name: "sourceA.policy" });
- const sourceBPolicy = useWatch({ control: formControl.control, name: "sourceB.policy" });
- const sourceARepoFile = useWatch({ control: formControl.control, name: "sourceA.repoFile" });
- const sourceBRepoFile = useWatch({ control: formControl.control, name: "sourceB.repoFile" });
-
- const isSourceReady = (type, template, policy, repoFile) =>
- type === "template"
- ? !!template?.value
- : type === "tenantPolicy"
- ? !!policy?.value
- : type === "communityRepo"
- ? !!repoFile?.value
- : false;
-
- const canCompare =
- isSourceReady(sourceAType, sourceATemplate, sourceAPolicy, sourceARepoFile) &&
- isSourceReady(sourceBType, sourceBTemplate, sourceBPolicy, sourceBRepoFile);
-
- const handleCompare = () => {
- const values = formControl.getValues();
-
- const buildPayload = (source) => {
- if (source.type === "template") {
- return {
- type: "template",
- templateGuid: source.template?.value,
- };
- }
- if (source.type === "communityRepo") {
- return {
- type: "communityRepo",
- fullName: source.repo?.value,
- branch: source.branch?.value,
- path: source.repoFile?.value,
- };
- }
- return {
- type: "tenantPolicy",
- tenantFilter: source.tenantFilter?.value,
- policyId: source.policy?.value,
- urlName: source.policy?.addedFields?.urlName,
- };
- };
-
- compareApi.mutate({
- url: "/api/ExecCompareIntunePolicy",
- data: {
- sourceA: buildPayload(values.sourceA),
- sourceB: buildPayload(values.sourceB),
- },
- });
- };
-
- const results = useMemo(() => {
- if (!compareApi.isSuccess) return null;
- return compareApi.data?.data || compareApi.data;
- }, [compareApi.isSuccess, compareApi.data]);
-
- const errorMessage = useMemo(() => {
- if (!compareApi.isError) return null;
- const errData = compareApi.error?.response?.data;
- return errData?.Results || compareApi.error?.message || "An error occurred";
- }, [compareApi.isError, compareApi.error]);
-
- const comparisonRows = useMemo(() => {
- const raw = results?.Results;
- const rows = Array.isArray(raw) ? raw : raw ? [raw] : [];
- return rows.filter((row) => row && typeof row === "object");
- }, [results?.Results]);
-
- return (
-
-
-
-
-
-
-
-
-
-
-
- }
- onClick={handleCompare}
- disabled={!canCompare || compareApi.isPending}
- >
- {compareApi.isPending ? "Comparing..." : "Compare"}
-
-
-
- {compareApi.isPending && (
-
-
-
-
-
-
- )}
-
- {errorMessage && (
-
-
- A: {results.sourceALabel} — B:{" "}
- {results.sourceBLabel}
-
-
-
- {!results.identical && comparisonRows.length > 0 && (
-
- )}
-
-
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/endpoint/MEM/compare-policies/index.jsx b/src/pages/endpoint/MEM/compare-policies/index.jsx
new file mode 100644
index 000000000000..ac7251c86432
--- /dev/null
+++ b/src/pages/endpoint/MEM/compare-policies/index.jsx
@@ -0,0 +1,386 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry";
+import { useForm, useWatch } from "react-hook-form";
+import { ApiPostCall } from "../../../../api/ApiCall";
+import { CippFormComponent } from "../../../../components/CippComponents/CippFormComponent";
+import { CippFormCondition } from "../../../../components/CippComponents/CippFormCondition";
+import { CippFormTenantSelector } from "../../../../components/CippComponents/CippFormTenantSelector";
+import CippJsonView from "../../../../components/CippFormPages/CippJSONView";
+import {
+ Box,
+ Button,
+ Card,
+ CardContent,
+ CardHeader,
+ Alert,
+ Stack,
+ Skeleton,
+} from "@mui/material";
+import { CippPolicyDiffTable } from "../../../../components/CippComponents/CippPolicyDiffTable";
+import { useEffect, useMemo } from "react";
+import { Grid } from "@mui/system";
+import CippPageCard from "../../../../components/CippCards/CippPageCard";
+
+const sourceTypeOptions = [
+ { label: "CIPP Template", value: "template" },
+ { label: "Tenant Policy", value: "tenantPolicy" },
+ { label: "Community Repository", value: "communityRepo" },
+];
+
+const SourceSelector = ({ prefix, formControl, label }) => {
+ const tenantValue = useWatch({ control: formControl.control, name: `${prefix}.tenantFilter` });
+ const repoValue = useWatch({ control: formControl.control, name: `${prefix}.repo` });
+ const branchValue = useWatch({ control: formControl.control, name: `${prefix}.branch` });
+
+ useEffect(() => {
+ if (repoValue?.addedFields?.defaultBranch) {
+ formControl.setValue(`${prefix}.branch`, {
+ label: repoValue.addedFields.defaultBranch,
+ value: repoValue.addedFields.defaultBranch,
+ });
+ } else {
+ formControl.setValue(`${prefix}.branch`, null);
+ }
+ formControl.setValue(`${prefix}.repoFile`, null);
+ }, [repoValue?.value]);
+
+ useEffect(() => {
+ formControl.setValue(`${prefix}.repoFile`, null);
+ }, [branchValue?.value]);
+
+ return (
+
+
+
+
+
+ `${item.Displayname || item.displayName}${item.Type ? ` (${item.Type})` : ""}`,
+ valueField: "GUID",
+ addedField: { type: "Type" },
+ }}
+ validators={{ required: { value: true, message: "Template is required" } }}
+ />
+
+
+
+
+ {
+ const name = item.displayName || item.name || "Unnamed Policy";
+ const type = item.PolicyTypeName || item.URLName || "";
+ return type ? `${name} (${type})` : name;
+ },
+ valueField: "id",
+ addedField: { urlName: "URLName" },
+ }
+ : undefined
+ }
+ validators={{ required: { value: true, message: "Policy is required" } }}
+ />
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const Page = () => {
+ const formControl = useForm({
+ mode: "onChange",
+ defaultValues: {
+ sourceA: { type: "template" },
+ sourceB: { type: "template" },
+ },
+ });
+
+ const compareApi = ApiPostCall({ relatedQueryKeys: [] });
+
+ const sourceAType = useWatch({ control: formControl.control, name: "sourceA.type" });
+ const sourceBType = useWatch({ control: formControl.control, name: "sourceB.type" });
+ const sourceATemplate = useWatch({ control: formControl.control, name: "sourceA.template" });
+ const sourceBTemplate = useWatch({ control: formControl.control, name: "sourceB.template" });
+ const sourceAPolicy = useWatch({ control: formControl.control, name: "sourceA.policy" });
+ const sourceBPolicy = useWatch({ control: formControl.control, name: "sourceB.policy" });
+ const sourceARepoFile = useWatch({ control: formControl.control, name: "sourceA.repoFile" });
+ const sourceBRepoFile = useWatch({ control: formControl.control, name: "sourceB.repoFile" });
+
+ const isSourceReady = (type, template, policy, repoFile) =>
+ type === "template"
+ ? !!template?.value
+ : type === "tenantPolicy"
+ ? !!policy?.value
+ : type === "communityRepo"
+ ? !!repoFile?.value
+ : false;
+
+ const canCompare =
+ isSourceReady(sourceAType, sourceATemplate, sourceAPolicy, sourceARepoFile) &&
+ isSourceReady(sourceBType, sourceBTemplate, sourceBPolicy, sourceBRepoFile);
+
+ const handleCompare = () => {
+ const values = formControl.getValues();
+
+ const buildPayload = (source) => {
+ if (source.type === "template") {
+ return {
+ type: "template",
+ templateGuid: source.template?.value,
+ };
+ }
+ if (source.type === "communityRepo") {
+ return {
+ type: "communityRepo",
+ fullName: source.repo?.value,
+ branch: source.branch?.value,
+ path: source.repoFile?.value,
+ };
+ }
+ return {
+ type: "tenantPolicy",
+ tenantFilter: source.tenantFilter?.value,
+ policyId: source.policy?.value,
+ urlName: source.policy?.addedFields?.urlName,
+ };
+ };
+
+ compareApi.mutate({
+ url: "/api/ExecCompareIntunePolicy",
+ data: {
+ sourceA: buildPayload(values.sourceA),
+ sourceB: buildPayload(values.sourceB),
+ },
+ });
+ };
+
+ const results = useMemo(() => {
+ if (!compareApi.isSuccess) return null;
+ return compareApi.data?.data || compareApi.data;
+ }, [compareApi.isSuccess, compareApi.data]);
+
+ const errorMessage = useMemo(() => {
+ if (!compareApi.isError) return null;
+ const errData = compareApi.error?.response?.data;
+ return errData?.Results || compareApi.error?.message || "An error occurred";
+ }, [compareApi.isError, compareApi.error]);
+
+ const comparisonRows = useMemo(() => {
+ const raw = results?.Results;
+ const rows = Array.isArray(raw) ? raw : raw ? [raw] : [];
+ return rows.filter((row) => row && typeof row === "object");
+ }, [results?.Results]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ }
+ onClick={handleCompare}
+ disabled={!canCompare || compareApi.isPending}
+ >
+ {compareApi.isPending ? "Comparing..." : "Compare"}
+
+
+
+ {compareApi.isPending && (
+
+
+
+
+
+
+ )}
+
+ {errorMessage && (
+
+
+ A: {results.sourceALabel} — B:{" "}
+ {results.sourceBLabel}
+
+
+
+ {!results.identical && comparisonRows.length > 0 && (
+
+ )}
+
+
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/endpoint/MEM/devices/device/index.jsx b/src/pages/endpoint/MEM/devices/device/index.jsx
index 25fdbcff7b18..f572cedbd8da 100644
--- a/src/pages/endpoint/MEM/devices/device/index.jsx
+++ b/src/pages/endpoint/MEM/devices/device/index.jsx
@@ -1,22 +1,9 @@
-import { Layout as DashboardLayout } from '../../../../../layouts/index.js'
+import { Layout as DashboardLayout } from '../../../../../layouts/index'
+import { CippIcons } from '../../../../../utils/icon-registry'
import { useSettings } from '../../../../../hooks/use-settings'
import { useRouter } from 'next/router'
import { ApiGetCall, ApiPostCall } from '../../../../../api/ApiCall'
import CippFormSkeleton from '../../../../../components/CippFormPages/CippFormSkeleton'
-import CalendarIcon from '@heroicons/react/24/outline/CalendarIcon'
-import {
- PhoneAndroid,
- Computer,
- PhoneIphone,
- Laptop,
- Launch,
- Security,
- CheckCircle,
- Warning,
- Sync,
- Fingerprint,
- Group,
-} from '@mui/icons-material'
import { HeaderedTabbedLayout } from '../../../../../layouts/HeaderedTabbedLayout'
import { CippEntitySwitcher } from '../../../../../components/CippComponents/CippEntitySwitcher'
import tabOptions from './tabOptions'
@@ -34,7 +21,6 @@ import { CippDataTable } from '../../../../../components/CippTable/CippDataTable
import { CippHead } from '../../../../../components/CippComponents/CippHead'
import { Button } from '@mui/material'
import { getCippFormatting } from '../../../../../utils/get-cipp-formatting'
-import { PencilIcon, EyeIcon } from '@heroicons/react/24/outline'
const Page = () => {
const userSettingsDefaults = useSettings()
@@ -61,6 +47,7 @@ const Page = () => {
const deviceBulkRequest = ApiPostCall({
urlFromData: true,
})
+ const bulkFetchedForId = useRef(null)
// Handle response structure - ListGraphRequest may wrap single items in Results array
// Try Results array first, then Results as object, then data directly
@@ -114,11 +101,12 @@ const Page = () => {
})
}
+ bulkFetchedForId.current = deviceId
deviceBulkRequest.mutate({
url: '/api/ListGraphBulkRequest',
data: {
Requests: requests,
- tenantFilter: userSettingsDefaults.currentTenant,
+ tenantFilter: router.query.tenantFilter ?? userSettingsDefaults.currentTenant,
},
})
}
@@ -129,7 +117,7 @@ const Page = () => {
deviceId &&
userSettingsDefaults.currentTenant &&
deviceRequest.isSuccess &&
- !deviceBulkRequest.isSuccess
+ bulkFetchedForId.current !== deviceId
) {
refreshFunction()
}
@@ -137,7 +125,6 @@ const Page = () => {
deviceId,
userSettingsDefaults.currentTenant,
deviceRequest.isSuccess,
- deviceBulkRequest.isSuccess,
])
const bulkData = deviceBulkRequest?.data?.data ?? []
@@ -166,15 +153,15 @@ const Page = () => {
const subtitle = deviceRequest.isSuccess
? [
{
- icon: {page}
-
-export default Page
diff --git a/src/pages/endpoint/MEM/devices/index.jsx b/src/pages/endpoint/MEM/devices/index.jsx
new file mode 100644
index 000000000000..13cc6789690b
--- /dev/null
+++ b/src/pages/endpoint/MEM/devices/index.jsx
@@ -0,0 +1,83 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippIcons } from '../../../../utils/icon-registry'
+import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
+import { CippApiDialog } from '../../../../components/CippComponents/CippApiDialog.jsx'
+import { getIntuneDeviceActions } from '../../../../components/CippComponents/CippIntuneDeviceActions.jsx'
+import { useSettings } from '../../../../hooks/use-settings'
+import { useDialog } from '../../../../hooks/use-dialog.js'
+import { Button } from '@mui/material'
+import { Stack } from '@mui/system'
+
+const Page = () => {
+ const pageTitle = 'Devices'
+ const tenantFilter = useSettings().currentTenant
+ const depSyncDialog = useDialog()
+
+ const actions = getIntuneDeviceActions({ tenantFilter })
+
+ const offCanvas = {
+ extendedInfoFields: ['deviceName', 'userPrincipalName'],
+ actions: actions,
+ }
+
+ const simpleColumns = [
+ 'deviceName',
+ 'userPrincipalName',
+ 'complianceState',
+ 'manufacturer',
+ 'model',
+ 'operatingSystem',
+ 'osVersion',
+ 'enrolledDateTime',
+ 'managedDeviceOwnerType',
+ 'deviceEnrollmentType',
+ 'joinType',
+ ]
+
+ return (
+ <>
+ Boolean(row?.id),
+ }}
+ simpleColumns={simpleColumns}
+ cardButton={
+
+ }>
+ Sync DEP
+
+
+ }
+ />
+ {page}
+
+export default Page
diff --git a/src/pages/endpoint/MEM/list-appprotection-policies/index.js b/src/pages/endpoint/MEM/list-appprotection-policies/index.js
deleted file mode 100644
index 66b5ac85bcdd..000000000000
--- a/src/pages/endpoint/MEM/list-appprotection-policies/index.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
-import { PermissionButton } from '../../../../utils/permissions.js'
-import { CippPolicyDeployDrawer } from '../../../../components/CippComponents/CippPolicyDeployDrawer.jsx'
-import { useSettings } from '../../../../hooks/use-settings.js'
-import { useCippIntunePolicyActions } from '../../../../components/CippComponents/CippIntunePolicyActions.jsx'
-import { useCippReportDB } from '../../../../components/CippComponents/CippReportDBControls'
-import { Stack } from '@mui/system'
-
-const Page = () => {
- const pageTitle = 'App Protection & Configuration Policies'
- const cardButtonPermissions = ['Endpoint.MEM.ReadWrite']
- const tenant = useSettings().currentTenant
-
- const reportDB = useCippReportDB({
- apiUrl: '/api/ListAppProtectionPolicies',
- queryKey: 'ListAppProtectionPolicies',
- cacheName: 'IntuneAppProtectionPolicies',
- syncTitle: 'Sync App Protection Policies Report',
- allowToggle: true,
- defaultCached: false,
- })
-
- const actions = useCippIntunePolicyActions(tenant, 'URLName', {
- templateData: {
- ID: 'id',
- URLName: 'managedAppPolicies',
- },
- platformType: 'deviceAppManagement',
- deleteUrlName: 'URLName',
- })
-
- const offCanvas = {
- extendedInfoFields: [
- 'createdDateTime',
- 'displayName',
- 'description',
- 'lastModifiedDateTime',
- 'PolicyTypeName',
- 'PolicySource',
- ],
- actions: actions,
- }
-
- const simpleColumns = [
- ...reportDB.cacheColumns,
- 'displayName',
- 'PolicyTypeName',
- 'PolicyAssignment',
- 'PolicyExclude',
- 'lastModifiedDateTime',
- ]
-
- return (
- <>
-
- {page}
-export default Page
diff --git a/src/pages/endpoint/MEM/list-appprotection-policies/index.jsx b/src/pages/endpoint/MEM/list-appprotection-policies/index.jsx
new file mode 100644
index 000000000000..2b838e71c983
--- /dev/null
+++ b/src/pages/endpoint/MEM/list-appprotection-policies/index.jsx
@@ -0,0 +1,82 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
+import { PermissionButton } from '../../../../utils/permissions'
+import { CippPolicyDeployDrawer } from '../../../../components/CippComponents/CippPolicyDeployDrawer.jsx'
+import { useSettings } from '../../../../hooks/use-settings.js'
+import { useCippIntunePolicyActions } from '../../../../components/CippComponents/CippIntunePolicyActions.jsx'
+import { useCippReportDB } from '../../../../components/CippComponents/CippReportDBControls'
+import { Stack } from '@mui/system'
+
+const Page = () => {
+ const pageTitle = 'App Protection & Configuration Policies'
+ const cardButtonPermissions = ['Endpoint.MEM.ReadWrite']
+ const tenant = useSettings().currentTenant
+
+ const reportDB = useCippReportDB({
+ apiUrl: '/api/ListAppProtectionPolicies',
+ queryKey: 'ListAppProtectionPolicies',
+ cacheName: 'IntuneAppProtectionPolicies',
+ syncTitle: 'Sync App Protection Policies Report',
+ allowToggle: true,
+ defaultCached: false,
+ })
+
+ const actions = useCippIntunePolicyActions(tenant, 'URLName', {
+ templateData: {
+ ID: 'id',
+ URLName: 'managedAppPolicies',
+ },
+ platformType: 'deviceAppManagement',
+ deleteUrlName: 'URLName',
+ })
+
+ const offCanvas = {
+ extendedInfoFields: [
+ 'createdDateTime',
+ 'displayName',
+ 'description',
+ 'lastModifiedDateTime',
+ 'PolicyTypeName',
+ 'PolicySource',
+ ],
+ actions: actions,
+ }
+
+ const simpleColumns = [
+ ...reportDB.cacheColumns,
+ 'displayName',
+ 'PolicyTypeName',
+ 'PolicyAssignment',
+ 'PolicyExclude',
+ 'lastModifiedDateTime',
+ ]
+
+ return (
+ <>
+
+ {page}
+export default Page
diff --git a/src/pages/endpoint/MEM/list-compliance-policies/index.js b/src/pages/endpoint/MEM/list-compliance-policies/index.js
deleted file mode 100644
index f3f8299baa1f..000000000000
--- a/src/pages/endpoint/MEM/list-compliance-policies/index.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { PermissionButton } from "../../../../utils/permissions.js";
-import { CippPolicyDeployDrawer } from "../../../../components/CippComponents/CippPolicyDeployDrawer.jsx";
-import { useSettings } from "../../../../hooks/use-settings.js";
-import { useCippIntunePolicyActions } from "../../../../components/CippComponents/CippIntunePolicyActions.jsx";
-import { useCippReportDB } from "../../../../components/CippComponents/CippReportDBControls";
-import { Stack } from "@mui/system";
-
-const Page = () => {
- const pageTitle = "Intune Compliance Policies";
- const cardButtonPermissions = ["Endpoint.MEM.ReadWrite"];
- const tenant = useSettings().currentTenant;
-
- const reportDB = useCippReportDB({
- apiUrl: "/api/ListCompliancePolicies",
- queryKey: "ListCompliancePolicies",
- cacheName: "IntuneCompliancePolicies",
- syncTitle: "Sync Compliance Policies Report",
- allowToggle: true,
- defaultCached: false,
- });
-
- const actions = useCippIntunePolicyActions(tenant, "deviceCompliancePolicies", {
- templateData: {
- ID: "id",
- ODataType: "@odata.type",
- },
- deleteUrlName: "deviceCompliancePolicies",
- });
-
- const offCanvas = {
- extendedInfoFields: [
- "createdDateTime",
- "displayName",
- "lastModifiedDateTime",
- "PolicyTypeName",
- ],
- actions: actions,
- };
-
- const simpleColumns = [
- ...reportDB.cacheColumns,
- "displayName",
- "PolicyTypeName",
- "PolicyAssignment",
- "PolicyExclude",
- "description",
- "lastModifiedDateTime",
- ];
-
- return (
- <>
-
- {page} ;
-export default Page;
diff --git a/src/pages/endpoint/MEM/list-compliance-policies/index.jsx b/src/pages/endpoint/MEM/list-compliance-policies/index.jsx
new file mode 100644
index 000000000000..336dcd9c38d9
--- /dev/null
+++ b/src/pages/endpoint/MEM/list-compliance-policies/index.jsx
@@ -0,0 +1,80 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import { PermissionButton } from "../../../../utils/permissions";
+import { CippPolicyDeployDrawer } from "../../../../components/CippComponents/CippPolicyDeployDrawer.jsx";
+import { useSettings } from "../../../../hooks/use-settings.js";
+import { useCippIntunePolicyActions } from "../../../../components/CippComponents/CippIntunePolicyActions.jsx";
+import { useCippReportDB } from "../../../../components/CippComponents/CippReportDBControls";
+import { Stack } from "@mui/system";
+
+const Page = () => {
+ const pageTitle = "Intune Compliance Policies";
+ const cardButtonPermissions = ["Endpoint.MEM.ReadWrite"];
+ const tenant = useSettings().currentTenant;
+
+ const reportDB = useCippReportDB({
+ apiUrl: "/api/ListCompliancePolicies",
+ queryKey: "ListCompliancePolicies",
+ cacheName: "IntuneCompliancePolicies",
+ syncTitle: "Sync Compliance Policies Report",
+ allowToggle: true,
+ defaultCached: false,
+ });
+
+ const actions = useCippIntunePolicyActions(tenant, "deviceCompliancePolicies", {
+ templateData: {
+ ID: "id",
+ ODataType: "@odata.type",
+ },
+ deleteUrlName: "deviceCompliancePolicies",
+ });
+
+ const offCanvas = {
+ extendedInfoFields: [
+ "createdDateTime",
+ "displayName",
+ "lastModifiedDateTime",
+ "PolicyTypeName",
+ ],
+ actions: actions,
+ };
+
+ const simpleColumns = [
+ ...reportDB.cacheColumns,
+ "displayName",
+ "PolicyTypeName",
+ "PolicyAssignment",
+ "PolicyExclude",
+ "description",
+ "lastModifiedDateTime",
+ ];
+
+ return (
+ <>
+
+ {page} ;
+export default Page;
diff --git a/src/pages/endpoint/MEM/list-policies/index.js b/src/pages/endpoint/MEM/list-policies/index.js
deleted file mode 100644
index b20f3733ad22..000000000000
--- a/src/pages/endpoint/MEM/list-policies/index.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
-import { PermissionButton } from '../../../../utils/permissions.js'
-import { CippPolicyDeployDrawer } from '../../../../components/CippComponents/CippPolicyDeployDrawer.jsx'
-import { useSettings } from '../../../../hooks/use-settings.js'
-import { useCippIntunePolicyActions } from '../../../../components/CippComponents/CippIntunePolicyActions.jsx'
-import { useCippReportDB } from '../../../../components/CippComponents/CippReportDBControls'
-import { CippIntunePolicyDetails } from '../../../../components/CippComponents/CippIntunePolicyDetails.jsx'
-import { Stack } from '@mui/system'
-
-const Page = () => {
- const pageTitle = 'Configuration Policies'
- const cardButtonPermissions = ['Endpoint.MEM.ReadWrite']
- const tenant = useSettings().currentTenant
-
- const reportDB = useCippReportDB({
- apiUrl: '/api/ListIntunePolicy',
- queryKey: 'ListIntunePolicy',
- cacheName: 'IntunePolicies',
- syncTitle: 'Sync Intune Policy Report',
- allowToggle: true,
- defaultCached: false,
- })
-
- const actions = useCippIntunePolicyActions(tenant, 'URLName', {
- templateData: {
- ID: 'id',
- URLName: 'URLName',
- },
- deleteUrlName: 'URLName',
- })
-
- const offCanvas = {
- extendedInfoFields: [
- 'createdDateTime',
- 'displayName',
- 'description',
- 'lastModifiedDateTime',
- 'PolicyTypeName',
- ],
- actions: actions,
- children: (row) =>
- {page}
-export default Page
diff --git a/src/pages/endpoint/MEM/list-policies/index.jsx b/src/pages/endpoint/MEM/list-policies/index.jsx
new file mode 100644
index 000000000000..35390d845b41
--- /dev/null
+++ b/src/pages/endpoint/MEM/list-policies/index.jsx
@@ -0,0 +1,84 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
+import { PermissionButton } from '../../../../utils/permissions'
+import { CippPolicyDeployDrawer } from '../../../../components/CippComponents/CippPolicyDeployDrawer.jsx'
+import { useSettings } from '../../../../hooks/use-settings.js'
+import { useCippIntunePolicyActions } from '../../../../components/CippComponents/CippIntunePolicyActions.jsx'
+import { useCippReportDB } from '../../../../components/CippComponents/CippReportDBControls'
+import { CippIntunePolicyDetails } from '../../../../components/CippComponents/CippIntunePolicyDetails.jsx'
+import { Stack } from '@mui/system'
+
+const Page = () => {
+ const pageTitle = 'Configuration Policies'
+ const cardButtonPermissions = ['Endpoint.MEM.ReadWrite']
+ const tenant = useSettings().currentTenant
+
+ const reportDB = useCippReportDB({
+ apiUrl: '/api/ListIntunePolicy',
+ queryKey: 'ListIntunePolicy',
+ cacheName: 'IntunePolicies',
+ syncTitle: 'Sync Intune Policy Report',
+ allowToggle: true,
+ defaultCached: false,
+ })
+
+ const actions = useCippIntunePolicyActions(tenant, 'URLName', {
+ templateData: {
+ ID: 'id',
+ URLName: 'URLName',
+ },
+ deleteUrlName: 'URLName',
+ })
+
+ const offCanvas = {
+ extendedInfoFields: [
+ 'createdDateTime',
+ 'displayName',
+ 'description',
+ 'lastModifiedDateTime',
+ 'PolicyTypeName',
+ ],
+ actions: actions,
+ children: (row) =>
+ {page}
+export default Page
diff --git a/src/pages/endpoint/MEM/list-scripts/index.jsx b/src/pages/endpoint/MEM/list-scripts/index.jsx
index 0a1d6ead381d..9521fbf3e1b7 100644
--- a/src/pages/endpoint/MEM/list-scripts/index.jsx
+++ b/src/pages/endpoint/MEM/list-scripts/index.jsx
@@ -1,12 +1,6 @@
import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippIcons } from '../../../../utils/icon-registry'
import { CippTablePage } from '../../../../components/CippComponents/CippTablePage'
-import {
- TrashIcon,
- PencilIcon,
- UserIcon,
- UserGroupIcon,
- GlobeAltIcon,
-} from '@heroicons/react/24/outline'
import { showToast } from '../../../../store/toasts'
import {
Alert,
@@ -24,7 +18,6 @@ import {
import { CippCodeBlock } from '../../../../components/CippComponents/CippCodeBlock'
import { useState, useEffect, useMemo } from 'react'
import { useDispatch } from 'react-redux'
-import { Close, Save, LaptopChromebook } from '@mui/icons-material'
import { useSettings } from '../../../../hooks/use-settings'
import { Stack } from '@mui/system'
import { useQuery, useQueryClient } from '@tanstack/react-query'
@@ -296,7 +289,7 @@ const Page = () => {
type: 'POST',
url: '/api/ExecAssignPolicy',
allowResubmit: true,
- icon:
@@ -154,7 +156,9 @@ const EditIntuneTemplate = () => {
-
{!originalPolicy ? (
@@ -167,9 +171,13 @@ const EditIntuneTemplate = () => {
) : definitionsLoading ? (
-
+
+
Resolving setting names and available values…
diff --git a/src/pages/endpoint/MEM/list-templates/index.js b/src/pages/endpoint/MEM/list-templates/index.js
deleted file mode 100644
index c1c81670d8b7..000000000000
--- a/src/pages/endpoint/MEM/list-templates/index.js
+++ /dev/null
@@ -1,275 +0,0 @@
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
-import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline'
-import { Edit, GitHub, LocalOffer, LocalOfferOutlined, CopyAll } from '@mui/icons-material'
-import CippJsonView from '../../../../components/CippFormPages/CippJSONView'
-import { ApiGetCall } from '../../../../api/ApiCall'
-import { CippPolicyImportDrawer } from '../../../../components/CippComponents/CippPolicyImportDrawer.jsx'
-import { PermissionButton } from '../../../../utils/permissions.js'
-import {
- Box,
- Chip,
- Link,
- Stack,
- Table,
- TableBody,
- TableCell,
- TableHead,
- TableRow,
- Tooltip,
- Typography,
-} from '@mui/material'
-import NextLink from 'next/link'
-
-const Page = () => {
- const pageTitle = 'Available Endpoint Manager Templates'
- const cardButtonPermissions = ['Endpoint.MEM.ReadWrite']
-
- const integrations = ApiGetCall({
- url: '/api/ListExtensionsConfig',
- queryKey: 'Integrations',
- refetchOnMount: false,
- refetchOnReconnect: false,
- })
- const actions = [
- {
- label: 'Edit Template',
- link: `/endpoint/MEM/list-templates/edit?id=[GUID]`,
- icon:
- {Array.isArray(row.usage) && row.usage.length > 0 && (
-
-
- Used in Standards Templates
-
-
-
-
- )}
-
- ),
- size: 'lg',
- }
-
- const simpleColumns = ['displayName', 'isSynced', 'package', 'description', 'Type', 'usage']
-
- const filterList = [
- {
- filterName: 'Synced Templates',
- value: [{ id: 'isSynced', value: 'Yes' }],
- type: 'column',
- },
- {
- filterName: 'Custom Templates',
- value: [{ id: 'isSynced', value: 'No' }],
- type: 'column',
- },
- ]
-
- return (
- <>
- {page}
-export default Page
diff --git a/src/pages/endpoint/MEM/list-templates/index.jsx b/src/pages/endpoint/MEM/list-templates/index.jsx
new file mode 100644
index 000000000000..584bc73d506b
--- /dev/null
+++ b/src/pages/endpoint/MEM/list-templates/index.jsx
@@ -0,0 +1,282 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippIcons } from '../../../../utils/icon-registry'
+import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
+import CippJsonView from '../../../../components/CippFormPages/CippJSONView'
+import { ApiGetCall } from '../../../../api/ApiCall'
+import { CippPolicyImportDrawer } from '../../../../components/CippComponents/CippPolicyImportDrawer.jsx'
+import { PermissionButton } from '../../../../utils/permissions'
+import {
+ Box,
+ Chip,
+ Link,
+ Stack,
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableRow,
+ Tooltip,
+ Typography,
+} from '@mui/material'
+import NextLink from 'next/link'
+
+const Page = () => {
+ const pageTitle = 'Available Endpoint Manager Templates'
+ const cardButtonPermissions = ['Endpoint.MEM.ReadWrite']
+
+ const integrations = ApiGetCall({
+ url: '/api/ListExtensionsConfig',
+ queryKey: 'Integrations',
+ refetchOnMount: false,
+ refetchOnReconnect: false,
+ })
+ const actions = [
+ {
+ label: 'Edit Template',
+ link: `/endpoint/MEM/list-templates/edit?id=[GUID]`,
+ pinned: true,
+ icon:
+ {Array.isArray(row.usage) && row.usage.length > 0 && (
+
+
+ Used in Standards Templates
+
+
+
+
+ )}
+
+ ),
+ size: 'lg',
+ }
+
+ const simpleColumns = ['displayName', 'isSynced', 'source', 'package', 'description', 'Type', 'usage']
+
+ const filterList = [
+ {
+ filterName: 'Synced Templates',
+ value: [{ id: 'isSynced', value: 'Yes' }],
+ type: 'column',
+ },
+ {
+ filterName: 'Custom Templates',
+ value: [{ id: 'isSynced', value: 'No' }],
+ type: 'column',
+ },
+ ]
+
+ return (
+ <>
+ {page}
+export default Page
diff --git a/src/pages/endpoint/MEM/reusable-settings-templates/add.jsx b/src/pages/endpoint/MEM/reusable-settings-templates/add.jsx
index 481499eb557d..0dcd711b3ac9 100644
--- a/src/pages/endpoint/MEM/reusable-settings-templates/add.jsx
+++ b/src/pages/endpoint/MEM/reusable-settings-templates/add.jsx
@@ -14,7 +14,7 @@ import { useFieldArray, useForm } from "react-hook-form";
import { useMemo } from "react";
import { useSettings } from "../../../../hooks/use-settings";
import CippFormPage from "../../../../components/CippFormPages/CippFormPage";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
const Page = () => {
@@ -305,8 +305,9 @@ const Page = () => {
Group Setting Collection (Policy)
-
-
-
+
Internal Message
@@ -421,7 +451,9 @@ export const CippWizardVacationConfirmation = (props) => {
{values.oooExternalMessage && (
-
+
External Message
@@ -436,10 +468,14 @@ export const CippWizardVacationConfirmation = (props) => {
values.oooAutoDeclineFutureRequests ||
values.oooDeclineEvents) && (
- {Object.entries(item)
- .filter(([key]) => key !== "language")
- .map(([key, value]) => (
-
-
- {key
- .replace(/([A-Z])/g, " $1")
- .replace(/^./, (str) => str.toUpperCase())}
-
- {value}
-
- ))}
-
-
- ),
- })),
- },
- }
- : {};
-
- // Simplified columns for the table
- const simpleColumns = [
- "Name",
- "ReleaseActionPreference",
- "Delete",
- "Preview",
- "BlockSender",
- "AllowSender",
- "QuarantineNotification",
- "IncludeMessagesFromBlockedSenderAddress",
- "WhenCreated",
- "WhenChanged",
- ];
-
- // Prepare data for CippInfoBar as a const to clean up the code
- const infoBarData = [
- {
- icon:
-
-
-
-
-
-
-
-
- }
- >
- Deploy Custom Policy
-
-
- }
- />
- {page} ;
-
-export default Page;
diff --git a/src/pages/email/spamfilter/list-quarantine-policies/index.jsx b/src/pages/email/spamfilter/list-quarantine-policies/index.jsx
new file mode 100644
index 000000000000..99aca52bedf5
--- /dev/null
+++ b/src/pages/email/spamfilter/list-quarantine-policies/index.jsx
@@ -0,0 +1,411 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import CippButtonCard from "../../../../components/CippCards/CippButtonCard";
+import { CippInfoBar } from "../../../../components/CippCards/CippInfoBar";
+import { CippApiDialog } from "../../../../components/CippComponents/CippApiDialog.jsx";
+import { Alert, Typography, Stack, Tooltip, IconButton, SvgIcon, Button } from "@mui/material";
+import { Grid } from "@mui/system";
+import Link from "next/link";
+import { useSettings } from "../../../../hooks/use-settings";
+import { useDialog } from "../../../../hooks/use-dialog";
+import { ApiGetCall } from "../../../../api/ApiCall";
+
+const Page = () => {
+ const pageTitle = "Quarantine Policies";
+ const { currentTenant } = useSettings();
+
+ const createDialog = useDialog();
+
+ // Use ApiGetCall directly as a hook
+ const GlobalQuarantinePolicy = ApiGetCall({
+ url: "/api/ListQuarantinePolicy",
+ data: { tenantFilter: currentTenant, type: "GlobalQuarantinePolicy" },
+ queryKey: `GlobalQuarantinePolicy-${currentTenant}`,
+ });
+
+ // Get the policy data regardless of array or object
+ const globalQuarantineData = Array.isArray(GlobalQuarantinePolicy.data)
+ ? GlobalQuarantinePolicy.data[0]
+ : GlobalQuarantinePolicy.data;
+
+ const hasGlobalQuarantinePolicyData = !!globalQuarantineData;
+
+ if (hasGlobalQuarantinePolicyData) {
+ globalQuarantineData.EndUserSpamNotificationFrequency =
+ globalQuarantineData?.EndUserSpamNotificationFrequency === "P1D"
+ ? "Daily"
+ : globalQuarantineData?.EndUserSpamNotificationFrequency === "P7D"
+ ? "Weekly"
+ : globalQuarantineData?.EndUserSpamNotificationFrequency === "PT4H"
+ ? "4 hours"
+ : globalQuarantineData?.EndUserSpamNotificationFrequency;
+ }
+
+ const multiLanguagePropertyItems = hasGlobalQuarantinePolicyData
+ ? Array.isArray(globalQuarantineData?.MultiLanguageSetting) &&
+ globalQuarantineData.MultiLanguageSetting.length > 0
+ ? globalQuarantineData.MultiLanguageSetting.map((language, idx) => ({
+ language:
+ language == "Default" ? "English_USA" : language == "English" ? "English_GB" : language,
+ senderDisplayName:
+ globalQuarantineData.MultiLanguageSenderName[idx] &&
+ globalQuarantineData.MultiLanguageSenderName[idx].trim() !== ""
+ ? globalQuarantineData.MultiLanguageSenderName[idx]
+ : "None",
+ subject:
+ globalQuarantineData.EsnCustomSubject[idx] &&
+ globalQuarantineData.EsnCustomSubject[idx].trim() !== ""
+ ? globalQuarantineData.EsnCustomSubject[idx]
+ : "None",
+ disclaimer:
+ globalQuarantineData.MultiLanguageCustomDisclaimer[idx] &&
+ globalQuarantineData.MultiLanguageCustomDisclaimer[idx].trim() !== ""
+ ? globalQuarantineData.MultiLanguageCustomDisclaimer[idx]
+ : "None",
+ }))
+ : [
+ {
+ language: "None",
+ senderDisplayName: "None",
+ subject: "None",
+ disclaimer: "None",
+ },
+ ]
+ : [];
+
+ const buttonCardActions = [
+ <>
+ }>
+ Edit Settings
+
+
+
+ {
+ GlobalQuarantinePolicy.refetch();
+ }}
+ >
+
+
+
+
+
+ ,
+ ];
+
+ // Actions to perform (Edit,Delete Policy)
+ const actions = [
+ {
+ label: "Edit Policy",
+ type: "POST",
+ url: "/api/EditQuarantinePolicy?type=QuarantinePolicy",
+ setDefaultValues: true,
+ fields: [
+ {
+ type: "textField",
+ name: "Name",
+ label: "Policy Name",
+ disabled: true,
+ },
+ {
+ type: "autoComplete",
+ name: "ReleaseActionPreference",
+ label: "Select release action preference",
+ multiple: false,
+ creatable: false,
+ options: [
+ { label: "Release", value: "Release" },
+ { label: "Request Release", value: "RequestRelease" },
+ ],
+ },
+ {
+ type: "switch",
+ name: "Delete",
+ label: "Delete",
+ },
+ {
+ type: "switch",
+ name: "Preview",
+ label: "Preview",
+ },
+ {
+ type: "switch",
+ name: "BlockSender",
+ label: "Block Sender",
+ },
+ {
+ type: "switch",
+ name: "AllowSender",
+ label: "Allow Sender",
+ },
+ {
+ type: "switch",
+ name: "QuarantineNotification",
+ label: "Quarantine Notification",
+ },
+ {
+ type: "switch",
+ name: "IncludeMessagesFromBlockedSenderAddress",
+ label: "Include Messages From Blocked Sender Address",
+ },
+ ],
+ data: { Identity: "Guid", Action: "!Edit" },
+ confirmText: "Update Quarantine Policy '[Name]'? Policy Name cannot be changed.",
+ multiPost: false,
+ icon: Are you sure you want to delete this policy?
+
+ Note: This will delete the Quarantine policy, even if it is currently
+ in use.
+
+ Removing the Admin and User Access it applies to emails. +
+
+ Confirm the Quarantine is not applied in any of the following policies:
+
+
+ ),
+ condition: (row) => row.Guid != "00000000-0000-0000-0000-000000000000",
+ },
+ ];
+
+ // Off-canvas structure: displays extended details and includes actions (Enable/Disable Rule)
+ const offCanvas = {
+ extendedInfoFields: [
+ "Id", // Policy Name/Id
+ "Name", // Policy Name
+ "EndUserQuarantinePermissions",
+ "Guid",
+ "Builtin",
+ "WhenCreated", // Creation Date
+ "WhenChanged", // Last Modified Date
+ ],
+ actions: actions,
+ };
+
+ const filterList = [
+ {
+ filterName: "Custom Policies",
+ value: [{ id: "Builtin", value: "No" }],
+ type: "column",
+ },
+ {
+ filterName: "Built-in Policies",
+ value: [{ id: "Builtin", value: "Yes" }],
+ type: "column",
+ },
+ ];
+
+ const customLanguageOffcanvas =
+ multiLanguagePropertyItems && multiLanguagePropertyItems.length > 0
+ ? {
+ offcanvas: {
+ title: "Custom Language Settings",
+ propertyItems: multiLanguagePropertyItems.map((item, idx) => ({
+ label: "",
+ value: (
+
+
+ }
+ cardSx={{ mb: 2 }}
+ >
+
-
+
Calendar Options
-
+
{values.oooCreateOOFEvent && (
- )
+ );
}
diff --git a/src/components/CippWizard/OnboardingWizardPage.jsx b/src/components/CippWizard/OnboardingWizardPage.jsx
index 30600d0a0058..e0a177514966 100644
--- a/src/components/CippWizard/OnboardingWizardPage.jsx
+++ b/src/components/CippWizard/OnboardingWizardPage.jsx
@@ -1,4 +1,5 @@
import { CippWizardConfirmation } from './CippWizardConfirmation.jsx'
+import { CippIcons } from '../../utils/icon-registry'
import { CippDeploymentStep } from './CIPPDeploymentStep.jsx'
import CippWizardPage from './CippWizardPage.jsx'
import { CippWizardOptionsList } from './CippWizardOptionsList.jsx'
@@ -12,7 +13,7 @@ import { CippDirectTenantDeploy } from './CippDirectTenantDeploy.jsx'
import { CippGDAPTenantSetup } from './CippGDAPTenantSetup.jsx'
import { CippIndirectResellerLink } from './CippIndirectResellerLink.jsx'
import { CippGDAPTenantOnboarding } from './CippGDAPTenantOnboarding.jsx'
-import { BuildingOfficeIcon, CloudIcon, CpuChipIcon } from '@heroicons/react/24/outline'
+import { CippCertificateAuthStep } from './CippCertificateAuthStep.jsx'
import { useRouter } from 'next/router'
const OnboardingWizardPage = ({ mode, samAppPresent, completionButton }) => {
@@ -24,42 +25,54 @@ const OnboardingWizardPage = ({ mode, samAppPresent, completionButton }) => {
: selectedOptionQuery
const tenantTypeQuery = router.query?.tenantType
- const deepLinkedTenantType = Array.isArray(tenantTypeQuery) ? tenantTypeQuery[0] : tenantTypeQuery
+ const deepLinkedTenantType = Array.isArray(tenantTypeQuery)
+ ? tenantTypeQuery[0]
+ : tenantTypeQuery
const setupOptions = [
{
description:
"Choose this option if this is your first setup, or if you'd like to redo the previous setup.",
- icon:
-
- );
- }
- if (error) {
- return (
-
-
-
-
- );
- }
- if (active) {
- return (
-
-
- );
- }
- if (completed) {
- return (
-
-
-
-
- );
- }
-
- return (
- (theme.palette.mode === "dark" ? "neutral.700" : "neutral.300"),
- borderRadius: "50%",
- borderStyle: "solid",
- borderWidth: 2,
- height: 36,
- width: 36,
- }}
- />
- );
-};
-
-export const WizardSteps = (props) => {
- const { activeStep = 1, orientation = "vertical", steps = [] } = props;
- const isMobile = useIsMobileLayout();
-
- // Only the horizontal stepper is wizard navigation. The vertical one is a status list —
- // GDAP onboarding feeds it server-side steps where each step's message and pass/fail
- // state IS the content, so collapsing it to a progress bar would delete that.
- if (isMobile && orientation === "horizontal") {
- return
+
+ );
+ }
+ if (error) {
+ return (
+
+
+
+
+ );
+ }
+ if (active) {
+ return (
+
+
+ );
+ }
+ if (completed) {
+ return (
+
+
+
+
+ );
+ }
+
+ return (
+ (theme.palette.mode === "dark" ? "neutral.700" : "neutral.300"),
+ borderRadius: "50%",
+ borderStyle: "solid",
+ borderWidth: 2,
+ height: 36,
+ width: 36,
+ }}
+ />
+ );
+};
+
+export const WizardSteps = (props) => {
+ const { activeStep = 1, orientation = "vertical", steps = [] } = props;
+ const isMobile = useIsMobileLayout();
+
+ // Only the horizontal stepper is wizard navigation. The vertical one is a status list —
+ // GDAP onboarding feeds it server-side steps where each step's message and pass/fail
+ // state IS the content, so collapsing it to a progress bar would delete that.
+ if (isMobile && orientation === "horizontal") {
+ return
- {/* EXECUTIVE SUMMARY - MODULAR COMPOSITION (FROST) */}
- {sectionConfig.executiveSummary && (
-
-
-
- This security assessment for {tenantName || 'your organization'} provides
- a clear picture of your organization's cybersecurity posture and readiness against
- modern threats. We've evaluated your current security measures against industry best
- practices to identify strengths and opportunities for improvement.
-
-
-
- Our assessment follows globally recognized security standards to ensure your
- organization meets regulatory requirements and industry benchmarks. This approach
- helps protect your business assets, maintain customer trust, and reduce operational
- risks from cyber threats.
-
-
-
-
-
-
- )}
-
- {/* STATISTIC PAGE 1 - CHAPTER SPLITTER */}
- {sectionConfig.infographics && (
-
- of organizations experienced{'\n'}
- more than one cyberattack
- {'\n'}
- in the past year
-
- }
- footerText={
- <>
- Proactive security prevents{'\n'}
- repeated attacks
-
- }
- />
- )}
-
- {/* SECURITY CONTROLS - Only show if standards data is available and enabled and drift compliance is disabled */}
- {sectionConfig.securityStandards &&
- !sectionConfig.driftCompliance &&
- (() => {
- return securityControls && securityControls.length > 0
- })() && (
-
-
-
- Your security standards have been carefully evaluated against industry best
- practices to protect your business from cyber threats while ensuring smooth daily
- operations. These standards help maintain business continuity, protect sensitive
- data, and meet regulatory requirements that are essential for your industry.
-
-
-
-
- (
- {control.status}
- ),
- },
- ]}
- rows={securityControls.map((control) => ({
- ...control,
- name:
- control.name.length > 100
- ? control.name.substring(0, 100) + '...'
- : control.name,
- tags: control.tags.length > 0 ? control.tags : 'No tags',
- }))}
- />
-
-
-
-
-
- )}
-
- {/* DRIFT COMPLIANCE - Only show if drift compliance is enabled and security standards is disabled */}
- {sectionConfig.driftCompliance &&
- !sectionConfig.securityStandards &&
- driftComplianceInfo &&
- (driftComplianceInfo.currentDeviationsCount > 0 ||
- driftComplianceInfo.acceptedDeviationsCount > 0 ||
- driftComplianceInfo.deniedDeviationsCount > 0 ||
- driftComplianceInfo.customerSpecificDeviationsCount > 0 ||
- driftComplianceInfo.appliedStandards.length > 0) && (
- <>
-
-
-
- Your drift compliance assessment shows how your current security policies compare
- to your organization's approved standards. This analysis helps identify where
- configurations have drifted from intended baselines and provides insights into
- policy compliance across your Microsoft 365 environment.
-
-
-
-
- ({
- ...entry,
- // Compliance categories keep the semantic green-to-red scale rather than the
- // brand series: red has to mean denied whatever colours the MSP picked.
- colour: REPORT_SERIES_SEMANTIC[index],
- }))}
- />
-
-
-
-
-
-
-
-
-
- {/* Deviations Detail Page */}
- {(driftComplianceInfo.currentDeviations.length > 0 ||
- driftComplianceInfo.acceptedDeviations.length > 0 ||
- driftComplianceInfo.deniedDeviations.length > 0 ||
- driftComplianceInfo.customerSpecificDeviations.length > 0) && (
-
-
-
- The following table shows all identified policy deviations, their current
- status, and executive descriptions of what each deviation means for your
- organization's security posture and compliance requirements.
-
-
-
-
- (
- {row.status}
- ),
- },
- ]}
- rows={deviationRows}
- />
-
-
- )}
-
- {/* Applied Standards Page */}
- {driftComplianceInfo.appliedStandards.length > 0 && (
-
-
-
- These are the security standards that have been applied to your Microsoft 365
- environment. Each standard represents a specific security control or policy
- designed to protect your organization's data and systems.
-
-
-
- {appliedStandardsByCategory.map(([category, standards]) => (
-
- ({
- label: `${standard.name}:`,
- text: standard.executiveDescription,
- }))}
- />
-
- ))}
-
-
-
- Your organization has {driftComplianceInfo.appliedStandards.length} security
- standards implemented with {driftComplianceInfo.alignedCount} policies fully
- aligned,{' '}
- {driftComplianceInfo.acceptedDeviationsCount +
- driftComplianceInfo.customerSpecificDeviationsCount}{' '}
- approved deviations, and {driftComplianceInfo.currentDeviationsCount} deviations
- requiring attention.
-
-
-
- )}
-
- )}
-
- {/* STATISTIC PAGE 2 - CHAPTER SPLITTER - Only show if secure score data is available and enabled */}
- {sectionConfig.infographics &&
- sectionConfig.secureScore &&
- secureScoreData &&
- secureScoreData?.isSuccess &&
- secureScoreData?.translatedData && (
-
- of successful cyber attacks{'\n'}
- could have been prevented with{'\n'}
- proactive security measures
-
- }
- footerText={
- <>
- Your security resilience is{'\n'}
- our primary mission
-
- }
- />
- )}
-
- {/* MICROSOFT SECURE SCORE - DEDICATED PAGE - Only show if secure score data is available and enabled */}
- {sectionConfig.secureScore &&
- secureScoreData &&
- secureScoreData?.isSuccess &&
- secureScoreData?.translatedData && (
-
-
-
- Microsoft Secure Score measures how well your organization is protected against
- cyber threats. This score reflects the effectiveness of your current security
- measures and helps identify areas where additional protection could strengthen your
- business resilience.
-
-
-
-
-
-
-
-
-
-
- Your current score of {secureScoreData?.translatedData?.currentScore || 'N/A'}{' '}
- represents {secureScoreData?.translatedData?.percentageCurrent || 'N/A'}% of the
- maximum protection level available. This indicates how well your organization is
- currently defended against common cyber threats and data breaches.
-
-
-
- • Business growth and new employees may temporarily lower scores until security
- measures are applied{'\n'}• Changes in software licenses can affect available security
- features{'\n'}• New security threats require updated protections, which may impact
- scores{'\n'}• Regular security improvements help maintain and increase your protection
- level
-
-
- )}
-
- {/* LICENSING PAGE - Only show if license data is available */}
- {sectionConfig.licenseManagement &&
- licensingData &&
- Array.isArray(licensingData) &&
- licensingData.length > 0 && (
- <>
- {/* STATISTIC PAGE 3 - CHAPTER SPLITTER */}
- {sectionConfig.infographics && (
-
- a business falls victim to{'\n'}
- ransomware attacks
-
- }
- footerText={
- <>
- Proactive defense beats{'\n'}
- reactive recovery
-
- }
- />
- )}
-
-
-
- Smart license management helps control costs while ensuring your team has the
- tools they need to be productive. This analysis shows how your current licenses
- are being used and identifies opportunities to optimize spending without
- compromising business operations.
-
-
-
-
- ({
- name: license.License || license.license || 'N/A',
- used: license.CountUsed || license.countUsed || '0',
- available: license.CountAvailable || license.countAvailable || '0',
- total: license.TotalLicenses || license.totalLicenses || '0',
- }))}
- />
-
-
-
-
-
-
- )}
-
- {/* DEVICES PAGE - Only show if device data is available */}
- {sectionConfig.deviceManagement &&
- deviceData &&
- Array.isArray(deviceData) &&
- deviceData.length > 0 && (
- <>
- {/* STATISTIC PAGE 4 - CHAPTER SPLITTER */}
- {sectionConfig.infographics && (
-
- average cost of a{'\n'}
- data breach in 2024
-
- }
- footerText={
- <>
- Investment in security
- {'\n'}
- saves millions in recovery
-
- }
- />
- )}
-
-
-
- Managing employee devices is essential for protecting your business data and
- maintaining productivity. This analysis shows which devices meet your security
- standards and identifies any that may need attention to prevent data breaches or
- operational disruptions.
-
-
-
-
-
-
-
- (
-
- {row.compliance}
-
- ),
- },
- { header: 'Last Sync', key: 'lastSync', width: 2, bold: true },
- ]}
- rows={deviceData.map((device) => ({
- name: device.deviceName || 'N/A',
- os: device.operatingSystem || 'N/A',
- compliance: device.complianceState || device.ComplianceState || 'Unknown',
- compliant: isCompliant(device),
- lastSync: device.lastSyncDateTime
- ? new Date(device.lastSyncDateTime).toLocaleDateString()
- : 'N/A',
- }))}
- />
-
-
-
- device.operatingSystem === 'Windows')
- .length,
- label: 'Windows Devices',
- },
- {
- value: deviceData.filter((device) => device.operatingSystem === 'iOS').length,
- label: 'iOS Devices',
- },
- {
- value: deviceData.filter((device) => device.operatingSystem === 'Android')
- .length,
- label: 'Android Devices',
- },
- {
- // Cloud PCs never report BitLocker but are platform-encrypted by Azure.
- value: deviceData.filter(
- (device) => device.isEncrypted === true || isCloudPcDevice(device),
- ).length,
- label: 'Encrypted',
- },
- ]}
- />
-
-
-
- Keep devices updated and secure to protect business data. Regularly check that all
- employee devices meet security standards and address any issues promptly. Consider
- automated policies to maintain consistent security across all devices and conduct
- regular reviews to identify potential risks.
-
-
-
- )}
-
- {/* CONDITIONAL ACCESS POLICIES PAGE - Only show if data is available */}
- {sectionConfig.conditionalAccess &&
- conditionalAccessData &&
- Array.isArray(conditionalAccessData) &&
- conditionalAccessData.length > 0 && (
- <>
- {/* STATISTIC PAGE 5 - CHAPTER SPLITTER */}
- {sectionConfig.infographics && (
-
- average time to identify and{'\n'}
- contain a data breach
-
- }
- footerText={
- <>
- Early detection minimizes{'\n'}
- business impact
-
- }
- />
- )}
-
-
-
- Access control policies help protect your business by ensuring only the right
- people can access sensitive information under appropriate circumstances. These
- smart security measures automatically evaluate each access request and apply
- additional verification when needed, balancing security with employee
- productivity.
-
-
-
-
-
- These policies work like intelligent security guards, making decisions based on
- who is trying to access what, from where, and when. For example, accessing email
- from the office might be seamless, but accessing it from an unusual location might
- require additional verification. This approach protects your data while minimizing
- disruption to daily work.
-
-
-
-
- (
- {row.state}
- ),
- },
- { header: 'Applications', key: 'applications', width: 2, bold: true },
- { header: 'Controls', key: 'controls', width: 3, bold: true },
- ]}
- rows={conditionalAccessData.map((policy) => ({
- name: policy.displayName || 'N/A',
- state: CA_STATE_LABELS[policy.state] ?? policy.state ?? 'Unknown',
- tone: CA_STATE_TONES[policy.state] ?? null,
- applications: policy.includeApplications || 'All',
- controls: caControlsText(policy),
- }))}
- />
-
-
-
-
- policy.builtInControls?.includes('mfa')
- ).length,
- label: 'MFA Policies',
- },
- ]}
- />
-
-
-
-
-
-
- {caReportOnlyCount > 0
- ? `Consider activating ${caReportOnlyCount} policies currently in testing mode after ensuring they don't disrupt business operations. `
- : 'Your access controls are properly configured. '}
- Regularly review how these policies affect employee productivity and adjust as
- needed. Consider additional location-based protections for enhanced security without
- impacting daily operations.
-
-
-
- )}
-
- {/* SHADOW AI SECTION - the Shadow AI report pages appended to this document. It takes the
- theme from this document's context, so its pages carry the same branding as the rest. */}
- {sectionConfig.shadowAI && shadowAIData && (
-
- )
-}
-
-export const ExecutiveReportButton = (props) => {
- const { variant: buttonVariant, onClick: onClickProp, ...other } = props
- const settings = useSettings()
- const defaultBranding = useBrandingSettings()
-
- // Preview state
- const [previewOpen, setPreviewOpen] = useState(false)
- // Null until the operator picks one, so the branding setting for this report type keeps applying
- // as it changes. An explicit choice — including "Default" — wins from then on.
- const [presetOverride, setPresetOverride] = useState(null)
- const brandingPresetId = presetOverride ?? defaultBranding?.reportDefaults?.executive ?? ''
-
- // Named branding sets a report can be rendered against instead of the default branding.
- const brandingPresets = ApiGetCall({
- url: '/api/ListBrandingPresets',
- data: { includeImages: true },
- queryKey: 'ListBrandingPresets-withImages',
- waiting: previewOpen,
- })
-
- const presetOptions = useMemo(
- () => [
- // Imported rather than restated: this option used to read "Global branding settings" here
- // while the branding page called the same thing "Default".
- DEFAULT_BRANDING_OPTION,
- ...(Array.isArray(brandingPresets.data) ? brandingPresets.data : []).map((preset) => ({
- label: preset.name,
- value: preset.id,
- })),
- ],
- [brandingPresets.data]
- )
-
- const brandingSettings = useMemo(() => {
- if (!brandingPresetId) return defaultBranding
- const presets = Array.isArray(brandingPresets.data) ? brandingPresets.data : []
- // A preset deleted since it was picked falls back to the default branding rather than
- // rendering unbranded.
- return presets.find((preset) => preset.id === brandingPresetId) || defaultBranding
- }, [brandingPresetId, brandingPresets.data, defaultBranding])
-
- const variables = useReportVariables()
-
- const [sectionConfig, setSectionConfig] = useState({
- executiveSummary: true,
- securityStandards: true,
- driftCompliance: false,
- secureScore: true,
- licenseManagement: true,
- deviceManagement: true,
- conditionalAccess: true,
- infographics: true,
- shadowAI: false,
- })
-
- // Fetch organization data - only when preview is open
- const organization = ApiGetCall({
- url: '/api/ListGraphRequest',
- queryKey: `${settings.currentTenant}-ListGraphRequest-organization-report`,
- data: { tenantFilter: settings.currentTenant, Endpoint: 'organization' },
- waiting: previewOpen,
- })
-
- const organizationRecord = organization.data?.Results?.[0]
-
- // Fetch user counts - only when preview is open
- const dashboard = ApiGetCall({
- url: '/api/ListuserCounts',
- data: { tenantFilter: settings.currentTenant },
- queryKey: `${settings.currentTenant}-ListuserCounts-report`,
- waiting: previewOpen,
- })
-
- // Only fetch additional data when preview dialog is opened
- const secureScore = useSecureScore({ waiting: previewOpen })
-
- // Get real license data - only when preview is open
- const licenseData = ApiGetCall({
- url: '/api/ListLicenses',
- data: {
- tenantFilter: settings.currentTenant,
- },
- queryKey: `licenses-report-${settings.currentTenant}`,
- waiting: previewOpen,
- })
-
- // Get real device data - only when preview is open
- const deviceData = ApiGetCall({
- url: '/api/ListGraphRequest',
- data: {
- tenantFilter: settings.currentTenant,
- Endpoint: 'deviceManagement/managedDevices',
- },
- queryKey: `ListGraphRequest-devices-report-${settings.currentTenant}`,
- waiting: previewOpen,
- })
-
- // Get real conditional access policy data - only when preview is open
- const conditionalAccessData = ApiGetCall({
- url: '/api/ListConditionalAccessPolicies',
- data: {
- tenantFilter: settings.currentTenant,
- },
- queryKey: `ca-policies-report-${settings.currentTenant}`,
- waiting: previewOpen,
- })
-
- // Get real standards data - only when preview is open
- const standardsCompareData = ApiGetCall({
- url: '/api/ListStandardsCompare',
- data: {
- tenantFilter: settings.currentTenant,
- },
- queryKey: `standards-compare-report-${settings.currentTenant}`,
- waiting: previewOpen,
- })
-
- // Get drift compliance data - only when preview is open
- const driftComplianceData = ApiGetCall({
- url: '/api/listTenantDrift',
- data: {
- TenantFilter: settings.currentTenant,
- },
- queryKey: `drift-compliance-report-${settings.currentTenant}`,
- waiting: previewOpen,
- })
-
- // Load all standard templates to resolve template display names
- const standardTemplatesData = ApiGetCall({
- url: `/api/listStandardTemplates`,
- data: {}, // No templateId filter - get all templates
- queryKey: `standard-templates-report-all`,
- waiting: previewOpen,
- })
-
- // Shadow AI data for the optional Shadow AI section - only fetched when that section is
- // enabled. Requires a single tenant; the CIPPDb cache must have been synced for data to show.
- const shadowAIEnabled = sectionConfig.shadowAI && settings.currentTenant !== 'AllTenants'
- const shadowAIData = ApiGetCall({
- url: '/api/ListShadowAI',
- data: { tenantFilter: settings.currentTenant },
- queryKey: `ListShadowAI-${settings.currentTenant}`,
- waiting: previewOpen && shadowAIEnabled,
- })
-
- // Check if all data is loaded (either successful or failed) - only relevant when preview is open
- const isDataLoading =
- previewOpen &&
- (organization.isFetching ||
- dashboard.isFetching ||
- secureScore.isFetching ||
- licenseData.isFetching ||
- deviceData.isFetching ||
- conditionalAccessData.isFetching ||
- standardsCompareData.isFetching ||
- driftComplianceData.isFetching ||
- standardTemplatesData.isFetching ||
- (shadowAIEnabled && shadowAIData.isFetching))
-
- const hasAllDataFinished =
- !previewOpen ||
- ((organization.isSuccess || organization.isError) &&
- (dashboard.isSuccess || dashboard.isError) &&
- (secureScore.isSuccess || secureScore.isError) &&
- (licenseData.isSuccess || licenseData.isError) &&
- (deviceData.isSuccess || deviceData.isError) &&
- (conditionalAccessData.isSuccess || conditionalAccessData.isError) &&
- (standardsCompareData.isSuccess || standardsCompareData.isError) &&
- (driftComplianceData.isSuccess || driftComplianceData.isError) &&
- (standardTemplatesData.isSuccess || standardTemplatesData.isError) &&
- (!shadowAIEnabled || shadowAIData.isSuccess || shadowAIData.isError))
-
- // Button is always available now since we don't need to wait for data
- const shouldShowButton = true
-
- const tenantName = organizationRecord?.displayName || 'Tenant'
- const tenantId = organizationRecord?.id
- const userStats = {
- licensedUsers: dashboard.data?.LicUsers || 0,
- unlicensedUsers:
- dashboard.data?.Users && dashboard.data?.LicUsers
- ? dashboard.data?.Users - dashboard.data?.LicUsers
- : 0,
- guests: dashboard.data?.Guests || 0,
- globalAdmins: dashboard.data?.Gas || 0,
- }
-
- const fileName = `Executive_Report_${tenantName?.replace(/[^a-zA-Z0-9]/g, '_') || 'Tenant'}_${
- new Date().toISOString().split('T')[0]
- }.pdf`
-
- // Memoize the document to prevent unnecessary re-renders - only when dialog is open
- const reportDocument = useMemo(() => {
- // Don't create document if dialog is closed
- if (!previewOpen) {
- return null
- }
-
- // Only create document if preview is open and data is ready
- if (!hasAllDataFinished) {
- return (
-
-
-
- Loading report data...
-
-
-
- )
- }
-
- try {
- return (
-
-
-
- Error creating document: {error.message}
-
-
-
- )
- }
- }, [
- previewOpen, // Most important - prevents creation when dialog is closed
- hasAllDataFinished,
- tenantName,
- tenantId,
- userStats,
- organizationRecord,
- dashboard.data,
- brandingSettings,
- // Resolved asynchronously, so without this the document keeps the copy built before the
- // values landed and the footer shows %cippurl% instead of the URL.
- variables,
- secureScore?.isSuccess,
- licenseData?.isSuccess,
- deviceData?.isSuccess,
- conditionalAccessData?.isSuccess,
- standardsCompareData?.isSuccess,
- driftComplianceData?.isSuccess,
- shadowAIData?.isSuccess,
- JSON.stringify(sectionConfig), // Stringify to prevent reference issues
- ])
-
- // Handle section toggle with mutual exclusion logic
- const handleSectionToggle = (sectionKey) => {
- setSectionConfig((prev) => {
- // Count currently enabled sections
- const enabledSections = Object.values(prev).filter(Boolean).length
-
- // If trying to disable the last remaining section, prevent it
- if (prev[sectionKey] && enabledSections === 1) {
- return prev // Don't change state
- }
-
- // Mutual exclusion logic for Security Standards and Drift Compliance
- if (sectionKey === 'securityStandards' && !prev[sectionKey]) {
- // Enabling Security Standards, disable Drift Compliance
- return {
- ...prev,
- securityStandards: true,
- driftCompliance: false,
- }
- }
-
- if (sectionKey === 'driftCompliance' && !prev[sectionKey]) {
- // Enabling Drift Compliance, disable Security Standards
- return {
- ...prev,
- driftCompliance: true,
- securityStandards: false,
- }
- }
-
- return {
- ...prev,
- [sectionKey]: !prev[sectionKey],
- }
- })
- }
-
- // Close handler with cleanup
- const handleClose = () => {
- setPreviewOpen(false)
- }
-
- // Below md the 320px config rail would leave the preview about 70px wide, so it moves into
- // a drawer and the preview takes the whole dialog.
- const [sectionsOpen, setSectionsOpen] = useState(false)
-
- // Section configuration options
- const sectionOptions = [
- {
- key: 'executiveSummary',
- label: 'Executive Summary',
- description: 'High-level overview and statistics',
- },
- {
- key: 'securityStandards',
- label: 'Security Standards',
- description: 'Compliance assessment and standards evaluation',
- },
- {
- key: 'driftCompliance',
- label: 'Drift Compliance',
- description: 'Policy drift analysis and deviation management',
- },
- {
- key: 'secureScore',
- label: 'Microsoft Secure Score',
- description: 'Security posture measurement and trends',
- },
- {
- key: 'licenseManagement',
- label: 'License Management',
- description: 'License allocation and optimization',
- },
- {
- key: 'deviceManagement',
- label: 'Device Management',
- description: 'Device compliance and insights',
- },
- {
- key: 'conditionalAccess',
- label: 'Conditional Access',
- description: 'Access control policies and analysis',
- },
- {
- key: 'infographics',
- label: 'Infographic Pages',
- description: 'Statistical pages with visual elements between sections',
- },
- {
- key: 'shadowAI',
- label: 'Shadow AI Report',
- description: 'AI usage discovery and risk pages from the Shadow AI report',
- },
- ]
-
- // One definition, two homes: the desktop rail and the mobile drawer. The drawer's own
- // header already says "Report Sections", so it takes the panel without the heading.
- const sectionPanel = ({ showHeading = true } = {}) => (
-
- {showHeading && (
-
-
- )}
-
- Configure which sections to include in your executive report. Changes are reflected in
- real-time.
-
-
-
- option.value === brandingPresetId) ?? presetOptions[0]
- }
- onChange={(option) => setPresetOverride(option?.value ?? '')}
- />
-
- Presets are managed in Settings → Branding
-
-
-
-
- {sectionOptions.map((option) => (
- handleSectionToggle(option.key)}
- sx={{
- p: 1.5,
- border: '1px solid',
- borderColor: sectionConfig[option.key] ? 'primary.main' : 'divider',
- bgcolor: sectionConfig[option.key] ? 'primary.50' : 'background.paper',
- cursor: 'pointer',
- transition: 'all 0.2s ease-in-out',
- display: 'flex',
- alignItems: 'center',
- '&:hover': {
- borderColor: 'primary.main',
- bgcolor: sectionConfig[option.key] ? 'primary.100' : 'primary.25',
- },
- }}
- >
- {
- event.stopPropagation()
- handleSectionToggle(option.key)
- }}
- onClick={(event) => event.stopPropagation()}
- color="primary"
- size="small"
- disabled={
- sectionConfig[option.key] &&
- Object.values(sectionConfig).filter(Boolean).length === 1
- }
- />
-
-
- {option.label}
-
-
- {option.description}
-
-
-
- ))}
-
-
-
-
- 💡 Pro Tip
-
-
- Enable only the sections relevant to your audience to create focused, impactful reports.
- At least one section must be enabled.
-
-
-
- )
-
- return (
- <>
- {/* Main Executive Summary Button - Always available */}
- {buttonVariant === 'menuItem' ? (
-
- ) : (
-
-
- }
- onClick={() => setPreviewOpen(true)}
- sx={{
- minWidth: 0,
- width: '100%',
- pl: 1,
- pr: 1,
- overflow: 'hidden',
- whiteSpace: 'nowrap',
- textOverflow: 'ellipsis',
- justifyContent: 'center',
- '& .MuiButton-startIcon': {
- marginLeft: 0,
- marginRight: 0.75,
- flexShrink: 0,
- },
- fontWeight: 'bold',
- textTransform: 'none',
- borderRadius: 2,
- boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
- transition: 'all 0.2s ease-in-out',
- }}
- {...other}
- >
-
- Executive Summary
-
-
-
-
- )}
-
- {/* Combined Preview and Configuration Dialog */}
-
-
- )
-}
diff --git a/src/components/ExecutiveReportButton.jsx b/src/components/ExecutiveReportButton.jsx
new file mode 100644
index 000000000000..e4d5b6369cee
--- /dev/null
+++ b/src/components/ExecutiveReportButton.jsx
@@ -0,0 +1,2102 @@
+import { useState, useMemo } from 'react'
+import { CippIcons } from '../utils/icon-registry'
+import {
+ Button,
+ Tooltip,
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ DialogActions,
+ Box,
+ Typography,
+ Switch,
+ Paper,
+ Stack,
+ IconButton,
+ MenuItem,
+ ListItemIcon,
+ ListItemText,
+ TextField,
+} from '@mui/material'
+import { CippAutoComplete } from './CippComponents/CippAutocomplete'
+import { CippOffCanvas } from './CippComponents/CippOffCanvas'
+import { Document, Page, Text, View, Image } from '@react-pdf/renderer'
+import { CippPdfPreview } from './CippPdf/CippPdfPreview'
+import { useSettings } from '../hooks/use-settings'
+import { useSecureScore } from '../hooks/use-securescore'
+import { ApiGetCall } from '../api/ApiCall'
+import { ShadowAIReportPages } from './ShadowAIReportButton'
+import { DEFAULT_BRANDING_OPTION } from './ReportBuilder/reportSettings'
+import { useReportVariables } from './CippPdf/useReportVariables'
+import { useBrandingSettings } from './CippPdf/useBrandingSettings'
+import { isCloudPcDevice } from '../utils/is-cloud-pc-device'
+import {
+ Bold,
+ BulletList,
+ ContentPage,
+ DataTable,
+ DonutChart,
+ HeroPage,
+ InfoBox,
+ Paragraph,
+ ReportDocument,
+ REPORT_SERIES_SEMANTIC,
+ Section,
+ StatRow,
+ StatusText,
+ TrendChart,
+} from './CippPdf'
+
+// Conditional access policy states, as Graph spells them and as a reader should read them.
+const CA_STATE_LABELS = {
+ enabled: 'Enabled',
+ enabledForReportingButNotEnforced: 'Report Only',
+ disabled: 'Disabled',
+}
+const CA_STATE_TONES = {
+ enabled: 'pass',
+ enabledForReportingButNotEnforced: 'warn',
+ disabled: 'fail',
+}
+const CA_CONTROL_LABELS = { mfa: 'MFA', block: 'Block', compliantDevice: 'Compliant Device' }
+
+const caControlsText = (policy) => {
+ const controls = Object.entries(CA_CONTROL_LABELS)
+ .filter(([control]) => policy.builtInControls?.includes(control))
+ .map(([, label]) => label)
+ return controls.length > 0 ? controls.join(', ') : 'Custom'
+}
+
+// The generated standards catalogue, loaded once. Three separate `require` calls inside render
+// paths used to reload it per deviation row.
+let standardsCatalog = null
+try {
+ standardsCatalog = require('../data/standards.json')
+} catch (error) {
+ standardsCatalog = null
+}
+
+// PRODUCTION-GRADE PDF SYSTEM WITH CONDITIONAL RENDERING
+// Exported so the report can be rendered to a real PDF in tests. A report that only throws once
+// the renderer walks it is the failure mode a stubbed test cannot see.
+export const ExecutiveReportDocument = ({
+ tenantName,
+ userStats,
+ brandingSettings,
+ variables,
+ secureScoreData,
+ licensingData,
+ deviceData,
+ conditionalAccessData,
+ standardsCompareData,
+ driftComplianceData,
+ standardTemplatesData,
+ shadowAIData,
+ sectionConfig = {
+ executiveSummary: true,
+ securityStandards: true,
+ driftCompliance: false,
+ secureScore: true,
+ licenseManagement: true,
+ deviceManagement: true,
+ conditionalAccess: true,
+ infographics: true,
+ shadowAI: false,
+ },
+}) => {
+ const currentDate = new Date().toLocaleDateString('en-US', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ })
+
+ // Both arrive as an array on the happy path and as an error object or `undefined` when their
+ // endpoint failed. The page-level guards below check that, but these run unconditionally, so
+ // they have to check it too.
+ const caPolicies = Array.isArray(conditionalAccessData) ? conditionalAccessData : []
+ const devices = Array.isArray(deviceData) ? deviceData : []
+
+ const caEnabledCount = caPolicies.filter((policy) => policy.state === 'enabled').length
+ const caReportOnlyCount = caPolicies.filter(
+ (policy) => policy.state === 'enabledForReportingButNotEnforced'
+ ).length
+
+ // Secure score history, oldest first, in the shape the shared trend chart takes. The API returns
+ // newest first, which would draw the trend backwards.
+ const scoreTrendData = [...(secureScoreData?.secureScore?.data?.Results ?? [])]
+ .reverse()
+ .map((point) => ({
+ label: new Date(point.createdDateTime).toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ }),
+ value: point.currentScore,
+ }))
+
+ // PROCESS REAL STANDARDS DATA
+ const processStandardsData = (apiData, standardTemplates) => {
+ const standardsData = standardsCatalog
+
+ if (!apiData || !Array.isArray(apiData) || apiData.length === 0) {
+ return []
+ }
+
+ // Build a lookup map from template configurations
+ // Format: { "GUID": "Display Name" }
+ const templateDisplayNameMap = {}
+
+ if (standardTemplates && Array.isArray(standardTemplates)) {
+ standardTemplates.forEach((template) => {
+ if (template.standards) {
+ // Process IntuneTemplate arrays
+ if (Array.isArray(template.standards.IntuneTemplate)) {
+ template.standards.IntuneTemplate.forEach((templateItem) => {
+ if (templateItem?.TemplateList?.value && templateItem?.TemplateList?.label) {
+ templateDisplayNameMap[templateItem.TemplateList.value.toLowerCase()] =
+ templateItem.TemplateList.label
+ }
+ // Handle TemplateList-Tags expansion
+ const tagTemplates =
+ templateItem?.['TemplateList-Tags']?.addedFields?.templates ||
+ templateItem?.['TemplateList-Tags']?.rawData?.templates
+ if (tagTemplates && Array.isArray(tagTemplates)) {
+ tagTemplates.forEach((expandedTemplate) => {
+ if (
+ expandedTemplate?.GUID &&
+ (expandedTemplate?.displayName || expandedTemplate?.name)
+ ) {
+ templateDisplayNameMap[expandedTemplate.GUID.toLowerCase()] =
+ expandedTemplate.displayName || expandedTemplate.name
+ }
+ })
+ }
+ })
+ }
+ // Process ConditionalAccessTemplate arrays
+ if (Array.isArray(template.standards.ConditionalAccessTemplate)) {
+ template.standards.ConditionalAccessTemplate.forEach((templateItem) => {
+ if (templateItem?.TemplateList?.value && templateItem?.TemplateList?.label) {
+ templateDisplayNameMap[templateItem.TemplateList.value.toLowerCase()] =
+ templateItem.TemplateList.label
+ }
+ // Handle TemplateList-Tags expansion
+ const tagTemplates =
+ templateItem?.['TemplateList-Tags']?.addedFields?.templates ||
+ templateItem?.['TemplateList-Tags']?.rawData?.templates
+ if (tagTemplates && Array.isArray(tagTemplates)) {
+ tagTemplates.forEach((expandedTemplate) => {
+ if (
+ expandedTemplate?.GUID &&
+ (expandedTemplate?.displayName || expandedTemplate?.name)
+ ) {
+ templateDisplayNameMap[expandedTemplate.GUID.toLowerCase()] =
+ expandedTemplate.displayName || expandedTemplate.name
+ }
+ })
+ }
+ })
+ }
+ }
+ })
+ }
+
+ const processedStandards = []
+ const tenantData = apiData[0] // Get the first tenant's data
+
+ // Process each standard from the API response
+ Object.keys(tenantData).forEach((key) => {
+ if (key.startsWith('standards.') && key !== 'tenantFilter') {
+ const standardKey = key
+ const standardValue = tenantData[key]
+ const standardDef = standardsData?.find((std) => std.name === standardKey)
+
+ if (standardDef) {
+ // Determine compliance status using the same logic as applied-standards.js
+ let status = 'Review'
+ let isCompliant = false
+
+ // FIRST: Check if CurrentValue and ExpectedValue exist and match
+ if (
+ standardValue?.CurrentValue !== undefined &&
+ standardValue?.ExpectedValue !== undefined
+ ) {
+ const sortedCurrent =
+ typeof standardValue.CurrentValue === 'object' && standardValue.CurrentValue !== null
+ ? Object.keys(standardValue.CurrentValue)
+ .sort()
+ .reduce((obj, key) => {
+ obj[key] = standardValue.CurrentValue[key]
+ return obj
+ }, {})
+ : standardValue.CurrentValue
+ const sortedExpected =
+ typeof standardValue.ExpectedValue === 'object' &&
+ standardValue.ExpectedValue !== null
+ ? Object.keys(standardValue.ExpectedValue)
+ .sort()
+ .reduce((obj, key) => {
+ obj[key] = standardValue.ExpectedValue[key]
+ return obj
+ }, {})
+ : standardValue.ExpectedValue
+ isCompliant = JSON.stringify(sortedCurrent) === JSON.stringify(sortedExpected)
+ }
+ // SECOND: Check if Value is explicitly true
+ else if (standardValue?.Value === true) {
+ isCompliant = true
+ }
+
+ status = isCompliant ? 'Compliant' : 'Review'
+
+ // Get tags for display - fix the tags access
+ const tags =
+ standardDef.tag && Array.isArray(standardDef.tag) && standardDef.tag.length > 0
+ ? standardDef.tag.slice(0, 2).join(', ') // Show first 2 tags
+ : 'No tags'
+ processedStandards.push({
+ name: standardDef.label,
+ description:
+ standardDef.executiveText || standardDef.helpText || 'No description available',
+ status: status,
+ tags: tags,
+ })
+ } else {
+ // If no definition found, still add it with basic info
+ let status = 'Review'
+ let isCompliant = false
+
+ // FIRST: Check if CurrentValue and ExpectedValue exist and match
+ if (
+ standardValue?.CurrentValue !== undefined &&
+ standardValue?.ExpectedValue !== undefined
+ ) {
+ const sortedCurrent =
+ typeof standardValue.CurrentValue === 'object' && standardValue.CurrentValue !== null
+ ? Object.keys(standardValue.CurrentValue)
+ .sort()
+ .reduce((obj, key) => {
+ obj[key] = standardValue.CurrentValue[key]
+ return obj
+ }, {})
+ : standardValue.CurrentValue
+ const sortedExpected =
+ typeof standardValue.ExpectedValue === 'object' &&
+ standardValue.ExpectedValue !== null
+ ? Object.keys(standardValue.ExpectedValue)
+ .sort()
+ .reduce((obj, key) => {
+ obj[key] = standardValue.ExpectedValue[key]
+ return obj
+ }, {})
+ : standardValue.ExpectedValue
+ isCompliant = JSON.stringify(sortedCurrent) === JSON.stringify(sortedExpected)
+ }
+ // SECOND: Check if Value is explicitly true
+ else if (standardValue?.Value === true) {
+ isCompliant = true
+ }
+
+ status = isCompliant ? 'Compliant' : 'Review'
+
+ // Create a proper name from the key - handle template types specially
+ let displayName = ''
+
+ // Check if this is an IntuneTemplate or ConditionalAccessTemplate
+ const intuneTemplateMatch = standardKey.match(/^standards\.IntuneTemplate\.([0-9a-f-]+)/i)
+ const caTemplateMatch = standardKey.match(
+ /^standards\.ConditionalAccessTemplate\.([0-9a-f-]+)/i
+ )
+
+ if (intuneTemplateMatch) {
+ // IntuneTemplate - look up display name from template configurations
+ const guid = intuneTemplateMatch[1]
+ const lookupName = templateDisplayNameMap[guid.toLowerCase()]
+ displayName = lookupName || `Intune Template - ${guid.substring(0, 8)}`
+ } else if (caTemplateMatch) {
+ // ConditionalAccessTemplate - look up display name from template configurations
+ const guid = caTemplateMatch[1]
+ const lookupName = templateDisplayNameMap[guid.toLowerCase()]
+ displayName = lookupName || `CA Template - ${guid.substring(0, 8)}`
+ } else {
+ // Regular standard - use basic name formatting
+ displayName = standardKey
+ .replace('standards.', '')
+ .replace(/([A-Z])/g, ' $1') // Add space before capital letters
+ .replace(/^./, (str) => str.toUpperCase()) // Capitalize first letter
+ .trim()
+ }
+
+ processedStandards.push({
+ name: displayName,
+ description: 'Security standard implementation',
+ status: status,
+ tags: 'No tags',
+ })
+ }
+ }
+ })
+
+ return processedStandards
+ }
+
+ // PROCESS DRIFT COMPLIANCE DATA
+ const processDriftComplianceData = (driftData, standardsCompareData) => {
+ if (!driftData || !Array.isArray(driftData) || driftData.length === 0) {
+ return {
+ acceptedDeviationsCount: 0,
+ currentDeviationsCount: 0,
+ deniedDeviationsCount: 0,
+ customerSpecificDeviationsCount: 0,
+ alignedCount: 0,
+ acceptedDeviations: [],
+ currentDeviations: [],
+ deniedDeviations: [],
+ customerSpecificDeviations: [],
+ appliedStandards: [],
+ }
+ }
+
+ const standardsData = standardsCatalog
+
+ // Helper function to get pretty name from standards.json (same as manage-drift)
+ const getStandardPrettyName = (standardName) => {
+ if (!standardName) return 'Unknown Standard'
+ const standard = standardsData?.find((s) => s.name === standardName)
+ if (standard && standard.label) {
+ return standard.label
+ }
+ return null
+ }
+
+ // Helper function to process deviations with pretty names
+ const processDeviations = (deviations) => {
+ return (deviations || []).map((deviation) => ({
+ ...deviation,
+ prettyName:
+ deviation.standardDisplayName ||
+ getStandardPrettyName(deviation.standardName) ||
+ deviation.standardName ||
+ 'Unknown Standard',
+ }))
+ }
+
+ // Aggregate data across all standards for this tenant
+ const aggregatedData = driftData.reduce(
+ (acc, item) => {
+ acc.acceptedDeviationsCount += item.acceptedDeviationsCount || 0
+ acc.currentDeviationsCount += item.currentDeviationsCount || 0
+ acc.alignedCount += item.alignedCount || 0
+ acc.customerSpecificDeviationsCount += item.customerSpecificDeviationsCount || 0
+ acc.deniedDeviationsCount += item.deniedDeviationsCount || 0
+
+ // Collect deviations with pretty names
+ if (item.currentDeviations && Array.isArray(item.currentDeviations)) {
+ acc.currentDeviations.push(
+ ...processDeviations(item.currentDeviations.filter((dev) => dev !== null))
+ )
+ }
+ if (item.acceptedDeviations && Array.isArray(item.acceptedDeviations)) {
+ acc.acceptedDeviations.push(
+ ...processDeviations(item.acceptedDeviations.filter((dev) => dev !== null))
+ )
+ }
+ if (item.customerSpecificDeviations && Array.isArray(item.customerSpecificDeviations)) {
+ acc.customerSpecificDeviations.push(
+ ...processDeviations(item.customerSpecificDeviations.filter((dev) => dev !== null))
+ )
+ }
+ if (item.deniedDeviations && Array.isArray(item.deniedDeviations)) {
+ acc.deniedDeviations.push(
+ ...processDeviations(item.deniedDeviations.filter((dev) => dev !== null))
+ )
+ }
+
+ return acc
+ },
+ {
+ acceptedDeviationsCount: 0,
+ currentDeviationsCount: 0,
+ alignedCount: 0,
+ customerSpecificDeviationsCount: 0,
+ deniedDeviationsCount: 0,
+ currentDeviations: [],
+ acceptedDeviations: [],
+ customerSpecificDeviations: [],
+ deniedDeviations: [],
+ appliedStandards: [],
+ }
+ )
+
+ // Get complete list of applied standards from standards comparison data (like policies-deployed)
+ if (
+ standardsData &&
+ standardsCompareData &&
+ Array.isArray(standardsCompareData) &&
+ standardsCompareData.length > 0
+ ) {
+ const tenantData = standardsCompareData[0]
+ const appliedStandards = []
+
+ // Process each standard from the API response
+ Object.keys(tenantData).forEach((key) => {
+ if (key.startsWith('standards.') && key !== 'tenantFilter') {
+ const standardKey = key
+ const standardDef = standardsData.find((std) => std.name === standardKey)
+
+ if (standardDef) {
+ appliedStandards.push({
+ name: standardDef.label || standardKey,
+ executiveDescription:
+ standardDef.executiveText || standardDef.helpText || 'No description available',
+ category: standardDef.cat || 'General',
+ })
+ }
+ }
+ })
+
+ aggregatedData.appliedStandards = appliedStandards
+ }
+
+ return aggregatedData
+ }
+
+ let securityControls = processStandardsData(standardsCompareData, standardTemplatesData)
+ let driftComplianceInfo = processDriftComplianceData(driftComplianceData, standardsCompareData)
+
+ // Compliance grade -> the shared status vocabulary.
+ const badgeTone = (status) => {
+ switch (status) {
+ case 'Compliant':
+ return 'pass'
+ case 'Partial':
+ return 'warn'
+ case 'Review':
+ case 'Review Required':
+ return 'fail'
+ default:
+ return null
+ }
+ }
+
+ // The four deviation buckets flattened into one set of table rows. They were four copies of the
+ // same twenty lines, each re-requiring standards.json inside its own map.
+ const deviationRows = [
+ {
+ list: driftComplianceInfo?.currentDeviations,
+ take: 5,
+ status: 'Current',
+ tone: 'fail',
+ fallback: 'Policy deviation detected',
+ },
+ {
+ list: driftComplianceInfo?.acceptedDeviations,
+ take: 3,
+ status: 'Accepted',
+ tone: 'pass',
+ fallback: 'Accepted policy deviation',
+ },
+ {
+ list: driftComplianceInfo?.customerSpecificDeviations,
+ take: 3,
+ status: 'Client Specific',
+ tone: 'warn',
+ fallback: 'Customer-specific policy configuration',
+ },
+ {
+ list: driftComplianceInfo?.deniedDeviations,
+ take: 2,
+ status: 'Denied',
+ tone: 'fail',
+ fallback: 'Denied policy deviation',
+ },
+ ].flatMap((bucket) =>
+ (bucket.list ?? []).slice(0, bucket.take).map((deviation) => {
+ const standardDef = standardsCatalog?.find((std) => std.name === deviation.standardName)
+ return {
+ policy: deviation.prettyName || 'Unknown Policy',
+ description: standardDef?.executiveText || standardDef?.helpText || bucket.fallback,
+ status: bucket.status,
+ tone: bucket.tone,
+ }
+ })
+ )
+
+ // Compliance state arrives under either casing depending on which endpoint fed the report.
+ const isCompliant = (device) =>
+ (device.complianceState || device.ComplianceState || '').toLowerCase() === 'compliant'
+ const compliantDevices = devices.filter(isCompliant)
+
+ // Applied standards grouped under their category heading.
+ const appliedStandardsByCategory = Object.entries(
+ (driftComplianceInfo?.appliedStandards ?? []).reduce((groups, standard) => {
+ const category = standard.category || 'General'
+ ;(groups[category] ??= []).push(standard)
+ return groups
+ }, {})
+ )
+
+ return (
+
+ {/* EXECUTIVE SUMMARY - MODULAR COMPOSITION (FROST) */}
+ {sectionConfig.executiveSummary && (
+
+
+
+ This security assessment for {tenantName || 'your organization'} provides
+ a clear picture of your organization's cybersecurity posture and readiness against
+ modern threats. We've evaluated your current security measures against industry best
+ practices to identify strengths and opportunities for improvement.
+
+
+
+ Our assessment follows globally recognized security standards to ensure your
+ organization meets regulatory requirements and industry benchmarks. This approach
+ helps protect your business assets, maintain customer trust, and reduce operational
+ risks from cyber threats.
+
+
+
+
+
+
+ )}
+
+ {/* STATISTIC PAGE 1 - CHAPTER SPLITTER */}
+ {sectionConfig.infographics && (
+
+ of organizations experienced{'\n'}
+ more than one cyberattack
+ {'\n'}
+ in the past year
+
+ }
+ footerText={
+ <>
+ Proactive security prevents{'\n'}
+ repeated attacks
+
+ }
+ />
+ )}
+
+ {/* SECURITY CONTROLS - Only show if standards data is available and enabled and drift compliance is disabled */}
+ {sectionConfig.securityStandards &&
+ !sectionConfig.driftCompliance &&
+ (() => {
+ return securityControls && securityControls.length > 0
+ })() && (
+
+
+
+ Your security standards have been carefully evaluated against industry best
+ practices to protect your business from cyber threats while ensuring smooth daily
+ operations. These standards help maintain business continuity, protect sensitive
+ data, and meet regulatory requirements that are essential for your industry.
+
+
+
+
+ (
+ {control.status}
+ ),
+ },
+ ]}
+ rows={securityControls.map((control) => ({
+ ...control,
+ name:
+ control.name.length > 100
+ ? control.name.substring(0, 100) + '...'
+ : control.name,
+ tags: control.tags.length > 0 ? control.tags : 'No tags',
+ }))}
+ />
+
+
+
+
+
+ )}
+
+ {/* DRIFT COMPLIANCE - Only show if drift compliance is enabled and security standards is disabled */}
+ {sectionConfig.driftCompliance &&
+ !sectionConfig.securityStandards &&
+ driftComplianceInfo &&
+ (driftComplianceInfo.currentDeviationsCount > 0 ||
+ driftComplianceInfo.acceptedDeviationsCount > 0 ||
+ driftComplianceInfo.deniedDeviationsCount > 0 ||
+ driftComplianceInfo.customerSpecificDeviationsCount > 0 ||
+ driftComplianceInfo.appliedStandards.length > 0) && (
+ <>
+
+
+
+ Your drift compliance assessment shows how your current security policies compare
+ to your organization's approved standards. This analysis helps identify where
+ configurations have drifted from intended baselines and provides insights into
+ policy compliance across your Microsoft 365 environment.
+
+
+
+
+ ({
+ ...entry,
+ // Compliance categories keep the semantic green-to-red scale rather than the
+ // brand series: red has to mean denied whatever colours the MSP picked.
+ colour: REPORT_SERIES_SEMANTIC[index],
+ }))}
+ />
+
+
+
+
+
+
+
+
+
+ {/* Deviations Detail Page */}
+ {(driftComplianceInfo.currentDeviations.length > 0 ||
+ driftComplianceInfo.acceptedDeviations.length > 0 ||
+ driftComplianceInfo.deniedDeviations.length > 0 ||
+ driftComplianceInfo.customerSpecificDeviations.length > 0) && (
+
+
+
+ The following table shows all identified policy deviations, their current
+ status, and executive descriptions of what each deviation means for your
+ organization's security posture and compliance requirements.
+
+
+
+
+ (
+ {row.status}
+ ),
+ },
+ ]}
+ rows={deviationRows}
+ />
+
+
+ )}
+
+ {/* Applied Standards Page */}
+ {driftComplianceInfo.appliedStandards.length > 0 && (
+
+
+
+ These are the security standards that have been applied to your Microsoft 365
+ environment. Each standard represents a specific security control or policy
+ designed to protect your organization's data and systems.
+
+
+
+ {appliedStandardsByCategory.map(([category, standards]) => (
+
+ ({
+ label: `${standard.name}:`,
+ text: standard.executiveDescription,
+ }))}
+ />
+
+ ))}
+
+
+
+ Your organization has {driftComplianceInfo.appliedStandards.length} security
+ standards implemented with {driftComplianceInfo.alignedCount} policies fully
+ aligned,{' '}
+ {driftComplianceInfo.acceptedDeviationsCount +
+ driftComplianceInfo.customerSpecificDeviationsCount}{' '}
+ approved deviations, and {driftComplianceInfo.currentDeviationsCount} deviations
+ requiring attention.
+
+
+
+ )}
+
+ )}
+
+ {/* STATISTIC PAGE 2 - CHAPTER SPLITTER - Only show if secure score data is available and enabled */}
+ {sectionConfig.infographics &&
+ sectionConfig.secureScore &&
+ secureScoreData &&
+ secureScoreData?.isSuccess &&
+ secureScoreData?.translatedData && (
+
+ of successful cyber attacks{'\n'}
+ could have been prevented with{'\n'}
+ proactive security measures
+
+ }
+ footerText={
+ <>
+ Your security resilience is{'\n'}
+ our primary mission
+
+ }
+ />
+ )}
+
+ {/* MICROSOFT SECURE SCORE - DEDICATED PAGE - Only show if secure score data is available and enabled */}
+ {sectionConfig.secureScore &&
+ secureScoreData &&
+ secureScoreData?.isSuccess &&
+ secureScoreData?.translatedData && (
+
+
+
+ Microsoft Secure Score measures how well your organization is protected against
+ cyber threats. This score reflects the effectiveness of your current security
+ measures and helps identify areas where additional protection could strengthen your
+ business resilience.
+
+
+
+
+
+
+
+
+
+
+ Your current score of {secureScoreData?.translatedData?.currentScore || 'N/A'}{' '}
+ represents {secureScoreData?.translatedData?.percentageCurrent || 'N/A'}% of the
+ maximum protection level available. This indicates how well your organization is
+ currently defended against common cyber threats and data breaches.
+
+
+
+ • Business growth and new employees may temporarily lower scores until security
+ measures are applied{'\n'}• Changes in software licenses can affect available security
+ features{'\n'}• New security threats require updated protections, which may impact
+ scores{'\n'}• Regular security improvements help maintain and increase your protection
+ level
+
+
+ )}
+
+ {/* LICENSING PAGE - Only show if license data is available */}
+ {sectionConfig.licenseManagement &&
+ licensingData &&
+ Array.isArray(licensingData) &&
+ licensingData.length > 0 && (
+ <>
+ {/* STATISTIC PAGE 3 - CHAPTER SPLITTER */}
+ {sectionConfig.infographics && (
+
+ a business falls victim to{'\n'}
+ ransomware attacks
+
+ }
+ footerText={
+ <>
+ Proactive defense beats{'\n'}
+ reactive recovery
+
+ }
+ />
+ )}
+
+
+
+ Smart license management helps control costs while ensuring your team has the
+ tools they need to be productive. This analysis shows how your current licenses
+ are being used and identifies opportunities to optimize spending without
+ compromising business operations.
+
+
+
+
+ ({
+ name: license.License || license.license || 'N/A',
+ used: license.CountUsed || license.countUsed || '0',
+ available: license.CountAvailable || license.countAvailable || '0',
+ total: license.TotalLicenses || license.totalLicenses || '0',
+ }))}
+ />
+
+
+
+
+
+
+ )}
+
+ {/* DEVICES PAGE - Only show if device data is available */}
+ {sectionConfig.deviceManagement &&
+ deviceData &&
+ Array.isArray(deviceData) &&
+ deviceData.length > 0 && (
+ <>
+ {/* STATISTIC PAGE 4 - CHAPTER SPLITTER */}
+ {sectionConfig.infographics && (
+
+ average cost of a{'\n'}
+ data breach in 2024
+
+ }
+ footerText={
+ <>
+ Investment in security
+ {'\n'}
+ saves millions in recovery
+
+ }
+ />
+ )}
+
+
+
+ Managing employee devices is essential for protecting your business data and
+ maintaining productivity. This analysis shows which devices meet your security
+ standards and identifies any that may need attention to prevent data breaches or
+ operational disruptions.
+
+
+
+
+
+
+
+ (
+
+ {row.compliance}
+
+ ),
+ },
+ { header: 'Last Sync', key: 'lastSync', width: 2, bold: true },
+ ]}
+ rows={deviceData.map((device) => ({
+ name: device.deviceName || 'N/A',
+ os: device.operatingSystem || 'N/A',
+ compliance: device.complianceState || device.ComplianceState || 'Unknown',
+ compliant: isCompliant(device),
+ lastSync: device.lastSyncDateTime
+ ? new Date(device.lastSyncDateTime).toLocaleDateString()
+ : 'N/A',
+ }))}
+ />
+
+
+
+ device.operatingSystem === 'Windows')
+ .length,
+ label: 'Windows Devices',
+ },
+ {
+ value: deviceData.filter((device) => device.operatingSystem === 'iOS').length,
+ label: 'iOS Devices',
+ },
+ {
+ value: deviceData.filter((device) => device.operatingSystem === 'Android')
+ .length,
+ label: 'Android Devices',
+ },
+ {
+ // Cloud PCs never report BitLocker but are platform-encrypted by Azure.
+ value: deviceData.filter(
+ (device) => device.isEncrypted === true || isCloudPcDevice(device),
+ ).length,
+ label: 'Encrypted',
+ },
+ ]}
+ />
+
+
+
+ Keep devices updated and secure to protect business data. Regularly check that all
+ employee devices meet security standards and address any issues promptly. Consider
+ automated policies to maintain consistent security across all devices and conduct
+ regular reviews to identify potential risks.
+
+
+
+ )}
+
+ {/* CONDITIONAL ACCESS POLICIES PAGE - Only show if data is available */}
+ {sectionConfig.conditionalAccess &&
+ conditionalAccessData &&
+ Array.isArray(conditionalAccessData) &&
+ conditionalAccessData.length > 0 && (
+ <>
+ {/* STATISTIC PAGE 5 - CHAPTER SPLITTER */}
+ {sectionConfig.infographics && (
+
+ average time to identify and{'\n'}
+ contain a data breach
+
+ }
+ footerText={
+ <>
+ Early detection minimizes{'\n'}
+ business impact
+
+ }
+ />
+ )}
+
+
+
+ Access control policies help protect your business by ensuring only the right
+ people can access sensitive information under appropriate circumstances. These
+ smart security measures automatically evaluate each access request and apply
+ additional verification when needed, balancing security with employee
+ productivity.
+
+
+
+
+
+ These policies work like intelligent security guards, making decisions based on
+ who is trying to access what, from where, and when. For example, accessing email
+ from the office might be seamless, but accessing it from an unusual location might
+ require additional verification. This approach protects your data while minimizing
+ disruption to daily work.
+
+
+
+
+ (
+ {row.state}
+ ),
+ },
+ { header: 'Applications', key: 'applications', width: 2, bold: true },
+ { header: 'Controls', key: 'controls', width: 3, bold: true },
+ ]}
+ rows={conditionalAccessData.map((policy) => ({
+ name: policy.displayName || 'N/A',
+ state: CA_STATE_LABELS[policy.state] ?? policy.state ?? 'Unknown',
+ tone: CA_STATE_TONES[policy.state] ?? null,
+ applications: policy.includeApplications || 'All',
+ controls: caControlsText(policy),
+ }))}
+ />
+
+
+
+
+ policy.builtInControls?.includes('mfa')
+ ).length,
+ label: 'MFA Policies',
+ },
+ ]}
+ />
+
+
+
+
+
+
+ {caReportOnlyCount > 0
+ ? `Consider activating ${caReportOnlyCount} policies currently in testing mode after ensuring they don't disrupt business operations. `
+ : 'Your access controls are properly configured. '}
+ Regularly review how these policies affect employee productivity and adjust as
+ needed. Consider additional location-based protections for enhanced security without
+ impacting daily operations.
+
+
+
+ )}
+
+ {/* SHADOW AI SECTION - the Shadow AI report pages appended to this document. It takes the
+ theme from this document's context, so its pages carry the same branding as the rest. */}
+ {sectionConfig.shadowAI && shadowAIData && (
+
+ )
+}
+
+export const ExecutiveReportButton = (props) => {
+ const { variant: buttonVariant, onClick: onClickProp, ...other } = props
+ const settings = useSettings()
+ const defaultBranding = useBrandingSettings()
+
+ // Preview state
+ const [previewOpen, setPreviewOpen] = useState(false)
+ // Null until the operator picks one, so the branding setting for this report type keeps applying
+ // as it changes. An explicit choice — including "Default" — wins from then on.
+ const [presetOverride, setPresetOverride] = useState(null)
+ const brandingPresetId = presetOverride ?? defaultBranding?.reportDefaults?.executive ?? ''
+
+ // Named branding sets a report can be rendered against instead of the default branding.
+ const brandingPresets = ApiGetCall({
+ url: '/api/ListBrandingPresets',
+ data: { includeImages: true },
+ queryKey: 'ListBrandingPresets-withImages',
+ waiting: previewOpen,
+ })
+
+ const presetOptions = useMemo(
+ () => [
+ // Imported rather than restated: this option used to read "Global branding settings" here
+ // while the branding page called the same thing "Default".
+ DEFAULT_BRANDING_OPTION,
+ ...(Array.isArray(brandingPresets.data) ? brandingPresets.data : []).map((preset) => ({
+ label: preset.name,
+ value: preset.id,
+ })),
+ ],
+ [brandingPresets.data]
+ )
+
+ const brandingSettings = useMemo(() => {
+ if (!brandingPresetId) return defaultBranding
+ const presets = Array.isArray(brandingPresets.data) ? brandingPresets.data : []
+ // A preset deleted since it was picked falls back to the default branding rather than
+ // rendering unbranded.
+ return presets.find((preset) => preset.id === brandingPresetId) || defaultBranding
+ }, [brandingPresetId, brandingPresets.data, defaultBranding])
+
+ const variables = useReportVariables()
+
+ const [sectionConfig, setSectionConfig] = useState({
+ executiveSummary: true,
+ securityStandards: true,
+ driftCompliance: false,
+ secureScore: true,
+ licenseManagement: true,
+ deviceManagement: true,
+ conditionalAccess: true,
+ infographics: true,
+ shadowAI: false,
+ })
+
+ // Fetch organization data - only when preview is open
+ const organization = ApiGetCall({
+ url: '/api/ListGraphRequest',
+ queryKey: `${settings.currentTenant}-ListGraphRequest-organization-report`,
+ data: { tenantFilter: settings.currentTenant, Endpoint: 'organization' },
+ waiting: previewOpen,
+ })
+
+ const organizationRecord = organization.data?.Results?.[0]
+
+ // Fetch user counts - only when preview is open
+ const dashboard = ApiGetCall({
+ url: '/api/ListuserCounts',
+ data: { tenantFilter: settings.currentTenant },
+ queryKey: `${settings.currentTenant}-ListuserCounts-report`,
+ waiting: previewOpen,
+ })
+
+ // Only fetch additional data when preview dialog is opened
+ const secureScore = useSecureScore({ waiting: previewOpen })
+
+ // Get real license data - only when preview is open
+ const licenseData = ApiGetCall({
+ url: '/api/ListLicenses',
+ data: {
+ tenantFilter: settings.currentTenant,
+ },
+ queryKey: `licenses-report-${settings.currentTenant}`,
+ waiting: previewOpen,
+ })
+
+ // Get real device data - only when preview is open
+ const deviceData = ApiGetCall({
+ url: '/api/ListGraphRequest',
+ data: {
+ tenantFilter: settings.currentTenant,
+ Endpoint: 'deviceManagement/managedDevices',
+ },
+ queryKey: `ListGraphRequest-devices-report-${settings.currentTenant}`,
+ waiting: previewOpen,
+ })
+
+ // Get real conditional access policy data - only when preview is open
+ const conditionalAccessData = ApiGetCall({
+ url: '/api/ListConditionalAccessPolicies',
+ data: {
+ tenantFilter: settings.currentTenant,
+ },
+ queryKey: `ca-policies-report-${settings.currentTenant}`,
+ waiting: previewOpen,
+ })
+
+ // Get real standards data - only when preview is open
+ const standardsCompareData = ApiGetCall({
+ url: '/api/ListStandardsCompare',
+ data: {
+ tenantFilter: settings.currentTenant,
+ },
+ queryKey: `standards-compare-report-${settings.currentTenant}`,
+ waiting: previewOpen,
+ })
+
+ // Get drift compliance data - only when preview is open
+ const driftComplianceData = ApiGetCall({
+ url: '/api/listTenantDrift',
+ data: {
+ TenantFilter: settings.currentTenant,
+ },
+ queryKey: `drift-compliance-report-${settings.currentTenant}`,
+ waiting: previewOpen,
+ })
+
+ // Load all standard templates to resolve template display names
+ const standardTemplatesData = ApiGetCall({
+ url: `/api/listStandardTemplates`,
+ data: {}, // No templateId filter - get all templates
+ queryKey: `standard-templates-report-all`,
+ waiting: previewOpen,
+ })
+
+ // Shadow AI data for the optional Shadow AI section - only fetched when that section is
+ // enabled. Requires a single tenant; the CIPPDb cache must have been synced for data to show.
+ const shadowAIEnabled = sectionConfig.shadowAI && settings.currentTenant !== 'AllTenants'
+ const shadowAIData = ApiGetCall({
+ url: '/api/ListShadowAI',
+ data: { tenantFilter: settings.currentTenant },
+ queryKey: `ListShadowAI-${settings.currentTenant}`,
+ waiting: previewOpen && shadowAIEnabled,
+ })
+
+ // Check if all data is loaded (either successful or failed) - only relevant when preview is open
+ const isDataLoading =
+ previewOpen &&
+ (organization.isFetching ||
+ dashboard.isFetching ||
+ secureScore.isFetching ||
+ licenseData.isFetching ||
+ deviceData.isFetching ||
+ conditionalAccessData.isFetching ||
+ standardsCompareData.isFetching ||
+ driftComplianceData.isFetching ||
+ standardTemplatesData.isFetching ||
+ (shadowAIEnabled && shadowAIData.isFetching))
+
+ const hasAllDataFinished =
+ !previewOpen ||
+ ((organization.isSuccess || organization.isError) &&
+ (dashboard.isSuccess || dashboard.isError) &&
+ (secureScore.isSuccess || secureScore.isError) &&
+ (licenseData.isSuccess || licenseData.isError) &&
+ (deviceData.isSuccess || deviceData.isError) &&
+ (conditionalAccessData.isSuccess || conditionalAccessData.isError) &&
+ (standardsCompareData.isSuccess || standardsCompareData.isError) &&
+ (driftComplianceData.isSuccess || driftComplianceData.isError) &&
+ (standardTemplatesData.isSuccess || standardTemplatesData.isError) &&
+ (!shadowAIEnabled || shadowAIData.isSuccess || shadowAIData.isError))
+
+ // Button is always available now since we don't need to wait for data
+ const shouldShowButton = true
+
+ const tenantName = organizationRecord?.displayName || 'Tenant'
+ const tenantId = organizationRecord?.id
+ const userStats = {
+ licensedUsers: dashboard.data?.LicUsers || 0,
+ unlicensedUsers:
+ dashboard.data?.Users && dashboard.data?.LicUsers
+ ? dashboard.data?.Users - dashboard.data?.LicUsers
+ : 0,
+ guests: dashboard.data?.Guests || 0,
+ globalAdmins: dashboard.data?.Gas || 0,
+ permanentGlobalAdmins: dashboard.data?.PermanentGas ?? 0,
+ eligibleGlobalAdmins: dashboard.data?.EligibleGas ?? 0,
+ pimCapable: dashboard.data?.PIMCapable === true,
+ }
+
+ const fileName = `Executive_Report_${tenantName?.replace(/[^a-zA-Z0-9]/g, '_') || 'Tenant'}_${
+ new Date().toISOString().split('T')[0]
+ }.pdf`
+
+ // Memoize the document to prevent unnecessary re-renders - only when dialog is open
+ const reportDocument = useMemo(() => {
+ // Don't create document if dialog is closed
+ if (!previewOpen) {
+ return null
+ }
+
+ // Only create document if preview is open and data is ready
+ if (!hasAllDataFinished) {
+ return (
+
+
+
+ Loading report data...
+
+
+
+ )
+ }
+
+ try {
+ return (
+
+
+
+ Error creating document: {error.message}
+
+
+
+ )
+ }
+ }, [
+ previewOpen, // Most important - prevents creation when dialog is closed
+ hasAllDataFinished,
+ tenantName,
+ tenantId,
+ userStats,
+ organizationRecord,
+ dashboard.data,
+ brandingSettings,
+ // Resolved asynchronously, so without this the document keeps the copy built before the
+ // values landed and the footer shows %cippurl% instead of the URL.
+ variables,
+ secureScore?.isSuccess,
+ licenseData?.isSuccess,
+ deviceData?.isSuccess,
+ conditionalAccessData?.isSuccess,
+ standardsCompareData?.isSuccess,
+ driftComplianceData?.isSuccess,
+ shadowAIData?.isSuccess,
+ JSON.stringify(sectionConfig), // Stringify to prevent reference issues
+ ])
+
+ // Handle section toggle with mutual exclusion logic
+ const handleSectionToggle = (sectionKey) => {
+ setSectionConfig((prev) => {
+ // Count currently enabled sections
+ const enabledSections = Object.values(prev).filter(Boolean).length
+
+ // If trying to disable the last remaining section, prevent it
+ if (prev[sectionKey] && enabledSections === 1) {
+ return prev // Don't change state
+ }
+
+ // Mutual exclusion logic for Security Standards and Drift Compliance
+ if (sectionKey === 'securityStandards' && !prev[sectionKey]) {
+ // Enabling Security Standards, disable Drift Compliance
+ return {
+ ...prev,
+ securityStandards: true,
+ driftCompliance: false,
+ }
+ }
+
+ if (sectionKey === 'driftCompliance' && !prev[sectionKey]) {
+ // Enabling Drift Compliance, disable Security Standards
+ return {
+ ...prev,
+ driftCompliance: true,
+ securityStandards: false,
+ }
+ }
+
+ return {
+ ...prev,
+ [sectionKey]: !prev[sectionKey],
+ }
+ })
+ }
+
+ // Close handler with cleanup
+ const handleClose = () => {
+ setPreviewOpen(false)
+ }
+
+ // Below md the 320px config rail would leave the preview about 70px wide, so it moves into
+ // a drawer and the preview takes the whole dialog.
+ const [sectionsOpen, setSectionsOpen] = useState(false)
+
+ // Section configuration options
+ const sectionOptions = [
+ {
+ key: 'executiveSummary',
+ label: 'Executive Summary',
+ description: 'High-level overview and statistics',
+ },
+ {
+ key: 'securityStandards',
+ label: 'Security Standards',
+ description: 'Compliance assessment and standards evaluation',
+ },
+ {
+ key: 'driftCompliance',
+ label: 'Drift Compliance',
+ description: 'Policy drift analysis and deviation management',
+ },
+ {
+ key: 'secureScore',
+ label: 'Microsoft Secure Score',
+ description: 'Security posture measurement and trends',
+ },
+ {
+ key: 'licenseManagement',
+ label: 'License Management',
+ description: 'License allocation and optimization',
+ },
+ {
+ key: 'deviceManagement',
+ label: 'Device Management',
+ description: 'Device compliance and insights',
+ },
+ {
+ key: 'conditionalAccess',
+ label: 'Conditional Access',
+ description: 'Access control policies and analysis',
+ },
+ {
+ key: 'infographics',
+ label: 'Infographic Pages',
+ description: 'Statistical pages with visual elements between sections',
+ },
+ {
+ key: 'shadowAI',
+ label: 'Shadow AI Report',
+ description: 'AI usage discovery and risk pages from the Shadow AI report',
+ },
+ ]
+
+ // One definition, two homes: the desktop rail and the mobile drawer. The drawer's own
+ // header already says "Report Sections", so it takes the panel without the heading.
+ const sectionPanel = ({ showHeading = true } = {}) => (
+
+ {showHeading && (
+
+
+ )}
+
+ Configure which sections to include in your executive report. Changes are reflected in
+ real-time.
+
+
+
+ option.value === brandingPresetId) ?? presetOptions[0]
+ }
+ onChange={(option) => setPresetOverride(option?.value ?? '')}
+ />
+
+ Presets are managed in Settings → Branding
+
+
+
+
+ {sectionOptions.map((option) => (
+ handleSectionToggle(option.key)}
+ sx={{
+ p: 1.5,
+ border: '1px solid',
+ borderColor: sectionConfig[option.key] ? 'primary.main' : 'divider',
+ bgcolor: sectionConfig[option.key] ? 'primary.50' : 'background.paper',
+ cursor: 'pointer',
+ transition: 'all 0.2s ease-in-out',
+ display: 'flex',
+ alignItems: 'center',
+ '&:hover': {
+ borderColor: 'primary.main',
+ bgcolor: sectionConfig[option.key] ? 'primary.100' : 'primary.25',
+ },
+ }}
+ >
+ {
+ event.stopPropagation()
+ handleSectionToggle(option.key)
+ }}
+ onClick={(event) => event.stopPropagation()}
+ color="primary"
+ size="small"
+ disabled={
+ sectionConfig[option.key] &&
+ Object.values(sectionConfig).filter(Boolean).length === 1
+ }
+ />
+
+
+ {option.label}
+
+
+ {option.description}
+
+
+
+ ))}
+
+
+
+
+ 💡 Pro Tip
+
+
+ Enable only the sections relevant to your audience to create focused, impactful reports.
+ At least one section must be enabled.
+
+
+
+ )
+
+ return (
+ <>
+ {/* Main Executive Summary Button - Always available */}
+ {buttonVariant === 'menuItem' ? (
+
+ ) : (
+
+
+ }
+ onClick={() => setPreviewOpen(true)}
+ sx={{
+ minWidth: 0,
+ width: '100%',
+ pl: 1,
+ pr: 1,
+ overflow: 'hidden',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ justifyContent: 'center',
+ '& .MuiButton-startIcon': {
+ marginLeft: 0,
+ marginRight: 0.75,
+ flexShrink: 0,
+ },
+ fontWeight: 'bold',
+ textTransform: 'none',
+ borderRadius: 2,
+ boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+ transition: 'all 0.2s ease-in-out',
+ }}
+ {...other}
+ >
+
+ Executive Summary
+
+
+
+
+ )}
+
+ {/* Combined Preview and Configuration Dialog */}
+
+
+ );
+}
diff --git a/src/components/PrivateRoute.js b/src/components/PrivateRoute.js
deleted file mode 100644
index d55d560512b3..000000000000
--- a/src/components/PrivateRoute.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import { ApiGetCall } from "../api/ApiCall.jsx";
-import UnauthenticatedPage from "../pages/unauthenticated.js";
-import LoadingPage from "../pages/loading.js";
-import ApiOfflinePage from "../pages/api-offline.js";
-import SetupGatePage from "./CippComponents/SetupGatePage.jsx";
-import SetupPendingPage from "./CippComponents/SetupPendingPage.jsx";
-import { useState, useEffect } from "react";
-import { useRouter } from "next/router";
-import { rememberSession } from "../utils/auth-session.js";
-
-// EasyAuth exposes the signed-in identity in two shapes depending on the host:
-// - Static Web Apps: { clientPrincipal: { userDetails, userRoles, ... } }
-// - App Service EasyAuth: [ { user_id, user_claims: [...], access_token, ... } ]
-// an authenticated session must be detected from either populated shape.
-const hasAuthenticatedSession = (data) =>
- Boolean(data?.clientPrincipal) || (Array.isArray(data) && data.length > 0);
-
-// Being signed out and being signed in without access need different screens and
-// different actions, so the unauthenticated page is told which one it is rather
-// than guessing. SESSION means there is no identity at all; PERMISSIONS means a
-// valid identity that CIPP won't let through.
-export const UNAUTH_SESSION = "session";
-export const UNAUTH_PERMISSIONS = "permissions";
-
-export const PrivateRoute = ({ children, routeType }) => {
- const router = useRouter();
- const [unauthLatched, setUnauthLatched] = useState(false);
-
- const session = ApiGetCall({
- url: "/.auth/me",
- queryKey: "authmeswa",
- refetchOnWindowFocus: true,
- staleTime: 120000, // 2 minutes
- });
-
- // Latch the unauthenticated state so refetches from child components don't flip us
- // back to loading. Latch on a request error or a settled session with no identity;
- // clear it as soon as an authenticated session (either shape) is seen.
- useEffect(() => {
- if (
- !session.isLoading &&
- !session.isFetching &&
- (session.isError || !hasAuthenticatedSession(session.data))
- ) {
- setUnauthLatched(true);
- } else if (hasAuthenticatedSession(session.data)) {
- setUnauthLatched(false);
- }
- }, [session.isLoading, session.isFetching, session.isError, session.data]);
-
- const apiRoles = ApiGetCall({
- url: "/api/me",
- queryKey: "authmecipp",
- retry: 2,
- waiting: session.isSuccess && hasAuthenticatedSession(session.data),
- });
-
- // Record that a session existed on this device so the sign-in screen can tell
- // an expired session from a first visit.
- useEffect(() => {
- if (hasAuthenticatedSession(session.data)) {
- rememberSession();
- }
- }, [session.data]);
-
- // If latched as unauthenticated, always show unauthenticated page
- if (unauthLatched) {
- return
{Icon ?
+
{block.title || meta.label}
+
onMoveUp(index)}
disabled={index === 0}
>
-
@@ -142,7 +136,7 @@ const BlockShell = ({ block, index, totalBlocks, onRemove, onMoveUp, onMoveDown,
onClick={() => onMoveDown(index)}
disabled={index === totalBlocks - 1}
>
-
@@ -161,7 +155,7 @@ const BlockShell = ({ block, index, totalBlocks, onRemove, onMoveUp, onMoveDown,
>
{children}
- )
+ );
}
/**
@@ -183,7 +177,9 @@ const RowsEditor = ({ rows, columns, onChange, addLabel = 'Add row', minRows = 1
return (
{rows.map((row, rowIndex) => (
-
+
{columns.map((column) => (
remove(rowIndex)}
disabled={rows.length <= minRows}
>
-
-
-
+
{addLabel}
- )
+ );
}
const TitleField = ({ block, index, onUpdate, label = 'Block title', helperText }) => (
@@ -329,13 +327,15 @@ export const ScorecardBlockCard = ({ block, index, onUpdate, ...shell }) => {
addLabel="Add card"
/>
{stats.length > 4 ? (
-
+
More than four cards on a row get too narrow to read in the PDF.
) : null}
- )
+ );
}
/* ── Progress bars ───────────────────────────────────────── */
@@ -366,7 +366,9 @@ export const HeroBlockCard = ({ block, index, onUpdate, ...shell }) => {
return (
-
+
Takes a full page of its own, with the background image bleeding to the paper edge.
@@ -418,14 +420,16 @@ export const HeroBlockCard = ({ block, index, onUpdate, ...shell }) => {
- )
+ );
}
/* ── Page break ──────────────────────────────────────────── */
export const PageBreakBlockCard = ({ block, index, ...shell }) => (
-
+
Everything after this starts on a new page.
diff --git a/src/components/ReportBuilder/ReportBuilderPDF.js b/src/components/ReportBuilder/ReportBuilderPDF.jsx
similarity index 100%
rename from src/components/ReportBuilder/ReportBuilderPDF.js
rename to src/components/ReportBuilder/ReportBuilderPDF.jsx
diff --git a/src/components/ShadowAIReportButton.js b/src/components/ShadowAIReportButton.js
deleted file mode 100644
index 82b13955ca47..000000000000
--- a/src/components/ShadowAIReportButton.js
+++ /dev/null
@@ -1,863 +0,0 @@
-import { useMemo, useState } from 'react'
-import {
- Box,
- Button,
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
- IconButton,
- Paper,
- Stack,
- SvgIcon,
- Switch,
- Tooltip,
- Typography,
-} from '@mui/material'
-import { Close, Download, PictureAsPdf, Settings } from '@mui/icons-material'
-import { CippPdfPreview } from './CippPdf/CippPdfPreview'
-import { CippOffCanvas } from './CippComponents/CippOffCanvas'
-import { useReportVariables } from './CippPdf/useReportVariables'
-import { useBrandingSettings } from './CippPdf/useBrandingSettings'
-import {
- Bold,
- BulletList,
- Columns,
- ContentPage,
- DataTable,
- DonutChart,
- HeroPage,
- InfoBox,
- Paragraph,
- ReportDocument,
- Section,
- StatRow,
-} from './CippPdf'
-
-// Risk bands keep the semantic red-to-green scale rather than the brand series: red has to mean
-// high risk whatever colours the MSP picked.
-const RISK_COLOURS = {
- high: '#EF4444',
- medium: '#F59E0B',
- low: '#3B82F6',
- informational: '#10B981',
-}
-const riskColor = (risk) => RISK_COLOURS[String(risk).toLowerCase()] ?? '#A0AEC0'
-
-// Executive Shadow AI report. Written as a pages fragment with no theme, stylesheet or page
-// furniture of its own, which is what lets the executive report drop the same pages into its own
-// document and have them come out branded identically (see ExecutiveReportButton).
-export const ShadowAIReportPages = ({
- tenantName,
- data,
- sectionConfig = {
- executiveSummary: true,
- infographics: true,
- background: true,
- riskLevels: true,
- sanctionedTools: true,
- detectedSoftware: true,
- entraApplications: true,
- recommendations: true,
- },
-}) => {
- const summary = data?.summary ?? {}
- const detectedApps = data?.detectedApps ?? []
- const consentedApps = data?.consentedApps ?? []
- const topTools = data?.topTools ?? []
- const byRisk = data?.byRisk ?? []
-
- const riskAreas = [
- {
- title: 'Data Leakage',
- color: '#EF4444',
- text: 'Customer records, credentials, source code and financials pasted into consumer AI tools may be retained by the provider and used to train future models, permanently placing them outside your control. Every prompt is a data transfer to a third party.',
- },
- {
- title: 'Compliance & Legal Exposure',
- color: '#F59E0B',
- text: 'Processing personal data through unvetted AI services can breach GDPR, HIPAA and industry-specific regulations, and undermines contractual confidentiality commitments made to customers.',
- },
- {
- title: 'Excessive Application Permissions',
- color: '#D69E2E',
- text: 'AI meeting assistants and productivity plugins often request broad access to mailboxes, calendars and files. A single user consent can expose organization-wide data to a third-party service, and that access persists until the consent is revoked.',
- },
- {
- title: 'Unreliable Output in Business Processes',
- color: '#3B82F6',
- text: 'AI-generated content flows into quotes, contracts and customer communication without review. Errors produced by unmanaged tools are difficult to trace because the organization does not know the tools are in use.',
- },
- ]
-
- const riskLevels = [
- {
- name: 'High',
- text: 'Consumer tools that train on submitted data, retain prompts indefinitely, or operate from jurisdictions without adequate data protection. Content pasted into these tools should be treated as disclosed to an unvetted third party.',
- },
- {
- name: 'Medium',
- text: 'Tools with business-grade privacy options that are typically used through personal, unmanaged accounts. Risk depends heavily on the plan and account type in use.',
- },
- {
- name: 'Low',
- text: 'Tools with enterprise controls, contractual data-processing terms and no training on customer data when configured correctly.',
- },
- {
- name: 'Informational',
- text: 'Company sanctioned tools that have been explicitly approved for use in this tenant. They remain in the report for visibility but no longer contribute to the risk figures.',
- },
- ]
-
- const recommendations = [
- {
- label: 'Review & Decide:',
- text: 'Evaluate each detected tool with stakeholders and decide whether it should be sanctioned, replaced with an approved alternative, or blocked.',
- },
- {
- label: 'Sanction Approved Tools:',
- text: 'Maintain a list of company sanctioned tools so future reports separate approved AI use from true shadow AI.',
- },
- {
- label: 'Offer an Alternative:',
- text: 'Provide a sanctioned option such as Microsoft 365 Copilot before blocking popular tools - blocking without an alternative drives usage to personal devices.',
- },
- {
- label: 'Restrict Consent:',
- text: 'Require admin approval for unverified applications in Entra ID so new AI services cannot access company data through user consent.',
- },
- {
- label: 'Block & Monitor:',
- text: 'Deploy Conditional Access and Defender for Cloud Apps policies to block or monitor unsanctioned AI web services.',
- },
- {
- label: 'Extend DLP:',
- text: 'Cover generative AI endpoints with data loss prevention policies to stop sensitive data from being pasted into chat prompts.',
- },
- {
- label: 'Train Users:',
- text: 'Publish an acceptable AI use policy and train users on what data may never be shared with AI tools.',
- },
- {
- label: 'Review Monthly:',
- text: 'Re-run this report on a regular cadence - new AI tools appear in tenants within days of release.',
- },
- ]
-
- const detectedRows = detectedApps.slice(0, 18)
- const consentedRows = consentedApps.slice(0, 18)
-
- // Distinct sanctioned tools across both sources, with their footprint
- const sanctionedMap = {}
- for (const app of detectedApps) {
- if (app.status !== 'Sanctioned') continue
- if (!sanctionedMap[app.aiTool]) {
- sanctionedMap[app.aiTool] = {
- tool: app.aiTool,
- vendor: app.vendor,
- category: app.category,
- devices: 0,
- users: 0,
- }
- }
- sanctionedMap[app.aiTool].devices += app.deviceCount ?? 0
- }
- for (const app of consentedApps) {
- if (app.status !== 'Sanctioned') continue
- if (!sanctionedMap[app.aiTool]) {
- sanctionedMap[app.aiTool] = {
- tool: app.aiTool,
- vendor: app.vendor,
- category: app.category,
- devices: 0,
- users: 0,
- }
- }
- sanctionedMap[app.aiTool].users += app.activeUsersLast7Days ?? 0
- }
- const sanctionedToolsList = Object.values(sanctionedMap).slice(0, 18)
-
- return (
- <>
- {/* AI SUMMARY. Not "Executive Summary": these pages are appended to the executive report,
- which opens with a page of that name, so two unrelated sections carried the same
- heading. */}
- {sectionConfig.executiveSummary && (
-
-
-
- This report identifies the artificial intelligence tools discovered in the{' '}
- {tenantName || 'your organization'} environment, combining software
- inventory from managed devices (Intune) with cloud application consent data from Entra
- ID. Each tool is matched against a curated catalog of known AI services and assigned a
- risk level based on its data handling practices.
-
-
- Tools that have been explicitly approved are marked as company sanctioned and report
- the Informational risk level. Everything else represents shadow AI: tools adopted by
- employees without review or approval, whose handling of company data is unknown.
-
-
-
-
-
-
- {topTools.length > 0 && (
-
- ({
- ...tool,
- status: tool.status ?? 'Unsanctioned',
- }))}
- />
-
- )}
-
- )}
-
- {/* CHAPTER SPLITTER */}
- {sectionConfig.infographics && (
-
- of knowledge workers already{'\n'}
- use generative AI at work -{'\n'}
- most without their employer knowing
-
- }
- footerText={
- <>
- Visibility is the first step{'\n'}
- to control
-
- }
- />
- )}
-
- {/* UNDERSTANDING SHADOW AI */}
- {sectionConfig.background && (
-
-
-
- Shadow AI is the use of artificial intelligence tools by employees without the
- knowledge or approval of the organization - the AI-era equivalent of shadow IT.
- Because most AI tools are free, browser-based and immediately useful, adoption happens
- quietly and quickly: an employee pastes a customer email into a chatbot to draft a
- reply, uploads a spreadsheet for analysis, or installs an AI notetaker that joins
- every meeting.
-
-
- The goal of a shadow AI program is not zero AI usage, but zero unsanctioned usage.
- Every tool in this report should end up either approved and managed, or replaced and
- blocked. The four risk areas below explain why unmanaged usage deserves attention.
-
-
-
-
- {riskAreas.map((area) => (
-
- {area.text}
-
- ))}
-
-
- )}
-
- {/* RISK LEVELS & DISTRIBUTION */}
- {sectionConfig.riskLevels && (
-
-
-
- Detected tools are matched against a curated catalog of known AI services, each
- carrying a risk classification based on its data handling practices, account model and
- enterprise controls. Marking a tool as company sanctioned overrides its catalog risk
- with the Informational level, so the figures below reflect only unapproved use.
-
-
-
- ({
- label: item.risk,
- value: item.tools,
- colour: riskColor(item.risk),
- }))}
- />
-
-
- {[0, 2].map((start) => (
-
- {riskLevels.slice(start, start + 2).map((level) => (
-
- {level.text}
-
- ))}
-
- ))}
-
-
- )}
-
- {/* SANCTIONED TOOLS */}
- {sectionConfig.sanctionedTools && sanctionedToolsList.length > 0 && (
-
-
-
- The tools listed below are permitted in this environment. They are allowed either
- because a business justification exists for their use, or because the system
- administrator has explicitly approved these tools for deployment. Sanctioned tools
- report the Informational risk level and are excluded from the shadow AI risk figures
- in this report; they remain listed for visibility into where AI is used across the
- organization.
-
-
- Approval is not permanent: sanctioned tools should be reviewed periodically to confirm
- that the plan in use, the vendor's data handling terms and the business justification
- still hold.
-
-
-
-
-
-
- )}
-
- {/* DETECTED SOFTWARE */}
- {sectionConfig.detectedSoftware && (
-
-
-
- The following AI applications were detected in the software inventory of managed
- devices
- {detectedApps.length > detectedRows.length
- ? `, showing the top ${detectedRows.length} of ${detectedApps.length} entries`
- : ''}
- . Device counts indicate how widely each application has spread through the
- environment.
-
-
-
-
- riskColor(row.risk) },
- { header: 'Status', key: 'status', width: 2.5 },
- { header: 'Devices', key: 'deviceCount', width: 1.5 },
- ]}
- rows={detectedRows}
- />
-
-
- )}
-
- {/* ENTRA APPLICATIONS */}
- {sectionConfig.entraApplications && (
-
-
-
- The following AI services are registered as applications in the tenant, including any
- permissions users have consented to
- {consentedApps.length > consentedRows.length
- ? `, showing the top ${consentedRows.length} of ${consentedApps.length} entries`
- : ''}
- . The consent date shows when each service first gained a foothold in the environment.
-
-
-
-
- riskColor(row.risk) },
- { header: 'Status', key: 'status', width: 2.5 },
- { header: 'Users (7d)', key: 'activeUsersLast7Days', width: 2 },
- { header: 'First Consented', key: 'firstConsented', width: 2.5 },
- ]}
- rows={consentedRows.map((app) => ({
- ...app,
- firstConsented: app.firstConsentedDateTime
- ? new Date(app.firstConsentedDateTime).toLocaleDateString()
- : 'Unknown',
- }))}
- />
-
-
- )}
-
- {/* CHAPTER SPLITTER */}
- {sectionConfig.infographics && (
-
- employees shares sensitive work data
- {'\n'}
- with AI tools without approval
-
- }
- footerText={
- <>
- Sanctioned alternatives keep{'\n'}
- your data under contract
-
- }
- />
- )}
-
- {/* RECOMMENDATIONS */}
- {sectionConfig.recommendations && (
-
-
-
- A structured response to shadow AI combines approval of useful tools with controls on
- the rest. The following actions are recommended based on the findings in this report:
-
-
-
-
-
-
-
-
- The AI tool landscape changes quickly and new tools appear in tenants within days of
- release. We recommend re-running this assessment monthly and reviewing newly detected
- tools against your acceptable AI use policy.
-
-
-
- )}
-
- )
-}
-
-// Exported so the branding preview can render this report against sample data, and so tests can
-// render it to a real PDF.
-export const ShadowAIReportDocument = ({ tenantName, brandingSettings, variables, ...props }) => (
-
-
-)
-
-const sectionOptions = [
- {
- key: 'coverPage',
- label: 'Cover Page',
- description: 'Branded title page with tenant name and date',
- },
- {
- key: 'executiveSummary',
- label: 'Executive Summary',
- description: 'High-level overview, usage statistics and top tools',
- },
- {
- key: 'infographics',
- label: 'Infographic Pages',
- description: 'Statistical pages with visual elements between sections',
- },
- {
- key: 'background',
- label: 'Understanding Shadow AI',
- description: 'Explains shadow AI and its key risk areas',
- },
- {
- key: 'riskLevels',
- label: 'Risk Levels & Distribution',
- description: 'Risk methodology and distribution chart',
- },
- {
- key: 'sanctionedTools',
- label: 'Sanctioned Tools',
- description: 'Company approved AI tools and their footprint',
- },
- {
- key: 'detectedSoftware',
- label: 'AI Software (Intune)',
- description: 'AI applications found on managed devices',
- },
- {
- key: 'entraApplications',
- label: 'AI Applications (Entra)',
- description: 'AI services with consented permissions in Entra ID',
- },
- {
- key: 'recommendations',
- label: 'Recommendations',
- description: 'Action plan for managing shadow AI',
- },
-]
-
-export const ShadowAIReportButton = ({ data, tenantName, disabled }) => {
- const brandingSettings = useBrandingSettings()
- const variables = useReportVariables()
- const [previewOpen, setPreviewOpen] = useState(false)
- // Below md the 320px config rail would leave the preview about 70px wide, so it moves into
- // a drawer and the preview takes the whole dialog. Same treatment as the executive report.
- const [sectionsOpen, setSectionsOpen] = useState(false)
- const [sectionConfig, setSectionConfig] = useState({
- coverPage: true,
- executiveSummary: true,
- infographics: true,
- background: true,
- riskLevels: true,
- sanctionedTools: true,
- detectedSoftware: true,
- entraApplications: true,
- recommendations: true,
- })
-
- const handleSectionToggle = (sectionKey) => {
- setSectionConfig((prev) => {
- const enabledSections = Object.values(prev).filter(Boolean).length
- // Keep at least one section enabled
- if (prev[sectionKey] && enabledSections === 1) {
- return prev
- }
- return { ...prev, [sectionKey]: !prev[sectionKey] }
- })
- }
-
- const fileName = `Shadow_AI_Report_${String(tenantName).replace(/[^a-zA-Z0-9]/g, '_')}_${
- new Date().toISOString().split('T')[0]
- }.pdf`
-
- // One definition, two homes: the desktop rail and the mobile drawer. The drawer's own
- // header already says "Report Sections", so it takes the panel without the heading.
- const sectionPanel = ({ showHeading = true } = {}) => (
-
- {showHeading && (
-
-
- )}
-
- Configure which sections to include in your Shadow AI report. Changes are reflected in
- real-time.
-
-
-
- {sectionOptions.map((option) => (
- handleSectionToggle(option.key)}
- sx={{
- p: 1.5,
- border: '1px solid',
- borderColor: sectionConfig[option.key] ? 'primary.main' : 'divider',
- bgcolor: sectionConfig[option.key] ? 'primary.50' : 'background.paper',
- cursor: 'pointer',
- transition: 'all 0.2s ease-in-out',
- display: 'flex',
- alignItems: 'center',
- '&:hover': {
- borderColor: 'primary.main',
- bgcolor: sectionConfig[option.key] ? 'primary.100' : 'primary.25',
- },
- }}
- >
- {
- event.stopPropagation()
- handleSectionToggle(option.key)
- }}
- onClick={(event) => event.stopPropagation()}
- color="primary"
- size="small"
- disabled={
- sectionConfig[option.key] &&
- Object.values(sectionConfig).filter(Boolean).length === 1
- }
- />
-
-
- {option.label}
-
-
- {option.description}
-
-
-
- ))}
-
-
- )
-
- const reportDocument = useMemo(() => {
- if (!previewOpen) return null
- return (
-
-
-
-
-
-
-
-
- )
-}
\ No newline at end of file
diff --git a/src/components/ShadowAIReportButton.jsx b/src/components/ShadowAIReportButton.jsx
new file mode 100644
index 000000000000..2fd6e5f018aa
--- /dev/null
+++ b/src/components/ShadowAIReportButton.jsx
@@ -0,0 +1,880 @@
+import { useMemo, useState } from 'react'
+import { CippIcons } from '../utils/icon-registry'
+import {
+ Box,
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ IconButton,
+ Paper,
+ Stack,
+ SvgIcon,
+ Switch,
+ Tooltip,
+ Typography,
+} from '@mui/material'
+import { CippPdfPreview } from './CippPdf/CippPdfPreview'
+import { CippOffCanvas } from './CippComponents/CippOffCanvas'
+import { useReportVariables } from './CippPdf/useReportVariables'
+import { useBrandingSettings } from './CippPdf/useBrandingSettings'
+import {
+ Bold,
+ BulletList,
+ Columns,
+ ContentPage,
+ DataTable,
+ DonutChart,
+ HeroPage,
+ InfoBox,
+ Paragraph,
+ ReportDocument,
+ Section,
+ StatRow,
+} from './CippPdf'
+
+// Risk bands keep the semantic red-to-green scale rather than the brand series: red has to mean
+// high risk whatever colours the MSP picked.
+const RISK_COLOURS = {
+ high: '#EF4444',
+ medium: '#F59E0B',
+ low: '#3B82F6',
+ informational: '#10B981',
+}
+const riskColor = (risk) => RISK_COLOURS[String(risk).toLowerCase()] ?? '#A0AEC0'
+
+// Executive Shadow AI report. Written as a pages fragment with no theme, stylesheet or page
+// furniture of its own, which is what lets the executive report drop the same pages into its own
+// document and have them come out branded identically (see ExecutiveReportButton).
+export const ShadowAIReportPages = ({
+ tenantName,
+ data,
+ sectionConfig = {
+ executiveSummary: true,
+ infographics: true,
+ background: true,
+ riskLevels: true,
+ sanctionedTools: true,
+ detectedSoftware: true,
+ entraApplications: true,
+ recommendations: true,
+ },
+}) => {
+ const summary = data?.summary ?? {}
+ const detectedApps = data?.detectedApps ?? []
+ const consentedApps = data?.consentedApps ?? []
+ const topTools = data?.topTools ?? []
+ const byRisk = data?.byRisk ?? []
+
+ const riskAreas = [
+ {
+ title: 'Data Leakage',
+ color: '#EF4444',
+ text: 'Customer records, credentials, source code and financials pasted into consumer AI tools may be retained by the provider and used to train future models, permanently placing them outside your control. Every prompt is a data transfer to a third party.',
+ },
+ {
+ title: 'Compliance & Legal Exposure',
+ color: '#F59E0B',
+ text: 'Processing personal data through unvetted AI services can breach GDPR, HIPAA and industry-specific regulations, and undermines contractual confidentiality commitments made to customers.',
+ },
+ {
+ title: 'Excessive Application Permissions',
+ color: '#D69E2E',
+ text: 'AI meeting assistants and productivity plugins often request broad access to mailboxes, calendars and files. A single user consent can expose organization-wide data to a third-party service, and that access persists until the consent is revoked.',
+ },
+ {
+ title: 'Unreliable Output in Business Processes',
+ color: '#3B82F6',
+ text: 'AI-generated content flows into quotes, contracts and customer communication without review. Errors produced by unmanaged tools are difficult to trace because the organization does not know the tools are in use.',
+ },
+ ]
+
+ const riskLevels = [
+ {
+ name: 'High',
+ text: 'Consumer tools that train on submitted data, retain prompts indefinitely, or operate from jurisdictions without adequate data protection. Content pasted into these tools should be treated as disclosed to an unvetted third party.',
+ },
+ {
+ name: 'Medium',
+ text: 'Tools with business-grade privacy options that are typically used through personal, unmanaged accounts. Risk depends heavily on the plan and account type in use.',
+ },
+ {
+ name: 'Low',
+ text: 'Tools with enterprise controls, contractual data-processing terms and no training on customer data when configured correctly.',
+ },
+ {
+ name: 'Informational',
+ text: 'Company sanctioned tools that have been explicitly approved for use in this tenant. They remain in the report for visibility but no longer contribute to the risk figures.',
+ },
+ ]
+
+ const recommendations = [
+ {
+ label: 'Review & Decide:',
+ text: 'Evaluate each detected tool with stakeholders and decide whether it should be sanctioned, replaced with an approved alternative, or blocked.',
+ },
+ {
+ label: 'Sanction Approved Tools:',
+ text: 'Maintain a list of company sanctioned tools so future reports separate approved AI use from true shadow AI.',
+ },
+ {
+ label: 'Offer an Alternative:',
+ text: 'Provide a sanctioned option such as Microsoft 365 Copilot before blocking popular tools - blocking without an alternative drives usage to personal devices.',
+ },
+ {
+ label: 'Restrict Consent:',
+ text: 'Require admin approval for unverified applications in Entra ID so new AI services cannot access company data through user consent.',
+ },
+ {
+ label: 'Block & Monitor:',
+ text: 'Deploy Conditional Access and Defender for Cloud Apps policies to block or monitor unsanctioned AI web services.',
+ },
+ {
+ label: 'Extend DLP:',
+ text: 'Cover generative AI endpoints with data loss prevention policies to stop sensitive data from being pasted into chat prompts.',
+ },
+ {
+ label: 'Train Users:',
+ text: 'Publish an acceptable AI use policy and train users on what data may never be shared with AI tools.',
+ },
+ {
+ label: 'Review Monthly:',
+ text: 'Re-run this report on a regular cadence - new AI tools appear in tenants within days of release.',
+ },
+ ]
+
+ const detectedRows = detectedApps.slice(0, 18)
+ const consentedRows = consentedApps.slice(0, 18)
+
+ // Distinct sanctioned tools across both sources, with their footprint
+ const sanctionedMap = {}
+ for (const app of detectedApps) {
+ if (app.status !== 'Sanctioned') continue
+ if (!sanctionedMap[app.aiTool]) {
+ sanctionedMap[app.aiTool] = {
+ tool: app.aiTool,
+ vendor: app.vendor,
+ category: app.category,
+ devices: 0,
+ users: 0,
+ }
+ }
+ sanctionedMap[app.aiTool].devices += app.deviceCount ?? 0
+ }
+ for (const app of consentedApps) {
+ if (app.status !== 'Sanctioned') continue
+ if (!sanctionedMap[app.aiTool]) {
+ sanctionedMap[app.aiTool] = {
+ tool: app.aiTool,
+ vendor: app.vendor,
+ category: app.category,
+ devices: 0,
+ users: 0,
+ }
+ }
+ sanctionedMap[app.aiTool].users += app.activeUsersLast7Days ?? 0
+ }
+ const sanctionedToolsList = Object.values(sanctionedMap).slice(0, 18)
+
+ return (
+ <>
+ {/* AI SUMMARY. Not "Executive Summary": these pages are appended to the executive report,
+ which opens with a page of that name, so two unrelated sections carried the same
+ heading. */}
+ {sectionConfig.executiveSummary && (
+
+
+
+ This report identifies the artificial intelligence tools discovered in the{' '}
+ {tenantName || 'your organization'} environment, combining software
+ inventory from managed devices (Intune) with cloud application consent data from Entra
+ ID. Each tool is matched against a curated catalog of known AI services and assigned a
+ risk level based on its data handling practices.
+
+
+ Tools that have been explicitly approved are marked as company sanctioned and report
+ the Informational risk level. Everything else represents shadow AI: tools adopted by
+ employees without review or approval, whose handling of company data is unknown.
+
+
+
+
+
+
+ {topTools.length > 0 && (
+
+ ({
+ ...tool,
+ status: tool.status ?? 'Unsanctioned',
+ }))}
+ />
+
+ )}
+
+ )}
+
+ {/* CHAPTER SPLITTER */}
+ {sectionConfig.infographics && (
+
+ of knowledge workers already{'\n'}
+ use generative AI at work -{'\n'}
+ most without their employer knowing
+
+ }
+ footerText={
+ <>
+ Visibility is the first step{'\n'}
+ to control
+
+ }
+ />
+ )}
+
+ {/* UNDERSTANDING SHADOW AI */}
+ {sectionConfig.background && (
+
+
+
+ Shadow AI is the use of artificial intelligence tools by employees without the
+ knowledge or approval of the organization - the AI-era equivalent of shadow IT.
+ Because most AI tools are free, browser-based and immediately useful, adoption happens
+ quietly and quickly: an employee pastes a customer email into a chatbot to draft a
+ reply, uploads a spreadsheet for analysis, or installs an AI notetaker that joins
+ every meeting.
+
+
+ The goal of a shadow AI program is not zero AI usage, but zero unsanctioned usage.
+ Every tool in this report should end up either approved and managed, or replaced and
+ blocked. The four risk areas below explain why unmanaged usage deserves attention.
+
+
+
+
+ {riskAreas.map((area) => (
+
+ {area.text}
+
+ ))}
+
+
+ )}
+
+ {/* RISK LEVELS & DISTRIBUTION */}
+ {sectionConfig.riskLevels && (
+
+
+
+ Detected tools are matched against a curated catalog of known AI services, each
+ carrying a risk classification based on its data handling practices, account model and
+ enterprise controls. Marking a tool as company sanctioned overrides its catalog risk
+ with the Informational level, so the figures below reflect only unapproved use.
+
+
+
+ ({
+ label: item.risk,
+ value: item.tools,
+ colour: riskColor(item.risk),
+ }))}
+ />
+
+
+ {[0, 2].map((start) => (
+
+ {riskLevels.slice(start, start + 2).map((level) => (
+
+ {level.text}
+
+ ))}
+
+ ))}
+
+
+ )}
+
+ {/* SANCTIONED TOOLS */}
+ {sectionConfig.sanctionedTools && sanctionedToolsList.length > 0 && (
+
+
+
+ The tools listed below are permitted in this environment. They are allowed either
+ because a business justification exists for their use, or because the system
+ administrator has explicitly approved these tools for deployment. Sanctioned tools
+ report the Informational risk level and are excluded from the shadow AI risk figures
+ in this report; they remain listed for visibility into where AI is used across the
+ organization.
+
+
+ Approval is not permanent: sanctioned tools should be reviewed periodically to confirm
+ that the plan in use, the vendor's data handling terms and the business justification
+ still hold.
+
+
+
+
+
+
+ )}
+
+ {/* DETECTED SOFTWARE */}
+ {sectionConfig.detectedSoftware && (
+
+
+
+ The following AI applications were detected in the software inventory of managed
+ devices
+ {detectedApps.length > detectedRows.length
+ ? `, showing the top ${detectedRows.length} of ${detectedApps.length} entries`
+ : ''}
+ . Device counts indicate how widely each application has spread through the
+ environment.
+
+
+
+
+ riskColor(row.risk) },
+ { header: 'Status', key: 'status', width: 2.5 },
+ { header: 'Devices', key: 'deviceCount', width: 1.5 },
+ ]}
+ rows={detectedRows}
+ />
+
+
+ )}
+
+ {/* ENTRA APPLICATIONS */}
+ {sectionConfig.entraApplications && (
+
+
+
+ The following AI services are registered as applications in the tenant, including any
+ permissions users have consented to
+ {consentedApps.length > consentedRows.length
+ ? `, showing the top ${consentedRows.length} of ${consentedApps.length} entries`
+ : ''}
+ . The consent date shows when each service first gained a foothold in the environment.
+
+
+
+
+ riskColor(row.risk) },
+ { header: 'Status', key: 'status', width: 2.5 },
+ { header: 'Users (7d)', key: 'activeUsersLast7Days', width: 2 },
+ { header: 'First Consented', key: 'firstConsented', width: 2.5 },
+ ]}
+ rows={consentedRows.map((app) => ({
+ ...app,
+ firstConsented: app.firstConsentedDateTime
+ ? new Date(app.firstConsentedDateTime).toLocaleDateString()
+ : 'Unknown',
+ }))}
+ />
+
+
+ )}
+
+ {/* CHAPTER SPLITTER */}
+ {sectionConfig.infographics && (
+
+ employees shares sensitive work data
+ {'\n'}
+ with AI tools without approval
+
+ }
+ footerText={
+ <>
+ Sanctioned alternatives keep{'\n'}
+ your data under contract
+
+ }
+ />
+ )}
+
+ {/* RECOMMENDATIONS */}
+ {sectionConfig.recommendations && (
+
+
+
+ A structured response to shadow AI combines approval of useful tools with controls on
+ the rest. The following actions are recommended based on the findings in this report:
+
+
+
+
+
+
+
+
+ The AI tool landscape changes quickly and new tools appear in tenants within days of
+ release. We recommend re-running this assessment monthly and reviewing newly detected
+ tools against your acceptable AI use policy.
+
+
+
+ )}
+
+ )
+}
+
+// Exported so the branding preview can render this report against sample data, and so tests can
+// render it to a real PDF.
+export const ShadowAIReportDocument = ({ tenantName, brandingSettings, variables, ...props }) => (
+
+
+)
+
+const sectionOptions = [
+ {
+ key: 'coverPage',
+ label: 'Cover Page',
+ description: 'Branded title page with tenant name and date',
+ },
+ {
+ key: 'executiveSummary',
+ label: 'Executive Summary',
+ description: 'High-level overview, usage statistics and top tools',
+ },
+ {
+ key: 'infographics',
+ label: 'Infographic Pages',
+ description: 'Statistical pages with visual elements between sections',
+ },
+ {
+ key: 'background',
+ label: 'Understanding Shadow AI',
+ description: 'Explains shadow AI and its key risk areas',
+ },
+ {
+ key: 'riskLevels',
+ label: 'Risk Levels & Distribution',
+ description: 'Risk methodology and distribution chart',
+ },
+ {
+ key: 'sanctionedTools',
+ label: 'Sanctioned Tools',
+ description: 'Company approved AI tools and their footprint',
+ },
+ {
+ key: 'detectedSoftware',
+ label: 'AI Software (Intune)',
+ description: 'AI applications found on managed devices',
+ },
+ {
+ key: 'entraApplications',
+ label: 'AI Applications (Entra)',
+ description: 'AI services with consented permissions in Entra ID',
+ },
+ {
+ key: 'recommendations',
+ label: 'Recommendations',
+ description: 'Action plan for managing shadow AI',
+ },
+]
+
+export const ShadowAIReportButton = ({ data, tenantName, disabled }) => {
+ const brandingSettings = useBrandingSettings()
+ const variables = useReportVariables()
+ const [previewOpen, setPreviewOpen] = useState(false)
+ // Below md the 320px config rail would leave the preview about 70px wide, so it moves into
+ // a drawer and the preview takes the whole dialog. Same treatment as the executive report.
+ const [sectionsOpen, setSectionsOpen] = useState(false)
+ const [sectionConfig, setSectionConfig] = useState({
+ coverPage: true,
+ executiveSummary: true,
+ infographics: true,
+ background: true,
+ riskLevels: true,
+ sanctionedTools: true,
+ detectedSoftware: true,
+ entraApplications: true,
+ recommendations: true,
+ })
+
+ const handleSectionToggle = (sectionKey) => {
+ setSectionConfig((prev) => {
+ const enabledSections = Object.values(prev).filter(Boolean).length
+ // Keep at least one section enabled
+ if (prev[sectionKey] && enabledSections === 1) {
+ return prev
+ }
+ return { ...prev, [sectionKey]: !prev[sectionKey] }
+ })
+ }
+
+ const fileName = `Shadow_AI_Report_${String(tenantName).replace(/[^a-zA-Z0-9]/g, '_')}_${
+ new Date().toISOString().split('T')[0]
+ }.pdf`
+
+ // One definition, two homes: the desktop rail and the mobile drawer. The drawer's own
+ // header already says "Report Sections", so it takes the panel without the heading.
+ const sectionPanel = ({ showHeading = true } = {}) => (
+
+ {showHeading && (
+
+
+ )}
+
+ Configure which sections to include in your Shadow AI report. Changes are reflected in
+ real-time.
+
+
+
+ {sectionOptions.map((option) => (
+ handleSectionToggle(option.key)}
+ sx={{
+ p: 1.5,
+ border: '1px solid',
+ borderColor: sectionConfig[option.key] ? 'primary.main' : 'divider',
+ bgcolor: sectionConfig[option.key] ? 'primary.50' : 'background.paper',
+ cursor: 'pointer',
+ transition: 'all 0.2s ease-in-out',
+ display: 'flex',
+ alignItems: 'center',
+ '&:hover': {
+ borderColor: 'primary.main',
+ bgcolor: sectionConfig[option.key] ? 'primary.100' : 'primary.25',
+ },
+ }}
+ >
+ {
+ event.stopPropagation()
+ handleSectionToggle(option.key)
+ }}
+ onClick={(event) => event.stopPropagation()}
+ color="primary"
+ size="small"
+ disabled={
+ sectionConfig[option.key] &&
+ Object.values(sectionConfig).filter(Boolean).length === 1
+ }
+ />
+
+
+ {option.label}
+
+
+ {option.description}
+
+
+
+ ))}
+
+
+ )
+
+ const reportDocument = useMemo(() => {
+ if (!previewOpen) return null
+ return (
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/action-list-item.js b/src/components/action-list-item.jsx
similarity index 100%
rename from src/components/action-list-item.js
rename to src/components/action-list-item.jsx
diff --git a/src/components/action-list.js b/src/components/action-list.jsx
similarity index 100%
rename from src/components/action-list.js
rename to src/components/action-list.jsx
diff --git a/src/components/actions-menu.js b/src/components/actions-menu.js
deleted file mode 100644
index 19f4ec9f2d66..000000000000
--- a/src/components/actions-menu.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import ChevronDownIcon from "@heroicons/react/24/outline/ChevronDownIcon";
-import PropTypes from "prop-types";
-import { Button, ListItemText, Menu, MenuItem, SvgIcon } from "@mui/material";
-import { usePopover } from "../hooks/use-popover";
-import { useActionsDispatch } from "../hooks/use-actions-dispatch";
-
-export const ActionsMenu = (props) => {
- const { actions = [], label = "Actions", data, queryKeys, ...other } = props;
- const popover = usePopover();
- const { visibleActions, isDisabled, dispatch, dialog } = useActionsDispatch({
- actions,
- data,
- queryKeys,
- });
-
- return (
- <>
-
-
- {dialog}
-
- );
-};
-
-ActionsMenu.propTypes = {
- actions: PropTypes.array,
- label: PropTypes.string,
-};
diff --git a/src/components/actions-menu.jsx b/src/components/actions-menu.jsx
new file mode 100644
index 000000000000..be62717a7111
--- /dev/null
+++ b/src/components/actions-menu.jsx
@@ -0,0 +1,77 @@
+import PropTypes from "prop-types";
+import { CippIcons } from "../utils/icon-registry";
+import { Button, ListItemText, Menu, MenuItem, SvgIcon } from "@mui/material";
+import { usePopover } from "../hooks/use-popover";
+import { useActionsDispatch } from "../hooks/use-actions-dispatch";
+
+export const ActionsMenu = (props) => {
+ const { actions = [], label = "Actions", data, queryKeys, ...other } = props;
+ const popover = usePopover();
+ const { visibleActions, isDisabled, dispatch, dialog } = useActionsDispatch({
+ actions,
+ data,
+ queryKeys,
+ });
+
+ return (
+ <>
+
+
+ {dialog}
+
+ );
+};
+
+ActionsMenu.propTypes = {
+ actions: PropTypes.array,
+ label: PropTypes.string,
+};
diff --git a/src/components/bulk-actions-menu.js b/src/components/bulk-actions-menu.js
deleted file mode 100644
index 18f1ad5af1c0..000000000000
--- a/src/components/bulk-actions-menu.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import PropTypes from 'prop-types'
-import ChevronDownIcon from '@heroicons/react/24/outline/ChevronDownIcon'
-import { Button, Link, ListItemText, Menu, MenuItem, SvgIcon } from '@mui/material'
-import { usePopover } from '../hooks/use-popover'
-import { getIconByName } from '../utils/icon-registry'
-
-export const BulkActionsMenu = (props) => {
- const { buttonName, sx, row, actions = [], ...other } = props
- const popover = usePopover()
-
- return (
- <>
-
-
-
- )
-}
-
-BulkActionsMenu.propTypes = {
- onArchive: PropTypes.func,
- onDelete: PropTypes.func,
- selectedCount: PropTypes.number,
-}
diff --git a/src/components/bulk-actions-menu.jsx b/src/components/bulk-actions-menu.jsx
new file mode 100644
index 000000000000..646580a05e79
--- /dev/null
+++ b/src/components/bulk-actions-menu.jsx
@@ -0,0 +1,92 @@
+import PropTypes from 'prop-types'
+import { Button, Link, ListItemText, Menu, MenuItem, SvgIcon } from '@mui/material'
+import { usePopover } from '../hooks/use-popover'
+import { CippIcons, getIconByName } from '../utils/icon-registry'
+
+export const BulkActionsMenu = (props) => {
+ const { buttonName, sx, row, actions = [], ...other } = props
+ const popover = usePopover()
+
+ return (
+ <>
+
+
+
+ );
+}
+
+BulkActionsMenu.propTypes = {
+ onArchive: PropTypes.func,
+ onDelete: PropTypes.func,
+ selectedCount: PropTypes.number,
+}
diff --git a/src/components/confirmation-dialog.js b/src/components/confirmation-dialog.js
deleted file mode 100644
index 1ec98341e0a6..000000000000
--- a/src/components/confirmation-dialog.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import PropTypes from 'prop-types';
-import ExclamationCircleIcon from '@heroicons/react/24/outline/ExclamationCircleIcon';
-import ExclamationTriangleIcon from '@heroicons/react/24/outline/ExclamationTriangleIcon';
-import {
- Button,
- CircularProgress,
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
- Stack,
- SvgIcon,
- Typography
-} from '@mui/material';
-
-const iconMap = {
- error: (
-
-
- ),
- warning: (
-
-
- ),
- info: (
-
-
- )
-};
-
-export const ConfirmationDialog = (props) => {
- const {
- message = '',
- onCancel,
- onConfirm,
- open = false,
- title,
- variant = 'info',
- confirmLoading = false,
- ...other
- } = props;
-
- const icon = iconMap[variant];
-
- const handleDialogClose = (event, reason) => {
- if (confirmLoading) {
- return;
- }
- if (onCancel) {
- onCancel(event);
- }
- };
-
- return (
-
- );
-};
-
-ConfirmationDialog.propTypes = {
- message: PropTypes.string,
- onCancel: PropTypes.func,
- onConfirm: PropTypes.func,
- open: PropTypes.bool,
- title: PropTypes.string,
- variant: PropTypes.oneOf(['error', 'warning', 'info']),
- confirmLoading: PropTypes.bool
-};
diff --git a/src/components/confirmation-dialog.jsx b/src/components/confirmation-dialog.jsx
new file mode 100644
index 000000000000..ff719e2f03f8
--- /dev/null
+++ b/src/components/confirmation-dialog.jsx
@@ -0,0 +1,123 @@
+import PropTypes from 'prop-types';
+import { CippIcons } from '../utils/icon-registry';
+import {
+ Button,
+ CircularProgress,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ Stack,
+ SvgIcon,
+ Typography
+} from '@mui/material';
+
+const iconMap = {
+ error: (
+
+
+ ),
+ warning: (
+
+
+ ),
+ info: (
+
+
+ )
+};
+
+export const ConfirmationDialog = (props) => {
+ const {
+ message = '',
+ onCancel,
+ onConfirm,
+ open = false,
+ title,
+ variant = 'info',
+ confirmLoading = false,
+ ...other
+ } = props;
+
+ const icon = iconMap[variant];
+
+ const handleDialogClose = (event, reason) => {
+ if (confirmLoading) {
+ return;
+ }
+ if (onCancel) {
+ onCancel(event);
+ }
+ };
+
+ return (
+
+ );
+};
+
+ConfirmationDialog.propTypes = {
+ message: PropTypes.string,
+ onCancel: PropTypes.func,
+ onConfirm: PropTypes.func,
+ open: PropTypes.bool,
+ title: PropTypes.string,
+ variant: PropTypes.oneOf(['error', 'warning', 'info']),
+ confirmLoading: PropTypes.bool
+};
diff --git a/src/components/csvExportButton.js b/src/components/csvExportButton.js
deleted file mode 100644
index 3b619defc197..000000000000
--- a/src/components/csvExportButton.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import { BackupTableTwoTone } from '@mui/icons-material'
-import { IconButton, Tooltip } from '@mui/material'
-import { mkConfig, generateCsv, download } from 'export-to-csv'
-import { getCippFormatting } from '../utils/get-cipp-formatting'
-import { SKIP_RECURSION_KEYS } from '../utils/skip-recursion-keys'
-const csvConfig = mkConfig({
- fieldSeparator: ',',
- decimalSeparator: '.',
- useKeysAsHeaders: true,
-})
-
-// Flatten nested objects so deeply nested properties export as dotted columns.
-const flattenObject = (obj, parentKey = '') => {
- const flattened = {}
- Object.keys(obj).forEach((key) => {
- const fullKey = parentKey ? `${parentKey}.${key}` : key
- if (
- typeof obj[key] === 'object' &&
- obj[key] !== null &&
- !Array.isArray(obj[key]) &&
- !SKIP_RECURSION_KEYS.includes(key)
- ) {
- Object.assign(flattened, flattenObject(obj[key], fullKey))
- } else if (Array.isArray(obj[key]) && typeof obj[key][0] === 'string') {
- flattened[fullKey] = obj[key]
- } else if (Array.isArray(obj[key])) {
- let testFormatting = getCippFormatting(obj[key], key, 'text', false, false)
- if (typeof testFormatting === 'string' && !testFormatting.includes('[object Object]')) {
- flattened[fullKey] = testFormatting
- } else {
- flattened[fullKey] = obj[key]
- .map((item) =>
- typeof item === 'object'
- ? JSON.stringify(
- Object.fromEntries(
- Object.entries(flattenObject(item)).map(([k, v]) => [
- k,
- getCippFormatting(v, k, 'text', false),
- ])
- )
- )
- : getCippFormatting(item, fullKey, 'text', false, false)
- )
- .join(', ')
- }
- } else {
- flattened[fullKey] = obj[key]
- }
- })
- return flattened
-}
-
-// Shared helper so both toolbar buttons and bulk actions reuse identical CSV logic.
-export const exportRowsToCsv = ({
- rows = [],
- columns = [],
- reportName = 'Export',
- columnVisibility = {},
-}) => {
- if (!rows.length || !columns.length) {
- return
- }
-
- const rowData = rows.map((row) => flattenObject(row.original ?? row))
- const columnKeys = columns.filter((c) => columnVisibility[c.id]).map((c) => c.id)
-
- const filterRowData = (row, allowedKeys) => {
- const filteredRow = {}
- allowedKeys.forEach((key) => {
- filteredRow[key] = key in row ? row[key] : null
- })
- return filteredRow
- }
-
- const filteredData = rowData.map((row) => filterRowData(row, columnKeys))
-
- // Apply standard CIPP formatting so CSV values match on-screen representations.
- const formattedData = filteredData.map((row) => {
- const formattedRow = {}
- columnKeys.forEach((key) => {
- const value = row[key]
- if (typeof value === 'string') {
- formattedRow[key] = value
- return
- }
-
- formattedRow[key] = getCippFormatting(value, key, 'text', false)
- })
- return formattedRow
- })
-
- const csv = generateCsv(csvConfig)(formattedData)
- csvConfig['filename'] = `${reportName}`
- download(csvConfig)(csv)
-}
-
-export const CSVExportButton = (props) => {
- const { rows = [], columns = [], reportName, columnVisibility = {}, ...other } = props
-
- return (
-
-
- exportRowsToCsv({ rows, columns, reportName, columnVisibility })}
- {...other}
- >
-
-
-
- )
-}
diff --git a/src/components/csvExportButton.jsx b/src/components/csvExportButton.jsx
new file mode 100644
index 000000000000..408e89f75eff
--- /dev/null
+++ b/src/components/csvExportButton.jsx
@@ -0,0 +1,113 @@
+import { IconButton, Tooltip } from '@mui/material'
+import { CippIcons } from '../utils/icon-registry'
+import { mkConfig, generateCsv, download } from 'export-to-csv'
+import { getCippFormatting } from '../utils/get-cipp-formatting'
+import { SKIP_RECURSION_KEYS } from '../utils/skip-recursion-keys'
+const csvConfig = mkConfig({
+ fieldSeparator: ',',
+ decimalSeparator: '.',
+ useKeysAsHeaders: true,
+})
+
+// Flatten nested objects so deeply nested properties export as dotted columns.
+const flattenObject = (obj, parentKey = '') => {
+ const flattened = {}
+ Object.keys(obj).forEach((key) => {
+ const fullKey = parentKey ? `${parentKey}.${key}` : key
+ if (
+ typeof obj[key] === 'object' &&
+ obj[key] !== null &&
+ !Array.isArray(obj[key]) &&
+ !SKIP_RECURSION_KEYS.includes(key)
+ ) {
+ Object.assign(flattened, flattenObject(obj[key], fullKey))
+ } else if (Array.isArray(obj[key]) && typeof obj[key][0] === 'string') {
+ flattened[fullKey] = obj[key]
+ } else if (Array.isArray(obj[key])) {
+ let testFormatting = getCippFormatting(obj[key], key, 'text', false, false)
+ if (typeof testFormatting === 'string' && !testFormatting.includes('[object Object]')) {
+ flattened[fullKey] = testFormatting
+ } else {
+ flattened[fullKey] = obj[key]
+ .map((item) =>
+ typeof item === 'object'
+ ? JSON.stringify(
+ Object.fromEntries(
+ Object.entries(flattenObject(item)).map(([k, v]) => [
+ k,
+ getCippFormatting(v, k, 'text', false),
+ ])
+ )
+ )
+ : getCippFormatting(item, fullKey, 'text', false, false)
+ )
+ .join(', ')
+ }
+ } else {
+ flattened[fullKey] = obj[key]
+ }
+ })
+ return flattened
+}
+
+// Shared helper so both toolbar buttons and bulk actions reuse identical CSV logic.
+export const exportRowsToCsv = ({
+ rows = [],
+ columns = [],
+ reportName = 'Export',
+ columnVisibility = {},
+}) => {
+ if (!rows.length || !columns.length) {
+ return
+ }
+
+ const rowData = rows.map((row) => flattenObject(row.original ?? row))
+ const columnKeys = columns.filter((c) => columnVisibility[c.id]).map((c) => c.id)
+
+ const filterRowData = (row, allowedKeys) => {
+ const filteredRow = {}
+ allowedKeys.forEach((key) => {
+ filteredRow[key] = key in row ? row[key] : null
+ })
+ return filteredRow
+ }
+
+ const filteredData = rowData.map((row) => filterRowData(row, columnKeys))
+
+ // Apply standard CIPP formatting so CSV values match on-screen representations.
+ const formattedData = filteredData.map((row) => {
+ const formattedRow = {}
+ columnKeys.forEach((key) => {
+ const value = row[key]
+ if (typeof value === 'string') {
+ formattedRow[key] = value
+ return
+ }
+
+ formattedRow[key] = getCippFormatting(value, key, 'text', false)
+ })
+ return formattedRow
+ })
+
+ const csv = generateCsv(csvConfig)(formattedData)
+ csvConfig['filename'] = `${reportName}`
+ download(csvConfig)(csv)
+}
+
+export const CSVExportButton = (props) => {
+ const { rows = [], columns = [], reportName, columnVisibility = {}, ...other } = props
+
+ return (
+
+
+ exportRowsToCsv({ rows, columns, reportName, columnVisibility })}
+ {...other}
+ >
+
+
+
+ )
+}
diff --git a/src/components/file-dropzone.js b/src/components/file-dropzone.js
deleted file mode 100644
index 166f57cce23f..000000000000
--- a/src/components/file-dropzone.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import PropTypes from 'prop-types';
-import { useDropzone } from 'react-dropzone';
-import ArrowUpOnSquareIcon from '@heroicons/react/24/outline/ArrowUpOnSquareIcon';
-import { Avatar, Box, SvgIcon, Typography } from '@mui/material';
-
-export const FileDropzone = (props) => {
- const { accept, caption, maxFiles, maxSize, minSize, onDrop, sx } = props;
- const { getRootProps, getInputProps, isDragActive } = useDropzone({
- accept,
- maxFiles,
- maxSize,
- minSize,
- onDrop
- });
-
- return (
- theme.palette.mode === 'dark'
- ? 'neutral.800'
- : 'neutral.200',
- borderRadius: 1,
- borderStyle: 'dashed',
- borderWidth: 1,
- cursor: 'pointer',
- display: 'flex',
- flexDirection: 'column',
- flexWrap: 'wrap',
- justifyContent: 'center',
- outline: 'none',
- width: '100%',
- py: 2,
- ...(isDragActive && {
- borderColor: 'primary.main',
- backgroundColor: 'action.hover'
- }),
- '&:hover': {
- borderColor: 'primary.main',
- backgroundColor: 'action.hover'
- },
- ...sx
- }}
- {...getRootProps()}>
-
-
-
-
- {caption && (
-
- {caption}
-
- )}
-
-
- );
-};
-
-FileDropzone.propTypes = {
- accept: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)),
- caption: PropTypes.string,
- maxFiles: PropTypes.number,
- maxSize: PropTypes.number,
- minSize: PropTypes.number,
- onDrop: PropTypes.func,
- sx: PropTypes.object
-};
diff --git a/src/components/file-dropzone.jsx b/src/components/file-dropzone.jsx
new file mode 100644
index 000000000000..5ae36cecd275
--- /dev/null
+++ b/src/components/file-dropzone.jsx
@@ -0,0 +1,82 @@
+import PropTypes from 'prop-types';
+import { CippIcons } from '../utils/icon-registry';
+import { useDropzone } from 'react-dropzone';
+import { Avatar, Box, SvgIcon, Typography } from '@mui/material';
+
+export const FileDropzone = (props) => {
+ const { accept, caption, maxFiles, maxSize, minSize, onDrop, sx } = props;
+ const { getRootProps, getInputProps, isDragActive } = useDropzone({
+ accept,
+ maxFiles,
+ maxSize,
+ minSize,
+ onDrop
+ });
+
+ return (
+ theme.palette.mode === 'dark'
+ ? 'neutral.800'
+ : 'neutral.200',
+ borderRadius: 1,
+ borderStyle: 'dashed',
+ borderWidth: 1,
+ cursor: 'pointer',
+ display: 'flex',
+ flexDirection: 'column',
+ flexWrap: 'wrap',
+ justifyContent: 'center',
+ outline: 'none',
+ width: '100%',
+ py: 2,
+ ...(isDragActive && {
+ borderColor: 'primary.main',
+ backgroundColor: 'action.hover'
+ }),
+ '&:hover': {
+ borderColor: 'primary.main',
+ backgroundColor: 'action.hover'
+ },
+ ...sx
+ }}
+ {...getRootProps()}>
+ {/* No backgroundColor: the theme's Avatar override already picks a surface per mode,
+ and the hard-coded neutral.200 was an off-white disc on a dark card. */}
+
+
+
+
+ {caption && (
+
+ {caption}
+
+ )}
+
+
+ );
+};
+
+FileDropzone.propTypes = {
+ accept: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)),
+ caption: PropTypes.string,
+ maxFiles: PropTypes.number,
+ maxSize: PropTypes.number,
+ minSize: PropTypes.number,
+ onDrop: PropTypes.func,
+ sx: PropTypes.object
+};
diff --git a/src/components/filter-dialog-item.js b/src/components/filter-dialog-item.js
deleted file mode 100644
index 82c1ef3c71b1..000000000000
--- a/src/components/filter-dialog-item.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
-import { Button, FilledInput, MenuItem, Select, Stack, TextField, Typography } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
-
-export const FilterDialogItem = (props) => {
- const {
- disableAdd = false,
- displayAdd = false,
- filter,
- index = 0,
- onAdd,
- onOperatorChange,
- onPropertyChange,
- onRemoveFilter,
- onValueChange,
- operators = [],
- properties = []
- } = props;
-
- const property = useMemo(() => {
- return properties.find((property) => property.name === filter.property);
- }, [filter, properties]);
-
- const operator = useMemo(() => {
- return operators.find((operator) => operator.name === filter.operator);
- }, [filter, operators]);
-
- const operatorOptions = useMemo(() => {
- return (property?.operators || [])
- .map((name) => operators.find((operator) => operator.name === name))
- .filter((operator) => !!operator);
- }, [property, operators]);
-
- return (
-
-
- Where
-
-
-
-
-
-
- {operator?.field === 'date' && (
- {
- if (date) {
- onValueChange?.(index, date);
- }
- }}
- renderInput={(inputProps) => (
- onValueChange?.(index, event.target.value)}
- value={filter.value || ''}
- />
- )}
- {operator?.field === 'number' && (
- onValueChange?.(index, event.target.value)}
- value={filter.value || ''}
- />
- )}
-
-
- {displayAdd && (
-
- )}
-
-
-
- );
-};
-
-FilterDialogItem.propTypes = {
- disableAdd: PropTypes.bool,
- displayAdd: PropTypes.bool,
- filter: PropTypes.object.isRequired,
- index: PropTypes.number,
- onAdd: PropTypes.func,
- onOperatorChange: PropTypes.func,
- onPropertyChange: PropTypes.func,
- onRemoveFilter: PropTypes.func,
- onValueChange: PropTypes.func,
- operators: PropTypes.array,
- properties: PropTypes.array
-};
diff --git a/src/components/filter-dialog-item.jsx b/src/components/filter-dialog-item.jsx
new file mode 100644
index 000000000000..cc5a50caf551
--- /dev/null
+++ b/src/components/filter-dialog-item.jsx
@@ -0,0 +1,151 @@
+import { useMemo } from 'react';
+import { CippIcons } from '../utils/icon-registry';
+import PropTypes from 'prop-types';
+import { Button, FilledInput, MenuItem, Select, Stack, TextField, Typography } from '@mui/material';
+import { DatePicker } from '@mui/x-date-pickers';
+
+export const FilterDialogItem = (props) => {
+ const {
+ disableAdd = false,
+ displayAdd = false,
+ filter,
+ index = 0,
+ onAdd,
+ onOperatorChange,
+ onPropertyChange,
+ onRemoveFilter,
+ onValueChange,
+ operators = [],
+ properties = []
+ } = props;
+
+ const property = useMemo(() => {
+ return properties.find((property) => property.name === filter.property);
+ }, [filter, properties]);
+
+ const operator = useMemo(() => {
+ return operators.find((operator) => operator.name === filter.operator);
+ }, [filter, operators]);
+
+ const operatorOptions = useMemo(() => {
+ return (property?.operators || [])
+ .map((name) => operators.find((operator) => operator.name === name))
+ .filter((operator) => !!operator);
+ }, [property, operators]);
+
+ return (
+
+
+ Where
+
+
+
+
+
+
+ {operator?.field === 'date' && (
+ {
+ if (date) {
+ onValueChange?.(index, date);
+ }
+ }}
+ renderInput={(inputProps) => (
+ onValueChange?.(index, event.target.value)}
+ value={filter.value || ''}
+ />
+ )}
+ {operator?.field === 'number' && (
+ onValueChange?.(index, event.target.value)}
+ value={filter.value || ''}
+ />
+ )}
+
+
+ {displayAdd && (
+
+ )}
+
+
+
+ );
+};
+
+FilterDialogItem.propTypes = {
+ disableAdd: PropTypes.bool,
+ displayAdd: PropTypes.bool,
+ filter: PropTypes.object.isRequired,
+ index: PropTypes.number,
+ onAdd: PropTypes.func,
+ onOperatorChange: PropTypes.func,
+ onPropertyChange: PropTypes.func,
+ onRemoveFilter: PropTypes.func,
+ onValueChange: PropTypes.func,
+ operators: PropTypes.array,
+ properties: PropTypes.array
+};
diff --git a/src/components/filter-dialog.js b/src/components/filter-dialog.js
deleted file mode 100644
index 8510767fcf23..000000000000
--- a/src/components/filter-dialog.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import { useCallback } from "react";
-import PropTypes from "prop-types";
-import XMarkIcon from "@heroicons/react/24/outline/XMarkIcon";
-import {
- Button,
- Chip,
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
- Divider,
- IconButton,
- Stack,
- SvgIcon,
- Typography,
-} from "@mui/material";
-import { useFilters } from "../hooks/use-filters";
-import { FilterDialogItem } from "./filter-dialog-item";
-
-export const FilterDialog = (props) => {
- const {
- filters = [],
- onApply,
- onClear,
- onClose,
- open = false,
- operators = [],
- properties = [],
- } = props;
- const filtersController = useFilters(operators, properties, filters);
-
- const handleApply = useCallback(() => {
- if (filtersController.valid) {
- onApply?.(filtersController.filters);
- }
- }, [filtersController.filters, filtersController.valid, onApply]);
-
- const displayClear = filters.length > 0;
-
- return (
-
- );
-};
-
-FilterDialog.propTypes = {
- onApply: PropTypes.func,
- onClear: PropTypes.func,
- onClose: PropTypes.func,
- open: PropTypes.bool,
- operators: PropTypes.array,
- properties: PropTypes.array,
-};
diff --git a/src/components/filter-dialog.jsx b/src/components/filter-dialog.jsx
new file mode 100644
index 000000000000..a448b215ee0e
--- /dev/null
+++ b/src/components/filter-dialog.jsx
@@ -0,0 +1,119 @@
+import { useCallback } from "react";
+import { CippIcons } from "../utils/icon-registry";
+import PropTypes from "prop-types";
+import {
+ Button,
+ Chip,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ Divider,
+ IconButton,
+ Stack,
+ SvgIcon,
+ Typography,
+} from "@mui/material";
+import { useFilters } from "../hooks/use-filters";
+import { FilterDialogItem } from "./filter-dialog-item";
+
+export const FilterDialog = (props) => {
+ const {
+ filters = [],
+ onApply,
+ onClear,
+ onClose,
+ open = false,
+ operators = [],
+ properties = [],
+ } = props;
+ const filtersController = useFilters(operators, properties, filters);
+
+ const handleApply = useCallback(() => {
+ if (filtersController.valid) {
+ onApply?.(filtersController.filters);
+ }
+ }, [filtersController.filters, filtersController.valid, onApply]);
+
+ const displayClear = filters.length > 0;
+
+ return (
+
+ );
+};
+
+FilterDialog.propTypes = {
+ onApply: PropTypes.func,
+ onClear: PropTypes.func,
+ onClose: PropTypes.func,
+ open: PropTypes.bool,
+ operators: PropTypes.array,
+ properties: PropTypes.array,
+};
diff --git a/src/components/images-dialog.js b/src/components/images-dialog.js
deleted file mode 100644
index d17c6d1cad8f..000000000000
--- a/src/components/images-dialog.js
+++ /dev/null
@@ -1,184 +0,0 @@
-import { useState } from 'react';
-import PropTypes from 'prop-types';
-import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
-import {
- Box,
- Button,
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
- IconButton,
- Stack,
- SvgIcon,
- Typography
-} from '@mui/material';
-import { alpha } from '@mui/material/styles';
-import { FileDropzone } from './file-dropzone';
-
-export const ImagesDialog = (props) => {
- const { onClose, onSelect, open = false, ...other } = props;
- const [uploaded, setUploaded] = useState([]);
- const [selected, setSelected] = useState([]);
-
- const handleDrop = (files) => {
-
- // Here you should upload the images and get the URL back.
- // We simulate that by creating Object URLs from the file data.
-
- const images = files.map((file) => URL.createObjectURL(file));
-
- setUploaded(prevState => ([
- ...prevState,
- ...images
- ]));
-
- setSelected(prevState => ([
- ...prevState,
- ...images
- ]));
- };
-
- const handleSelectOne = (image) => {
- if (selected.includes(image)) {
- setSelected((prevState) => {
- return prevState.filter((_image) => _image !== image);
- });
- } else {
- setSelected((prevSelectedImages) => [...prevSelectedImages, image]);
- }
- };
-
- const handleDeleteOne = (image) => {
- setUploaded((prevState) => {
- return prevState.filter((_image) => _image !== image);
- });
- };
-
- const handleSelect = () => {
- onSelect?.(selected);
- setSelected([]);
- setUploaded([]);
- };
-
- return (
-
- );
-};
-
-ImagesDialog.propTypes = {
- onClose: PropTypes.func,
- onSelect: PropTypes.func,
- open: PropTypes.bool,
- selected: PropTypes.arrayOf(PropTypes.string.isRequired)
-};
diff --git a/src/components/images-dialog.jsx b/src/components/images-dialog.jsx
new file mode 100644
index 000000000000..cfa77b03a300
--- /dev/null
+++ b/src/components/images-dialog.jsx
@@ -0,0 +1,190 @@
+import { useState } from 'react';
+import { CippIcons } from '../utils/icon-registry';
+import PropTypes from 'prop-types';
+import {
+ Box,
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ IconButton,
+ Stack,
+ SvgIcon,
+ Typography
+} from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import { FileDropzone } from './file-dropzone';
+
+export const ImagesDialog = (props) => {
+ const { onClose, onSelect, open = false, ...other } = props;
+ const [uploaded, setUploaded] = useState([]);
+ const [selected, setSelected] = useState([]);
+
+ const handleDrop = (files) => {
+
+ // Here you should upload the images and get the URL back.
+ // We simulate that by creating Object URLs from the file data.
+
+ const images = files.map((file) => URL.createObjectURL(file));
+
+ setUploaded(prevState => ([
+ ...prevState,
+ ...images
+ ]));
+
+ setSelected(prevState => ([
+ ...prevState,
+ ...images
+ ]));
+ };
+
+ const handleSelectOne = (image) => {
+ if (selected.includes(image)) {
+ setSelected((prevState) => {
+ return prevState.filter((_image) => _image !== image);
+ });
+ } else {
+ setSelected((prevSelectedImages) => [...prevSelectedImages, image]);
+ }
+ };
+
+ const handleDeleteOne = (image) => {
+ setUploaded((prevState) => {
+ return prevState.filter((_image) => _image !== image);
+ });
+ };
+
+ const handleSelect = () => {
+ onSelect?.(selected);
+ setSelected([]);
+ setUploaded([]);
+ };
+
+ return (
+
+ );
+};
+
+ImagesDialog.propTypes = {
+ onClose: PropTypes.func,
+ onSelect: PropTypes.func,
+ open: PropTypes.bool,
+ selected: PropTypes.arrayOf(PropTypes.string.isRequired)
+};
diff --git a/src/components/logo.js b/src/components/logo.jsx
similarity index 100%
rename from src/components/logo.js
rename to src/components/logo.jsx
diff --git a/src/components/pagination.js b/src/components/pagination.js
deleted file mode 100644
index 1108ddc11e0a..000000000000
--- a/src/components/pagination.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import ChevronLeftIcon from '@heroicons/react/24/outline/ChevronLeftIcon';
-import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
-import { Box, IconButton, Stack, SvgIcon, Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
-
-const PaginationRoot = styled('div')((({ theme }) => ({
- alignItems: 'center',
- display: 'flex',
- padding: theme.spacing(2)
-})));
-
-export const Pagination = (props) => {
- const { disabled, onPageChange, page = 0, rowsCount = 0, rowsPerPage = 0, ...other } = props;
- const pagesCount = Math.ceil(rowsCount / rowsPerPage) || 1;
- const isFirstPage = page === 0;
- const isLastPage = (page + 1) === pagesCount;
-
- const handlePreviousPage = useCallback(() => {
- onPageChange?.(page - 1);
- }, [page, onPageChange]);
-
- const handleNextPage = useCallback(() => {
- onPageChange?.(page + 1);
- }, [page, onPageChange]);
-
- return (
-
-
-
- Page
- {' '}
-
- {page + 1}
-
- of
- {' '}
-
- {pagesCount}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-Pagination.propTypes = {
- disabled: PropTypes.bool,
- onPageChange: PropTypes.func,
- page: PropTypes.number,
- rowsCount: PropTypes.number,
- rowsPerPage: PropTypes.number
-};
diff --git a/src/components/pagination.jsx b/src/components/pagination.jsx
new file mode 100644
index 000000000000..2bf44482eca3
--- /dev/null
+++ b/src/components/pagination.jsx
@@ -0,0 +1,92 @@
+import { useCallback } from 'react';
+import { CippIcons } from '../utils/icon-registry';
+import PropTypes from 'prop-types';
+import { Box, IconButton, Stack, SvgIcon, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+const PaginationRoot = styled('div')((({ theme }) => ({
+ alignItems: 'center',
+ display: 'flex',
+ padding: theme.spacing(2)
+})));
+
+export const Pagination = (props) => {
+ const { disabled, onPageChange, page = 0, rowsCount = 0, rowsPerPage = 0, ...other } = props;
+ const pagesCount = Math.ceil(rowsCount / rowsPerPage) || 1;
+ const isFirstPage = page === 0;
+ const isLastPage = (page + 1) === pagesCount;
+
+ const handlePreviousPage = useCallback(() => {
+ onPageChange?.(page - 1);
+ }, [page, onPageChange]);
+
+ const handleNextPage = useCallback(() => {
+ onPageChange?.(page + 1);
+ }, [page, onPageChange]);
+
+ return (
+
+
+
+ Page
+ {' '}
+
+ {page + 1}
+
+ of
+ {' '}
+
+ {pagesCount}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+Pagination.propTypes = {
+ disabled: PropTypes.bool,
+ onPageChange: PropTypes.func,
+ page: PropTypes.number,
+ rowsCount: PropTypes.number,
+ rowsPerPage: PropTypes.number
+};
diff --git a/src/components/pdfExportButton.js b/src/components/pdfExportButton.js
deleted file mode 100644
index 8623af5f109a..000000000000
--- a/src/components/pdfExportButton.js
+++ /dev/null
@@ -1,184 +0,0 @@
-import { IconButton, Tooltip } from '@mui/material'
-import { PictureAsPdf } from '@mui/icons-material'
-import { getCippFormatting } from '../utils/get-cipp-formatting'
-import { SKIP_RECURSION_KEYS } from '../utils/skip-recursion-keys'
-import { useBrandingSettings } from './CippPdf/useBrandingSettings'
-
-// Flatten nested objects so deeply nested properties export properly.
-// This function only restructures data without formatting - formatting happens later in one pass.
-const flattenObject = (obj, parentKey = '') => {
- const flattened = {}
- Object.keys(obj).forEach((key) => {
- const fullKey = parentKey ? `${parentKey}.${key}` : key
- if (
- typeof obj[key] === 'object' &&
- obj[key] !== null &&
- !Array.isArray(obj[key]) &&
- !SKIP_RECURSION_KEYS.includes(key)
- ) {
- Object.assign(flattened, flattenObject(obj[key], fullKey))
- } else {
- // Store the raw value - formatting will happen in a single pass later
- flattened[fullKey] = obj[key]
- }
- })
- return flattened
-}
-
-// Shared helper so the toolbar buttons and bulk export path share the same PDF logic.
-export const exportRowsToPdf = async ({
- rows = [],
- columns = [],
- reportName = 'Export',
- columnVisibility = {},
- brandingSettings = {},
-}) => {
- if (!rows.length || !columns.length) {
- return
- }
-
- // Lazy-load jsPDF (+autotable) so ~1MB of PDF code stays out of the common bundle until an export.
- const [{ default: jsPDF }, { default: autoTable }] = await Promise.all([
- import('jspdf'),
- import('jspdf-autotable'),
- ])
-
- const unit = 'pt'
- const size = 'A3'
- const orientation = 'landscape'
- const doc = new jsPDF(orientation, unit, size)
- const tableData = rows.map((row) => flattenObject(row.original ?? row))
-
- const exportColumns = columns
- .filter((c) => columnVisibility[c.id])
- .map((c) => ({ header: c.header, dataKey: c.id }))
-
- // Use the existing formatting helper so PDF output mirrors table formatting.
- const formattedData = tableData.map((row) => {
- const formattedRow = {}
- exportColumns.forEach((col) => {
- const key = col.dataKey
- formattedRow[key] = getCippFormatting(key in row ? row[key] : null, key, 'text', false)
- })
- return formattedRow
- })
-
- let logoHeight = 0
- if (brandingSettings?.logo) {
- try {
- const logoSize = 60
- const logoX = 40
- const logoY = 30
- doc.addImage(brandingSettings.logo, 'PNG', logoX, logoY, logoSize, logoSize)
- logoHeight = logoSize + 20
- } catch (error) {
- console.warn('Failed to add logo to PDF:', error)
- }
- }
-
- const pageWidth = doc.internal.pageSize.getWidth()
- const margin = 40
- const availableWidth = pageWidth - 2 * margin
- const columnCount = exportColumns.length
-
- // Estimate column widths from content to keep tables readable regardless of dataset.
- const columnWidths = exportColumns.map((col) => {
- const headerLength = col.header.length
- const maxContentLength = Math.max(
- ...formattedData.map((row) => String(row[col.dataKey] || '').length)
- )
- const estimatedWidth = Math.max(headerLength, maxContentLength) * 6
- return Math.min(estimatedWidth, (availableWidth / columnCount) * 1.5)
- })
-
- const totalEstimatedWidth = columnWidths.reduce((sum, width) => sum + width, 0)
- const normalizedWidths = columnWidths.map(
- (width) => (width / totalEstimatedWidth) * availableWidth
- )
-
- // Honor tenant branding colors when present so exports stay on-brand.
- const getHeaderColor = () => {
- if (brandingSettings?.colour) {
- const hex = brandingSettings.colour.replace('#', '')
- const r = parseInt(hex.substr(0, 2), 16)
- const g = parseInt(hex.substr(2, 2), 16)
- const b = parseInt(hex.substr(4, 2), 16)
- return [r, g, b]
- }
- return [247, 127, 0]
- }
-
- const content = {
- startY: 100 + logoHeight,
- head: [exportColumns.map((col) => col.header)],
- body: formattedData.map((row) => exportColumns.map((col) => String(row[col.dataKey] || ''))),
- theme: 'striped',
- headStyles: {
- fillColor: getHeaderColor(),
- textColor: [255, 255, 255],
- fontStyle: 'bold',
- halign: 'center',
- valign: 'middle',
- fontSize: 10,
- cellPadding: 8,
- },
- bodyStyles: {
- fontSize: 9,
- cellPadding: 6,
- valign: 'top',
- overflow: 'linebreak',
- cellWidth: 'wrap',
- },
- columnStyles: exportColumns.reduce((styles, col, index) => {
- styles[index] = {
- cellWidth: normalizedWidths[index],
- halign: 'left',
- valign: 'top',
- }
- return styles
- }, {}),
- margin: {
- top: margin,
- right: margin,
- bottom: margin,
- left: margin,
- },
- tableWidth: 'auto',
- styles: {
- overflow: 'linebreak',
- cellWidth: 'wrap',
- fontSize: 9,
- cellPadding: 6,
- },
- }
- autoTable(doc, content)
-
- doc.save(`${reportName}.pdf`)
-}
-
-export const PDFExportButton = (props) => {
- const { rows = [], columns = [], reportName, columnVisibility = {}, ...other } = props
- const brandingSettings = useBrandingSettings()
-
- return (
-
-
-
- exportRowsToPdf({
- rows,
- columns,
- reportName,
- columnVisibility,
- brandingSettings,
- })
- }
- {...other}
- >
-
-
-
- )
-}
diff --git a/src/components/pdfExportButton.jsx b/src/components/pdfExportButton.jsx
new file mode 100644
index 000000000000..cb1aae15e56d
--- /dev/null
+++ b/src/components/pdfExportButton.jsx
@@ -0,0 +1,220 @@
+import { IconButton, Tooltip } from '@mui/material'
+import { CippIcons } from '../utils/icon-registry'
+import { useQueryClient } from '@tanstack/react-query'
+import { getCippFormatting } from '../utils/get-cipp-formatting'
+import { SKIP_RECURSION_KEYS } from '../utils/skip-recursion-keys'
+import { fetchBrandingSettings } from './CippPdf/useBrandingSettings'
+
+// Match branding preview maxWidth and sit close to report headerLogo height (30pt).
+const MAX_LOGO_WIDTH = 140
+const MAX_LOGO_HEIGHT = 36
+const LOGO_PADDING = 12
+
+const JSPDF_FORMAT_BY_MIME = {
+ 'image/png': 'PNG',
+ 'image/jpeg': 'JPEG',
+ 'image/jpg': 'JPEG',
+ 'image/webp': 'WEBP',
+}
+
+/**
+ * jsPDF format from a data URL. SVG and anything else return null so the export
+ * continues without a logo rather than forcing a PNG decode.
+ */
+export const detectJsPdfImageFormat = (dataUrl) => {
+ if (typeof dataUrl !== 'string') return null
+ const match = dataUrl.match(/^data:(image\/[a-zA-Z0-9.+-]+);/i)
+ if (!match) return null
+ return JSPDF_FORMAT_BY_MIME[match[1].toLowerCase()] ?? null
+}
+
+/** Scale intrinsic size into a contain box without upscaling. */
+export const fitLogoDimensions = (natW, natH, { maxWidth = MAX_LOGO_WIDTH, maxHeight = MAX_LOGO_HEIGHT } = {}) => {
+ if (!natW || !natH || natW <= 0 || natH <= 0) return null
+ const scale = Math.min(maxWidth / natW, maxHeight / natH, 1)
+ return { width: natW * scale, height: natH * scale }
+}
+
+// Flatten nested objects so deeply nested properties export properly.
+// This function only restructures data without formatting - formatting happens later in one pass.
+const flattenObject = (obj, parentKey = '') => {
+ const flattened = {}
+ Object.keys(obj).forEach((key) => {
+ const fullKey = parentKey ? `${parentKey}.${key}` : key
+ if (
+ typeof obj[key] === 'object' &&
+ obj[key] !== null &&
+ !Array.isArray(obj[key]) &&
+ !SKIP_RECURSION_KEYS.includes(key)
+ ) {
+ Object.assign(flattened, flattenObject(obj[key], fullKey))
+ } else {
+ // Store the raw value - formatting will happen in a single pass later
+ flattened[fullKey] = obj[key]
+ }
+ })
+ return flattened
+}
+
+// Shared helper so the toolbar buttons and bulk export path share the same PDF logic.
+export const exportRowsToPdf = async ({
+ rows = [],
+ columns = [],
+ reportName = 'Export',
+ columnVisibility = {},
+ brandingSettings = {},
+}) => {
+ if (!rows.length || !columns.length) {
+ return
+ }
+
+ // Lazy-load jsPDF (+autotable) so ~1MB of PDF code stays out of the common bundle until an export.
+ const [{ default: jsPDF }, { default: autoTable }] = await Promise.all([
+ import('jspdf'),
+ import('jspdf-autotable'),
+ ])
+
+ const unit = 'pt'
+ const size = 'A3'
+ const orientation = 'landscape'
+ const doc = new jsPDF(orientation, unit, size)
+ const tableData = rows.map((row) => flattenObject(row.original ?? row))
+
+ const exportColumns = columns
+ .filter((c) => columnVisibility[c.id])
+ .map((c) => ({ header: c.header, dataKey: c.id }))
+
+ // Use the existing formatting helper so PDF output mirrors table formatting.
+ const formattedData = tableData.map((row) => {
+ const formattedRow = {}
+ exportColumns.forEach((col) => {
+ const key = col.dataKey
+ formattedRow[key] = getCippFormatting(key in row ? row[key] : null, key, 'text', false)
+ })
+ return formattedRow
+ })
+
+ let logoHeight = 0
+ const logo = brandingSettings?.logo
+ const logoFormat = detectJsPdfImageFormat(logo)
+ if (logo && logoFormat) {
+ try {
+ const { width: natW, height: natH } = doc.getImageProperties(logo)
+ const fitted = fitLogoDimensions(natW, natH)
+ if (fitted) {
+ const logoX = 40
+ const logoY = 30
+ doc.addImage(logo, logoFormat, logoX, logoY, fitted.width, fitted.height)
+ logoHeight = fitted.height + LOGO_PADDING
+ }
+ } catch (error) {
+ console.warn('Failed to add logo to PDF:', error)
+ }
+ }
+
+ const pageWidth = doc.internal.pageSize.getWidth()
+ const margin = 40
+ const availableWidth = pageWidth - 2 * margin
+ const columnCount = exportColumns.length
+
+ // Estimate column widths from content to keep tables readable regardless of dataset.
+ const columnWidths = exportColumns.map((col) => {
+ const headerLength = col.header.length
+ const maxContentLength = Math.max(
+ ...formattedData.map((row) => String(row[col.dataKey] || '').length)
+ )
+ const estimatedWidth = Math.max(headerLength, maxContentLength) * 6
+ return Math.min(estimatedWidth, (availableWidth / columnCount) * 1.5)
+ })
+
+ const totalEstimatedWidth = columnWidths.reduce((sum, width) => sum + width, 0)
+ const normalizedWidths = columnWidths.map(
+ (width) => (width / totalEstimatedWidth) * availableWidth
+ )
+
+ // Honor tenant branding colors when present so exports stay on-brand.
+ const getHeaderColor = () => {
+ if (brandingSettings?.colour) {
+ const hex = brandingSettings.colour.replace('#', '')
+ const r = parseInt(hex.substr(0, 2), 16)
+ const g = parseInt(hex.substr(2, 2), 16)
+ const b = parseInt(hex.substr(4, 2), 16)
+ return [r, g, b]
+ }
+ return [247, 127, 0]
+ }
+
+ const content = {
+ startY: 100 + logoHeight,
+ head: [exportColumns.map((col) => col.header)],
+ body: formattedData.map((row) => exportColumns.map((col) => String(row[col.dataKey] || ''))),
+ theme: 'striped',
+ headStyles: {
+ fillColor: getHeaderColor(),
+ textColor: [255, 255, 255],
+ fontStyle: 'bold',
+ halign: 'center',
+ valign: 'middle',
+ fontSize: 10,
+ cellPadding: 8,
+ },
+ bodyStyles: {
+ fontSize: 9,
+ cellPadding: 6,
+ valign: 'top',
+ overflow: 'linebreak',
+ cellWidth: 'wrap',
+ },
+ columnStyles: exportColumns.reduce((styles, col, index) => {
+ styles[index] = {
+ cellWidth: normalizedWidths[index],
+ halign: 'left',
+ valign: 'top',
+ }
+ return styles
+ }, {}),
+ margin: {
+ top: margin,
+ right: margin,
+ bottom: margin,
+ left: margin,
+ },
+ tableWidth: 'auto',
+ styles: {
+ overflow: 'linebreak',
+ cellWidth: 'wrap',
+ fontSize: 9,
+ cellPadding: 6,
+ },
+ }
+ autoTable(doc, content)
+
+ doc.save(`${reportName}.pdf`)
+}
+
+export const PDFExportButton = (props) => {
+ const { rows = [], columns = [], reportName, columnVisibility = {}, ...other } = props
+ const queryClient = useQueryClient()
+
+ return (
+
+
+
+ exportRowsToPdf({
+ rows,
+ columns,
+ reportName,
+ columnVisibility,
+ brandingSettings: await fetchBrandingSettings(queryClient),
+ })
+ }
+ {...other}
+ >
+
+
+
+ )
+}
diff --git a/src/components/property-list-item.js b/src/components/property-list-item.js
deleted file mode 100644
index 4249e975cef0..000000000000
--- a/src/components/property-list-item.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Box, Button, ListItem, ListItemText, Typography } from "@mui/material";
-import { useState } from "react";
-import { CippCopyToClipBoard } from "./CippComponents/CippCopyToClipboard";
-
-export const PropertyListItem = (props) => {
- const {
- align = "vertical",
- children,
- component,
- label,
- value = "",
- type,
- copyItems,
- sx = {
- px: 3,
- py: 1.5,
- },
- ...other
- } = props;
- const [showPassword, setShowPassword] = useState(false);
- return (
-
-
- {label}
-
- }
- secondary={
-
- {children || (
-
- {type !== "password" &&
- (value === true ? "Yes" : value === false || value === null ? "No" : value)}
- {type === "password" && (
- <>
- {showPassword ? (
- value
- ) : (
-
- )}
-
- )}
- {copyItems &&
- )}
-
- }
- sx={{
- alignItems: "flex-start",
- flexDirection: align === "vertical" ? "column" : "row",
- my: 0,
- width: "100%",
- }}
- />
-
- );
-};
diff --git a/src/components/property-list-item.jsx b/src/components/property-list-item.jsx
new file mode 100644
index 000000000000..94d3aba9e011
--- /dev/null
+++ b/src/components/property-list-item.jsx
@@ -0,0 +1,66 @@
+import { Box, Button, ListItem, ListItemText, Typography } from "@mui/material";
+import { useState } from "react";
+import { CippCopyToClipBoard } from "./CippComponents/CippCopyToClipboard";
+
+export const PropertyListItem = (props) => {
+ const {
+ align = "vertical",
+ children,
+ component,
+ label,
+ value = "",
+ type,
+ copyItems,
+ sx = {
+ px: 3,
+ py: 1.5,
+ },
+ ...other
+ } = props;
+ const [showPassword, setShowPassword] = useState(false);
+ return (
+
+
+ {label}
+
+ }
+ secondary={
+
+ {children || (
+
+ {type !== "password" &&
+ (value === true ? "Yes" : value === false || value === null ? "No" : value)}
+ {type === "password" && (
+ <>
+ {showPassword ? (
+ value
+ ) : (
+
+ )}
+
+ )}
+ {copyItems &&
+ )}
+
+ }
+ sx={{
+ alignItems: "flex-start",
+ flexDirection: align === "vertical" ? "column" : "row",
+ my: 0,
+ width: "100%",
+ }}
+ />
+
+ );
+};
diff --git a/src/components/property-list.js b/src/components/property-list.jsx
similarity index 100%
rename from src/components/property-list.js
rename to src/components/property-list.jsx
diff --git a/src/components/query-field.js b/src/components/query-field.js
deleted file mode 100644
index dfeb6f37e1a4..000000000000
--- a/src/components/query-field.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon';
-import { InputBase, SvgIcon } from '@mui/material';
-import { styled } from '@mui/material/styles';
-
-const QueryFieldRoot = styled('div')((({ theme }) => ({
- alignItems: 'center',
- backgroundColor: 'background.paper',
- border: `1px solid ${theme.palette.divider}`,
- borderRadius: theme.shape.borderRadius,
- display: 'flex',
- height: 42,
- padding: '0 16px'
-})));
-
-export const QueryField = (props) => {
- const { disabled, onChange, placeholder, value: initialValue = '', ...other } = props;
- const [autoFocus, setAutoFocus] = useState(false);
- const inputRef = useRef(null);
- const [value, setValue] = useState('');
-
- useEffect(() => {
- setValue(initialValue);
- }, [initialValue]);
-
- useEffect(() => {
- if (!disabled && autoFocus && inputRef?.current) {
- inputRef.current.focus();
- }
- },
- [disabled]);
-
- const handleChange = useCallback((event) => {
- setValue(event.target.value);
- }, []);
-
- const handleKeyup = useCallback((event) => {
- if (event.code === 'Enter') {
- onChange?.(value);
- }
- }, [value, onChange]);
-
- const handleFocus = useCallback(() => {
- setAutoFocus(true);
- }, []);
-
- const handleBlur = useCallback((event) => {
- /*
- There is a situation where an input goes from not disabled to disabled and DOM emits a blur
- event, with event as undefined. This means, that sometimes we'll receive an React Synthetic
- event and sometimes undefined because when DOM triggers the event, React is unaware of it,
- or it simply does not emit the event. To bypass this behaviour, we store a local variable
- that acts as autofocus.
- */
-
- if (event) {
- setAutoFocus(false);
- }
- }, []);
-
- return (
-
-
-
-
- );
-};
-
-QueryField.propTypes = {
- disabled: PropTypes.bool,
- onChange: PropTypes.func,
- placeholder: PropTypes.string,
- value: PropTypes.string
-};
diff --git a/src/components/query-field.jsx b/src/components/query-field.jsx
new file mode 100644
index 000000000000..6e8b93bd8733
--- /dev/null
+++ b/src/components/query-field.jsx
@@ -0,0 +1,90 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { CippIcons } from '../utils/icon-registry';
+import PropTypes from 'prop-types';
+import { InputBase, SvgIcon } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+const QueryFieldRoot = styled('div')((({ theme }) => ({
+ alignItems: 'center',
+ backgroundColor: 'background.paper',
+ border: `1px solid ${theme.palette.divider}`,
+ borderRadius: theme.shape.borderRadius,
+ display: 'flex',
+ height: 42,
+ padding: '0 16px'
+})));
+
+export const QueryField = (props) => {
+ const { disabled, onChange, placeholder, value: initialValue = '', ...other } = props;
+ const [autoFocus, setAutoFocus] = useState(false);
+ const inputRef = useRef(null);
+ const [value, setValue] = useState('');
+
+ useEffect(() => {
+ setValue(initialValue);
+ }, [initialValue]);
+
+ useEffect(() => {
+ if (!disabled && autoFocus && inputRef?.current) {
+ inputRef.current.focus();
+ }
+ },
+ [disabled]);
+
+ const handleChange = useCallback((event) => {
+ setValue(event.target.value);
+ }, []);
+
+ const handleKeyup = useCallback((event) => {
+ if (event.code === 'Enter') {
+ onChange?.(value);
+ }
+ }, [value, onChange]);
+
+ const handleFocus = useCallback(() => {
+ setAutoFocus(true);
+ }, []);
+
+ const handleBlur = useCallback((event) => {
+ /*
+ There is a situation where an input goes from not disabled to disabled and DOM emits a blur
+ event, with event as undefined. This means, that sometimes we'll receive an React Synthetic
+ event and sometimes undefined because when DOM triggers the event, React is unaware of it,
+ or it simply does not emit the event. To bypass this behaviour, we store a local variable
+ that acts as autofocus.
+ */
+
+ if (event) {
+ setAutoFocus(false);
+ }
+ }, []);
+
+ return (
+
+
+
+
+ );
+};
+
+QueryField.propTypes = {
+ disabled: PropTypes.bool,
+ onChange: PropTypes.func,
+ placeholder: PropTypes.string,
+ value: PropTypes.string
+};
diff --git a/src/components/quill-editor.js b/src/components/quill-editor.js
deleted file mode 100644
index cec7ba1c3de0..000000000000
--- a/src/components/quill-editor.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import 'react-quill/dist/quill.snow.css';
-import { useRef } from 'react';
-import dynamic from 'next/dynamic';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-
-const Quill = dynamic(() => import('react-quill'), {
- ssr: false,
- loading: () => null
-});
-
-const QuillEditorRoot = styled('div')(({ theme }) => ({
- border: 1,
- borderColor: theme.palette.divider,
- borderRadius: theme.shape.borderRadius,
- borderStyle: 'solid',
- display: 'flex',
- flexDirection: 'column',
- overflow: 'hidden',
- '& .quill': {
- display: 'flex',
- flex: 1,
- flexDirection: 'column',
- overflow: 'hidden'
- },
- '& .ql-snow.ql-toolbar': {
- borderColor: theme.palette.divider,
- borderLeft: 'none',
- borderRight: 'none',
- borderTop: 'none',
- '& .ql-picker-label:hover': {
- color: theme.palette.primary.main
- },
- '& .ql-picker-label.ql-active': {
- color: theme.palette.primary.main
- },
- '& .ql-picker-item:hover': {
- color: theme.palette.primary.main
- },
- '& .ql-picker-item.ql-selected': {
- color: theme.palette.primary.main
- },
- '& button:hover': {
- color: theme.palette.primary.main,
- '& .ql-stroke': {
- stroke: theme.palette.primary.main
- }
- },
- '& button:focus': {
- color: theme.palette.primary.main,
- '& .ql-stroke': {
- stroke: theme.palette.primary.main
- }
- },
- '& button.ql-active': {
- '& .ql-stroke': {
- stroke: theme.palette.primary.main
- }
- },
- '& .ql-stroke': {
- stroke: theme.palette.text.primary
- },
- '& .ql-picker': {
- color: theme.palette.text.primary
- },
- '& .ql-picker-options': {
- backgroundColor: theme.palette.background.paper,
- border: 'none',
- borderRadius: theme.shape.borderRadius,
- boxShadow: theme.shadows[10],
- padding: theme.spacing(2)
- }
- },
- '& .ql-snow.ql-container': {
- borderBottom: 'none',
- borderColor: theme.palette.divider,
- borderLeft: 'none',
- borderRight: 'none',
- display: 'flex',
- flex: 1,
- flexDirection: 'column',
- height: 'auto',
- overflow: 'hidden',
- '& .ql-editor': {
- color: theme.palette.text.primary,
- flex: 1,
- fontFamily: theme.typography.body1.fontFamily,
- fontSize: theme.typography.body1.fontSize,
- height: 'auto',
- overflowY: 'auto',
- padding: theme.spacing(2),
- '&.ql-blank::before': {
- color: theme.palette.text.secondary,
- fontStyle: 'normal',
- left: theme.spacing(2)
- }
- }
- }
-}));
-
-export const QuillEditor = (props) => {
- const { sx, onChange, placeholder, value, ...other } = props;
- const ref = useRef(null);
-
- return (
-
-
- );
-};
-
-QuillEditor.propTypes = {
- onChange: PropTypes.func,
- placeholder: PropTypes.string,
- sx: PropTypes.object,
- value: PropTypes.string
-};
diff --git a/src/components/resource-error.js b/src/components/resource-error.js
deleted file mode 100644
index 6438b9d98eb9..000000000000
--- a/src/components/resource-error.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import PropTypes from "prop-types";
-import ArrowPathIcon from "@heroicons/react/24/outline/ArrowPathIcon";
-import ExclamationTriangleIcon from "@heroicons/react/24/outline/ExclamationTriangleIcon";
-import { Button, SvgIcon, Typography } from "@mui/material";
-import { styled } from "@mui/material/styles";
-
-const ResourceErrorRoot = styled("div")(({ theme }) => ({
- alignItems: "center",
- backgroundColor:
- theme.palette.mode === "dark" ? theme.palette.neutral[900] : theme.palette.neutral[50],
- display: "flex",
- flexDirection: "column",
- justifyContent: "center",
- padding: theme.spacing(3),
-}));
-
-export const ResourceError = (props) => {
- const { message = "Something went wrong, please try again.", onReload, sx } = props;
-
- return (
-
-
-
-
- {message}
-
- {onReload && (
-
- )}
-
- );
-};
-
-ResourceError.propTypes = {
- message: PropTypes.string,
- onReload: PropTypes.func,
- sx: PropTypes.object,
-};
diff --git a/src/components/resource-error.jsx b/src/components/resource-error.jsx
new file mode 100644
index 000000000000..a6a9364918a4
--- /dev/null
+++ b/src/components/resource-error.jsx
@@ -0,0 +1,54 @@
+import PropTypes from "prop-types";
+import { CippIcons } from "../utils/icon-registry";
+import { Button, SvgIcon, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
+
+const ResourceErrorRoot = styled("div")(({ theme }) => ({
+ alignItems: "center",
+ backgroundColor:
+ theme.palette.mode === "dark" ? theme.palette.neutral[900] : theme.palette.neutral[50],
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ padding: theme.spacing(3),
+}));
+
+export const ResourceError = (props) => {
+ const { message = "Something went wrong, please try again.", onReload, sx } = props;
+
+ return (
+
+
+
+
+ {message}
+
+ {onReload && (
+
+ )}
+
+ );
+};
+
+ResourceError.propTypes = {
+ message: PropTypes.string,
+ onReload: PropTypes.func,
+ sx: PropTypes.object,
+};
diff --git a/src/components/resource-loading.js b/src/components/resource-loading.js
deleted file mode 100644
index d80a6b09452a..000000000000
--- a/src/components/resource-loading.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import PropTypes from "prop-types";
-import { CircularProgress, Typography } from "@mui/material";
-import { styled } from "@mui/material/styles";
-
-const ResourceLoadingRoot = styled("div")(({ theme }) => ({
- alignItems: "center",
- backgroundColor:
- theme.palette.mode === "dark" ? theme.palette.neutral[900] : theme.palette.neutral[50],
- display: "flex",
- flexDirection: "column",
- justifyContent: "center",
- padding: theme.spacing(3),
-}));
-
-export const ResourceLoading = (props) => {
- const { message, sx } = props;
-
- return (
-
-
- {message}
-
- )}
-
- );
-};
-
-ResourceLoading.propTypes = {
- message: PropTypes.string,
- sx: PropTypes.object,
-};
diff --git a/src/components/resource-loading.jsx b/src/components/resource-loading.jsx
new file mode 100644
index 000000000000..9284a2283eea
--- /dev/null
+++ b/src/components/resource-loading.jsx
@@ -0,0 +1,38 @@
+import PropTypes from "prop-types";
+import { CircularProgress, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
+
+const ResourceLoadingRoot = styled("div")(({ theme }) => ({
+ alignItems: "center",
+ backgroundColor:
+ theme.palette.mode === "dark" ? theme.palette.neutral[900] : theme.palette.neutral[50],
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ padding: theme.spacing(3),
+}));
+
+export const ResourceLoading = (props) => {
+ const { message, sx } = props;
+
+ return (
+
+
+ {message}
+
+ )}
+
+ );
+};
+
+ResourceLoading.propTypes = {
+ message: PropTypes.string,
+ sx: PropTypes.object,
+};
diff --git a/src/components/resource-unavailable.js b/src/components/resource-unavailable.js
deleted file mode 100644
index cc5e22c0b8f2..000000000000
--- a/src/components/resource-unavailable.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import PropTypes from "prop-types";
-import PlusIcon from "@heroicons/react/24/outline/PlusIcon";
-import { Box, Button, SvgIcon, Typography } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import { useTheme } from "@emotion/react";
-
-const ResourceUnavailableRoot = styled("div")(({ theme }) => ({
- alignItems: "center",
- backgroundColor:
- theme.palette.mode === "dark" ? theme.palette.neutral[900] : theme.palette.neutral[50],
- display: "flex",
- flexDirection: "column",
- justifyContent: "center",
- padding: theme.spacing(3),
-}));
-
-export const ResourceUnavailable = (props) => {
- const { message = "", onCreate, createButtonText, sx, type, target } = props;
- const theme = useTheme();
-
- return (
-
-
- 
-
- {message && (
-
- {message}
-
- )}
- {onCreate && (
-
- )}
-
- );
-};
-
-ResourceUnavailable.propTypes = {
- message: PropTypes.string,
- onCreate: PropTypes.func,
- sx: PropTypes.object,
-};
diff --git a/src/components/resource-unavailable.jsx b/src/components/resource-unavailable.jsx
new file mode 100644
index 000000000000..fde923f7f829
--- /dev/null
+++ b/src/components/resource-unavailable.jsx
@@ -0,0 +1,69 @@
+import PropTypes from "prop-types";
+import { CippIcons } from "../utils/icon-registry";
+import { Box, Button, SvgIcon, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { useTheme } from "@emotion/react";
+
+const ResourceUnavailableRoot = styled("div")(({ theme }) => ({
+ alignItems: "center",
+ backgroundColor:
+ theme.palette.mode === "dark" ? theme.palette.neutral[900] : theme.palette.neutral[50],
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ padding: theme.spacing(3),
+}));
+
+export const ResourceUnavailable = (props) => {
+ const { message = "", onCreate, createButtonText, sx, type, target } = props;
+ const theme = useTheme();
+
+ return (
+
+
+
+
+ {message && (
+
+ {message}
+
+ )}
+ {onCreate && (
+
+ )}
+
+ );
+};
+
+ResourceUnavailable.propTypes = {
+ message: PropTypes.string,
+ onCreate: PropTypes.func,
+ sx: PropTypes.object,
+};
diff --git a/src/components/rtl.js b/src/components/rtl.jsx
similarity index 100%
rename from src/components/rtl.js
rename to src/components/rtl.jsx
diff --git a/src/components/toaster.js b/src/components/toaster.js
deleted file mode 100644
index 933adf625de1..000000000000
--- a/src/components/toaster.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { CloseSharp } from "@mui/icons-material";
-import { Alert, IconButton, Snackbar } from "@mui/material";
-import { useSelector } from "react-redux";
-import { useDispatch } from "react-redux";
-import { closeToast } from "../store/toasts";
-
-const Toasts = () => {
- const dispatch = useDispatch();
- const toasts = useSelector((state) => state.toasts.toasts);
-
- return (
- <>
- {[
- toasts.map((toast) => (
- dispatch(closeToast({ index: toast.index }))}
- action={
- <>
- dispatch(closeToast({ index: toast.index }))}
- >
-
-
- }
- >
- dispatch(closeToast({ index: toast.index }))}
- severity="error"
- variant="filled"
- sx={{ width: "100%" }}
- >
- {toast.toastError.status} - {toast.message}
-
-
- )),
- ]}
-
- );
-};
-
-export default Toasts;
diff --git a/src/components/toaster.jsx b/src/components/toaster.jsx
new file mode 100644
index 000000000000..a2abbc609daa
--- /dev/null
+++ b/src/components/toaster.jsx
@@ -0,0 +1,50 @@
+import { Alert, IconButton, Snackbar } from "@mui/material";
+import { CippIcons } from "../utils/icon-registry";
+import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
+import { closeToast } from "../store/toasts";
+
+const Toasts = () => {
+ const dispatch = useDispatch();
+ const toasts = useSelector((state) => state.toasts.toasts);
+
+ return (
+ <>
+ {[
+ toasts.map((toast) => (
+ dispatch(closeToast({ index: toast.index }))}
+ action={
+ <>
+ dispatch(closeToast({ index: toast.index }))}
+ >
+
+
+ }
+ >
+ dispatch(closeToast({ index: toast.index }))}
+ severity="error"
+ variant="filled"
+ sx={{ width: "100%" }}
+ >
+ {toast.toastError.status} - {toast.message}
+
+
+ )),
+ ]}
+
+ );
+};
+
+export default Toasts;
diff --git a/src/components/widget-previewer.js b/src/components/widget-previewer.js
deleted file mode 100644
index 396fa976f765..000000000000
--- a/src/components/widget-previewer.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import PropTypes from 'prop-types';
-import { Card, Stack, Typography } from '@mui/material';
-
-export const WidgetPreviewer = (props) => {
- const { title, description, children, ...other } = props;
-
- return (
-
-
- {typeof title === 'string'
- ? (
-
- {title}
-
- )
- : title}
- {typeof description === 'string'
- ? (
-
- {description}
-
- )
- : description}
-
-
- {children}
-
-
- );
-};
-
-WidgetPreviewer.propTypes = {
- children: PropTypes.node.isRequired,
- description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
- title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
-};
diff --git a/src/components/widget-previewer.jsx b/src/components/widget-previewer.jsx
new file mode 100644
index 000000000000..dd7e0d041a28
--- /dev/null
+++ b/src/components/widget-previewer.jsx
@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import { Card, Stack, Typography } from '@mui/material';
+
+export const WidgetPreviewer = (props) => {
+ const { title, description, children, ...other } = props;
+
+ return (
+
+
+ {typeof title === 'string'
+ ? (
+
+ {title}
+
+ )
+ : title}
+ {typeof description === 'string'
+ ? (
+
+ {description}
+
+ )
+ : description}
+
+
+ {children}
+
+
+ );
+};
+
+WidgetPreviewer.propTypes = {
+ children: PropTypes.node.isRequired,
+ description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+ title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+};
diff --git a/src/contexts/release-notes-context.js b/src/contexts/release-notes-context.jsx
similarity index 100%
rename from src/contexts/release-notes-context.js
rename to src/contexts/release-notes-context.jsx
diff --git a/src/contexts/settings-context.js b/src/contexts/settings-context.jsx
similarity index 100%
rename from src/contexts/settings-context.js
rename to src/contexts/settings-context.jsx
diff --git a/src/contexts/tutorial-context.js b/src/contexts/tutorial-context.jsx
similarity index 100%
rename from src/contexts/tutorial-context.js
rename to src/contexts/tutorial-context.jsx
diff --git a/src/data/AuditLogSchema.json b/src/data/AuditLogSchema.json
index 93122adbc4cf..1c0fcef5a6c6 100644
--- a/src/data/AuditLogSchema.json
+++ b/src/data/AuditLogSchema.json
@@ -317,6 +317,42 @@
{
"value": "Update StsRefreshTokenValidFrom Timestamp.",
"label": "Update StsRefreshTokenValidFrom Timestamp."
+ },
+ {
+ "value": "Add member to role in PIM completed (permanent)",
+ "label": "added a permanent role member in PIM"
+ },
+ {
+ "value": "Add member to role in PIM completed (timebound)",
+ "label": "added a time-bound role member in PIM"
+ },
+ {
+ "value": "Add eligible member to role in PIM completed (permanent)",
+ "label": "added a permanent eligible role member in PIM"
+ },
+ {
+ "value": "Add eligible member to role in PIM completed (timebound)",
+ "label": "added a time-bound eligible role member in PIM"
+ },
+ {
+ "value": "Add member to role completed (PIM activation)",
+ "label": "activated a role in PIM"
+ },
+ {
+ "value": "Remove member from role completed (PIM activation expired)",
+ "label": "PIM role activation expired"
+ },
+ {
+ "value": "Remove member from role in PIM completed (permanent)",
+ "label": "removed a permanent role member in PIM"
+ },
+ {
+ "value": "Remove eligible member from role in PIM completed (permanent)",
+ "label": "removed a permanent eligible role member in PIM"
+ },
+ {
+ "value": "Update role setting in PIM",
+ "label": "updated a PIM role setting"
}
],
"List:LogonType": [
diff --git a/src/data/AuditLogTemplates.json b/src/data/AuditLogTemplates.json
index 3999de345b0f..dafc72bdb839 100644
--- a/src/data/AuditLogTemplates.json
+++ b/src/data/AuditLogTemplates.json
@@ -493,5 +493,92 @@
}
]
}
+ },
+ {
+ "value": "PIMPermanentAssignmentAdded",
+ "name": "A permanent role assignment was added in PIM (no end date)",
+ "template": {
+ "preset": {
+ "value": "PIMPermanentAssignmentAdded",
+ "label": "A permanent role assignment was added in PIM (no end date)"
+ },
+ "logbook": {
+ "value": "Audit.AzureActiveDirectory",
+ "label": "Azure AD"
+ },
+ "conditions": [
+ {
+ "Property": {
+ "value": "String",
+ "label": "Operation"
+ },
+ "Operator": {
+ "value": "like",
+ "label": "Like"
+ },
+ "Input": {
+ "value": "*role in PIM completed (permanent)*"
+ }
+ }
+ ]
+ }
+ },
+ {
+ "value": "PIMRoleActivated",
+ "name": "A PIM role was activated",
+ "template": {
+ "preset": {
+ "value": "PIMRoleActivated",
+ "label": "A PIM role was activated"
+ },
+ "logbook": {
+ "value": "Audit.AzureActiveDirectory",
+ "label": "Azure AD"
+ },
+ "conditions": [
+ {
+ "Property": {
+ "value": "String",
+ "label": "Operation"
+ },
+ "Operator": {
+ "value": "like",
+ "label": "Like"
+ },
+ "Input": {
+ "value": "*Add member to role completed (PIM activation)*"
+ }
+ }
+ ]
+ }
+ },
+ {
+ "value": "PIMRoleSettingChanged",
+ "name": "A PIM role setting was changed",
+ "template": {
+ "preset": {
+ "value": "PIMRoleSettingChanged",
+ "label": "A PIM role setting was changed"
+ },
+ "logbook": {
+ "value": "Audit.AzureActiveDirectory",
+ "label": "Azure AD"
+ },
+ "conditions": [
+ {
+ "Property": {
+ "value": "String",
+ "label": "Operation"
+ },
+ "Operator": {
+ "value": "like",
+ "label": "Like"
+ },
+ "Input": {
+ "value": "*Update role setting in PIM*"
+ }
+ }
+ ]
+ }
}
]
diff --git a/src/data/CIPPDBCacheTypes.json b/src/data/CIPPDBCacheTypes.json
index 0b5b85e60bb5..e996973c3e1e 100644
--- a/src/data/CIPPDBCacheTypes.json
+++ b/src/data/CIPPDBCacheTypes.json
@@ -261,6 +261,7 @@
},
{
"type": "OneDriveSiteListing",
+ "collectedBy": "OneDriveUsage",
"friendlyName": "OneDrive Site Listing",
"description": "OneDrive personal site listing details used for usage reporting"
},
@@ -269,8 +270,14 @@
"friendlyName": "OneDrive Usage",
"description": "OneDrive usage statistics"
},
+ {
+ "type": "OneDriveLongPaths",
+ "friendlyName": "OneDrive Long Paths",
+ "description": "Per-user counts of OneDrive paths that may exceed Windows 260-character sync limits or the cloud 400-character ceiling (no file or folder names stored)"
+ },
{
"type": "SharePointSiteListing",
+ "collectedBy": "SharePointSiteUsage",
"friendlyName": "SharePoint Site Listing",
"description": "SharePoint site listing details used for usage reporting"
},
@@ -279,6 +286,11 @@
"friendlyName": "SharePoint Site Usage",
"description": "SharePoint site usage statistics"
},
+ {
+ "type": "SPOSites",
+ "friendlyName": "SharePoint Site Settings",
+ "description": "Per-site SharePoint admin settings (site owner, sharing controls, lifecycle, version policy, People Picker, unmanaged-device access) for every site collection, keyed by site id"
+ },
{
"type": "SiteActivity",
"friendlyName": "Site Activity",
@@ -294,6 +306,11 @@
"friendlyName": "SharePoint Permissions",
"description": "Site and document library permission assignments, including libraries that no longer inherit and grants to tenant-wide claims such as Everyone except external users"
},
+ {
+ "type": "StorageCleanupScan",
+ "friendlyName": "Storage Cleanup Scan",
+ "description": "Per-site library version estimates and recycle totals for the storage report cleanup signals. Report-private; not used by other CIPP features."
+ },
{
"type": "ConditionalAccessPolicies",
"friendlyName": "Conditional Access Policies",
diff --git a/src/data/Extensions.json b/src/data/Extensions.json
index 660661bf91e5..b9146ab3fdc5 100644
--- a/src/data/Extensions.json
+++ b/src/data/Extensions.json
@@ -1080,6 +1080,7 @@
"type": "ConnectWisePSA",
"cat": "Ticketing",
"logo": "/assets/integrations/connectwise.png",
+ "logoNeedsLightBacking": true,
"comingSoon": true,
"description": "Enable the ConnectWise PSA integration to send alerts to your ticketing system.",
"mappingRequired": false
@@ -1090,6 +1091,7 @@
"type": "AutotaskPSA",
"cat": "Ticketing",
"logo": "/assets/integrations/autotask.png",
+ "logoNeedsLightBacking": true,
"comingSoon": true,
"description": "Enable the Autotask PSA integration to send alerts to your ticketing system.",
"mappingRequired": false
@@ -1100,6 +1102,7 @@
"type": "KaseyaBMS",
"cat": "Ticketing",
"logo": "/assets/integrations/kaseya.svg",
+ "logoNeedsLightBacking": true,
"comingSoon": true,
"description": "Enable the Kaseya BMS integration to send alerts to your ticketing system.",
"mappingRequired": false
diff --git a/src/data/alerts.json b/src/data/alerts.json
index adc8d26de373..d4119cddd887 100644
--- a/src/data/alerts.json
+++ b/src/data/alerts.json
@@ -189,7 +189,27 @@
]
}
],
- "recommendedRunInterval": "1d"
+ "recommendedRunInterval": "1d",
+ "description": "Alerts when a mailbox exceeds a percentage of its send/receive quota, using the Microsoft mailbox usage report. The report's storage figure already excludes the Recoverable Items dumpster and the archive, so it reflects what actually counts against the quota. Deleted mailboxes are skipped."
+ },
+ {
+ "name": "ArchiveQuota",
+ "label": "Alert on % online archive quota used",
+ "requiresInput": true,
+ "multipleInput": true,
+ "inputs": [
+ {
+ "inputType": "textField",
+ "inputLabel": "Archive quota percentage threshold (default: 90)",
+ "inputName": "ArchiveQuotaThreshold"
+ },
+ {
+ "inputType": "textField",
+ "inputLabel": "Excluded mailbox UPNs (comma-separated). Supports custom variables like %excludefromarchivealert% defined under CIPP > Settings > Custom Variables at tenant or AllTenants scope.",
+ "inputName": "ArchiveQuotaExcludedMailboxes"
+ }
+ ],
+ "recommendedRunInterval": "7d"
},
{
"name": "SharePointQuota",
@@ -209,6 +229,16 @@
"inputName": "OneDriveQuota",
"recommendedRunInterval": "1d"
},
+ {
+ "name": "OneDriveLongPaths",
+ "label": "Alert on OneDrive accounts with over-long paths",
+ "requiresInput": true,
+ "inputType": "textField",
+ "inputLabel": "Minimum paths over inferred 260-character limit (default: 1)",
+ "inputName": "OneDriveLongPaths",
+ "recommendedRunInterval": "7d",
+ "description": "Uses the OneDriveLongPaths Report DB cache (run ExecCIPPDBCache OneDriveLongPaths first). Signals users who may hit OneDrive sync or Office path errors. Alert and cache store owner UPN and counts only — never file or folder names."
+ },
{
"name": "UnlicensedOneDriveData",
"label": "Alert on leftover unlicensed OneDrive data nearing deletion",
@@ -241,12 +271,18 @@
"inputLabel": "Days until expiration (default: 30)",
"inputName": "ExpiringLicensesDays"
},
+ {
+ "inputType": "number",
+ "inputLabel": "Minimum days until expiration (default: 0)",
+ "inputName": "ExpiringLicensesMinDays"
+ },
{
"inputType": "switch",
"inputLabel": "Alert only on unassigned licenses",
"inputName": "ExpiringLicensesUnassignedOnly"
}
- ]
+ ],
+ "description": "Alerts on licenses with a renewal date within the selected number of days. Microsoft does not expose the actual commitment term, so monthly auto-renewing subscriptions also match; set the minimum days to 32 or higher to skip anything renewing sooner than that (such as monthly rollovers)."
},
{
"name": "NewAppApproval",
@@ -415,7 +451,8 @@
{
"name": "AppSecretExpiry",
"label": "Alert on expiring application secrets",
- "recommendedRunInterval": "1d"
+ "recommendedRunInterval": "1d",
+ "description": "Reports app registration client secrets expiring within the next 30 days, and keeps reporting them for 7 days after they expire. Secrets that expired more than 7 days ago are not reported."
},
{
"name": "AppleTerms",
@@ -440,17 +477,29 @@
{
"name": "ApnCertExpiry",
"label": "Alert on expiring APN certificates",
- "recommendedRunInterval": "1d"
+ "recommendedRunInterval": "1d",
+ "requiresInput": true,
+ "inputType": "number",
+ "inputLabel": "Days until expiry to alert (default: 30)",
+ "inputName": "DaysUntilExpiry"
},
{
"name": "VppTokenExpiry",
"label": "Alert on expiring VPP tokens",
- "recommendedRunInterval": "1d"
+ "recommendedRunInterval": "1d",
+ "requiresInput": true,
+ "inputType": "number",
+ "inputLabel": "Days until expiry to alert (default: 30)",
+ "inputName": "DaysUntilExpiry"
},
{
"name": "DepTokenExpiry",
"label": "Alert on expiring DEP tokens",
- "recommendedRunInterval": "1d"
+ "recommendedRunInterval": "1d",
+ "requiresInput": true,
+ "inputType": "number",
+ "inputLabel": "Days until expiry to alert (default: 30)",
+ "inputName": "DaysUntilExpiry"
},
{
"name": "IntuneApprovalRequests",
@@ -468,6 +517,21 @@
"label": "Alert on device compliance issues",
"recommendedRunInterval": "4h"
},
+ {
+ "name": "DeviceComplianceGracePeriod",
+ "label": "Alert on devices in the compliance grace period",
+ "recommendedRunInterval": "1d",
+ "description": "Devices in the compliance grace period are still trusted, but will be marked noncompliant when the grace period expires. This alerts before that happens so you can fix the device without user impact.",
+ "requiresInput": true,
+ "multipleInput": true,
+ "inputs": [
+ {
+ "inputType": "number",
+ "inputLabel": "Only alert when the grace period expires within this many days (default: all devices in grace period)",
+ "inputName": "ExpiresWithinDays"
+ }
+ ]
+ },
{
"name": "IntunePolicyConflicts",
"label": "Alert on Intune policy or app conflicts/errors",
@@ -717,5 +781,25 @@
"inputLabel": "Ignore sanctioned tools?",
"inputName": "IgnoreSanctionedTools",
"description": "Monitors the Shadow AI detection data (Intune detected apps and Entra consented applications) and alerts when an AI tool is seen in the tenant for the first time. The first run establishes a baseline without alerting. Uses the same cached data as the Shadow AI dashboard, so keep the Detected Apps and Service Principals caches syncing. Optionally ignores tools that have been marked as company sanctioned."
+ },
+ {
+ "name": "PermanentActiveAdminAssigned",
+ "label": "Alert on new permanent (no end date) admin role assignments",
+ "recommendedRunInterval": "1h",
+ "requiresInput": true,
+ "multipleInput": true,
+ "inputs": [
+ {
+ "inputType": "textField",
+ "inputLabel": "Approved break-glass accounts: UPN prefixes, UPNs or display names (comma separated)",
+ "inputName": "ApprovedAdmins"
+ },
+ {
+ "inputType": "switch",
+ "inputLabel": "Privileged roles only? (off = every directory role)",
+ "inputName": "PrivilegedRolesOnly"
+ }
+ ],
+ "description": "Alerts when a user, group or service principal gains a permanent active admin role assignment (no end date) that is not in the approved list. On Entra ID P2 tenants time-bound and PIM-activated assignments are ignored; elsewhere every assignment counts as permanent. The first run only records the current state."
}
]
diff --git a/src/data/standards.json b/src/data/standards.json
index 57c45550d2fb..5e79d23e0fcc 100644
--- a/src/data/standards.json
+++ b/src/data/standards.json
@@ -582,15 +582,23 @@
"name": "standards.AuthenticationMethods",
"cat": "Entra (AAD) Standards",
"tag": [],
- "helpText": "Configures all authentication methods for the tenant including Microsoft Authenticator, FIDO2, SMS, Voice, Email OTP, Temporary Access Pass, Software OATH, Hardware OATH, Certificate-based, and QR Code Pin. Enable or disable each method and optionally target specific groups.",
- "docsDescription": "Unified standard to configure all authentication method policies in a single place. Each method can be independently enabled or disabled, targeted to all users or specific groups using group name wildcards, and configured with method-specific settings such as TAP lifetime, QR code pin length, and Authenticator software OTP.",
+ "helpText": "Configures all authentication methods for the tenant including Microsoft Authenticator, FIDO2, SMS, Voice, Email OTP, Temporary Access Pass, Software OATH, Hardware OATH, Certificate-based, and QR Code Pin. Set each method to Enabled, Disabled or Not Configured and optionally target specific groups. Methods set to Not Configured (or left blank) keep the tenant's current setting.",
+ "docsDescription": "Unified standard to configure all authentication method policies in a single place. Each method can be independently set to Enabled, Disabled or Not Configured (leaving the tenant's current configuration untouched), targeted to all users or specific groups using group name wildcards, and configured with method-specific settings such as TAP lifetime, QR code pin length, and Authenticator software OTP.",
"executiveText": "Provides centralized control over all tenant authentication methods from a single standard. Administrators can enable phishing-resistant methods like FIDO2 and Microsoft Authenticator while disabling less secure options like SMS and Voice. Each method supports group-level targeting using wildcard group names, allowing staged rollouts and granular control.",
"addedComponent": [
{
- "type": "switch",
+ "type": "autoComplete",
+ "multiple": false,
+ "creatable": false,
+ "required": false,
"name": "standards.AuthenticationMethods.MicrosoftAuthenticatorEnabled",
"label": "Microsoft Authenticator",
- "defaultValue": false
+ "helperText": "Not Configured or blank leaves the tenant's current setting untouched.",
+ "options": [
+ { "label": "Enabled", "value": true },
+ { "label": "Disabled", "value": false },
+ { "label": "Not Configured", "value": "notConfigured" }
+ ]
},
{
"type": "textField",
@@ -599,7 +607,7 @@
"required": false,
"condition": {
"field": "standards.AuthenticationMethods.MicrosoftAuthenticatorEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
@@ -610,7 +618,7 @@
"defaultValue": false,
"condition": {
"field": "standards.AuthenticationMethods.MicrosoftAuthenticatorEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
@@ -627,7 +635,7 @@
],
"condition": {
"field": "standards.AuthenticationMethods.MicrosoftAuthenticatorEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
@@ -644,7 +652,7 @@
],
"condition": {
"field": "standards.AuthenticationMethods.MicrosoftAuthenticatorEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
@@ -661,7 +669,7 @@
],
"condition": {
"field": "standards.AuthenticationMethods.MicrosoftAuthenticatorEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
@@ -678,15 +686,23 @@
],
"condition": {
"field": "standards.AuthenticationMethods.MicrosoftAuthenticatorEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
{
- "type": "switch",
+ "type": "autoComplete",
+ "multiple": false,
+ "creatable": false,
+ "required": false,
"name": "standards.AuthenticationMethods.FIDO2Enabled",
"label": "FIDO2 Security Keys",
- "defaultValue": false
+ "helperText": "Not Configured or blank leaves the tenant's current setting untouched.",
+ "options": [
+ { "label": "Enabled", "value": true },
+ { "label": "Disabled", "value": false },
+ { "label": "Not Configured", "value": "notConfigured" }
+ ]
},
{
"type": "textField",
@@ -695,15 +711,23 @@
"required": false,
"condition": {
"field": "standards.AuthenticationMethods.FIDO2Enabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
{
- "type": "switch",
+ "type": "autoComplete",
+ "multiple": false,
+ "creatable": false,
+ "required": false,
"name": "standards.AuthenticationMethods.TAPEnabled",
"label": "Temporary Access Pass",
- "defaultValue": false
+ "helperText": "Not Configured or blank leaves the tenant's current setting untouched.",
+ "options": [
+ { "label": "Enabled", "value": true },
+ { "label": "Disabled", "value": false },
+ { "label": "Not Configured", "value": "notConfigured" }
+ ]
},
{
"type": "textField",
@@ -712,7 +736,7 @@
"required": false,
"condition": {
"field": "standards.AuthenticationMethods.TAPEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
@@ -728,7 +752,7 @@
],
"condition": {
"field": "standards.AuthenticationMethods.TAPEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
@@ -739,7 +763,7 @@
"defaultValue": 60,
"condition": {
"field": "standards.AuthenticationMethods.TAPEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
@@ -750,7 +774,7 @@
"defaultValue": 60,
"condition": {
"field": "standards.AuthenticationMethods.TAPEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
@@ -761,7 +785,7 @@
"defaultValue": 480,
"condition": {
"field": "standards.AuthenticationMethods.TAPEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
@@ -772,15 +796,23 @@
"defaultValue": 8,
"condition": {
"field": "standards.AuthenticationMethods.TAPEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
{
- "type": "switch",
+ "type": "autoComplete",
+ "multiple": false,
+ "creatable": false,
+ "required": false,
"name": "standards.AuthenticationMethods.SoftwareOathEnabled",
"label": "Third-Party Software OATH Tokens",
- "defaultValue": false
+ "helperText": "Not Configured or blank leaves the tenant's current setting untouched.",
+ "options": [
+ { "label": "Enabled", "value": true },
+ { "label": "Disabled", "value": false },
+ { "label": "Not Configured", "value": "notConfigured" }
+ ]
},
{
"type": "textField",
@@ -789,15 +821,23 @@
"required": false,
"condition": {
"field": "standards.AuthenticationMethods.SoftwareOathEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
{
- "type": "switch",
+ "type": "autoComplete",
+ "multiple": false,
+ "creatable": false,
+ "required": false,
"name": "standards.AuthenticationMethods.HardwareOathEnabled",
"label": "Hardware OATH Tokens",
- "defaultValue": false
+ "helperText": "Not Configured or blank leaves the tenant's current setting untouched.",
+ "options": [
+ { "label": "Enabled", "value": true },
+ { "label": "Disabled", "value": false },
+ { "label": "Not Configured", "value": "notConfigured" }
+ ]
},
{
"type": "textField",
@@ -806,15 +846,23 @@
"required": false,
"condition": {
"field": "standards.AuthenticationMethods.HardwareOathEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
{
- "type": "switch",
+ "type": "autoComplete",
+ "multiple": false,
+ "creatable": false,
+ "required": false,
"name": "standards.AuthenticationMethods.SMSEnabled",
"label": "SMS",
- "defaultValue": false
+ "helperText": "Not Configured or blank leaves the tenant's current setting untouched.",
+ "options": [
+ { "label": "Enabled", "value": true },
+ { "label": "Disabled", "value": false },
+ { "label": "Not Configured", "value": "notConfigured" }
+ ]
},
{
"type": "textField",
@@ -823,15 +871,23 @@
"required": false,
"condition": {
"field": "standards.AuthenticationMethods.SMSEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
{
- "type": "switch",
+ "type": "autoComplete",
+ "multiple": false,
+ "creatable": false,
+ "required": false,
"name": "standards.AuthenticationMethods.VoiceEnabled",
"label": "Voice Call",
- "defaultValue": false
+ "helperText": "Not Configured or blank leaves the tenant's current setting untouched.",
+ "options": [
+ { "label": "Enabled", "value": true },
+ { "label": "Disabled", "value": false },
+ { "label": "Not Configured", "value": "notConfigured" }
+ ]
},
{
"type": "textField",
@@ -840,15 +896,23 @@
"required": false,
"condition": {
"field": "standards.AuthenticationMethods.VoiceEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
{
- "type": "switch",
+ "type": "autoComplete",
+ "multiple": false,
+ "creatable": false,
+ "required": false,
"name": "standards.AuthenticationMethods.EmailEnabled",
"label": "Email OTP",
- "defaultValue": false
+ "helperText": "Not Configured or blank leaves the tenant's current setting untouched.",
+ "options": [
+ { "label": "Enabled", "value": true },
+ { "label": "Disabled", "value": false },
+ { "label": "Not Configured", "value": "notConfigured" }
+ ]
},
{
"type": "textField",
@@ -857,15 +921,23 @@
"required": false,
"condition": {
"field": "standards.AuthenticationMethods.EmailEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
{
- "type": "switch",
+ "type": "autoComplete",
+ "multiple": false,
+ "creatable": false,
+ "required": false,
"name": "standards.AuthenticationMethods.x509CertificateEnabled",
"label": "Certificate-Based Authentication",
- "defaultValue": false
+ "helperText": "Not Configured or blank leaves the tenant's current setting untouched.",
+ "options": [
+ { "label": "Enabled", "value": true },
+ { "label": "Disabled", "value": false },
+ { "label": "Not Configured", "value": "notConfigured" }
+ ]
},
{
"type": "textField",
@@ -874,15 +946,23 @@
"required": false,
"condition": {
"field": "standards.AuthenticationMethods.x509CertificateEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
{
- "type": "switch",
+ "type": "autoComplete",
+ "multiple": false,
+ "creatable": false,
+ "required": false,
"name": "standards.AuthenticationMethods.QRCodePinEnabled",
"label": "QR Code Pin",
- "defaultValue": false
+ "helperText": "Not Configured or blank leaves the tenant's current setting untouched.",
+ "options": [
+ { "label": "Enabled", "value": true },
+ { "label": "Disabled", "value": false },
+ { "label": "Not Configured", "value": "notConfigured" }
+ ]
},
{
"type": "textField",
@@ -891,7 +971,7 @@
"required": false,
"condition": {
"field": "standards.AuthenticationMethods.QRCodePinEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
@@ -902,7 +982,7 @@
"defaultValue": 365,
"condition": {
"field": "standards.AuthenticationMethods.QRCodePinEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
},
@@ -913,7 +993,7 @@
"defaultValue": 8,
"condition": {
"field": "standards.AuthenticationMethods.QRCodePinEnabled",
- "compareType": "is",
+ "compareType": "valueEq",
"compareValue": true
}
}
@@ -999,7 +1079,8 @@
"labelField": "TemplateName",
"valueField": "TemplateId",
"queryKey": "StdAppApprovalTemplateList",
- "addedField": { "AppId": "AppId" }
+ "addedField": { "AppId": "AppId" },
+ "templateView": { "title": "App Approval Template" }
},
"condition": {
"field": "standards.AppDeploy.mode",
@@ -1353,6 +1434,32 @@
"powershellEquivalent": "Update-MgBetaPolicyCrossTenantAccessPolicyDefault",
"recommendedBy": []
},
+ {
+ "name": "standards.ExternalComplianceTrusted",
+ "cat": "Entra (AAD) Standards",
+ "tag": [],
+ "helpText": "Sets the state of the Cross-tenant access setting to trust external compliant devices. This allows guest users to use a compliant device from their home tenant to access your tenant.",
+ "executiveText": "Allows external partners and vendors to use compliant devices from their own organization when accessing company resources, streamlining collaboration while maintaining security standards. This reduces friction for external users while ensuring their devices still meet compliance requirements.",
+ "addedComponent": [
+ {
+ "type": "autoComplete",
+ "multiple": false,
+ "creatable": false,
+ "label": "Select value",
+ "name": "standards.ExternalComplianceTrusted.state",
+ "options": [
+ { "label": "Enabled", "value": "true" },
+ { "label": "Disabled", "value": "false" }
+ ]
+ }
+ ],
+ "label": "Sets the Cross-tenant access setting to trust external compliant devices",
+ "impact": "Low Impact",
+ "impactColour": "info",
+ "addedDate": "2026-08-25",
+ "powershellEquivalent": "Update-MgBetaPolicyCrossTenantAccessPolicyDefault",
+ "recommendedBy": []
+ },
{
"name": "standards.DisableTenantCreation",
"cat": "Entra (AAD) Standards",
@@ -1661,7 +1768,7 @@
"cat": "Entra (AAD) Standards",
"tag": ["SMB1001 (2.8)"],
"appliesToTest": ["SMB1001_2_8", "ZTNA21858"],
- "helpText": "Blocks login for guest users that have not logged in for a number of days",
+ "helpText": "Blocks login for guest users whose most recent sign-in attempt, interactive or non-interactive, is older than the number of days. Guests that have never signed in are only included when 'Disable accounts that have not yet signed in' is enabled. Accounts an administrator re-enabled in the last 7 days are left alone.",
"executiveText": "Automatically disables external guest accounts that haven't been used for a number of days, reducing security risks from dormant accounts while maintaining access for active external collaborators. This helps maintain a clean user directory and reduces potential attack vectors.",
"addedComponent": [
{
@@ -1670,6 +1777,12 @@
"required": true,
"defaultValue": 90,
"label": "Days of inactivity"
+ },
+ {
+ "type": "switch",
+ "name": "standards.DisableGuests.IncludeNeverSignedIn",
+ "label": "Disable accounts that have not yet signed in",
+ "defaultValue": false
}
],
"label": "Disable Guest accounts that have not logged on for a number of days",
@@ -2128,6 +2241,16 @@
"type": "textField",
"name": "standards.OutBoundSpamAlert.OutboundSpamContact",
"label": "Outbound spam contact"
+ },
+ {
+ "type": "switch",
+ "name": "standards.OutBoundSpamAlert.BccSuspiciousOutboundMail",
+ "label": "BCC suspicious outbound mail to a mailbox"
+ },
+ {
+ "type": "textField",
+ "name": "standards.OutBoundSpamAlert.BccSuspiciousOutboundContact",
+ "label": "BCC recipient for suspicious outbound mail"
}
],
"label": "Set Outbound Spam Alert e-mail",
@@ -3322,7 +3445,7 @@
"tag": ["CIS M365 7.0.0 (8.6.1)"],
"appliesToTest": ["CIS_8_6_1"],
"helpText": "Set the state of the spam submission button in Outlook",
- "docsDescription": "Set the state of the built-in Report button in Outlook. This gives the users the ability to report emails as spam or phish.",
+ "docsDescription": "Set the state of the built-in Report button in Outlook. This gives the users the ability to report emails as spam or phish. When a destination email address is set, the 'Send reported items to' setting controls whether reported messages go to Microsoft and the reporting mailbox, or to the reporting mailbox only (for third-party phishing report services).",
"executiveText": "Enables employees to easily report suspicious emails directly from Outlook, helping improve the organization's spam and phishing detection systems. This crowdsourced approach to security allows users to contribute to threat detection while providing valuable feedback to enhance email security filters.",
"addedComponent": [
{
@@ -3340,6 +3463,16 @@
"name": "standards.UserSubmissions.email",
"required": false,
"label": "Destination email address"
+ },
+ {
+ "type": "autoComplete",
+ "multiple": false,
+ "label": "Send reported items to (when a destination email address is set)",
+ "name": "standards.UserSubmissions.reportDestination",
+ "options": [
+ { "label": "Microsoft and my reporting mailbox", "value": "Both" },
+ { "label": "My reporting mailbox only", "value": "Mailbox" }
+ ]
}
],
"label": "Set the state of the built-in Report button in Outlook",
@@ -4309,6 +4442,18 @@
}
]
},
+ {
+ "type": "autoComplete",
+ "required": false,
+ "multiple": false,
+ "creatable": false,
+ "label": "Bulk moves enabled (deliver bulk mail below the threshold to the Promotions folder - Preview)",
+ "name": "standards.SpamFilterPolicy.BulkMovesEnabled",
+ "options": [
+ { "label": "On", "value": "On" },
+ { "label": "Off", "value": "Off" }
+ ]
+ },
{
"type": "autoComplete",
"required": true,
@@ -4779,7 +4924,7 @@
"cat": "Intune Standards",
"tag": ["CIS M365 7.0.0 (4.2)", "CISA (MS.AAD.19.1v1)"],
"appliesToTest": ["CIS_4_2"],
- "helpText": "Sets the default platform restrictions for enrolling devices into Intune. Note: Do not block personally owned if platform is blocked.",
+ "helpText": "Sets the default platform restrictions for enrolling devices into Intune, including optional minimum and maximum OS version limits per platform (Android Enterprise, Android, iOS/iPadOS and Windows). Note: Do not block personally owned if platform is blocked.",
"executiveText": "Controls which types of devices (iOS, Android, Windows, macOS) and ownership models (corporate vs. personal) can be enrolled in the company's device management system. This helps maintain security standards while supporting necessary business device types and usage scenarios.",
"addedComponent": [
{
@@ -4794,6 +4939,20 @@
"label": "Block personally owned Android Enterprise (work profile)",
"default": false
},
+ {
+ "type": "textField",
+ "name": "standards.DefaultPlatformRestrictions.osMinimumVersionAndroidForWork",
+ "label": "Android Enterprise (work profile) minimum OS version",
+ "helperText": "Example: 11.0. Leave blank to not enforce a minimum.",
+ "required": false
+ },
+ {
+ "type": "textField",
+ "name": "standards.DefaultPlatformRestrictions.osMaximumVersionAndroidForWork",
+ "label": "Android Enterprise (work profile) maximum OS version",
+ "helperText": "Example: 14.0. Leave blank to not enforce a maximum.",
+ "required": false
+ },
{
"type": "switch",
"name": "standards.DefaultPlatformRestrictions.platformAndroidBlocked",
@@ -4806,6 +4965,20 @@
"label": "Block personally owned Android",
"default": false
},
+ {
+ "type": "textField",
+ "name": "standards.DefaultPlatformRestrictions.osMinimumVersionAndroid",
+ "label": "Android minimum OS version",
+ "helperText": "Example: 10.0. Leave blank to not enforce a minimum.",
+ "required": false
+ },
+ {
+ "type": "textField",
+ "name": "standards.DefaultPlatformRestrictions.osMaximumVersionAndroid",
+ "label": "Android maximum OS version",
+ "helperText": "Example: 13.0. Leave blank to not enforce a maximum.",
+ "required": false
+ },
{
"type": "switch",
"name": "standards.DefaultPlatformRestrictions.platformiOSBlocked",
@@ -4818,6 +4991,20 @@
"label": "Block personally owned iOS",
"default": false
},
+ {
+ "type": "textField",
+ "name": "standards.DefaultPlatformRestrictions.osMinimumVersioniOS",
+ "label": "iOS/iPadOS minimum OS version",
+ "helperText": "Example: 16.1. Leave blank to not enforce a minimum.",
+ "required": false
+ },
+ {
+ "type": "textField",
+ "name": "standards.DefaultPlatformRestrictions.osMaximumVersioniOS",
+ "label": "iOS/iPadOS maximum OS version",
+ "helperText": "Example: 18.0. Leave blank to not enforce a maximum.",
+ "required": false
+ },
{
"type": "switch",
"name": "standards.DefaultPlatformRestrictions.platformMacOSBlocked",
@@ -4841,6 +5028,20 @@
"name": "standards.DefaultPlatformRestrictions.personalWindowsBlocked",
"label": "Block personally owned Windows",
"default": false
+ },
+ {
+ "type": "textField",
+ "name": "standards.DefaultPlatformRestrictions.osMinimumVersionWindows",
+ "label": "Windows minimum OS version",
+ "helperText": "Example: 10.0.19045.0. Leave blank to not enforce a minimum.",
+ "required": false
+ },
+ {
+ "type": "textField",
+ "name": "standards.DefaultPlatformRestrictions.osMaximumVersionWindows",
+ "label": "Windows maximum OS version",
+ "helperText": "Example: 10.0.22631.0. Leave blank to not enforce a maximum.",
+ "required": false
}
],
"label": "Device enrollment restrictions",
@@ -5261,6 +5462,40 @@
"ONEDRIVE_ENTERPRISE"
]
},
+ {
+ "name": "standards.SPGuestPeoplePicker",
+ "cat": "SharePoint Standards",
+ "tag": [],
+ "helpText": "Controls whether guest (external) users already in the tenant appear as suggestions in the SharePoint and OneDrive People Picker. Enforces the wanted state on BOTH the tenant default and every existing site collection - they are set independently, so changing the tenant default does not update existing sites. The per-site picture is read from the SharePoint reporting cache (refreshed daily), so a large tenant is never enumerated live during a run; a 24h rerun guard stops the write sweep from repeating before that cache refreshes and re-evaluates the result.",
+ "executiveText": "Makes existing external collaborators discoverable (or hidden) when sharing SharePoint and OneDrive content, consistently across the tenant default and every existing site. This keeps the sharing experience predictable and prevents individual sites from drifting away from the agreed collaboration posture.",
+ "addedComponent": [
+ {
+ "type": "autoComplete",
+ "multiple": false,
+ "creatable": false,
+ "label": "Guest People Picker suggestions",
+ "name": "standards.SPGuestPeoplePicker.state",
+ "options": [
+ { "label": "Show guests in the People Picker", "value": "true" },
+ { "label": "Hide guests in the People Picker", "value": "false" }
+ ]
+ }
+ ],
+ "label": "Show guest users in the SharePoint People Picker",
+ "impact": "Low Impact",
+ "impactColour": "info",
+ "addedDate": "2026-09-03",
+ "powershellEquivalent": "Set-SPOTenant / Set-SPOSite -ShowPeoplePickerSuggestionsForGuestUsers $true or $false",
+ "recommendedBy": ["CIPP"],
+ "requiredCapabilities": [
+ "SHAREPOINTWAC",
+ "SHAREPOINTSTANDARD",
+ "SHAREPOINTENTERPRISE",
+ "SHAREPOINTENTERPRISE_EDU",
+ "ONEDRIVE_BASIC",
+ "ONEDRIVE_ENTERPRISE"
+ ]
+ },
{
"name": "standards.SPAzureB2B",
"cat": "SharePoint Standards",
@@ -5801,7 +6036,7 @@
"CIS_8_5_8",
"CIS_8_5_9"
],
- "helpText": "Defines the CIS recommended global meeting policy for Teams. This includes AllowAnonymousUsersToJoinMeeting, AllowAnonymousUsersToStartMeeting, AutoAdmittedUsers, AllowPSTNUsersToBypassLobby, MeetingChatEnabledType, DesignatedPresenterRoleMode, AllowExternalParticipantGiveRequestControl, AllowParticipantGiveRequestControl",
+ "helpText": "Defines the CIS recommended global meeting policy for Teams. This includes AllowAnonymousUsersToJoinMeeting, AllowAnonymousUsersToStartMeeting, AutoAdmittedUsers, AllowPSTNUsersToBypassLobby, MeetingChatEnabledType, DesignatedPresenterRoleMode, AllowExternalParticipantGiveRequestControl, AllowParticipantGiveRequestControl, AllowExternalNonTrustedMeetingChat, AllowCloudRecording",
"executiveText": "Establishes security-focused default settings for Teams meetings, controlling who can join meetings, present content, and participate in chats. These policies balance collaboration needs with security requirements, ensuring meetings remain productive while protecting against unauthorized access and disruption.",
"addedComponent": [
{
@@ -5876,13 +6111,39 @@
"type": "switch",
"name": "standards.TeamsGlobalMeetingPolicy.AllowExternalParticipantGiveRequestControl",
"label": "External participants can give or request control"
+ },
+ {
+ "type": "autoComplete",
+ "required": false,
+ "multiple": false,
+ "creatable": false,
+ "name": "standards.TeamsGlobalMeetingPolicy.AllowExternalNonTrustedMeetingChat",
+ "label": "External meeting chat",
+ "helperText": "CIS 8.5.8 recommends Off. Leave blank to keep the tenant's current value.",
+ "options": [
+ { "label": "Off (CIS recommended)", "value": false },
+ { "label": "On", "value": true }
+ ]
+ },
+ {
+ "type": "autoComplete",
+ "required": false,
+ "multiple": false,
+ "creatable": false,
+ "name": "standards.TeamsGlobalMeetingPolicy.AllowCloudRecording",
+ "label": "Meeting cloud recording",
+ "helperText": "CIS 8.5.9 recommends Off. Leave blank to keep the tenant's current value.",
+ "options": [
+ { "label": "Off (CIS recommended)", "value": false },
+ { "label": "On", "value": true }
+ ]
}
],
"label": "Define Global Meeting Policy for Teams",
"impact": "Low Impact",
"impactColour": "info",
"addedDate": "2024-11-12",
- "powershellEquivalent": "Set-CsTeamsMeetingPolicy -AllowAnonymousUsersToJoinMeeting $false -AllowAnonymousUsersToStartMeeting $false -AutoAdmittedUsers $AutoAdmittedUsers -AllowPSTNUsersToBypassLobby $false -MeetingChatEnabledType EnabledExceptAnonymous -DesignatedPresenterRoleMode $DesignatedPresenterRoleMode -AllowExternalParticipantGiveRequestControl $false -AllowParticipantGiveRequestControl $false",
+ "powershellEquivalent": "Set-CsTeamsMeetingPolicy -AllowAnonymousUsersToJoinMeeting $false -AllowAnonymousUsersToStartMeeting $false -AutoAdmittedUsers $AutoAdmittedUsers -AllowPSTNUsersToBypassLobby $false -MeetingChatEnabledType EnabledExceptAnonymous -DesignatedPresenterRoleMode $DesignatedPresenterRoleMode -AllowExternalParticipantGiveRequestControl $false -AllowParticipantGiveRequestControl $false -AllowExternalNonTrustedMeetingChat $false -AllowCloudRecording $false",
"recommendedBy": ["CIS"],
"requiredCapabilities": ["MCOSTANDARD", "MCOEV", "MCOIMP", "TEAMS1", "Teams_Room_Standard"]
},
@@ -8092,7 +8353,8 @@
"url": "/api/ListAppTemplates",
"labelField": "displayName",
"valueField": "GUID",
- "queryKey": "StdIntuneAppTemplateList"
+ "queryKey": "StdIntuneAppTemplateList",
+ "templateView": { "title": "Application Template" }
}
}
],
@@ -8493,5 +8755,50 @@
"warn": false,
"remediate": false
}
+ },
+ {
+ "name": "standards.PIMRoleSettings",
+ "label": "PIM Role Settings Template",
+ "cat": "Templates",
+ "multiple": true,
+ "disabledFeatures": {
+ "report": false,
+ "warn": false,
+ "remediate": false
+ },
+ "impact": "High Impact",
+ "impactColour": "danger",
+ "addedDate": "2026-08-23",
+ "tag": [],
+ "helpText": "Deploys a Privileged Identity Management role settings template to the tenant: activation limits, MFA or authentication context, justification, approval, eligibility and active-assignment expiry and notification rules for the roles the template covers. Templates cannot weaken settings below CIPP's secure floor.",
+ "docsDescription": "Deploys a Privileged Identity Management role settings template to the tenant. The template defines, for a set of roles, the maximum activation duration, whether activation requires MFA or an authentication context, justification, ticket and approval requirements, the maximum lifetime of eligible and active assignments, and additional notification recipients. Templates are validated against CIPP's secure floor (activation within 24 hours with MFA or an authentication context and a justification; eligible and active assignments must expire within a year; active assignments require a justification) and are refused, not adjusted, when they fall below it. Requires Entra ID P2.",
+ "executiveText": "Enforces consistent Privileged Identity Management settings so that administrator roles can only be used for a limited time, after strong authentication and with a recorded reason. This keeps standing administrative access to a minimum and makes every use of privilege visible and accountable.",
+ "addedComponent": [
+ {
+ "type": "autoComplete",
+ "name": "TemplateList",
+ "multiple": false,
+ "required": true,
+ "creatable": false,
+ "label": "Select PIM Role Settings Template",
+ "api": {
+ "url": "/api/ListPIMRoleSettingsTemplates",
+ "labelField": "templateName",
+ "valueField": "GUID",
+ "queryKey": "ListPIMRoleSettingsTemplates",
+ "showRefresh": true,
+ "templateView": {
+ "title": "PIM Role Settings Template"
+ }
+ }
+ }
+ ],
+ "powershellEquivalent": "Update-MgBetaPolicyRoleManagementPolicyRule",
+ "recommendedBy": [
+ "CIPP"
+ ],
+ "requiredCapabilities": [
+ "AAD_PREMIUM_P2"
+ ]
}
]
diff --git a/src/hooks/use-actions-dispatch.jsx b/src/hooks/use-actions-dispatch.jsx
index bad8a7f87968..1e085b019bcd 100644
--- a/src/hooks/use-actions-dispatch.jsx
+++ b/src/hooks/use-actions-dispatch.jsx
@@ -76,7 +76,7 @@ export const useActionsDispatch = ({ actions = [], data, queryKeys }) => {
// ordering gave them — only the structural props above change hands.
title={actionData.action?.title ?? "Confirmation"}
relatedQueryKeys={actionData.action?.relatedQueryKeys ?? queryKeys}
- TransitionProps={{ onExited: handleExited }}
+ slotProps={{ transition: { onExited: handleExited } }}
/>
)}
{customAction?.action?.customComponent(customAction.data, {
diff --git a/src/hooks/use-jit-allowed-roles.js b/src/hooks/use-jit-allowed-roles.js
new file mode 100644
index 000000000000..35860327cb5c
--- /dev/null
+++ b/src/hooks/use-jit-allowed-roles.js
@@ -0,0 +1,30 @@
+import { ApiGetCall } from "../api/ApiCall";
+
+/**
+ * Resolves which directory roles the current user may assign via JIT Admin, based on the JIT Role
+ * Template(s) attached to their CIPP custom role(s). When the user is unrestricted (no template, or a
+ * base/admin role), all roles are available so existing configurations are not disturbed.
+ *
+ * Backend enforcement in ExecJitAdmin is authoritative; this hook only shapes the picker options.
+ */
+export const useJitAllowedRoles = () => {
+ const query = ApiGetCall({
+ url: "/api/ListJITAllowedRoles",
+ queryKey: "JITAllowedRoles",
+ });
+
+ const restricted = query.data?.Restricted === true;
+ const allowedRoleIds = query.data?.AllowedRoleIds || [];
+
+ // Filter a list of role catalog entries ({ Name, ObjectId }) down to the allowed set.
+ const filterRoles = (roles = []) =>
+ restricted ? roles.filter((role) => allowedRoleIds.includes(role.ObjectId)) : roles;
+
+ return {
+ isLoading: query.isLoading,
+ isSuccess: query.isSuccess,
+ restricted,
+ allowedRoleIds,
+ filterRoles,
+ };
+};
diff --git a/src/hooks/use-license-currency.js b/src/hooks/use-license-currency.js
new file mode 100644
index 000000000000..3c1cda973b66
--- /dev/null
+++ b/src/hooks/use-license-currency.js
@@ -0,0 +1,28 @@
+import { useCallback, useState } from 'react'
+
+// Remembers the currency chosen on the license report tabs (Pricing + Optimization) so switching
+// it on one tab carries to the other. Persisted in localStorage; falls back gracefully when it is
+// unavailable (private windows, blocked site data).
+const STORAGE_KEY = 'licenseReportCurrency'
+
+export const useLicenseCurrency = (fallback = 'USD') => {
+ const [currency, setCurrencyState] = useState(() => {
+ if (typeof window === 'undefined') return fallback
+ try {
+ return window.localStorage.getItem(STORAGE_KEY) || fallback
+ } catch {
+ return fallback
+ }
+ })
+
+ const setCurrency = useCallback((next) => {
+ setCurrencyState(next)
+ try {
+ window.localStorage.setItem(STORAGE_KEY, next)
+ } catch {
+ /* ignore - non-persistent is fine */
+ }
+ }, [])
+
+ return [currency, setCurrency]
+}
diff --git a/src/hooks/use-permissions.js b/src/hooks/use-permissions.js
index 3fa9b6185707..44a76a0dc5fb 100644
--- a/src/hooks/use-permissions.js
+++ b/src/hooks/use-permissions.js
@@ -1,96 +1,103 @@
-import { useCallback } from "react";
-import { ApiGetCall } from "../api/ApiCall";
-import { hasAccess, hasPermission, hasRole } from "../utils/permissions";
-
-/**
- * Hook for checking user permissions and roles
- * Integrates with the existing CIPP authentication system
- */
-export const usePermissions = () => {
- const currentRole = ApiGetCall({
- url: "/api/me",
- queryKey: "authmecipp",
- });
-
- const userRoles = currentRole.data?.clientPrincipal?.userRoles || [];
- const userPermissions = currentRole.data?.permissions || [];
- const isLoading = currentRole.isLoading;
- const isAuthenticated = currentRole.isSuccess && userRoles.length > 0;
-
- /**
- * Check if user has specific permissions
- * @param {string[]} requiredPermissions - Array of required permissions (supports wildcards)
- * @returns {boolean} - True if user has at least one of the required permissions
- */
- const checkPermissions = useCallback(
- (requiredPermissions) => {
- if (!isAuthenticated) return false;
- return hasPermission(userPermissions, requiredPermissions);
- },
- [userPermissions, isAuthenticated]
- );
-
- /**
- * Check if user has specific roles
- * @param {string[]} requiredRoles - Array of required roles
- * @returns {boolean} - True if user has at least one of the required roles
- */
- const checkRoles = useCallback(
- (requiredRoles) => {
- if (!isAuthenticated) return false;
- return hasRole(userRoles, requiredRoles);
- },
- [userRoles, isAuthenticated]
- );
-
- /**
- * Check if user has access based on both permissions and roles
- * @param {Object} config - Configuration object
- * @param {string[]} config.requiredPermissions - Array of required permissions
- * @param {string[]} config.requiredRoles - Array of required roles
- * @returns {boolean} - True if user has access
- */
- const checkAccess = useCallback(
- (config = {}) => {
- if (!isAuthenticated) return false;
-
- const { requiredPermissions = [], requiredRoles = [] } = config;
-
- return hasAccess({
- userPermissions,
- userRoles,
- requiredPermissions,
- requiredRoles,
- });
- },
- [userPermissions, userRoles, isAuthenticated]
- );
-
- return {
- userPermissions,
- userRoles,
- isLoading,
- isAuthenticated,
- checkPermissions,
- checkRoles,
- checkAccess,
- };
-};
-
-/**
- * Hook specifically for checking permissions with a simpler API
- * @param {string[]} requiredPermissions - Array of required permissions
- * @param {string[]} requiredRoles - Array of required roles
- * @returns {Object} - Object containing hasAccess boolean and loading state
- */
-export const useHasPermission = (requiredPermissions = [], requiredRoles = []) => {
- const { checkAccess, isLoading, isAuthenticated } = usePermissions();
-
- const hasAccess = checkAccess({ requiredPermissions, requiredRoles });
-
- return {
- hasAccess,
- isLoading,
- isAuthenticated,
- };
-};
+import { useCallback } from "react";
+import { ApiGetCall } from "../api/ApiCall";
+import { hasAccess, hasPermission, hasRole } from "../utils/permissions";
+
+/**
+ * Hook for checking user permissions and roles
+ * Integrates with the existing CIPP authentication system
+ */
+export const usePermissions = () => {
+ const currentRole = ApiGetCall({
+ url: "/api/me",
+ queryKey: "authmecipp",
+ });
+
+ const userRoles = currentRole.data?.clientPrincipal?.userRoles || [];
+ const userPermissions = currentRole.data?.permissions || [];
+ const isLoading = currentRole.isLoading;
+ const isAuthenticated = currentRole.isSuccess && userRoles.length > 0;
+ // CyberDrain-hosted instance: some infrastructure (custom domains on the shared plan) is
+ // managed in the management portal rather than from CIPP itself.
+ const isHosted = Boolean(currentRole.data?.hosted);
+ // CIPP-NG (container web app on an App Service plan) versus a legacy function app + static web app.
+ const isNg = Boolean(currentRole.data?.ng);
+
+ /**
+ * Check if user has specific permissions
+ * @param {string[]} requiredPermissions - Array of required permissions (supports wildcards)
+ * @returns {boolean} - True if user has at least one of the required permissions
+ */
+ const checkPermissions = useCallback(
+ (requiredPermissions) => {
+ if (!isAuthenticated) return false;
+ return hasPermission(userPermissions, requiredPermissions);
+ },
+ [userPermissions, isAuthenticated]
+ );
+
+ /**
+ * Check if user has specific roles
+ * @param {string[]} requiredRoles - Array of required roles
+ * @returns {boolean} - True if user has at least one of the required roles
+ */
+ const checkRoles = useCallback(
+ (requiredRoles) => {
+ if (!isAuthenticated) return false;
+ return hasRole(userRoles, requiredRoles);
+ },
+ [userRoles, isAuthenticated]
+ );
+
+ /**
+ * Check if user has access based on both permissions and roles
+ * @param {Object} config - Configuration object
+ * @param {string[]} config.requiredPermissions - Array of required permissions
+ * @param {string[]} config.requiredRoles - Array of required roles
+ * @returns {boolean} - True if user has access
+ */
+ const checkAccess = useCallback(
+ (config = {}) => {
+ if (!isAuthenticated) return false;
+
+ const { requiredPermissions = [], requiredRoles = [] } = config;
+
+ return hasAccess({
+ userPermissions,
+ userRoles,
+ requiredPermissions,
+ requiredRoles,
+ });
+ },
+ [userPermissions, userRoles, isAuthenticated]
+ );
+
+ return {
+ userPermissions,
+ userRoles,
+ isLoading,
+ isAuthenticated,
+ isHosted,
+ isNg,
+ checkPermissions,
+ checkRoles,
+ checkAccess,
+ };
+};
+
+/**
+ * Hook specifically for checking permissions with a simpler API
+ * @param {string[]} requiredPermissions - Array of required permissions
+ * @param {string[]} requiredRoles - Array of required roles
+ * @returns {Object} - Object containing hasAccess boolean and loading state
+ */
+export const useHasPermission = (requiredPermissions = [], requiredRoles = []) => {
+ const { checkAccess, isLoading, isAuthenticated } = usePermissions();
+
+ const hasAccess = checkAccess({ requiredPermissions, requiredRoles });
+
+ return {
+ hasAccess,
+ isLoading,
+ isAuthenticated,
+ };
+};
diff --git a/src/hooks/use-sharepoint-browser-recents.js b/src/hooks/use-sharepoint-browser-recents.js
new file mode 100644
index 000000000000..913cd3a61a65
--- /dev/null
+++ b/src/hooks/use-sharepoint-browser-recents.js
@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useState } from 'react'
+import {
+ SHAREPOINT_BROWSER_RECENTS_CHANGE_EVENT,
+ addRecentSharePointSite,
+ getRecentSharePointSites,
+} from '../utils/sharepoint-browser-recents'
+
+/**
+ * Browser-local recent SharePoint sites for the site-browser switcher (localStorage).
+ * @param {string} tenantFilter
+ */
+export function useSharePointBrowserRecents(tenantFilter) {
+ const [recent, setRecent] = useState([])
+
+ const refresh = useCallback(() => {
+ setRecent(getRecentSharePointSites(tenantFilter))
+ }, [tenantFilter])
+
+ useEffect(() => {
+ refresh()
+
+ const onStorage = (event) => {
+ if (
+ !event.key ||
+ (typeof event.key === 'string' && event.key.startsWith('cipp:sp-browser:recents:'))
+ ) {
+ refresh()
+ }
+ }
+ const onCustom = () => refresh()
+
+ window.addEventListener('storage', onStorage)
+ window.addEventListener(SHAREPOINT_BROWSER_RECENTS_CHANGE_EVENT, onCustom)
+ return () => {
+ window.removeEventListener('storage', onStorage)
+ window.removeEventListener(SHAREPOINT_BROWSER_RECENTS_CHANGE_EVENT, onCustom)
+ }
+ }, [refresh])
+
+ const trackRecent = useCallback(
+ (site) => {
+ addRecentSharePointSite(tenantFilter, site)
+ refresh()
+ },
+ [tenantFilter, refresh]
+ )
+
+ return { recent, trackRecent, refresh }
+}
diff --git a/src/icons/iconly/bulk/azure.js b/src/icons/iconly/bulk/azure.jsx
similarity index 100%
rename from src/icons/iconly/bulk/azure.js
rename to src/icons/iconly/bulk/azure.jsx
diff --git a/src/icons/iconly/bulk/bag.js b/src/icons/iconly/bulk/bag.jsx
similarity index 100%
rename from src/icons/iconly/bulk/bag.js
rename to src/icons/iconly/bulk/bag.jsx
diff --git a/src/icons/iconly/bulk/buy.js b/src/icons/iconly/bulk/buy.jsx
similarity index 100%
rename from src/icons/iconly/bulk/buy.js
rename to src/icons/iconly/bulk/buy.jsx
diff --git a/src/icons/iconly/bulk/calendar.js b/src/icons/iconly/bulk/calendar.jsx
similarity index 100%
rename from src/icons/iconly/bulk/calendar.js
rename to src/icons/iconly/bulk/calendar.jsx
diff --git a/src/icons/iconly/bulk/category.js b/src/icons/iconly/bulk/category.jsx
similarity index 100%
rename from src/icons/iconly/bulk/category.js
rename to src/icons/iconly/bulk/category.jsx
diff --git a/src/icons/iconly/bulk/chart.js b/src/icons/iconly/bulk/chart.jsx
similarity index 100%
rename from src/icons/iconly/bulk/chart.js
rename to src/icons/iconly/bulk/chart.jsx
diff --git a/src/icons/iconly/bulk/defender.js b/src/icons/iconly/bulk/defender.jsx
similarity index 100%
rename from src/icons/iconly/bulk/defender.js
rename to src/icons/iconly/bulk/defender.jsx
diff --git a/src/icons/iconly/bulk/document.js b/src/icons/iconly/bulk/document.jsx
similarity index 100%
rename from src/icons/iconly/bulk/document.js
rename to src/icons/iconly/bulk/document.jsx
diff --git a/src/icons/iconly/bulk/exchange.js b/src/icons/iconly/bulk/exchange.jsx
similarity index 100%
rename from src/icons/iconly/bulk/exchange.js
rename to src/icons/iconly/bulk/exchange.jsx
diff --git a/src/icons/iconly/bulk/graph.js b/src/icons/iconly/bulk/graph.jsx
similarity index 100%
rename from src/icons/iconly/bulk/graph.js
rename to src/icons/iconly/bulk/graph.jsx
diff --git a/src/icons/iconly/bulk/intune.js b/src/icons/iconly/bulk/intune.jsx
similarity index 100%
rename from src/icons/iconly/bulk/intune.js
rename to src/icons/iconly/bulk/intune.jsx
diff --git a/src/icons/iconly/bulk/microsoft.js b/src/icons/iconly/bulk/microsoft.jsx
similarity index 100%
rename from src/icons/iconly/bulk/microsoft.js
rename to src/icons/iconly/bulk/microsoft.jsx
diff --git a/src/icons/iconly/bulk/settings.js b/src/icons/iconly/bulk/settings.jsx
similarity index 100%
rename from src/icons/iconly/bulk/settings.js
rename to src/icons/iconly/bulk/settings.jsx
diff --git a/src/icons/iconly/bulk/sharepoint.js b/src/icons/iconly/bulk/sharepoint.jsx
similarity index 100%
rename from src/icons/iconly/bulk/sharepoint.js
rename to src/icons/iconly/bulk/sharepoint.jsx
diff --git a/src/icons/iconly/bulk/show.js b/src/icons/iconly/bulk/show.jsx
similarity index 100%
rename from src/icons/iconly/bulk/show.js
rename to src/icons/iconly/bulk/show.jsx
diff --git a/src/icons/iconly/bulk/teams.js b/src/icons/iconly/bulk/teams.jsx
similarity index 100%
rename from src/icons/iconly/bulk/teams.js
rename to src/icons/iconly/bulk/teams.jsx
diff --git a/src/icons/iconly/bulk/three-user.js b/src/icons/iconly/bulk/three-user.jsx
similarity index 100%
rename from src/icons/iconly/bulk/three-user.js
rename to src/icons/iconly/bulk/three-user.jsx
diff --git a/src/icons/iconly/bulk/ticket.js b/src/icons/iconly/bulk/ticket.jsx
similarity index 100%
rename from src/icons/iconly/bulk/ticket.js
rename to src/icons/iconly/bulk/ticket.jsx
diff --git a/src/icons/iconly/bulk/two-user.js b/src/icons/iconly/bulk/two-user.jsx
similarity index 100%
rename from src/icons/iconly/bulk/two-user.js
rename to src/icons/iconly/bulk/two-user.jsx
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 141824e0c90c..000000000000
--- a/src/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-
-import { Layout as DashboardLayout } from "./layouts/index.js";
-
-const Page = () => {
- const pageTitle = "Dashboard";
-
- return (
- {page} ;
-
-export default Page;
diff --git a/src/index.jsx b/src/index.jsx
new file mode 100644
index 000000000000..cd00939caff7
--- /dev/null
+++ b/src/index.jsx
@@ -0,0 +1,17 @@
+
+import { Layout as DashboardLayout } from "./layouts/index";
+
+const Page = () => {
+ const pageTitle = "Dashboard";
+
+ return (
+ {page} ;
+
+export default Page;
diff --git a/src/layouts/HeaderedTabbedLayout.jsx b/src/layouts/HeaderedTabbedLayout.jsx
index 94ef13bcfa42..9357853041e1 100644
--- a/src/layouts/HeaderedTabbedLayout.jsx
+++ b/src/layouts/HeaderedTabbedLayout.jsx
@@ -2,7 +2,6 @@ import { useCallback, useMemo } from "react";
import { usePathname } from "next/navigation";
import { useRouter } from "next/router";
import PropTypes from "prop-types";
-import ArrowLeftIcon from "@heroicons/react/24/outline/ArrowLeftIcon";
import {
Box,
Container,
@@ -15,7 +14,7 @@ import {
Typography,
} from "@mui/material";
import { ActionsMenu } from "../components/actions-menu";
-import { getIconByName } from "../utils/icon-registry";
+import { CippIcons, getIconByName } from "../utils/icon-registry"
import { useIsMobileLayout } from "../hooks/use-breakpoint";
import { useActionsDispatch } from "../hooks/use-actions-dispatch";
import { TabNavigationContext, useTabNavigationValue } from "./tab-navigation-context";
@@ -129,12 +128,15 @@ export const HeaderedTabbedLayout = (props) => {
// title above them. Gap applies to both axes, so the row gap is set separately or the
// stacked pairs end up as far apart vertically as they are horizontally.
+ sx={{
+ alignItems: "center",
+ flexWrap: "wrap",
+ columnGap: 2,
+ rowGap: 0.5,
+ minWidth: 0
+ }}>
{/* minWidth: 0 down the whole chain, and flexShrink: 0 on the icon. A copy-chip
already carries MUI's ellipsis and maxWidth: 100%, but flex items default to
min-width: auto, so every ancestor grew to fit instead of letting it truncate —
@@ -148,19 +150,24 @@ export const HeaderedTabbedLayout = (props) => {
) : (
+ sx={{
+ alignItems: "center",
+ minWidth: 0,
+ maxWidth: "100%"
+ }}>
{item.icon}
+ sx={{
+ color: "text.secondary",
+ minWidth: 0,
+ "& .MuiChip-root": { maxWidth: "100%" }
+ }}>
{item.text}
@@ -186,21 +193,23 @@ export const HeaderedTabbedLayout = (props) => {
+ sx={{
+ alignItems: isMobile ? "center" : "flex-start",
+ justifyContent: "space-between"
+ }}>
{/* minWidth: 0 so a long tenant/entity name truncates in the space the
picker leaves rather than pushing it off the right edge of the row.
Scoped to the picker's own breakpoint — above md this is unchanged. */}
+ sx={{
+ alignItems: "center",
+ justifyContent: "space-between"
+ }}>
{/* A name-shaped skeleton, not the word "Loading...": the header is
the entity's identity, and a text placeholder reads as a title.
titleControl lets a page swap the text for an interactive control
@@ -313,7 +322,8 @@ HeaderedTabbedLayout.propTypes = {
subtitle: PropTypes.arrayOf(
PropTypes.shape({
icon: PropTypes.node.isRequired,
- text: PropTypes.string.isRequired,
+ // Often a copy-chip (or other node), not plain text — see users/groups headers.
+ text: PropTypes.node.isRequired,
})
),
actions: PropTypes.arrayOf(
diff --git a/src/layouts/TabbedLayout.jsx b/src/layouts/TabbedLayout.jsx
index 2ac692e10ce9..8010482611e0 100644
--- a/src/layouts/TabbedLayout.jsx
+++ b/src/layouts/TabbedLayout.jsx
@@ -10,7 +10,9 @@ import { TabNavigationContext, useTabNavigationValue } from './tab-navigation-co
import { CippTabPicker } from '../components/CippComponents/CippTabPicker'
export const TabbedLayout = (props) => {
- const { tabOptions, children } = props
+ // `activePath` lets a page reached from a tab (rather than being one) keep its parent tab
+ // highlighted; the tab itself still navigates to its own path.
+ const { tabOptions, children, activePath } = props
const router = useRouter()
const pathname = usePathname()
const searchParams = useSearchParams()
@@ -60,7 +62,8 @@ export const TabbedLayout = (props) => {
const handleTabsChange = (event, value) => navigateToTab(value)
- const currentTab = visibleTabs.find((option) => option.path === pathname)
+ const resolvedPath = activePath ?? pathname
+ const currentTab = visibleTabs.find((option) => option.path === resolvedPath)
// Below md the tab row scrolls horizontally and still hides tabs off the right edge, so
// navigation collapses to a full-width picker in the slot the tab bar occupied. Always the
@@ -69,7 +72,7 @@ export const TabbedLayout = (props) => {
const isMobile = useIsMobileLayout()
const tabNavValue = useTabNavigationValue({
tabs: visibleTabs,
- currentPath: pathname,
+ currentPath: resolvedPath,
onNavigate: navigateToTab,
enabled: isMobile,
})
diff --git a/src/layouts/account-popover.js b/src/layouts/account-popover.js
deleted file mode 100644
index e27a3aba6e83..000000000000
--- a/src/layouts/account-popover.js
+++ /dev/null
@@ -1,305 +0,0 @@
-import { useCallback } from "react";
-import PropTypes from "prop-types";
-import { useRouter } from "next/navigation";
-import toast from "react-hot-toast";
-import ArrowPathIcon from "@heroicons/react/24/outline/ArrowPathIcon";
-import ArrowRightOnRectangleIcon from "@heroicons/react/24/outline/ArrowRightOnRectangleIcon";
-import ChevronDownIcon from "@heroicons/react/24/outline/ChevronDownIcon";
-import MagnifyingGlassIcon from "@heroicons/react/24/outline/MagnifyingGlassIcon";
-import MoonIcon from "@heroicons/react/24/outline/MoonIcon";
-import SunIcon from "@heroicons/react/24/outline/SunIcon";
-import {
- Avatar,
- Box,
- CircularProgress,
- List,
- ListItem,
- ListItemButton,
- ListItemIcon,
- ListItemText,
- Popover,
- Stack,
- SvgIcon,
- Typography,
- useMediaQuery,
-} from "@mui/material";
-import { usePopover } from "../hooks/use-popover";
-import { useIsMobileLayout } from "../hooks/use-breakpoint";
-import { useDialog } from "../hooks/use-dialog";
-import { paths } from "../paths";
-import { ApiGetCall } from "../api/ApiCall";
-import { CippApiDialog } from "../components/CippComponents/CippApiDialog";
-import { CogIcon, DocumentTextIcon, LifebuoyIcon, TrashIcon } from "@heroicons/react/24/outline";
-import ArrowTopRightOnSquareIcon from "@heroicons/react/24/outline/ArrowTopRightOnSquareIcon";
-import { useReleaseNotes } from "../contexts/release-notes-context";
-import { useQueryClient } from "@tanstack/react-query";
-import { usePathname } from "next/navigation";
-import { Divider } from "@mui/material";
-import { getHelpLinks, clearCippCache } from "../utils/help-links";
-
-export const AccountPopover = (props) => {
- const {
- direction = "ltr",
- language = "en",
- onThemeSwitch,
- onOpenSearch,
- paletteMode = "light",
- ...other
- } = props;
- const router = useRouter();
- const pathname = usePathname();
- const mdDown = useMediaQuery((theme) => theme.breakpoints.down("md"));
- const navCollapsed = useIsMobileLayout();
- const popover = usePopover();
- const queryClient = useQueryClient();
- const { openReleaseNotes } = useReleaseNotes();
- const orgData = ApiGetCall({
- url: "/api/me",
- queryKey: "authmecipp",
- });
-
- const userDetails = orgData.data?.clientPrincipal?.userDetails;
-
- // Cache user photo with user-specific key
- const userPhoto = ApiGetCall({
- url: "/api/ListUserPhoto",
- data: { UserID: userDetails },
- queryKey: `userPhoto-${userDetails}`,
- waiting: !!userDetails,
- staleTime: Infinity,
- responseType: "blob",
- convertToDataUrl: true,
- });
-
- // Re-checks Entra group membership server-side, then refetches /api/me so a role granted
- // through a just-activated PIM group applies without waiting out the role cache. Runs
- // through the standard confirm dialog, which also renders the API result.
- const refreshAccessDialog = useDialog();
-
- const handleLogout = useCallback(async () => {
- try {
- popover.handleClose();
- // delete query cache and persisted data
- queryClient.clear();
-
- router.push("/.auth/logout?post_logout_redirect_uri=" + encodeURIComponent(paths.index));
- } catch (err) {
- console.error(err);
- console.log(orgData);
- toast.error("Something went wrong");
- }
- }, [router, popover]);
-
- const defaultAvatar = (
-
- {userDetails?.[0]?.toUpperCase() || ""}
-
- );
-
- return (
- <>
-
- {defaultAvatar}
- <>
- {!mdDown && (
- <>
-
-
- {orgData.data?.clientPrincipal?.userDetails?.split("@")?.[1]}
-
-
- {orgData.data?.clientPrincipal?.userDetails ?? "Not logged in"}
-
-
- {orgData.data?.clientPrincipal?.userDetails && (
- <>
- {orgData?.isFetching ? (
-
-
- )}
-
- )}
-
- )}
-
-
- {orgData.data?.clientPrincipal?.userDetails && (
-
-
- )}
-
- );
-};
-
-AccountPopover.propTypes = {
- onThemeSwitch: PropTypes.func,
- paletteMode: PropTypes.oneOf(["dark", "light"]),
-};
diff --git a/src/layouts/account-popover.jsx b/src/layouts/account-popover.jsx
new file mode 100644
index 000000000000..3aeaf0bceab3
--- /dev/null
+++ b/src/layouts/account-popover.jsx
@@ -0,0 +1,306 @@
+import { useCallback } from "react";
+import { CippIcons } from "../utils/icon-registry";
+import PropTypes from "prop-types";
+import { useRouter } from "next/navigation";
+import {
+ Avatar,
+ Box,
+ CircularProgress,
+ List,
+ ListItem,
+ ListItemButton,
+ ListItemIcon,
+ ListItemText,
+ Popover,
+ Stack,
+ SvgIcon,
+ Typography,
+ useMediaQuery,
+} from "@mui/material";
+import { usePopover } from "../hooks/use-popover";
+import { useIsMobileLayout } from "../hooks/use-breakpoint";
+import { useDialog } from "../hooks/use-dialog";
+import { paths } from "../paths";
+import { ApiGetCall } from "../api/ApiCall";
+import { CippApiDialog } from "../components/CippComponents/CippApiDialog";
+import { useReleaseNotes } from "../contexts/release-notes-context";
+import { useQueryClient } from "@tanstack/react-query";
+import { usePathname } from "next/navigation";
+import { Divider } from "@mui/material";
+import { getHelpLinks, clearCippCache } from "../utils/help-links";
+
+export const AccountPopover = (props) => {
+ const {
+ direction = "ltr",
+ language = "en",
+ onThemeSwitch,
+ onOpenSearch,
+ paletteMode = "light",
+ ...other
+ } = props;
+ const router = useRouter();
+ const pathname = usePathname();
+ const mdDown = useMediaQuery((theme) => theme.breakpoints.down("md"));
+ const navCollapsed = useIsMobileLayout();
+ const popover = usePopover();
+ const queryClient = useQueryClient();
+ const { openReleaseNotes } = useReleaseNotes();
+ const orgData = ApiGetCall({
+ url: "/api/me",
+ queryKey: "authmecipp",
+ });
+
+ const userDetails = orgData.data?.clientPrincipal?.userDetails;
+
+ // Cache user photo with user-specific key
+ const userPhoto = ApiGetCall({
+ url: "/api/ListUserPhoto",
+ data: { UserID: userDetails },
+ queryKey: `userPhoto-${userDetails}`,
+ waiting: !!userDetails,
+ staleTime: Infinity,
+ responseType: "blob",
+ convertToDataUrl: true,
+ });
+
+ // Re-checks Entra group membership server-side, then refetches /api/me so a role granted
+ // through a just-activated PIM group applies without waiting out the role cache. Runs
+ // through the standard confirm dialog, which also renders the API result.
+ const refreshAccessDialog = useDialog();
+
+ const handleLogout = useCallback(() => {
+ const logoutUrl =
+ "/.auth/logout?post_logout_redirect_uri=" + encodeURIComponent(paths.index);
+ try {
+ popover.handleClose();
+ // delete query cache and persisted data
+ queryClient.clear();
+
+ router.push(logoutUrl);
+ } catch (err) {
+ console.error(err);
+ // Fall back to a hard navigation so a router failure still logs the user out.
+ window.location.href = logoutUrl;
+ }
+ }, [router, popover, queryClient]);
+
+ const defaultAvatar = (
+
+ {userDetails?.[0]?.toUpperCase() || ""}
+
+ );
+
+ return (
+ <>
+
+ {defaultAvatar}
+ <>
+ {!mdDown && (
+ <>
+
+
+ {orgData.data?.clientPrincipal?.userDetails?.split("@")?.[1]}
+
+
+ {orgData.data?.clientPrincipal?.userDetails ?? "Not logged in"}
+
+
+ {orgData.data?.clientPrincipal?.userDetails && (
+ <>
+ {orgData?.isFetching ? (
+
+
+ )}
+
+ )}
+
+ )}
+
+
+ {orgData.data?.clientPrincipal?.userDetails && (
+
+
+ )}
+
+ );
+};
+
+AccountPopover.propTypes = {
+ onThemeSwitch: PropTypes.func,
+ paletteMode: PropTypes.oneOf(["dark", "light"]),
+};
diff --git a/src/layouts/config.js b/src/layouts/config.js
deleted file mode 100644
index c54b951f3ec4..000000000000
--- a/src/layouts/config.js
+++ /dev/null
@@ -1,1268 +0,0 @@
-import {
- BuildingOfficeIcon,
- HomeIcon,
- SparklesIcon,
- UsersIcon,
- WrenchIcon,
-} from '@heroicons/react/24/outline'
-import {
- CloudOutlined,
- HomeRepairService,
- Laptop,
- MailOutline,
- ShieldOutlined,
-} from '@mui/icons-material'
-import { SvgIcon } from '@mui/material'
-
-export const nativeMenuItems = [
- {
- title: 'Dashboard',
- path: '/',
- icon: (
-
-
- ),
- permissions: ['CIPP.Core.*'],
- },
- {
- title: 'Identity Management',
- type: 'header',
- icon: (
-
-
- ),
- permissions: ['Identity.*'],
- items: [
- {
- title: 'Administration',
- permissions: ['Identity.User.*'],
- items: [
- {
- title: 'Users',
- path: '/identity/administration/users',
- permissions: ['Identity.User.*'],
- },
- {
- title: 'Guest Users',
- path: '/identity/administration/guest-users',
- permissions: ['Identity.User.*'],
- },
- {
- title: 'Risky Users',
- path: '/identity/administration/risky-users',
- permissions: ['Identity.User.*'],
- },
- {
- title: 'Groups',
- path: '/identity/administration/groups',
- permissions: ['Identity.Group.*'],
- },
- {
- title: 'Group Templates',
- path: '/identity/administration/group-templates',
- permissions: ['Identity.Group.*'],
- scope: 'global',
- },
- {
- title: 'Devices',
- path: '/identity/administration/devices',
- permissions: ['Identity.Device.*'],
- },
- {
- title: 'Deleted Items',
- path: '/identity/administration/deleted-items',
- permissions: ['Identity.User.*'],
- },
- {
- title: 'Roles',
- path: '/identity/administration/roles',
- permissions: ['Identity.Role.*'],
- },
- {
- title: 'JIT Admin',
- path: '/identity/administration/jit-admin',
- permissions: ['Identity.Role.*'],
- },
- {
- title: 'JIT Admin Templates',
- path: '/identity/administration/jit-admin-templates',
- permissions: ['Identity.Role.*'],
- scope: 'global',
- },
- {
- title: 'Vacation Mode',
- path: '/identity/administration/vacation-mode',
- permissions: ['Identity.User.*'],
- },
- {
- title: 'Offboarding Wizard',
- path: '/identity/administration/offboarding-wizard',
- permissions: ['Identity.User.*'],
- },
- ],
- },
- {
- title: 'Reports',
- permissions: [
- 'Identity.User.*',
- 'Identity.Group.*',
- 'Identity.Device.*',
- 'Identity.Role.*',
- 'Identity.AuditLog.*',
- ],
- items: [
- {
- title: 'MFA Report',
- path: '/identity/reports/mfa-report',
- permissions: ['Identity.User.*'],
- },
- {
- title: 'Inactive Users',
- path: '/identity/reports/inactive-users-report',
- permissions: ['Identity.User.*'],
- },
- {
- title: 'Sign-in Report',
- path: '/identity/reports/signin-report',
- permissions: ['Identity.User.*'],
- },
- {
- title: 'Microsoft Entra Connect Report',
- path: '/identity/reports/azure-ad-connect-report',
- permissions: ['Identity.User.*'],
- },
- {
- title: 'Risk Detections',
- path: '/identity/reports/risk-detections',
- permissions: ['Identity.User.*'],
- },
- ],
- },
- ],
- },
- {
- title: 'Tenant Administration',
- type: 'header',
- icon: (
-
-
- ),
- permissions: [
- 'Tenant.*',
- 'Identity.AuditLog.*',
- 'CIPP.Backup.*',
- 'Scheduler.Billing.*',
- ],
- items: [
- {
- title: 'Administration',
- permissions: ['Tenant.Administration.*'],
- items: [
- {
- title: 'Tenants',
- path: '/tenant/administration/tenants',
- permissions: ['Tenant.Administration.*'],
- scope: 'global',
- },
- {
- title: 'Alert Configuration',
- path: '/tenant/administration/alert-configuration',
- permissions: ['Tenant.Alert.*'],
- scope: 'global',
- },
- {
- title: 'Audit Logs',
- path: '/tenant/administration/audit-logs',
- permissions: ['Identity.AuditLog.*'],
- },
- {
- title: 'Applications',
- path: '/tenant/administration/applications/enterprise-apps',
- permissions: ['Tenant.Application.*'],
- },
- {
- title: 'Secure Score',
- path: '/tenant/administration/securescore',
- permissions: ['Tenant.Administration.*'],
- },
- {
- title: 'App Consent Requests',
- path: '/tenant/administration/app-consent-requests',
- permissions: ['Tenant.Application.*'],
- },
- {
- title: 'Authentication Methods',
- path: '/tenant/administration/authentication-methods',
- permissions: ['Tenant.Config.*'],
- },
- {
- title: 'Partner Relationships',
- path: '/tenant/administration/partner-relationships',
- permissions: ['Tenant.Relationship.*'],
- },
- {
- title: 'Domains',
- path: '/tenant/administration/domains',
- permissions: ['Tenant.Administration.*'],
- },
- ],
- },
- {
- title: 'GDAP Management',
- path: '/tenant/gdap-management',
- permissions: ['Tenant.Relationship.*'],
- scope: 'global',
- },
- // Flag-gated swap: the Baselines feature flag lists this path in its Pages
- // (hidden while the flag is off) and the classic Standards/Drift paths in
- // HidesPages (hidden while it is on) - the two never show together.
- {
- title: 'Baselines',
- path: '/tenant/baselines',
- permissions: ['Tenant.Baselines.*'],
- scope: 'global',
- },
- {
- title: 'Domains Analyser',
- path: '/tenant/standards/domains-analyser',
- permissions: ['Tenant.DomainAnalyser.*'],
- scope: 'global',
- },
- {
- title: 'Standards & Drift',
- path: '/tenant/standards/alignment',
- permissions: ['Tenant.Standards.*'],
- scope: 'global',
- },
- {
- title: 'Best Practice Analyser',
- path: '/tenant/standards/bpa-report',
- permissions: ['Tenant.BestPracticeAnalyser.*'],
- scope: 'global',
- },
- {
- title: 'Conditional Access',
- permissions: ['Tenant.ConditionalAccess.*'],
- items: [
- {
- title: 'CA Policies',
- path: '/tenant/conditional/list-policies',
- permissions: ['Tenant.ConditionalAccess.*'],
- },
- {
- title: 'CA Vacation Mode',
- path: '/tenant/conditional/deploy-vacation',
- permissions: ['Tenant.ConditionalAccess.*'],
- },
- {
- title: 'CA Templates',
- path: '/tenant/conditional/list-template',
- permissions: ['Tenant.ConditionalAccess.*'],
- scope: 'global',
- },
- {
- title: 'Named Locations',
- path: '/tenant/conditional/list-named-locations',
- permissions: ['Tenant.ConditionalAccess.*'],
- },
- ],
- },
- {
- title: 'Reports',
- permissions: [
- 'Tenant.Administration.*',
- 'Scheduler.Billing.*',
- 'Tenant.Application.*',
- ],
- items: [
- {
- title: 'Licence Report',
- path: '/tenant/reports/list-licenses',
- permissions: ['Tenant.Administration.*'],
- },
- {
- title: 'Sherweb Licence Report',
- path: '/tenant/reports/list-csp-licenses',
- permissions: ['Tenant.Directory.*'],
- },
- {
- title: 'Consented Applications',
- path: '/tenant/reports/application-consent',
- permissions: ['Tenant.Application.*'],
- },
- {
- title: 'Graph / Office Reports',
- path: '/tenant/reports/graph-office-reports',
- permissions: ['Tenant.Reports.*'],
- },
- {
- title: 'Custom Test Report',
- path: '/tenant/reports/custom-test-report',
- permissions: ['Tenant.Reports.*'],
- },
- ],
- },
- {
- title: 'Manage Tenant',
- path: '/tenant/manage/edit',
- permissions: ['Tenant.Administration.*'],
- },
- ],
- },
- {
- title: 'Security & Compliance',
- type: 'header',
- icon: (
-
-
- ),
- permissions: [
- 'Security.Incident.*',
- 'Security.Alert.*',
- 'Tenant.DeviceCompliance.*',
- 'Security.SafeLinksPolicy.*',
- 'Security.DlpCompliancePolicy.*',
- 'Security.RetentionCompliancePolicy.*',
- 'Security.SensitivityLabel.*',
- 'Security.SensitiveInfoType.*',
- ],
- items: [
- {
- title: 'Incidents & Alerts',
- permissions: ['Security.Incident.*'],
- items: [
- {
- title: 'Incidents',
- path: '/security/incidents/list-incidents',
- permissions: ['Security.Incident.*'],
- },
- {
- title: 'Alerts',
- path: '/security/incidents/list-alerts',
- permissions: ['Security.Alert.*'],
- },
- {
- title: 'MDO Alerts',
- path: '/security/incidents/list-mdo-alerts',
- permissions: ['Security.Alert.*'],
- },
- {
- title: 'Check Alerts',
- path: '/security/incidents/list-check-alerts',
- permissions: ['Security.Alert.*'],
- },
- ],
- },
- {
- title: 'Defender',
- permissions: ['Security.Alert.*'],
- items: [
- {
- title: 'Defender Status',
- path: '/security/defender/list-defender',
- permissions: ['Security.Alert.*'],
- },
- {
- title: 'Defender Deployment',
- path: '/security/defender/deployment',
- permissions: ['Security.Alert.*'],
- },
- {
- title: 'Vulnerabilities',
- path: '/security/defender/list-defender-tvm',
- permissions: ['Security.Alert.*'],
- },
- {
- title: 'CVE Management',
- path: '/security/defender/defender-cve-exceptions',
- permissions: ['Security.Alert.*'],
- },
- ],
- },
- {
- title: 'Reports',
- permissions: ['Tenant.DeviceCompliance.*', 'Security.Defender.*'],
- items: [
- {
- title: 'Device Compliance',
- path: '/security/reports/list-device-compliance',
- permissions: ['Tenant.DeviceCompliance.*'],
- },
- {
- title: 'MDE Onboarding',
- path: '/security/reports/mde-onboarding',
- permissions: ['Security.Defender.*'],
- },
- {
- title: 'Vulnerability Report',
- path: '/security/reports/cve-report',
- permissions: ['Security.Defender.*'],
- },
- ],
- },
- {
- title: 'Safe Links',
- permissions: ['Security.SafeLinksPolicy.*'],
- items: [
- {
- title: 'Safe Links Policies',
- path: '/security/safelinks/safelinks',
- permissions: ['Security.SafeLinksPolicy.*'],
- },
- {
- title: 'Safe Links Templates',
- path: '/security/safelinks/safelinks-template',
- permissions: ['Security.SafeLinksPolicy.*'],
- scope: 'global',
- },
- ],
- },
- {
- title: 'Purview Compliance',
- permissions: [
- 'Security.DlpCompliancePolicy.*',
- 'Security.RetentionCompliancePolicy.*',
- 'Security.SensitivityLabel.*',
- 'Security.SensitiveInfoType.*',
- ],
- items: [
- {
- title: 'DLP Policies',
- path: '/security/compliance/dlp',
- permissions: ['Security.DlpCompliancePolicy.*'],
- },
- {
- title: 'DLP Policy Templates',
- path: '/security/compliance/dlp-templates',
- permissions: ['Security.DlpCompliancePolicy.*'],
- scope: 'global',
- },
- {
- title: 'Retention Policies',
- path: '/security/compliance/retention',
- permissions: ['Security.RetentionCompliancePolicy.*'],
- },
- {
- title: 'Retention Policy Templates',
- path: '/security/compliance/retention-templates',
- permissions: ['Security.RetentionCompliancePolicy.*'],
- scope: 'global',
- },
- {
- title: 'Sensitivity Labels',
- path: '/security/compliance/labels',
- permissions: ['Security.SensitivityLabel.*'],
- },
- {
- title: 'Sensitivity Label Templates',
- path: '/security/compliance/labels-templates',
- permissions: ['Security.SensitivityLabel.*'],
- scope: 'global',
- },
- {
- title: 'Sensitive Information Types',
- path: '/security/compliance/sit',
- permissions: ['Security.SensitiveInfoType.*'],
- },
- {
- title: 'Sensitive Info Type Templates',
- path: '/security/compliance/sit-templates',
- permissions: ['Security.SensitiveInfoType.*'],
- scope: 'global',
- },
- ],
- },
- ],
- },
- {
- title: 'Copilot & AI',
- type: 'header',
- icon: (
-
-
- ),
- permissions: ['Tenant.Standards.*'],
- items: [
- {
- title: 'Shadow AI Discovery',
- path: '/copilot/shadow-ai',
- permissions: ['Tenant.Standards.*'],
- },
- {
- title: 'Copilot Settings',
- path: '/copilot/settings',
- permissions: ['Tenant.Standards.*'],
- },
- {
- title: 'Agent365',
- permissions: ['Tenant.Standards.*'],
- items: [
- {
- title: 'Packages',
- path: '/copilot/agent365/packages',
- permissions: ['Tenant.Standards.*'],
- },
- ],
- },
- {
- title: 'Reports',
- permissions: ['Tenant.Standards.*'],
- items: [
- {
- title: 'Copilot Adoption',
- path: '/copilot/reports/copilot-adoption',
- permissions: ['Tenant.Standards.*'],
- },
- {
- title: 'Copilot Usage Trend',
- path: '/copilot/reports/copilot-trend',
- permissions: ['Tenant.Standards.*'],
- },
- {
- title: 'Copilot User Activity',
- path: '/copilot/reports/copilot-usage',
- permissions: ['Tenant.Standards.*'],
- },
- ],
- },
- ],
- },
- {
- title: 'Intune',
- type: 'header',
- icon: (
-
-
- ),
- permissions: [
- 'Endpoint.Application.*',
- 'Endpoint.Autopilot.*',
- 'Endpoint.MEM.*',
- 'Endpoint.Device.*',
- 'Endpoint.Device.Read',
- ],
- items: [
- {
- title: 'Applications',
- permissions: ['Endpoint.Application.*'],
- items: [
- {
- title: 'Applications',
- path: '/endpoint/applications/list',
- permissions: ['Endpoint.Application.*'],
- },
- {
- title: 'Application Queue',
- path: '/endpoint/applications/queue',
- permissions: ['Endpoint.Application.*'],
- },
- {
- title: 'Application Templates',
- path: '/endpoint/applications/templates',
- permissions: ['Endpoint.Application.*'],
- scope: 'global',
- },
- ],
- },
- {
- title: 'Autopilot & Enrollment',
- permissions: ['Endpoint.Autopilot.*'],
- items: [
- {
- title: 'Autopilot Devices',
- path: '/endpoint/autopilot/list-devices',
- permissions: ['Endpoint.Autopilot.*'],
- },
- {
- title: 'Add Autopilot Device',
- path: '/endpoint/autopilot/add-device',
- permissions: ['Endpoint.Autopilot.*'],
- },
- {
- title: 'Enrollment Profiles',
- path: '/endpoint/autopilot/enrollment-profiles',
- permissions: ['Endpoint.Autopilot.*'],
- },
- {
- title: 'Status Pages',
- path: '/endpoint/autopilot/list-status-pages',
- permissions: ['Endpoint.Autopilot.*'],
- },
- ],
- },
- {
- title: 'Device Management',
- permissions: ['Endpoint.MEM.*', 'Endpoint.Device.*'],
- items: [
- {
- title: 'Devices',
- path: '/endpoint/MEM/devices',
- permissions: ['Endpoint.Device.*'],
- },
- {
- title: 'BitLocker Key Search',
- path: '/endpoint/MEM/bitlocker-search',
- permissions: ['Endpoint.Device.*'],
- },
- {
- title: 'Configuration Policies',
- path: '/endpoint/MEM/list-policies',
- permissions: ['Endpoint.MEM.*'],
- },
- {
- title: 'Compliance Policies',
- path: '/endpoint/MEM/list-compliance-policies',
- permissions: ['Endpoint.MEM.*'],
- },
- {
- title: 'App Policies',
- path: '/endpoint/MEM/list-appprotection-policies',
- permissions: ['Endpoint.MEM.*'],
- },
- {
- title: 'Policy Templates',
- path: '/endpoint/MEM/list-templates',
- permissions: ['Endpoint.MEM.*'],
- scope: 'global',
- },
- {
- title: 'Reusable Settings',
- path: '/endpoint/MEM/reusable-settings',
- permissions: ['Endpoint.MEM.*'],
- },
- {
- title: 'Reusable Settings Templates',
- path: '/endpoint/MEM/reusable-settings-templates',
- permissions: ['Endpoint.MEM.*'],
- scope: 'global',
- },
- {
- title: 'Assignment Filters',
- path: '/endpoint/MEM/assignment-filters',
- permissions: ['Endpoint.MEM.*'],
- },
- {
- title: 'Assignment Filter Templates',
- path: '/endpoint/MEM/assignment-filter-templates',
- permissions: ['Endpoint.MEM.*'],
- scope: 'global',
- },
- {
- title: 'Scripts',
- path: '/endpoint/MEM/list-scripts',
- permissions: ['Endpoint.MEM.*'],
- },
- {
- title: 'MAA Requests',
- path: '/endpoint/MEM/approval-requests',
- permissions: ['Endpoint.MEM.*'],
- },
- ],
- },
- {
- title: 'Reports',
- permissions: [
- 'Endpoint.Device.*',
- 'Endpoint.Autopilot.*',
- 'Endpoint.MEM.*',
- ],
- items: [
- {
- title: 'Analytics Device Score',
- path: '/endpoint/reports/analyticsdevicescore',
- permissions: ['Endpoint.Device.*'],
- },
- {
- title: 'Work from anywhere',
- path: '/endpoint/reports/workfromanywhere',
- permissions: ['Endpoint.Device.*'],
- },
- {
- title: 'Autopilot Deployments',
- path: '/endpoint/reports/autopilot-deployment',
- permissions: ['Endpoint.Autopilot.*'],
- },
- {
- title: 'Discovered Apps',
- path: '/endpoint/reports/detected-apps',
- permissions: ['Endpoint.MEM.*'],
- },
- ],
- },
- ],
- },
- {
- title: 'Teams & SharePoint',
- type: 'header',
- icon: (
-
-
- ),
- permissions: [
- 'Sharepoint.Site.*',
- 'Sharepoint.Admin.*',
- 'Teams.Group.*',
- 'Teams.Activity.*',
- 'Teams.Voice.*',
- ],
- items: [
- {
- title: 'OneDrive',
- path: '/teams-share/onedrive',
- permissions: ['Sharepoint.Site.*'],
- },
- {
- title: 'SharePoint',
- path: '/teams-share/sharepoint',
- permissions: ['Sharepoint.Admin.*'],
- },
- {
- title: 'SharePoint Templates',
- path: '/teams-share/sharepoint-templates',
- permissions: ['Sharepoint.Admin.*'],
- },
- {
- title: 'Deleted Sites',
- path: '/teams-share/deleted-sites',
- permissions: ['Sharepoint.Admin.*'],
- },
- {
- title: 'Sharing Report',
- path: '/teams-share/sharing-report',
- permissions: ['Sharepoint.Site.*'],
- },
- {
- title: 'Permissions Report',
- path: '/teams-share/permissions-report',
- permissions: ['Sharepoint.Site.*'],
- },
- {
- title: 'External Users',
- path: '/teams-share/external-users',
- permissions: ['Sharepoint.Site.*'],
- },
- {
- title: 'Teams',
- permissions: ['Teams.Group.*'],
- items: [
- {
- title: 'Teams',
- path: '/teams-share/teams/list-team',
- permissions: ['Teams.Group.*'],
- },
- {
- title: 'Teams Activity',
- path: '/teams-share/teams/teams-activity',
- permissions: ['Teams.Activity.*'],
- },
- {
- title: 'Business Voice',
- path: '/teams-share/teams/business-voice',
- permissions: ['Teams.Voice.*'],
- },
- ],
- },
- ],
- },
- {
- title: 'Email & Exchange',
- type: 'header',
- icon: (
-
-
- ),
- permissions: [
- 'Exchange.Mailbox.*',
- 'Exchange.Contact.*',
- 'Exchange.SpamFilter.*',
- 'Exchange.TransportRule.*',
- 'Exchange.Connector.*',
- 'Exchange.ConnectionFilter.*',
- 'Exchange.Equipment.*',
- 'Exchange.Room.*',
- 'Exchange.SafeLinks.*',
- 'Exchange.Group.*',
- 'Exchange.RetentionPolicies.*',
- ],
- items: [
- {
- title: 'Administration',
- permissions: ['Exchange.Mailbox.*'],
- items: [
- {
- title: 'Mailboxes',
- path: '/email/administration/mailboxes',
- permissions: ['Exchange.Mailbox.*'],
- },
- {
- title: 'HVE Accounts',
- path: '/email/administration/hve-accounts',
- permissions: ['Exchange.Mailbox.*'],
- },
- {
- title: 'Deleted Mailboxes',
- path: '/email/administration/deleted-mailboxes',
- permissions: ['Exchange.Mailbox.*'],
- },
- {
- title: 'Mailbox Rules',
- path: '/email/administration/mailbox-rules',
- permissions: ['Exchange.Mailbox.*'],
- },
- {
- title: 'Contacts',
- path: '/email/administration/contacts',
- permissions: ['Exchange.Contact.*'],
- },
- {
- title: 'Contact Templates',
- path: '/email/administration/contacts-template',
- permissions: ['Exchange.Contact.*'],
- scope: 'global',
- },
- {
- title: 'Quarantine',
- path: '/email/administration/quarantine',
- permissions: ['Exchange.SpamFilter.*'],
- },
- {
- title: 'Restricted Users',
- path: '/email/administration/restricted-users',
- permissions: ['Exchange.Mailbox.*'],
- },
- {
- title: 'Tenant Allow/Block Lists',
- path: '/email/administration/tenant-allow-block-lists',
- permissions: ['Exchange.SpamFilter.*'],
- },
- {
- title: 'Allow/Block List Templates',
- path: '/email/administration/tenant-allow-block-list-templates',
- permissions: ['Exchange.SpamFilter.*'],
- scope: 'global',
- },
- {
- title: 'Retention Policies & Tags',
- path: '/email/administration/exchange-retention/policies',
- permissions: ['Exchange.RetentionPolicies.*'],
- },
- ],
- },
- {
- title: 'Transport',
- permissions: ['Exchange.TransportRule.*', 'Exchange.Connector.*'],
- items: [
- {
- title: 'Transport rules',
- path: '/email/transport/list-rules',
- permissions: ['Exchange.TransportRule.*'],
- },
- {
- title: 'Transport Templates',
- path: '/email/transport/list-templates',
- permissions: ['Exchange.TransportRule.*'],
- scope: 'global',
- },
- {
- title: 'Connectors',
- path: '/email/transport/list-connectors',
- permissions: ['Exchange.Connector.*'],
- },
- {
- title: 'Connector Templates',
- path: '/email/transport/list-connector-templates',
- permissions: ['Exchange.Connector.*'],
- scope: 'global',
- },
- ],
- },
- {
- title: 'Spamfilter',
- permissions: ['Exchange.SpamFilter.*', 'Exchange.ConnectionFilter.*'],
- items: [
- {
- title: 'Spamfilter',
- path: '/email/spamfilter/list-spamfilter',
- permissions: ['Exchange.SpamFilter.*'],
- },
- {
- title: 'Spamfilter templates',
- path: '/email/spamfilter/list-templates',
- permissions: ['Exchange.SpamFilter.*'],
- scope: 'global',
- },
- {
- title: 'Connection filter',
- path: '/email/spamfilter/list-connectionfilter',
- permissions: ['Exchange.ConnectionFilter.*'],
- },
- {
- title: 'Connection filter templates',
- path: '/email/spamfilter/list-connectionfilter-templates',
- permissions: ['Exchange.ConnectionFilter.*'],
- scope: 'global',
- },
- {
- title: 'Quarantine Policies',
- path: '/email/spamfilter/list-quarantine-policies',
- permissions: ['Exchange.SpamFilter.*'],
- },
- ],
- },
- {
- title: 'Resource Management',
- permissions: ['Exchange.Equipment.*', 'Exchange.Room.*'],
- items: [
- {
- title: 'Equipment',
- path: '/email/resources/management/equipment',
- permissions: ['Exchange.Equipment.*'],
- },
- {
- title: 'Rooms',
- path: '/email/resources/management/list-rooms',
- permissions: ['Exchange.Room.*'],
- },
- {
- title: 'Room Lists',
- path: '/email/resources/management/room-lists',
- permissions: ['Exchange.Room.*'],
- },
- ],
- },
- {
- title: 'Reports',
- permissions: [
- 'Exchange.Mailbox.*',
- 'Exchange.SpamFilter.*',
- 'Exchange.SafeLinks.*',
- 'Exchange.Group.*',
- ],
- items: [
- {
- title: 'Mailbox Statistics',
- path: '/email/reports/mailbox-statistics',
- permissions: ['Exchange.Mailbox.*'],
- },
- {
- title: 'Mailbox Activity',
- path: '/email/reports/mailbox-activity',
- permissions: ['Exchange.Mailbox.*'],
- },
- {
- title: 'Mailbox Client Access Settings',
- path: '/email/reports/mailbox-cas-settings',
- permissions: ['Exchange.Mailbox.*'],
- },
- {
- title: 'Mailbox Permissions',
- path: '/email/reports/mailbox-permissions',
- permissions: ['Exchange.Mailbox.*'],
- },
- {
- title: 'Calendar Permissions',
- path: '/email/reports/calendar-permissions',
- permissions: ['Exchange.Mailbox.*'],
- },
- {
- title: 'Mailbox Forwarding',
- path: '/email/reports/mailbox-forwarding',
- permissions: ['Exchange.Mailbox.*'],
- },
- {
- title: 'Anti-Phishing Filters',
- path: '/email/reports/antiphishing-filters',
- permissions: ['Exchange.SpamFilter.*'],
- },
- {
- title: 'Malware Filters',
- path: '/email/reports/malware-filters',
- permissions: ['Exchange.SpamFilter.*'],
- },
- {
- title: 'Safe Attachments Filters',
- path: '/email/reports/safeattachments-filters',
- permissions: ['Exchange.SafeLinks.*'],
- },
- {
- title: 'Shared Mailbox with Enabled Account',
- path: '/email/reports/SharedMailboxEnabledAccount',
- permissions: ['Exchange.Mailbox.*'],
- },
- {
- title: 'ActiveSync Devices',
- path: '/email/reports/activesync-devices',
- permissions: ['Exchange.Mailbox.*'],
- },
- {
- title: 'Global Address List',
- path: '/email/reports/global-address-list',
- permissions: ['Exchange.Group.*'],
- },
- ],
- },
- ],
- },
- {
- title: 'Tools',
- type: 'header',
- icon: (
-
-
- ),
- permissions: [
- 'CIPP.*',
- 'Tenant.Administration.*',
- 'Tenant.Application.*',
- 'Tenant.DomainAnalyser.*',
- 'Exchange.Mailbox.*',
- 'Endpoint.MEM.*',
- 'CIPP.Scheduler.*',
- ],
- items: [
- {
- title: 'Tenant Tools',
- permissions: ['Tenant.Administration.*'],
- items: [
- {
- title: 'Graph Explorer',
- path: '/tenant/tools/graph-explorer',
- permissions: ['Tenant.Administration.*'],
- },
- {
- title: 'Tenant Lookup',
- path: '/tenant/tools/tenantlookup',
- permissions: ['Tenant.Administration.*'],
- scope: 'global',
- },
- {
- title: 'Application Approval',
- path: '/tenant/tools/appapproval',
- permissions: ['Tenant.Application.*'],
- },
- {
- title: 'Individual Domain Check',
- path: '/tenant/tools/individual-domains',
- permissions: ['Tenant.DomainAnalyser.*'],
- scope: 'global',
- },
- {
- title: 'IP Database',
- path: '/tenant/tools/geoiplookup',
- permissions: ['CIPP.Core.*'],
- scope: 'global',
- },
- ],
- },
- {
- title: 'Email Tools',
- permissions: ['Exchange.Mailbox.*'],
- items: [
- {
- title: 'Message Trace',
- path: '/email/tools/message-trace',
- permissions: ['Exchange.Mailbox.*'],
- },
- {
- title: 'Message Viewer',
- path: '/email/tools/message-viewer',
- permissions: ['Exchange.Mailbox.*'],
- },
- {
- title: 'Mailbox Restores',
- path: '/email/tools/mailbox-restores',
- permissions: ['Exchange.Mailbox.*'],
- },
- {
- title: 'Message Encryption',
- path: '/email/tools/message-encryption',
- permissions: ['Exchange.Mailbox.*'],
- },
- ],
- },
- {
- title: 'Intune Tools',
- permissions: ['Endpoint.MEM.*'],
- items: [
- {
- title: 'Compare Policies',
- path: '/endpoint/MEM/compare-policies',
- permissions: ['Endpoint.MEM.*'],
- scope: 'global',
- },
- ],
- },
- {
- title: 'Dark Web Tools',
- permissions: ['CIPP.Core.*'],
- items: [
- {
- title: 'Tenant Breach Lookup',
- path: '/tools/tenantbreachlookup',
- permissions: ['CIPP.Core.*'],
- scope: 'global',
- },
- {
- title: 'Breach Lookup',
- path: '/tools/breachlookup',
- permissions: ['CIPP.Core.*'],
- scope: 'global',
- },
- ],
- },
- {
- title: 'Report Builder',
- path: '/tools/report-builder/generated',
- roles: ['admin', 'superadmin'],
- permissions: ['CIPP.Core.*'],
- scope: 'global',
- },
- {
- title: 'Custom Tests',
- path: '/tools/custom-tests',
- roles: ['admin', 'superadmin'],
- permissions: ['CIPP.Tests.*'],
- scope: 'global',
- },
- {
- title: 'Template Library',
- path: '/tools/templatelib',
- roles: ['editor', 'admin', 'superadmin'],
- permissions: ['CIPP.Core.*'],
- scope: 'global',
- },
- {
- title: 'Catalog',
- path: '/tools/community-repos',
- roles: ['editor', 'admin', 'superadmin'],
- permissions: ['CIPP.Core.*'],
- scope: 'global',
- },
- {
- title: 'Scheduler',
- path: '/cipp/scheduler',
- roles: ['editor', 'admin', 'superadmin'],
- permissions: ['CIPP.Scheduler.*'],
- },
- ],
- },
- {
- title: 'CIPP',
- type: 'header',
- icon: (
-
-
- ),
- permissions: [
- 'CIPP.*', // Pattern matching - matches any CIPP permission
- ],
- items: [
- {
- title: 'Application Settings',
- path: '/cipp/settings',
- roles: ['admin', 'superadmin'],
- permissions: ['CIPP.AppSettings.*'],
- scope: 'global',
- },
- {
- title: 'Logbook',
- path: '/cipp/logs',
- roles: ['editor', 'admin', 'superadmin'],
- permissions: ['CIPP.Core.*'],
- scope: 'global',
- },
- {
- title: 'Setup Wizard',
- path: '/onboardingv2',
- roles: ['admin', 'superadmin'],
- permissions: ['CIPP.AppSettings.*'],
- scope: 'global',
- },
- {
- title: 'Integrations',
- path: '/cipp/integrations',
- roles: ['admin', 'superadmin'],
- permissions: ['CIPP.Extension.*'],
- scope: 'global',
- },
- {
- title: 'Custom Data',
- path: '/cipp/custom-data/directory-extensions',
- roles: ['admin', 'superadmin'],
- permissions: ['CIPP.AppSettings.*'],
- scope: 'global',
- },
- {
- title: 'Advanced',
- roles: ['superadmin'],
- permissions: ['CIPP.SuperAdmin.*'],
- items: [
- {
- title: 'Super Admin',
- path: '/cipp/advanced/super-admin/tenant-mode',
- roles: ['superadmin'],
- permissions: ['CIPP.SuperAdmin.*'],
- scope: 'global',
- },
- {
- title: 'Container Management',
- path: '/cipp/advanced/container-management/status',
- roles: ['superadmin'],
- permissions: ['CIPP.SuperAdmin.*'],
- scope: 'global',
- },
- {
- // Lands on cipp-roles, not cipp-users: cipp-users is gated by the
- // SuperAdminNG feature flag, and the nav filter drops any item whose
- // path is in a disabled flag's Pages list — pointing here at cipp-users
- // would hide the whole Authentication group (including the ungated
- // SSO and SAM App pages) on non-NG instances.
- title: 'Authentication',
- path: '/cipp/advanced/authentication/cipp-roles',
- roles: ['superadmin'],
- permissions: ['CIPP.SuperAdmin.*'],
- scope: 'global',
- },
- {
- title: 'Exchange Cmdlets',
- path: '/cipp/advanced/exchange-cmdlets',
- roles: ['superadmin'],
- permissions: ['CIPP.SuperAdmin.*'],
- scope: 'global',
- },
- {
- title: 'Timers',
- path: '/cipp/advanced/timers',
- roles: ['superadmin'],
- permissions: ['CIPP.SuperAdmin.*'],
- scope: 'global',
- },
- {
- title: 'Table Maintenance',
- path: '/cipp/advanced/table-maintenance',
- roles: ['superadmin'],
- permissions: ['CIPP.SuperAdmin.*'],
- scope: 'global',
- },
- {
- title: 'Diagnostics',
- path: '/cipp/advanced/diagnostics',
- roles: ['superadmin'],
- permissions: ['CIPP.SuperAdmin.*'],
- scope: 'global',
- },
- ],
- },
- ],
- },
-]
diff --git a/src/layouts/config.jsx b/src/layouts/config.jsx
new file mode 100644
index 000000000000..b6872c326f5d
--- /dev/null
+++ b/src/layouts/config.jsx
@@ -0,0 +1,1307 @@
+import { SvgIcon } from '@mui/material'
+import { CippIcons } from '../utils/icon-registry'
+
+export const nativeMenuItems = [
+ {
+ title: 'Dashboard',
+ path: '/',
+ icon: (
+
+
+ ),
+ permissions: ['CIPP.Core.*'],
+ },
+ {
+ title: 'Identity Management',
+ type: 'header',
+ icon: (
+
+
+ ),
+ permissions: ['Identity.*'],
+ items: [
+ {
+ title: 'Administration',
+ permissions: ['Identity.User.*'],
+ items: [
+ {
+ title: 'Users',
+ path: '/identity/administration/users',
+ permissions: ['Identity.User.*'],
+ },
+ {
+ title: 'Guest Users',
+ path: '/identity/administration/guest-users',
+ permissions: ['Identity.User.*'],
+ },
+ {
+ title: 'Risky Users',
+ path: '/identity/administration/risky-users',
+ permissions: ['Identity.User.*'],
+ },
+ {
+ title: 'Groups',
+ path: '/identity/administration/groups',
+ permissions: ['Identity.Group.*'],
+ },
+ {
+ title: 'Group Templates',
+ path: '/identity/administration/group-templates',
+ permissions: ['Identity.Group.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Devices',
+ path: '/identity/administration/devices',
+ permissions: ['Identity.Device.*'],
+ },
+ {
+ title: 'Deleted Items',
+ path: '/identity/administration/deleted-items',
+ permissions: ['Identity.User.*'],
+ },
+ {
+ title: 'Roles & PIM',
+ path: '/identity/administration/roles',
+ permissions: ['Identity.Role.*'],
+ },
+ {
+ title: 'JIT Admin',
+ path: '/identity/administration/jit-admin',
+ permissions: ['Identity.Role.*'],
+ },
+ {
+ title: 'JIT Admin Templates',
+ path: '/identity/administration/jit-admin-templates',
+ permissions: ['Identity.Role.*'],
+ scope: 'global',
+ },
+ {
+ title: 'JIT Role Templates',
+ path: '/identity/administration/jit-role-templates',
+ permissions: ['Identity.Role.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Vacation Mode',
+ path: '/identity/administration/vacation-mode',
+ permissions: ['Identity.User.*'],
+ },
+ {
+ title: 'Offboarding Wizard',
+ path: '/identity/administration/offboarding-wizard',
+ permissions: ['Identity.User.*'],
+ },
+ ],
+ },
+ {
+ title: 'Reports',
+ permissions: [
+ 'Identity.User.*',
+ 'Identity.Group.*',
+ 'Identity.Device.*',
+ 'Identity.Role.*',
+ 'Identity.AuditLog.*',
+ ],
+ items: [
+ {
+ title: 'MFA Report',
+ path: '/identity/reports/mfa-report',
+ permissions: ['Identity.User.*'],
+ },
+ {
+ title: 'Inactive Users',
+ path: '/identity/reports/inactive-users-report',
+ permissions: ['Identity.User.*'],
+ },
+ {
+ title: 'Sign-in Report',
+ path: '/identity/reports/signin-report',
+ permissions: ['Identity.User.*'],
+ },
+ {
+ title: 'Microsoft Entra Connect Report',
+ path: '/identity/reports/azure-ad-connect-report',
+ permissions: ['Identity.User.*'],
+ },
+ {
+ title: 'Risk Detections',
+ path: '/identity/reports/risk-detections',
+ permissions: ['Identity.User.*'],
+ },
+ {
+ title: 'Group Usage Report',
+ path: '/identity/reports/group-usage',
+ permissions: ['Identity.Group.*'],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ title: 'Tenant Administration',
+ type: 'header',
+ icon: (
+
+
+ ),
+ permissions: [
+ 'Tenant.*',
+ 'Identity.AuditLog.*',
+ 'CIPP.Backup.*',
+ 'Scheduler.Billing.*',
+ ],
+ items: [
+ {
+ title: 'Administration',
+ permissions: ['Tenant.Administration.*'],
+ items: [
+ {
+ title: 'Tenants',
+ path: '/tenant/administration/tenants',
+ permissions: ['Tenant.Administration.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Alert Configuration',
+ path: '/tenant/administration/alert-configuration',
+ permissions: ['Tenant.Alert.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Audit Logs',
+ path: '/tenant/administration/audit-logs',
+ permissions: ['Identity.AuditLog.*'],
+ },
+ {
+ title: 'Applications',
+ path: '/tenant/administration/applications/enterprise-apps',
+ permissions: ['Tenant.Application.*'],
+ },
+ {
+ title: 'Secure Score',
+ path: '/tenant/administration/securescore',
+ permissions: ['Tenant.Administration.*'],
+ },
+ {
+ title: 'App Consent Requests',
+ path: '/tenant/administration/app-consent-requests',
+ permissions: ['Tenant.Application.*'],
+ },
+ {
+ title: 'Authentication Methods',
+ path: '/tenant/administration/authentication-methods',
+ permissions: ['Tenant.Config.*'],
+ },
+ {
+ title: 'Partner Relationships',
+ path: '/tenant/administration/partner-relationships',
+ permissions: ['Tenant.Relationship.*'],
+ },
+ {
+ title: 'Domains',
+ path: '/tenant/administration/domains',
+ permissions: ['Tenant.Administration.*'],
+ },
+ ],
+ },
+ {
+ title: 'GDAP Management',
+ path: '/tenant/gdap-management',
+ permissions: ['Tenant.Relationship.*'],
+ scope: 'global',
+ },
+ // Flag-gated swap: the Baselines feature flag lists this path in its Pages
+ // (hidden while the flag is off) and the classic Standards/Drift paths in
+ // HidesPages (hidden while it is on) - the two never show together.
+ {
+ title: 'Baselines',
+ path: '/tenant/baselines',
+ permissions: ['Tenant.Baselines.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Domains Analyser',
+ path: '/tenant/standards/domains-analyser',
+ permissions: ['Tenant.DomainAnalyser.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Standards & Drift',
+ path: '/tenant/standards/alignment',
+ permissions: ['Tenant.Standards.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Best Practice Analyser',
+ path: '/tenant/standards/bpa-report',
+ permissions: ['Tenant.BestPracticeAnalyser.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Conditional Access',
+ permissions: ['Tenant.ConditionalAccess.*'],
+ items: [
+ {
+ title: 'CA Policies',
+ path: '/tenant/conditional/list-policies',
+ permissions: ['Tenant.ConditionalAccess.*'],
+ },
+ {
+ title: 'CA Templates',
+ path: '/tenant/conditional/list-template',
+ permissions: ['Tenant.ConditionalAccess.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Named Locations',
+ path: '/tenant/conditional/list-named-locations',
+ permissions: ['Tenant.ConditionalAccess.*'],
+ },
+ ],
+ },
+ {
+ title: 'Reports',
+ permissions: [
+ 'Tenant.Administration.*',
+ 'Scheduler.Billing.*',
+ 'Tenant.Application.*',
+ ],
+ items: [
+ {
+ title: 'Licence Report',
+ path: '/tenant/reports/list-licenses',
+ permissions: ['Tenant.Administration.*'],
+ },
+ {
+ title: 'Sherweb Licence Report',
+ path: '/tenant/reports/list-csp-licenses',
+ permissions: ['Tenant.Directory.*'],
+ },
+ {
+ title: 'Consented Applications',
+ path: '/tenant/reports/application-consent',
+ permissions: ['Tenant.Application.*'],
+ },
+ {
+ title: 'Graph / Office Reports',
+ path: '/tenant/reports/graph-office-reports',
+ permissions: ['Tenant.Reports.*'],
+ },
+ {
+ title: 'Custom Test Report',
+ path: '/tenant/reports/custom-test-report',
+ permissions: ['Tenant.Reports.*'],
+ },
+ ],
+ },
+ {
+ title: 'Manage Tenant',
+ path: '/tenant/manage/edit',
+ permissions: ['Tenant.Administration.*'],
+ },
+ ],
+ },
+ {
+ title: 'Security & Compliance',
+ type: 'header',
+ icon: (
+
+
+ ),
+ permissions: [
+ 'Security.Incident.*',
+ 'Security.Alert.*',
+ 'Tenant.DeviceCompliance.*',
+ 'Security.SafeLinksPolicy.*',
+ 'Security.DlpCompliancePolicy.*',
+ 'Security.RetentionCompliancePolicy.*',
+ 'Security.SensitivityLabel.*',
+ 'Security.SensitiveInfoType.*',
+ ],
+ items: [
+ {
+ title: 'Incidents & Alerts',
+ permissions: ['Security.Incident.*'],
+ items: [
+ {
+ title: 'Incidents',
+ path: '/security/incidents/list-incidents',
+ permissions: ['Security.Incident.*'],
+ },
+ {
+ title: 'Alerts',
+ path: '/security/incidents/list-alerts',
+ permissions: ['Security.Alert.*'],
+ },
+ {
+ title: 'Defender Alerts',
+ path: '/security/incidents/list-mdo-alerts',
+ permissions: ['Security.Alert.*'],
+ },
+ {
+ title: 'Check Alerts',
+ path: '/security/incidents/list-check-alerts',
+ permissions: ['Security.Alert.*'],
+ },
+ ],
+ },
+ {
+ title: 'Defender',
+ permissions: ['Security.Alert.*'],
+ items: [
+ {
+ title: 'Defender Status',
+ path: '/security/defender/list-defender',
+ permissions: ['Security.Alert.*'],
+ },
+ {
+ title: 'Defender Deployment',
+ path: '/security/defender/deployment',
+ permissions: ['Security.Alert.*'],
+ },
+ {
+ title: 'Vulnerabilities',
+ path: '/security/defender/list-defender-tvm',
+ permissions: ['Security.Alert.*'],
+ },
+ {
+ title: 'CVE Management',
+ path: '/security/defender/defender-cve-exceptions',
+ permissions: ['Security.Alert.*'],
+ },
+ ],
+ },
+ {
+ title: 'Reports',
+ permissions: ['Tenant.DeviceCompliance.*', 'Security.Defender.*'],
+ items: [
+ {
+ title: 'Device Compliance',
+ path: '/security/reports/list-device-compliance',
+ permissions: ['Tenant.DeviceCompliance.*'],
+ },
+ {
+ title: 'MDE Onboarding',
+ path: '/security/reports/mde-onboarding',
+ permissions: ['Security.Defender.*'],
+ },
+ {
+ title: 'Vulnerability Report',
+ path: '/security/reports/cve-report',
+ permissions: ['Security.Defender.*'],
+ },
+ ],
+ },
+ {
+ title: 'Safe Links',
+ permissions: ['Security.SafeLinksPolicy.*'],
+ items: [
+ {
+ title: 'Safe Links Policies',
+ path: '/security/safelinks/safelinks',
+ permissions: ['Security.SafeLinksPolicy.*'],
+ },
+ {
+ title: 'Safe Links Templates',
+ path: '/security/safelinks/safelinks-template',
+ permissions: ['Security.SafeLinksPolicy.*'],
+ scope: 'global',
+ },
+ ],
+ },
+ {
+ title: 'Purview Compliance',
+ permissions: [
+ 'Security.DlpCompliancePolicy.*',
+ 'Security.RetentionCompliancePolicy.*',
+ 'Security.SensitivityLabel.*',
+ 'Security.SensitiveInfoType.*',
+ ],
+ items: [
+ {
+ title: 'DLP Policies',
+ path: '/security/compliance/dlp',
+ permissions: ['Security.DlpCompliancePolicy.*'],
+ },
+ {
+ title: 'DLP Policy Templates',
+ path: '/security/compliance/dlp-templates',
+ permissions: ['Security.DlpCompliancePolicy.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Retention Policies',
+ path: '/security/compliance/retention',
+ permissions: ['Security.RetentionCompliancePolicy.*'],
+ },
+ {
+ title: 'Retention Policy Templates',
+ path: '/security/compliance/retention-templates',
+ permissions: ['Security.RetentionCompliancePolicy.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Sensitivity Labels',
+ path: '/security/compliance/labels',
+ permissions: ['Security.SensitivityLabel.*'],
+ },
+ {
+ title: 'Sensitivity Label Templates',
+ path: '/security/compliance/labels-templates',
+ permissions: ['Security.SensitivityLabel.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Sensitive Information Types',
+ path: '/security/compliance/sit',
+ permissions: ['Security.SensitiveInfoType.*'],
+ },
+ {
+ title: 'Sensitive Info Type Templates',
+ path: '/security/compliance/sit-templates',
+ permissions: ['Security.SensitiveInfoType.*'],
+ scope: 'global',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ title: 'Copilot & AI',
+ type: 'header',
+ icon: (
+
+
+ ),
+ permissions: ['Tenant.Standards.*'],
+ items: [
+ {
+ title: 'Shadow AI Discovery',
+ path: '/copilot/shadow-ai',
+ permissions: ['Tenant.Standards.*'],
+ },
+ {
+ title: 'Copilot Settings',
+ path: '/copilot/settings',
+ permissions: ['Tenant.Standards.*'],
+ },
+ {
+ title: 'Agent365',
+ permissions: ['Tenant.Standards.*'],
+ items: [
+ {
+ title: 'Packages',
+ path: '/copilot/agent365/packages',
+ permissions: ['Tenant.Standards.*'],
+ },
+ ],
+ },
+ {
+ title: 'Reports',
+ permissions: ['Tenant.Standards.*'],
+ items: [
+ {
+ title: 'Copilot Adoption',
+ path: '/copilot/reports/copilot-adoption',
+ permissions: ['Tenant.Standards.*'],
+ },
+ {
+ title: 'Copilot Usage Trend',
+ path: '/copilot/reports/copilot-trend',
+ permissions: ['Tenant.Standards.*'],
+ },
+ {
+ title: 'Copilot User Activity',
+ path: '/copilot/reports/copilot-usage',
+ permissions: ['Tenant.Standards.*'],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ title: 'Intune',
+ type: 'header',
+ icon: (
+
+
+ ),
+ permissions: [
+ 'Endpoint.Application.*',
+ 'Endpoint.Autopilot.*',
+ 'Endpoint.MEM.*',
+ 'Endpoint.Device.*',
+ 'Endpoint.Device.Read',
+ ],
+ items: [
+ {
+ title: 'Applications',
+ permissions: ['Endpoint.Application.*'],
+ items: [
+ {
+ title: 'Applications',
+ path: '/endpoint/applications/list',
+ permissions: ['Endpoint.Application.*'],
+ },
+ {
+ title: 'Application Queue',
+ path: '/endpoint/applications/queue',
+ permissions: ['Endpoint.Application.*'],
+ },
+ {
+ title: 'Application Templates',
+ path: '/endpoint/applications/templates',
+ docsPath: 'endpoint/applications/application-templates',
+ permissions: ['Endpoint.Application.*'],
+ scope: 'global',
+ },
+ ],
+ },
+ {
+ title: 'Autopilot & Enrollment',
+ permissions: ['Endpoint.Autopilot.*'],
+ items: [
+ {
+ title: 'Autopilot Devices',
+ path: '/endpoint/autopilot/list-devices',
+ permissions: ['Endpoint.Autopilot.*'],
+ },
+ {
+ title: 'Add Autopilot Device',
+ path: '/endpoint/autopilot/add-device',
+ permissions: ['Endpoint.Autopilot.*'],
+ },
+ {
+ title: 'Enrollment Profiles',
+ path: '/endpoint/autopilot/enrollment-profiles',
+ permissions: ['Endpoint.Autopilot.*'],
+ },
+ {
+ title: 'Status Pages',
+ path: '/endpoint/autopilot/list-status-pages',
+ permissions: ['Endpoint.Autopilot.*'],
+ },
+ ],
+ },
+ {
+ title: 'Device Management',
+ permissions: ['Endpoint.MEM.*', 'Endpoint.Device.*'],
+ items: [
+ {
+ title: 'Devices',
+ path: '/endpoint/MEM/devices',
+ docsPath: 'endpoint/mem/devices',
+ permissions: ['Endpoint.Device.*'],
+ },
+ {
+ title: 'BitLocker Key Search',
+ path: '/endpoint/MEM/bitlocker-search',
+ docsPath: 'endpoint/mem/bitlocker-search',
+ permissions: ['Endpoint.Device.*'],
+ },
+ {
+ title: 'Configuration Policies',
+ path: '/endpoint/MEM/list-policies',
+ docsPath: 'endpoint/mem/list-policies',
+ permissions: ['Endpoint.MEM.*'],
+ },
+ {
+ title: 'Compliance Policies',
+ path: '/endpoint/MEM/list-compliance-policies',
+ docsPath: 'endpoint/mem/list-compliance-policies',
+ permissions: ['Endpoint.MEM.*'],
+ },
+ {
+ title: 'App Policies',
+ path: '/endpoint/MEM/list-appprotection-policies',
+ docsPath: 'endpoint/mem/list-appprotection-policies',
+ permissions: ['Endpoint.MEM.*'],
+ },
+ {
+ title: 'Policy Templates',
+ path: '/endpoint/MEM/list-templates',
+ docsPath: 'endpoint/mem/list-templates',
+ permissions: ['Endpoint.MEM.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Reusable Settings',
+ path: '/endpoint/MEM/reusable-settings',
+ docsPath: 'endpoint/mem/reusable-settings',
+ permissions: ['Endpoint.MEM.*'],
+ },
+ {
+ title: 'Reusable Settings Templates',
+ path: '/endpoint/MEM/reusable-settings-templates',
+ docsPath: 'endpoint/mem/reusable-settings-templates',
+ permissions: ['Endpoint.MEM.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Assignment Filters',
+ path: '/endpoint/MEM/assignment-filters',
+ docsPath: 'endpoint/mem/assignment-filters',
+ permissions: ['Endpoint.MEM.*'],
+ },
+ {
+ title: 'Assignment Filter Templates',
+ path: '/endpoint/MEM/assignment-filter-templates',
+ docsPath: 'endpoint/mem/assignment-filter-templates',
+ permissions: ['Endpoint.MEM.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Scripts',
+ path: '/endpoint/MEM/list-scripts',
+ docsPath: 'endpoint/mem/list-scripts',
+ permissions: ['Endpoint.MEM.*'],
+ },
+ {
+ title: 'MAA Requests',
+ path: '/endpoint/MEM/approval-requests',
+ docsPath: 'endpoint/mem/approval-requests',
+ permissions: ['Endpoint.MEM.*'],
+ },
+ ],
+ },
+ {
+ title: 'Reports',
+ permissions: [
+ 'Endpoint.Device.*',
+ 'Endpoint.Autopilot.*',
+ 'Endpoint.MEM.*',
+ ],
+ items: [
+ {
+ title: 'Analytics Device Score',
+ path: '/endpoint/reports/analyticsdevicescore',
+ permissions: ['Endpoint.Device.*'],
+ },
+ {
+ title: 'Work from Anywhere',
+ path: '/endpoint/reports/workfromanywhere',
+ permissions: ['Endpoint.Device.*'],
+ },
+ {
+ title: 'Autopilot Deployments',
+ path: '/endpoint/reports/autopilot-deployment',
+ permissions: ['Endpoint.Autopilot.*'],
+ },
+ {
+ title: 'Discovered Apps',
+ path: '/endpoint/reports/detected-apps',
+ permissions: ['Endpoint.MEM.*'],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ title: 'Teams & SharePoint',
+ type: 'header',
+ icon: (
+
+
+ ),
+ permissions: [
+ 'Sharepoint.Site.*',
+ 'Sharepoint.Admin.*',
+ 'Teams.Group.*',
+ 'Teams.Activity.*',
+ 'Teams.Voice.*',
+ ],
+ items: [
+ {
+ title: 'OneDrive',
+ path: '/teams-share/onedrive',
+ permissions: ['Sharepoint.Site.*'],
+ },
+ {
+ title: 'SharePoint',
+ path: '/teams-share/sharepoint',
+ permissions: ['Sharepoint.Admin.*'],
+ },
+ {
+ title: 'SharePoint Templates',
+ path: '/teams-share/sharepoint-templates',
+ permissions: ['Sharepoint.Admin.*'],
+ },
+ {
+ title: 'Deleted Sites',
+ path: '/teams-share/deleted-sites',
+ permissions: ['Sharepoint.Admin.*'],
+ },
+ {
+ title: 'Sharing Report',
+ path: '/teams-share/sharing-report',
+ permissions: ['Sharepoint.Site.*'],
+ },
+ {
+ title: 'Permissions Report',
+ path: '/teams-share/permissions-report',
+ permissions: ['Sharepoint.Site.*'],
+ },
+ {
+ title: 'External Users',
+ path: '/teams-share/external-users',
+ permissions: ['Sharepoint.Site.*'],
+ },
+ {
+ title: 'Teams',
+ permissions: ['Teams.Group.*'],
+ items: [
+ {
+ title: 'Teams',
+ path: '/teams-share/teams/list-team',
+ permissions: ['Teams.Group.*'],
+ },
+ {
+ title: 'Teams Activity',
+ path: '/teams-share/teams/teams-activity',
+ permissions: ['Teams.Activity.*'],
+ },
+ {
+ title: 'Business Voice',
+ path: '/teams-share/teams/business-voice',
+ permissions: ['Teams.Voice.*'],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ title: 'Email & Exchange',
+ type: 'header',
+ icon: (
+
+
+ ),
+ permissions: [
+ 'Exchange.Mailbox.*',
+ 'Exchange.Contact.*',
+ 'Exchange.SpamFilter.*',
+ 'Exchange.TransportRule.*',
+ 'Exchange.Connector.*',
+ 'Exchange.ConnectionFilter.*',
+ 'Exchange.Equipment.*',
+ 'Exchange.Room.*',
+ 'Exchange.SafeLinks.*',
+ 'Exchange.Group.*',
+ 'Exchange.RetentionPolicies.*',
+ ],
+ items: [
+ {
+ title: 'Administration',
+ permissions: ['Exchange.Mailbox.*'],
+ items: [
+ {
+ title: 'Mailboxes',
+ path: '/email/administration/mailboxes',
+ permissions: ['Exchange.Mailbox.*'],
+ },
+ {
+ title: 'HVE Accounts',
+ path: '/email/administration/hve-accounts',
+ permissions: ['Exchange.Mailbox.*'],
+ },
+ {
+ title: 'Deleted Mailboxes',
+ path: '/email/administration/deleted-mailboxes',
+ permissions: ['Exchange.Mailbox.*'],
+ },
+ {
+ title: 'Mailbox Rules',
+ path: '/email/administration/mailbox-rules',
+ permissions: ['Exchange.Mailbox.*'],
+ },
+ {
+ title: 'Contacts',
+ path: '/email/administration/contacts',
+ permissions: ['Exchange.Contact.*'],
+ },
+ {
+ title: 'Contact Templates',
+ path: '/email/administration/contacts-template',
+ permissions: ['Exchange.Contact.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Quarantine',
+ path: '/email/administration/quarantine',
+ permissions: ['Exchange.SpamFilter.*'],
+ },
+ {
+ title: 'Restricted Users',
+ path: '/email/administration/restricted-users',
+ permissions: ['Exchange.Mailbox.*'],
+ },
+ {
+ title: 'Tenant Allow/Block Lists',
+ path: '/email/administration/tenant-allow-block-lists',
+ permissions: ['Exchange.SpamFilter.*'],
+ },
+ {
+ title: 'Allow/Block List Templates',
+ path: '/email/administration/tenant-allow-block-list-templates',
+ permissions: ['Exchange.SpamFilter.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Retention Policies & Tags',
+ path: '/email/administration/exchange-retention/policies',
+ permissions: ['Exchange.RetentionPolicies.*'],
+ },
+ ],
+ },
+ {
+ title: 'Transport',
+ permissions: ['Exchange.TransportRule.*', 'Exchange.Connector.*'],
+ items: [
+ {
+ title: 'Transport Rules',
+ path: '/email/transport/list-rules',
+ permissions: ['Exchange.TransportRule.*'],
+ },
+ {
+ title: 'Transport Templates',
+ path: '/email/transport/list-templates',
+ permissions: ['Exchange.TransportRule.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Connectors',
+ path: '/email/transport/list-connectors',
+ permissions: ['Exchange.Connector.*'],
+ },
+ {
+ title: 'Connector Templates',
+ path: '/email/transport/list-connector-templates',
+ permissions: ['Exchange.Connector.*'],
+ scope: 'global',
+ },
+ ],
+ },
+ {
+ title: 'Spamfilter',
+ permissions: ['Exchange.SpamFilter.*', 'Exchange.ConnectionFilter.*'],
+ items: [
+ {
+ title: 'Spamfilter',
+ path: '/email/spamfilter/list-spamfilter',
+ permissions: ['Exchange.SpamFilter.*'],
+ },
+ {
+ title: 'Spamfilter Templates',
+ path: '/email/spamfilter/list-templates',
+ permissions: ['Exchange.SpamFilter.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Connection Filter',
+ path: '/email/spamfilter/list-connectionfilter',
+ permissions: ['Exchange.ConnectionFilter.*'],
+ },
+ {
+ title: 'Connection Filter Templates',
+ path: '/email/spamfilter/list-connectionfilter-templates',
+ permissions: ['Exchange.ConnectionFilter.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Quarantine Policies',
+ path: '/email/spamfilter/list-quarantine-policies',
+ permissions: ['Exchange.SpamFilter.*'],
+ },
+ ],
+ },
+ {
+ title: 'Resource Management',
+ permissions: ['Exchange.Equipment.*', 'Exchange.Room.*'],
+ items: [
+ {
+ title: 'Equipment',
+ path: '/email/resources/management/equipment',
+ permissions: ['Exchange.Equipment.*'],
+ },
+ {
+ title: 'Rooms',
+ path: '/email/resources/management/list-rooms',
+ permissions: ['Exchange.Room.*'],
+ },
+ {
+ title: 'Room Lists',
+ path: '/email/resources/management/room-lists',
+ permissions: ['Exchange.Room.*'],
+ },
+ ],
+ },
+ {
+ title: 'Reports',
+ permissions: [
+ 'Exchange.Mailbox.*',
+ 'Exchange.SpamFilter.*',
+ 'Exchange.SafeLinks.*',
+ 'Exchange.Group.*',
+ ],
+ items: [
+ {
+ title: 'Mail Flow Statistics',
+ path: '/email/reports/mail-flow-statistics',
+ permissions: ['Exchange.Mailbox.*'],
+ },
+ {
+ title: 'Mailbox Statistics',
+ path: '/email/reports/mailbox-statistics',
+ permissions: ['Exchange.Mailbox.*'],
+ },
+ {
+ title: 'Mailbox Activity',
+ path: '/email/reports/mailbox-activity',
+ permissions: ['Exchange.Mailbox.*'],
+ },
+ {
+ title: 'Mailbox Client Access Settings',
+ path: '/email/reports/mailbox-cas-settings',
+ permissions: ['Exchange.Mailbox.*'],
+ },
+ {
+ title: 'Mailbox Permissions',
+ path: '/email/reports/mailbox-permissions',
+ permissions: ['Exchange.Mailbox.*'],
+ },
+ {
+ title: 'Calendar Permissions',
+ path: '/email/reports/calendar-permissions',
+ permissions: ['Exchange.Mailbox.*'],
+ },
+ {
+ title: 'Mailbox Forwarding',
+ path: '/email/reports/mailbox-forwarding',
+ permissions: ['Exchange.Mailbox.*'],
+ },
+ {
+ title: 'Anti-Phishing Filters',
+ path: '/email/reports/antiphishing-filters',
+ permissions: ['Exchange.SpamFilter.*'],
+ },
+ {
+ title: 'Malware Filters',
+ path: '/email/reports/malware-filters',
+ permissions: ['Exchange.SpamFilter.*'],
+ },
+ {
+ title: 'Safe Attachments Filters',
+ path: '/email/reports/safeattachments-filters',
+ permissions: ['Exchange.SafeLinks.*'],
+ },
+ {
+ title: 'Shared Mailbox with Enabled Account',
+ path: '/email/reports/SharedMailboxEnabledAccount',
+ docsPath: 'email/reports/sharedmailboxenabledaccount',
+ permissions: ['Exchange.Mailbox.*'],
+ },
+ {
+ title: 'ActiveSync Devices',
+ path: '/email/reports/activesync-devices',
+ permissions: ['Exchange.Mailbox.*'],
+ },
+ {
+ title: 'Global Address List',
+ path: '/email/reports/global-address-list',
+ permissions: ['Exchange.Group.*'],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ title: 'Tools',
+ type: 'header',
+ icon: (
+
+
+ ),
+ permissions: [
+ 'CIPP.*',
+ 'Tenant.Administration.*',
+ 'Tenant.Application.*',
+ 'Tenant.DomainAnalyser.*',
+ 'Exchange.Mailbox.*',
+ 'Endpoint.MEM.*',
+ 'CIPP.Scheduler.*',
+ ],
+ items: [
+ {
+ title: 'Tenant Tools',
+ permissions: ['Tenant.Administration.*'],
+ items: [
+ {
+ title: 'Graph Explorer',
+ path: '/tenant/tools/graph-explorer',
+ docsPath: 'tools/tenant-tools/graph-explorer',
+ permissions: ['Tenant.Administration.*'],
+ },
+ {
+ title: 'Tenant Lookup',
+ path: '/tenant/tools/tenantlookup',
+ docsPath: 'tools/tenant-tools/tenantlookup',
+ permissions: ['Tenant.Administration.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Application Approval',
+ path: '/tenant/tools/appapproval',
+ docsPath: 'tools/tenant-tools/appapproval',
+ permissions: ['Tenant.Application.*'],
+ },
+ {
+ title: 'Individual Domain Check',
+ path: '/tenant/tools/individual-domains',
+ docsPath: 'tools/tenant-tools/individual-domains',
+ permissions: ['Tenant.DomainAnalyser.*'],
+ scope: 'global',
+ },
+ {
+ title: 'IP Database',
+ path: '/tenant/tools/geoiplookup',
+ docsPath: 'tools/tenant-tools/geoiplookup',
+ permissions: ['CIPP.Core.*'],
+ scope: 'global',
+ },
+ ],
+ },
+ {
+ title: 'Email Tools',
+ permissions: ['Exchange.Mailbox.*'],
+ items: [
+ {
+ title: 'Message Trace',
+ path: '/email/tools/message-trace',
+ docsPath: 'tools/email-tools/message-trace',
+ permissions: ['Exchange.Mailbox.*'],
+ },
+ {
+ title: 'Message Viewer',
+ path: '/email/tools/message-viewer',
+ docsPath: 'tools/email-tools/message-viewer',
+ permissions: ['Exchange.Mailbox.*'],
+ },
+ {
+ title: 'Mailbox Restores',
+ path: '/email/tools/mailbox-restores',
+ docsPath: 'tools/email-tools/mailbox-restores',
+ permissions: ['Exchange.Mailbox.*'],
+ },
+ {
+ title: 'Message Encryption',
+ path: '/email/tools/message-encryption',
+ docsPath: 'tools/email-tools/message-encryption',
+ permissions: ['Exchange.Mailbox.*'],
+ },
+ ],
+ },
+ {
+ title: 'Intune Tools',
+ permissions: ['Endpoint.MEM.*'],
+ items: [
+ {
+ title: 'Compare Policies',
+ path: '/endpoint/MEM/compare-policies',
+ docsPath: 'tools/intune-tools/compare-policies',
+ permissions: ['Endpoint.MEM.*'],
+ scope: 'global',
+ },
+ ],
+ },
+ {
+ title: 'Dark Web Tools',
+ permissions: ['CIPP.Core.*'],
+ items: [
+ {
+ title: 'Tenant Breach Lookup',
+ path: '/tools/tenantbreachlookup',
+ docsPath: 'tools/dark-web-tools/tenant-breach-lookup',
+ permissions: ['CIPP.Core.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Breach Lookup',
+ path: '/tools/breachlookup',
+ docsPath: 'tools/dark-web-tools/breach-lookup',
+ permissions: ['CIPP.Core.*'],
+ scope: 'global',
+ },
+ ],
+ },
+ {
+ title: 'Report Builder',
+ path: '/tools/report-builder/generated',
+ roles: ['admin', 'superadmin'],
+ permissions: ['CIPP.Core.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Custom Tests',
+ path: '/tools/custom-tests',
+ roles: ['admin', 'superadmin'],
+ permissions: ['CIPP.Tests.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Template Library',
+ path: '/tools/templatelib',
+ roles: ['editor', 'admin', 'superadmin'],
+ permissions: ['CIPP.Core.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Catalog',
+ path: '/tools/community-repos',
+ roles: ['editor', 'admin', 'superadmin'],
+ permissions: ['CIPP.Core.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Template Package Manager',
+ path: '/tools/template-packages',
+ roles: ['editor', 'admin', 'superadmin'],
+ permissions: ['Tenant.ConditionalAccess.*', 'Endpoint.MEM.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Scheduler',
+ path: '/cipp/scheduler',
+ docsPath: 'tools/scheduler',
+ roles: ['editor', 'admin', 'superadmin'],
+ permissions: ['CIPP.Scheduler.*'],
+ },
+ ],
+ },
+ {
+ title: 'CIPP',
+ type: 'header',
+ icon: (
+
+
+ ),
+ permissions: [
+ 'CIPP.*', // Pattern matching - matches any CIPP permission
+ ],
+ items: [
+ {
+ title: 'Application Settings',
+ path: '/cipp/settings',
+ roles: ['admin', 'superadmin'],
+ permissions: ['CIPP.AppSettings.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Logbook',
+ path: '/cipp/logs',
+ roles: ['editor', 'admin', 'superadmin'],
+ permissions: ['CIPP.Core.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Setup Wizard',
+ path: '/onboardingv2',
+ roles: ['admin', 'superadmin'],
+ permissions: ['CIPP.AppSettings.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Integrations',
+ path: '/cipp/integrations',
+ roles: ['admin', 'superadmin'],
+ permissions: ['CIPP.Extension.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Custom Data',
+ path: '/cipp/custom-data/directory-extensions',
+ roles: ['admin', 'superadmin'],
+ permissions: ['CIPP.AppSettings.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Advanced',
+ roles: ['superadmin'],
+ permissions: ['CIPP.SuperAdmin.*'],
+ items: [
+ {
+ title: 'Super Admin',
+ path: '/cipp/advanced/super-admin/tenant-mode',
+ roles: ['superadmin'],
+ permissions: ['CIPP.SuperAdmin.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Container Management',
+ path: '/cipp/advanced/container-management/status',
+ roles: ['superadmin'],
+ permissions: ['CIPP.SuperAdmin.*'],
+ scope: 'global',
+ },
+ {
+ // Lands on cipp-roles, not cipp-users: cipp-users is gated by the
+ // SuperAdminNG feature flag, and the nav filter drops any item whose
+ // path is in a disabled flag's Pages list — pointing here at cipp-users
+ // would hide the whole Authentication group (including the ungated
+ // SSO and SAM App pages) on non-NG instances.
+ title: 'Authentication',
+ path: '/cipp/advanced/authentication/cipp-roles',
+ roles: ['superadmin'],
+ permissions: ['CIPP.SuperAdmin.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Exchange Cmdlets',
+ path: '/cipp/advanced/exchange-cmdlets',
+ roles: ['superadmin'],
+ permissions: ['CIPP.SuperAdmin.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Timers',
+ path: '/cipp/advanced/timers',
+ roles: ['superadmin'],
+ permissions: ['CIPP.SuperAdmin.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Table Maintenance',
+ path: '/cipp/advanced/table-maintenance',
+ roles: ['superadmin'],
+ permissions: ['CIPP.SuperAdmin.*'],
+ scope: 'global',
+ },
+ {
+ title: 'CIPPDB Cache',
+ path: '/cipp/advanced/cippdb-cache',
+ roles: ['superadmin'],
+ permissions: ['CIPP.SuperAdmin.*'],
+ scope: 'global',
+ },
+ {
+ title: 'Diagnostics',
+ path: '/cipp/advanced/diagnostics',
+ roles: ['superadmin'],
+ permissions: ['CIPP.SuperAdmin.*'],
+ scope: 'global',
+ },
+ ],
+ },
+ ],
+ },
+]
diff --git a/src/layouts/constants.js b/src/layouts/constants.js
index 37c513ad06cc..3a9591676300 100644
--- a/src/layouts/constants.js
+++ b/src/layouts/constants.js
@@ -13,3 +13,15 @@ export const SIDE_NAV_COLLAPSED_WIDTH = 73 // icon size + padding + border right
// property on :root so the fixed chrome can offset itself without prop threading. Resolves to 0px
// whenever no banner is mounted, which is the overwhelmingly common case.
export const BANNER_HEIGHT_VAR = 'var(--cipp-banner-h, 0px)'
+
+// Notch / status-bar inset. Requires viewport-fit=cover on the meta viewport. When a banner is
+// showing it already pads itself with this inset and publishes that in --cipp-banner-h, so chrome
+// below the banner must not add it again — see SAFE_AREA_TOP_OFFSET.
+export const SAFE_AREA_TOP_VAR = 'env(safe-area-inset-top, 0px)'
+
+// Safe-area to apply above the top nav only when no banner is eating the top of the screen.
+// max() keeps a single expression working for both "banner on" and "banner off".
+export const SAFE_AREA_TOP_OFFSET = `max(0px, calc(${SAFE_AREA_TOP_VAR} - ${BANNER_HEIGHT_VAR}))`
+
+// Fixed chrome below the status bar / banner: top nav + residual safe-area + banner height.
+export const CHROME_TOP_OFFSET = `calc(${TOP_NAV_HEIGHT}px + ${BANNER_HEIGHT_VAR} + ${SAFE_AREA_TOP_OFFSET})`
diff --git a/src/layouts/footer.js b/src/layouts/footer.jsx
similarity index 100%
rename from src/layouts/footer.js
rename to src/layouts/footer.jsx
diff --git a/src/layouts/index.js b/src/layouts/index.js
deleted file mode 100644
index db2db462a98a..000000000000
--- a/src/layouts/index.js
+++ /dev/null
@@ -1,379 +0,0 @@
-import { useCallback, useEffect, useMemo, useState, useRef } from 'react'
-import { usePathname } from 'next/navigation'
-import { Box, Container, Divider, Stack } from '@mui/material'
-import { styled } from '@mui/material/styles'
-import { useIsMobileLayout } from '../hooks/use-breakpoint'
-import { useSettings } from '../hooks/use-settings'
-import { Footer } from './footer'
-import { MobileNav } from './mobile-nav'
-import { SideNav } from './side-nav'
-import { TopNav } from './top-nav'
-import { ApiGetCall } from '../api/ApiCall'
-import { useDispatch } from 'react-redux'
-import { showToast } from '../store/toasts'
-import Grid from '@mui/system/Grid'
-import { CippImageCard } from '../components/CippCards/CippImageCard'
-import { nativeMenuItems } from './config'
-import { CippBreadcrumbNav } from '../components/CippComponents/CippBreadcrumbNav'
-import { SsoMigrationDialog } from '../components/CippComponents/SsoMigrationDialog'
-import { ForcedSsoMigrationDialog } from '../components/CippComponents/ForcedSsoMigrationDialog'
-import { SubscriptionEndedDialog } from '../components/CippComponents/SubscriptionEndedDialog'
-import { FailedPaymentDialog } from '../components/CippComponents/FailedPaymentDialog'
-import { CippMaintenanceBanner } from '../components/CippComponents/CippMaintenanceBanner'
-import { CippImpersonationBanner } from '../components/CippComponents/CippImpersonationBanner'
-
-import {
- BANNER_HEIGHT_VAR,
- SIDE_NAV_COLLAPSED_WIDTH,
- SIDE_NAV_WIDTH,
- TOP_NAV_HEIGHT,
-} from './constants'
-
-const useMobileNav = () => {
- const pathname = usePathname()
- const [open, setOpen] = useState(false)
-
- const handlePathnameChange = useCallback(() => {
- if (open) {
- setOpen(false)
- }
- }, [open])
-
- useEffect(() => {
- handlePathnameChange()
- }, [pathname])
-
- const handleOpen = useCallback(() => {
- setOpen(true)
- }, [])
-
- const handleClose = useCallback(() => {
- setOpen(false)
- }, [])
-
- return {
- handleClose,
- handleOpen,
- open,
- }
-}
-
-// No breakpoint paddingLeft here: the side-nav offset is applied once, via the inline
-// `sx` on the rendered LayoutRoot (it depends on pinNav). A second static rule at lg+
-// used to fight that dynamic one over the same property.
-const LayoutRoot = styled('div')(({ theme }) => ({
- backgroundColor: theme.palette.background.default,
- display: 'flex',
- flex: '1 1 auto',
- maxWidth: '100%',
- height: '100vh',
- overflow: 'hidden',
- paddingTop: `calc(${TOP_NAV_HEIGHT}px + ${BANNER_HEIGHT_VAR})`,
-}))
-
-const LayoutContainer = styled('div')({
- display: 'flex',
- flex: '1 1 auto',
- flexDirection: 'column',
- width: '100%',
- overflowY: 'auto',
- overscrollBehavior: 'contain',
-})
-
-export const Layout = (props) => {
- // showBreadcrumb: the error routes opt out — there is no trail to a page that
- // doesn't exist or just crashed, and the bookmark button lives in there too.
- const { children, allTenantsSupport = true, showBreadcrumb = true } = props
- // one gate for the swap: drawer, the hamburger that opens it (top-nav), the gutter below
- const navCollapsed = useIsMobileLayout()
- const settings = useSettings()
- const mobileNav = useMobileNav()
- const [fetchingVisible, setFetchingVisible] = useState([])
- const [menuItems, setMenuItems] = useState(nativeMenuItems)
- const lastUserSettingsUpdate = useRef(null)
- const currentTenant = settings?.currentTenant
- const [hideSidebar, setHideSidebar] = useState(false)
-
- const swaStatus = ApiGetCall({
- url: '/.auth/me',
- queryKey: 'authmeswa',
- staleTime: 120000,
- refetchOnWindowFocus: true,
- })
-
- const currentRole = ApiGetCall({
- url: '/api/me',
- queryKey: 'authmecipp',
- waiting: swaStatus.isSuccess && swaStatus.data?.clientPrincipal !== null,
- })
-
- const featureFlags = ApiGetCall({
- url: '/api/ListFeatureFlags',
- queryKey: 'featureFlags',
- staleTime: 600000, // Cache for 10 minutes
- })
-
- useEffect(() => {
- if (currentRole.isSuccess && !currentRole.isFetching) {
- const userRoles = currentRole.data?.clientPrincipal?.userRoles
- const userPermissions = currentRole.data?.permissions
- if (!userRoles) {
- setMenuItems([])
- setHideSidebar(true)
- return
- }
-
- // Get hidden pages from feature flags - only filter if we have valid data.
- // A DISABLED flag hides its Pages (features gated behind the flag); an ENABLED
- // flag hides its HidesPages (features it replaces - e.g. Baselines supersedes
- // the classic Standards and Drift pages).
- let hiddenPages = []
- if (featureFlags.isSuccess && Array.isArray(featureFlags.data)) {
- const disabledPages = featureFlags.data
- .filter((flag) => flag.Enabled === false || flag.enabled === false)
- .flatMap((flag) => flag.Pages || flag.pages || [])
- .filter((page) => typeof page === 'string')
- const replacedPages = featureFlags.data
- .filter((flag) => flag.Enabled === true || flag.enabled === true)
- .flatMap((flag) => flag.HidesPages || flag.hidesPages || [])
- .filter((page) => typeof page === 'string')
- hiddenPages = [...disabledPages, ...replacedPages]
- }
-
- const filterItemsByRole = (items) => {
- return items
- .map((item) => {
- // Check if page is hidden by feature flag
- if (item.path && hiddenPages.length > 0 && hiddenPages.includes(item.path)) {
- return null
- }
-
- // Check permission with pattern matching support
- if (item.permissions && item.permissions.length > 0) {
- const hasPermission = userPermissions?.some((userPerm) => {
- return item.permissions.some((requiredPerm) => {
- // Exact match
- if (userPerm === requiredPerm) {
- return true
- }
-
- // Pattern matching - check if required permission contains wildcards
- if (requiredPerm.includes('*')) {
- // Convert wildcard pattern to regex
- const regexPattern = requiredPerm
- .replace(/\./g, '\\.') // Escape dots
- .replace(/\*/g, '.*') // Convert * to .*
- const regex = new RegExp(`^${regexPattern}$`)
- return regex.test(userPerm)
- }
-
- return false
- })
- })
- if (!hasPermission) {
- return null
- }
- } else {
- return null
- }
- // check sub-items
- if (item.items && item.items.length > 0) {
- const filteredSubItems = filterItemsByRole(item.items).filter(Boolean)
- if (filteredSubItems.length === 0) return null
- return { ...item, items: filteredSubItems }
- }
-
- return item
- })
- .filter(Boolean)
- }
- const filteredMenu = filterItemsByRole(nativeMenuItems)
- setMenuItems(filteredMenu)
- } else if (
- swaStatus.isLoading ||
- swaStatus.data?.clientPrincipal === null ||
- swaStatus.data === undefined ||
- currentRole.isLoading
- ) {
- setHideSidebar(true)
- }
- }, [
- currentRole.isSuccess,
- swaStatus.data,
- swaStatus.isLoading,
- currentRole.data?.clientPrincipal?.userRoles,
- currentRole.data?.permissions,
- currentRole.isFetching,
- featureFlags.isSuccess,
- featureFlags.data,
- ])
-
- const handleNavPin = useCallback(() => {
- settings.handleUpdate({
- pinNav: !settings.pinNav,
- })
- }, [settings])
-
- // Unpinned content offset must match the collapsed drawer's real width — the old 50px
- // constant left 23px of content underneath the 73px rail.
- const offset = settings.pinNav ? SIDE_NAV_WIDTH : SIDE_NAV_COLLAPSED_WIDTH
-
- const userSettingsAPI = ApiGetCall({
- url: '/api/ListUserSettings',
- queryKey: 'userSettings',
- })
-
- useEffect(() => {
- if (userSettingsAPI.isSuccess && !userSettingsAPI.isFetching) {
- // Only update if the data has actually changed (using dataUpdatedAt as a proxy)
- const dataUpdatedAt = userSettingsAPI.dataUpdatedAt
- if (dataUpdatedAt && dataUpdatedAt !== lastUserSettingsUpdate.current) {
- const { bookmarks: _bookmarks, ...serverSettings } = userSettingsAPI.data || {}
- //if userSettingsAPI.data contains offboardingDefaults.user, delete that specific key.
- if (serverSettings.offboardingDefaults?.user) {
- delete serverSettings.offboardingDefaults.user
- }
- if (serverSettings.offboardingDefaults?.keepCopy) {
- delete serverSettings.offboardingDefaults.keepCopy
- }
- if (serverSettings?.currentTheme) {
- delete serverSettings.currentTheme
- }
- // get current devtools settings (device-local only)
- var showDevtools = settings.showDevtools
-
- settings.handleUpdate({
- ...serverSettings,
- showDevtools,
- })
-
- // Track this update and set completion status
- lastUserSettingsUpdate.current = dataUpdatedAt
- }
- }
- }, [
- userSettingsAPI.isSuccess,
- userSettingsAPI.data,
- userSettingsAPI.isFetching,
- userSettingsAPI.dataUpdatedAt,
- ])
-
- const version = ApiGetCall({
- url: '/version.json',
- queryKey: 'LocalVersion',
- })
-
- const alertsAPI = ApiGetCall({
- url: `/api/GetCippAlerts?localversion=${encodeURIComponent(version?.data?.version)}`,
- queryKey: 'alertsDashboard',
- waiting: false,
- refetchOnMount: false,
- refetchOnReconnect: false,
- keepPreviousData: true,
- })
-
- // Hosted maintenance notice, if the instance has one set. Derived from the alerts already
- // fetched above rather than a second request.
- const maintenanceAlert = useMemo(
- () => alertsAPI.data?.find((alert) => alert.maintenance === true) ?? null,
- [alertsAPI.data]
- )
-
- useEffect(() => {
- if (!hideSidebar && version.isFetched && !alertsAPI.isFetched) {
- alertsAPI.waiting = true
- alertsAPI.refetch()
- }
- }, [version, alertsAPI, hideSidebar])
-
- useEffect(() => {
- if (alertsAPI.isSuccess && !alertsAPI.isFetching) {
- setFetchingVisible(new Array(alertsAPI.data.length).fill(true))
- }
- }, [alertsAPI.isSuccess, alertsAPI.data, alertsAPI.isFetching])
- const dispatch = useDispatch()
- useEffect(() => {
- if (alertsAPI.isSuccess && !alertsAPI.isFetching) {
- if (alertsAPI.data.length > 0) {
- // The maintenance notice renders as its own banner - toasting it too would surface the
- // same message three times per page load (banner, snackbar, notification bell).
- alertsAPI.data
- .filter((alert) => !alert.maintenance)
- .forEach((alert) => {
- dispatch(
- showToast({
- message: alert.Alert,
- title: alert.title,
- toastError: alert,
- })
- )
- })
- }
- }
- }, [alertsAPI.isSuccess])
-
- return (
- <>
- {/* Rendered outside the hideSidebar check - maintenance applies to chrome-less pages too. */}
-
-
-
-
-
-
-
-
-
-
- ) : (
-
- {/* The nav carries its own rail chrome (gutter + divider) so that when it
- renders nothing — a single crumb on a phone — no hairline is left behind. */}
- {showBreadcrumb &&
- )}
-
-
-
-
- )
-}
diff --git a/src/layouts/index.jsx b/src/layouts/index.jsx
new file mode 100644
index 000000000000..c2b5ea519ca1
--- /dev/null
+++ b/src/layouts/index.jsx
@@ -0,0 +1,382 @@
+import { useCallback, useEffect, useMemo, useState, useRef } from 'react'
+import { usePathname } from 'next/navigation'
+import { Box, Container, Divider, Stack } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import { useIsMobileLayout } from '../hooks/use-breakpoint'
+import { useSettings } from '../hooks/use-settings'
+import { Footer } from './footer'
+import { MobileNav } from './mobile-nav'
+import { SideNav } from './side-nav'
+import { TopNav } from './top-nav'
+import { ApiGetCall } from '../api/ApiCall'
+import { useDispatch } from 'react-redux'
+import { showToast } from '../store/toasts'
+import Grid from '@mui/system/Grid'
+import { CippImageCard } from '../components/CippCards/CippImageCard'
+import { nativeMenuItems } from './config'
+import { CippBreadcrumbNav } from '../components/CippComponents/CippBreadcrumbNav'
+import { SsoMigrationDialog } from '../components/CippComponents/SsoMigrationDialog'
+import { ForcedSsoMigrationDialog } from '../components/CippComponents/ForcedSsoMigrationDialog'
+import { SubscriptionEndedDialog } from '../components/CippComponents/SubscriptionEndedDialog'
+import { FailedPaymentDialog } from '../components/CippComponents/FailedPaymentDialog'
+import { CippMaintenanceBanner } from '../components/CippComponents/CippMaintenanceBanner'
+import { CippImpersonationBanner } from '../components/CippComponents/CippImpersonationBanner'
+import { matchPattern } from '../utils/permission-rules'
+
+import {
+ CHROME_TOP_OFFSET,
+ SIDE_NAV_COLLAPSED_WIDTH,
+ SIDE_NAV_WIDTH,
+} from './constants'
+
+const useMobileNav = () => {
+ const pathname = usePathname()
+ const [open, setOpen] = useState(false)
+
+ const handlePathnameChange = useCallback(() => {
+ if (open) {
+ setOpen(false)
+ }
+ }, [open])
+
+ useEffect(() => {
+ handlePathnameChange()
+ }, [pathname])
+
+ const handleOpen = useCallback(() => {
+ setOpen(true)
+ }, [])
+
+ const handleClose = useCallback(() => {
+ setOpen(false)
+ }, [])
+
+ return {
+ handleClose,
+ handleOpen,
+ open,
+ }
+}
+
+// No breakpoint paddingLeft here: the side-nav offset is applied once, via the inline
+// `sx` on the rendered LayoutRoot (it depends on pinNav). A second static rule at lg+
+// used to fight that dynamic one over the same property.
+// 100vh includes the area under iOS Safari's collapsing URL bar, which clips the
+// bottom of the contained LayoutContainer scroller. Match CippAuthShell: dvh when
+// supported, vh as the fallback. CHROME_TOP_OFFSET clears the fixed top nav, any
+// maintenance/impersonation banner, and the notch when no banner is covering it.
+const LayoutRoot = styled('div')(({ theme }) => ({
+ backgroundColor: theme.palette.background.default,
+ display: 'flex',
+ flex: '1 1 auto',
+ maxWidth: '100%',
+ height: '100vh',
+ '@supports (height: 100dvh)': {
+ height: '100dvh',
+ },
+ overflow: 'hidden',
+ paddingTop: CHROME_TOP_OFFSET,
+}))
+
+const LayoutContainer = styled('div')({
+ display: 'flex',
+ flex: '1 1 auto',
+ flexDirection: 'column',
+ width: '100%',
+ overflowY: 'auto',
+ overscrollBehavior: 'contain',
+})
+
+export const Layout = (props) => {
+ // showBreadcrumb: the error routes opt out — there is no trail to a page that
+ // doesn't exist or just crashed, and the bookmark button lives in there too.
+ const { children, allTenantsSupport = true, showBreadcrumb = true } = props
+ // one gate for the swap: drawer, the hamburger that opens it (top-nav), the gutter below
+ const navCollapsed = useIsMobileLayout()
+ const settings = useSettings()
+ const mobileNav = useMobileNav()
+ const [fetchingVisible, setFetchingVisible] = useState([])
+ const [menuItems, setMenuItems] = useState(nativeMenuItems)
+ const lastUserSettingsUpdate = useRef(null)
+ const currentTenant = settings?.currentTenant
+ const [hideSidebar, setHideSidebar] = useState(false)
+
+ const swaStatus = ApiGetCall({
+ url: '/.auth/me',
+ queryKey: 'authmeswa',
+ staleTime: 120000,
+ refetchOnWindowFocus: true,
+ })
+
+ const currentRole = ApiGetCall({
+ url: '/api/me',
+ queryKey: 'authmecipp',
+ waiting: swaStatus.isSuccess && swaStatus.data?.clientPrincipal !== null,
+ })
+
+ const featureFlags = ApiGetCall({
+ url: '/api/ListFeatureFlags',
+ queryKey: 'featureFlags',
+ staleTime: 600000, // Cache for 10 minutes
+ })
+
+ useEffect(() => {
+ if (currentRole.isSuccess && !currentRole.isFetching) {
+ const userRoles = currentRole.data?.clientPrincipal?.userRoles
+ const userPermissions = currentRole.data?.permissions
+ if (!userRoles) {
+ setMenuItems([])
+ setHideSidebar(true)
+ return
+ }
+
+ // Get hidden pages from feature flags - only filter if we have valid data.
+ // A DISABLED flag hides its Pages (features gated behind the flag); an ENABLED
+ // flag hides its HidesPages (features it replaces - e.g. Baselines supersedes
+ // the classic Standards and Drift pages).
+ let hiddenPages = []
+ if (featureFlags.isSuccess && Array.isArray(featureFlags.data)) {
+ const disabledPages = featureFlags.data
+ .filter((flag) => flag.Enabled === false || flag.enabled === false)
+ .flatMap((flag) => flag.Pages || flag.pages || [])
+ .filter((page) => typeof page === 'string')
+ const replacedPages = featureFlags.data
+ .filter((flag) => flag.Enabled === true || flag.enabled === true)
+ .flatMap((flag) => flag.HidesPages || flag.hidesPages || [])
+ .filter((page) => typeof page === 'string')
+ hiddenPages = [...disabledPages, ...replacedPages]
+ }
+
+ const filterItemsByRole = (items) => {
+ return items
+ .map((item) => {
+ // Check if page is hidden by feature flag
+ if (item.path && hiddenPages.length > 0 && hiddenPages.includes(item.path)) {
+ return null
+ }
+
+ // Check permission with pattern matching support
+ if (item.permissions && item.permissions.length > 0) {
+ const hasPermission = userPermissions?.some((userPerm) => {
+ return item.permissions.some((requiredPerm) => {
+ // Exact match
+ if (userPerm === requiredPerm) {
+ return true
+ }
+
+ // Pattern matching - matchPattern escapes every regex metacharacter and
+ // treats * as the only wildcard, mirroring PowerShell -like on the backend.
+ if (requiredPerm.includes('*')) {
+ return matchPattern(requiredPerm, userPerm)
+ }
+
+ return false
+ });
+ })
+ if (!hasPermission) {
+ return null
+ }
+ } else {
+ return null
+ }
+ // check sub-items
+ if (item.items && item.items.length > 0) {
+ const filteredSubItems = filterItemsByRole(item.items).filter(Boolean)
+ if (filteredSubItems.length === 0) return null
+ return { ...item, items: filteredSubItems }
+ }
+
+ return item
+ })
+ .filter(Boolean);
+ }
+ const filteredMenu = filterItemsByRole(nativeMenuItems)
+ setMenuItems(filteredMenu)
+ } else if (
+ swaStatus.isLoading ||
+ swaStatus.data?.clientPrincipal === null ||
+ swaStatus.data === undefined ||
+ currentRole.isLoading
+ ) {
+ setHideSidebar(true)
+ }
+ }, [
+ currentRole.isSuccess,
+ swaStatus.data,
+ swaStatus.isLoading,
+ currentRole.data?.clientPrincipal?.userRoles,
+ currentRole.data?.permissions,
+ currentRole.isFetching,
+ featureFlags.isSuccess,
+ featureFlags.data,
+ ])
+
+ const handleNavPin = useCallback(() => {
+ settings.handleUpdate({
+ pinNav: !settings.pinNav,
+ })
+ }, [settings])
+
+ // Unpinned content offset must match the collapsed drawer's real width — the old 50px
+ // constant left 23px of content underneath the 73px rail.
+ const offset = settings.pinNav ? SIDE_NAV_WIDTH : SIDE_NAV_COLLAPSED_WIDTH
+
+ const userSettingsAPI = ApiGetCall({
+ url: '/api/ListUserSettings',
+ queryKey: 'userSettings',
+ })
+
+ useEffect(() => {
+ if (userSettingsAPI.isSuccess && !userSettingsAPI.isFetching) {
+ // Only update if the data has actually changed (using dataUpdatedAt as a proxy)
+ const dataUpdatedAt = userSettingsAPI.dataUpdatedAt
+ if (dataUpdatedAt && dataUpdatedAt !== lastUserSettingsUpdate.current) {
+ const { bookmarks: _bookmarks, ...serverSettings } = userSettingsAPI.data || {}
+ //if userSettingsAPI.data contains offboardingDefaults.user, delete that specific key.
+ if (serverSettings.offboardingDefaults?.user) {
+ delete serverSettings.offboardingDefaults.user
+ }
+ if (serverSettings.offboardingDefaults?.keepCopy) {
+ delete serverSettings.offboardingDefaults.keepCopy
+ }
+ if (serverSettings?.currentTheme) {
+ delete serverSettings.currentTheme
+ }
+ // get current devtools settings (device-local only)
+ var showDevtools = settings.showDevtools
+
+ settings.handleUpdate({
+ ...serverSettings,
+ showDevtools,
+ })
+
+ // Track this update and set completion status
+ lastUserSettingsUpdate.current = dataUpdatedAt
+ }
+ }
+ }, [
+ userSettingsAPI.isSuccess,
+ userSettingsAPI.data,
+ userSettingsAPI.isFetching,
+ userSettingsAPI.dataUpdatedAt,
+ ])
+
+ const version = ApiGetCall({
+ url: '/version.json',
+ queryKey: 'LocalVersion',
+ })
+
+ const alertsAPI = ApiGetCall({
+ url: `/api/GetCippAlerts?localversion=${encodeURIComponent(version?.data?.version)}`,
+ queryKey: 'alertsDashboard',
+ waiting: false,
+ refetchOnMount: false,
+ refetchOnReconnect: false,
+ keepPreviousData: true,
+ })
+
+ // Hosted maintenance notice, if the instance has one set. Derived from the alerts already
+ // fetched above rather than a second request.
+ const maintenanceAlert = useMemo(
+ () => alertsAPI.data?.find((alert) => alert.maintenance === true) ?? null,
+ [alertsAPI.data]
+ )
+
+ useEffect(() => {
+ if (!hideSidebar && version.isFetched && !alertsAPI.isFetched) {
+ alertsAPI.waiting = true
+ alertsAPI.refetch()
+ }
+ }, [version, alertsAPI, hideSidebar])
+
+ useEffect(() => {
+ if (alertsAPI.isSuccess && !alertsAPI.isFetching) {
+ setFetchingVisible(new Array(alertsAPI.data.length).fill(true))
+ }
+ }, [alertsAPI.isSuccess, alertsAPI.data, alertsAPI.isFetching])
+ const dispatch = useDispatch()
+ useEffect(() => {
+ if (alertsAPI.isSuccess && !alertsAPI.isFetching) {
+ if (alertsAPI.data.length > 0) {
+ // The maintenance notice renders as its own banner - toasting it too would surface the
+ // same message three times per page load (banner, snackbar, notification bell).
+ alertsAPI.data
+ .filter((alert) => !alert.maintenance)
+ .forEach((alert) => {
+ dispatch(
+ showToast({
+ message: alert.Alert,
+ title: alert.title,
+ toastError: alert,
+ })
+ )
+ })
+ }
+ }
+ }, [alertsAPI.isSuccess])
+
+ return (
+ <>
+ {/* Rendered outside the hideSidebar check - maintenance applies to chrome-less pages too. */}
+
+
+
+
+
+
+
+
+
+
+ ) : (
+
+ {/* The nav carries its own rail chrome (gutter + divider) so that when it
+ renders nothing — a single crumb on a phone — no hairline is left behind. */}
+ {showBreadcrumb &&
+ )}
+
+
+
+
+ )
+}
diff --git a/src/layouts/mobile-nav-item.js b/src/layouts/mobile-nav-item.js
deleted file mode 100644
index 4367198a7ad7..000000000000
--- a/src/layouts/mobile-nav-item.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import { useCallback, useState } from 'react';
-import NextLink from 'next/link';
-import PropTypes from 'prop-types';
-import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
-import ChevronDownIcon from '@heroicons/react/24/outline/ChevronDownIcon';
-import { Box, ButtonBase, Collapse, SvgIcon } from '@mui/material';
-import ArrowTopRightOnSquareIcon from '@heroicons/react/24/outline/ArrowTopRightOnSquareIcon';
-import LanguageIcon from '@mui/icons-material/Language';
-
-export const MobileNavItem = (props) => {
- const {
- active = false,
- children,
- depth = 0,
- disabled = false,
- external = false,
- icon,
- openImmediately = false,
- path,
- scope,
- title
- } = props;
-
- const isGlobal = scope === "global";
- const [open, setOpen] = useState(openImmediately);
-
- // same step as side-nav-item, nesting reads the same in both navs
- const indent = depth > 0 ? depth * 1.5 : 1;
-
- const handleToggle = useCallback(() => {
- setOpen((prevOpen) => !prevOpen);
- }, []);
-
- // Branch
-
- if (children) {
- return (
-
- theme.typography.fontFamily,
- fontSize: 14,
- fontWeight: 500,
- justifyContent: 'flex-start',
- px: `${indent * 6}px`,
- py: '12px',
- textAlign: 'left',
- whiteSpace: 'nowrap',
- width: '100%'
- }}
- >
-
- {icon}
-
-
- {title}
-
-
- {open ?
-
-
- {children}
-
-
- );
- }
-
- // Leaf
-
- const linkProps = path
- ? external
- ? {
- component: 'a',
- href: path,
- target: '_blank'
- }
- : {
- component: NextLink,
- href: path
- }
- : {};
-
- return (
-
- theme.typography.fontFamily,
- fontSize: 14,
- fontWeight: 500,
- justifyContent: 'flex-start',
- px: `${indent * 6}px`,
- py: '12px',
- textAlign: 'left',
- whiteSpace: 'nowrap',
- width: '100%'
- }}
- {...linkProps}>
-
- {icon}
-
-
- {title}
-
- {isGlobal && (
-
-
-
-
- )}
- {external && (
-
-
- )}
-
-
- );
-};
-
-MobileNavItem.propTypes = {
- active: PropTypes.bool,
- children: PropTypes.node,
- depth: PropTypes.number,
- disabled: PropTypes.bool,
- external: PropTypes.bool,
- icon: PropTypes.node,
- openImmediately: PropTypes.bool,
- path: PropTypes.string,
- scope: PropTypes.string,
- title: PropTypes.string.isRequired
-};
diff --git a/src/layouts/mobile-nav-item.jsx b/src/layouts/mobile-nav-item.jsx
new file mode 100644
index 000000000000..50d2c311398d
--- /dev/null
+++ b/src/layouts/mobile-nav-item.jsx
@@ -0,0 +1,194 @@
+import { useCallback, useState } from 'react';
+import { CippIcons } from '../utils/icon-registry';
+import NextLink from 'next/link';
+import PropTypes from 'prop-types';
+import { Box, ButtonBase, Collapse, SvgIcon } from '@mui/material';
+
+export const MobileNavItem = (props) => {
+ const {
+ active = false,
+ children,
+ depth = 0,
+ disabled = false,
+ external = false,
+ icon,
+ openImmediately = false,
+ path,
+ scope,
+ title
+ } = props;
+
+ const isGlobal = scope === "global";
+ const [open, setOpen] = useState(openImmediately);
+
+ // same step as side-nav-item, nesting reads the same in both navs
+ const indent = depth > 0 ? depth * 1.5 : 1;
+
+ const handleToggle = useCallback(() => {
+ setOpen((prevOpen) => !prevOpen);
+ }, []);
+
+ // Branch
+
+ if (children) {
+ return (
+
+ theme.typography.fontFamily,
+ fontSize: 14,
+ fontWeight: 500,
+ justifyContent: 'flex-start',
+ px: `${indent * 6}px`,
+ py: '12px',
+ textAlign: 'left',
+ whiteSpace: 'nowrap',
+ width: '100%'
+ }}
+ >
+
+ {icon}
+
+
+ {title}
+
+
+ {open ?
+
+
+ {children}
+
+
+ );
+ }
+
+ // Leaf
+
+ const linkProps = path
+ ? external
+ ? {
+ component: 'a',
+ href: path,
+ target: '_blank'
+ }
+ : {
+ component: NextLink,
+ href: path
+ }
+ : {};
+
+ return (
+
+ theme.typography.fontFamily,
+ fontSize: 14,
+ fontWeight: 500,
+ justifyContent: 'flex-start',
+ px: `${indent * 6}px`,
+ py: '12px',
+ textAlign: 'left',
+ whiteSpace: 'nowrap',
+ width: '100%'
+ }}
+ {...linkProps}>
+
+ {icon}
+
+
+ {title}
+
+ {isGlobal && (
+
+
+
+
+ )}
+ {external && (
+
+
+ )}
+
+
+ );
+};
+
+MobileNavItem.propTypes = {
+ active: PropTypes.bool,
+ children: PropTypes.node,
+ depth: PropTypes.number,
+ disabled: PropTypes.bool,
+ external: PropTypes.bool,
+ icon: PropTypes.node,
+ openImmediately: PropTypes.bool,
+ path: PropTypes.string,
+ scope: PropTypes.string,
+ title: PropTypes.string.isRequired
+};
diff --git a/src/layouts/mobile-nav.js b/src/layouts/mobile-nav.js
deleted file mode 100644
index 264b7cd97afe..000000000000
--- a/src/layouts/mobile-nav.js
+++ /dev/null
@@ -1,256 +0,0 @@
-import { useMemo, useState } from "react";
-import NextLink from "next/link";
-import { usePathname } from "next/navigation";
-import PropTypes from "prop-types";
-import { Box, Divider, InputAdornment, OutlinedInput, Stack, SwipeableDrawer, Typography } from "@mui/material";
-import { Search } from "@mui/icons-material";
-import { Logo } from "../components/logo";
-import { CippSponsor } from "../components/CippComponents/CippSponsor";
-import { Scrollbar } from "../components/scrollbar";
-import { paths } from "../paths";
-import { MobileNavItem } from "./mobile-nav-item";
-import { SideNavBookmarks } from "./side-nav-bookmarks";
-import { useSettings } from "../hooks/use-settings";
-import { useSwipeCloseTransition } from "../hooks/use-swipe-close-transition";
-
-// 80% of the viewport truncated third-level labels at 320px (256px) and was absurd at
-// 899px (719px). Cap it like a real nav drawer.
-const MOBILE_NAV_WIDTH = "min(360px, 88vw)";
-
-const renderItems = ({ depth = 0, items, pathname, forceOpen = false }) =>
- items.reduce(
- (acc, item) =>
- reduceChildRoutes({
- acc,
- depth,
- item,
- pathname,
- forceOpen,
- }),
- []
- );
-
-const reduceChildRoutes = ({ acc, depth, item, pathname, forceOpen }) => {
- const checkPath = !!(item.path && pathname);
- // Special handling for root path "/" to avoid matching all paths
- const partialMatch = checkPath && item.path !== "/" ? pathname.includes(item.path) : false;
- const exactMatch = checkPath ? pathname === item.path : false;
-
- if (item.items) {
- acc.push(
-
-
- {renderItems({
- depth: depth + 1,
- items: item.items,
- pathname,
- forceOpen,
- })}
-
-
- );
- } else {
- acc.push(
- {})}
- open={open}
- slotProps={{ transition: swipeClose.transitionProps }}
- PaperProps={{
- sx: {
- // desktop side-nav renders on background.default, keep the drawer on the same surface
- backgroundColor: "background.default",
- width: MOBILE_NAV_WIDTH,
- // Column layout so the sponsor footer pins to the bottom and the menu scrolls
- // between it and the sticky header, rather than the footer riding the list.
- display: "flex",
- flexDirection: "column",
- },
- }}
- variant="temporary"
- >
- {/* Sticky header: logo (relocated from the mobile top bar) + nav search */}
-
-
-
- setSearch(event.target.value)}
- inputProps={{ enterKeyHint: "search", "aria-label": "Search navigation" }}
- startAdornment={
-
-
- }
- sx={{ minHeight: 44 }}
- />
-
-
-
-
- {/* Bookmarks section above Dashboard */}
- {showSidebarBookmarks && !query && (
- <>
-
- No pages match “{search}”.
-
- )}
-
-
-
- {/* Pinned below the scrolling menu rather than at the end of it, so it stays visible
- without the long nav list pushing it off-screen. Compact: the drawer's vertical
- space belongs to navigation. */}
-
-
-
- );
-};
-
-MobileNav.propTypes = {
- onClose: PropTypes.func,
- onOpen: PropTypes.func,
- open: PropTypes.bool,
-};
diff --git a/src/layouts/mobile-nav.jsx b/src/layouts/mobile-nav.jsx
new file mode 100644
index 000000000000..9adb716c2d79
--- /dev/null
+++ b/src/layouts/mobile-nav.jsx
@@ -0,0 +1,265 @@
+import { useMemo, useState } from "react";
+import { CippIcons } from "../utils/icon-registry";
+import NextLink from "next/link";
+import { usePathname } from "next/navigation";
+import PropTypes from "prop-types";
+import { Box, Divider, InputAdornment, OutlinedInput, Stack, SwipeableDrawer, Typography } from "@mui/material";
+import { Logo } from "../components/logo";
+import { CippSponsor } from "../components/CippComponents/CippSponsor";
+import { Scrollbar } from "../components/scrollbar";
+import { paths } from "../paths";
+import { MobileNavItem } from "./mobile-nav-item";
+import { SideNavBookmarks } from "./side-nav-bookmarks";
+import { useSettings } from "../hooks/use-settings";
+import { useSwipeCloseTransition } from "../hooks/use-swipe-close-transition";
+
+// 80% of the viewport truncated third-level labels at 320px (256px) and was absurd at
+// 899px (719px). Cap it like a real nav drawer.
+const MOBILE_NAV_WIDTH = "min(360px, 88vw)";
+
+const renderItems = ({ depth = 0, items, pathname, forceOpen = false }) =>
+ items.reduce(
+ (acc, item) =>
+ reduceChildRoutes({
+ acc,
+ depth,
+ item,
+ pathname,
+ forceOpen,
+ }),
+ []
+ );
+
+const reduceChildRoutes = ({ acc, depth, item, pathname, forceOpen }) => {
+ const checkPath = !!(item.path && pathname);
+ // Special handling for root path "/" to avoid matching all paths
+ const partialMatch = checkPath && item.path !== "/" ? pathname.includes(item.path) : false;
+ const exactMatch = checkPath ? pathname === item.path : false;
+
+ if (item.items) {
+ acc.push(
+
+
+ {renderItems({
+ depth: depth + 1,
+ items: item.items,
+ pathname,
+ forceOpen,
+ })}
+
+
+ );
+ } else {
+ acc.push(
+ {})}
+ open={open}
+ slotProps={{
+ transition: swipeClose.transitionProps,
+
+ paper: {
+ sx: {
+ // desktop side-nav renders on background.default, keep the drawer on the same surface
+ backgroundColor: "background.default",
+ width: MOBILE_NAV_WIDTH,
+ // Column layout so the sponsor footer pins to the bottom and the menu scrolls
+ // between it and the sticky header, rather than the footer riding the list.
+ display: "flex",
+ flexDirection: "column",
+ },
+ }
+ }}
+ variant="temporary">
+ {/* Sticky header: logo (relocated from the mobile top bar) + nav search */}
+
+
+
+ setSearch(event.target.value)}
+ aria-label="Search navigation"
+ slotProps={{ input: { enterKeyHint: "search" } }}
+ startAdornment={
+
+
+ }
+ sx={{ minHeight: 44 }}
+ />
+
+
+
+
+ {/* Bookmarks section above Dashboard */}
+ {showSidebarBookmarks && !query && (
+ <>
+
+ No pages match “{search}”.
+
+ )}
+
+
+
+ {/* Pinned below the scrolling menu rather than at the end of it, so it stays visible
+ without the long nav list pushing it off-screen. Compact: the drawer's vertical
+ space belongs to navigation. */}
+
+
+
+ );
+};
+
+MobileNav.propTypes = {
+ onClose: PropTypes.func,
+ onOpen: PropTypes.func,
+ open: PropTypes.bool,
+};
diff --git a/src/layouts/notifications-popover.js b/src/layouts/notifications-popover.js
deleted file mode 100644
index b585b6871d5e..000000000000
--- a/src/layouts/notifications-popover.js
+++ /dev/null
@@ -1,202 +0,0 @@
-import BellIcon from "@heroicons/react/24/outline/BellIcon";
-import SparklesIcon from "@heroicons/react/24/outline/SparklesIcon";
-import {
- Badge,
- Box,
- Button,
- Divider,
- IconButton,
- Popover,
- Stack,
- SvgIcon,
- Typography,
-} from "@mui/material";
-import { usePopover } from "../hooks/use-popover";
-import { Error, Update, Close as CloseIcon } from "@mui/icons-material";
-import { useDispatch, useSelector } from "react-redux";
-import { closeToast, resetToast } from "../store/toasts";
-import { useEffect, useState } from "react";
-import ReactTimeAgo from "react-time-ago";
-
-const getContent = (notification) => {
- return (
- <>
-
-
- {notification.type === "update" ? (
-
- {notification.subtitle}
-
- {notification.content && (
-
- {notification.content}
-
- )}
-
- );
-};
-
-export const NotificationsPopover = () => {
- const dispatch = useDispatch();
- const toasts = useSelector((state) => state.toasts.toasts);
- const [page, setPage] = useState(0);
-
- // Map toasts to notifications
- const notifications = toasts.map((toast) => {
- return {
- id: toast.index, // Ensure that 'id' corresponds to the identifier used in your store
- type: toast.toastError?.type || "error",
- subtitle: toast.title,
- content: toast.message,
- createdAt: toast.date,
- link: toast.toastError?.link,
- };
- });
-
- // Reverse the array so the most recent notifications are at the top
- notifications.reverse();
- const notificationsToShow = notifications.slice(0, (page + 1) * 5);
-
- const popover = usePopover();
-
- const BadgeColour = notifications.some((notification) => notification.type === "error")
- ? "warning"
- : notifications.some((notification) => notification.type === "update")
- ? "primary"
- : "info";
-
- useEffect(() => {
- if (notifications.length === 0 && popover.open) {
- popover.handleClose();
- }
- }, [notifications, popover]);
-
- return (
- <>
-
-
-
-
-
-
-
-
- Notifications
-
-
-
-
- {getContent(notification)}
-
-
- {createdAt}
-
- {notification.link && (
-
- )}
-
-
- dispatch(closeToast({ index: notification.id }))}
- >
-
-
-
- );
- })}
-
-
- {notifications.length > notificationsToShow.length && (
-
- )}
-
-
-
-
- );
-};
diff --git a/src/layouts/notifications-popover.jsx b/src/layouts/notifications-popover.jsx
new file mode 100644
index 000000000000..accd1c479283
--- /dev/null
+++ b/src/layouts/notifications-popover.jsx
@@ -0,0 +1,236 @@
+import {
+ Badge,
+ Box,
+ Button,
+ Divider,
+ IconButton,
+ Popover,
+ Stack,
+ SvgIcon,
+ Typography,
+} from "@mui/material";
+import { CippIcons } from "../utils/icon-registry";
+import { usePopover } from "../hooks/use-popover";
+import { useDispatch, useSelector } from "react-redux";
+import { closeToast, resetToast } from "../store/toasts";
+import { useEffect, useState } from "react";
+import ReactTimeAgo from "react-time-ago";
+
+const getContent = (notification) => {
+ return (
+ <>
+
+
+ {notification.type === "update" ? (
+
+ {notification.subtitle}
+
+ {notification.content && (
+
+ {notification.content}
+
+ )}
+
+ );
+};
+
+export const NotificationsPopover = () => {
+ const dispatch = useDispatch();
+ const toasts = useSelector((state) => state.toasts.toasts);
+ const [page, setPage] = useState(0);
+
+ // Map toasts to notifications
+ const notifications = toasts.map((toast) => {
+ return {
+ id: toast.index, // Ensure that 'id' corresponds to the identifier used in your store
+ type: toast.toastError?.type || "error",
+ subtitle: toast.title,
+ content: toast.message,
+ createdAt: toast.date,
+ link: toast.toastError?.link,
+ };
+ });
+
+ // Reverse the array so the most recent notifications are at the top
+ notifications.reverse();
+ const notificationsToShow = notifications.slice(0, (page + 1) * 5);
+
+ const popover = usePopover();
+
+ const BadgeColour = notifications.some((notification) => notification.type === "error")
+ ? "warning"
+ : notifications.some((notification) => notification.type === "update")
+ ? "primary"
+ : "info";
+
+ useEffect(() => {
+ if (notifications.length === 0 && popover.open) {
+ popover.handleClose();
+ }
+ }, [notifications, popover]);
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+ Notifications
+
+
+
+
+ {getContent(notification)}
+
+
+ {createdAt}
+
+ {notification.link && (
+
+ )}
+
+
+ dispatch(closeToast({ index: notification.id }))}
+ aria-label="Dismiss notification"
+ title="Dismiss notification"
+ >
+
+
+
+ );
+ })}
+
+
+ {notifications.length > notificationsToShow.length && (
+
+ )}
+
+
+
+
+ );
+};
diff --git a/src/layouts/organization-popover.js b/src/layouts/organization-popover.jsx
similarity index 100%
rename from src/layouts/organization-popover.js
rename to src/layouts/organization-popover.jsx
diff --git a/src/layouts/side-nav-bookmarks.js b/src/layouts/side-nav-bookmarks.js
deleted file mode 100644
index 08bba90d2b84..000000000000
--- a/src/layouts/side-nav-bookmarks.js
+++ /dev/null
@@ -1,551 +0,0 @@
-import { useCallback, useMemo, useState, useEffect, useRef } from "react";
-import NextLink from "next/link";
-import { Box, ButtonBase, Collapse, IconButton, Stack, SvgIcon, Typography } from "@mui/material";
-import BookmarkIcon from "@mui/icons-material/Bookmark";
-import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
-import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import CloseIcon from "@mui/icons-material/Close";
-import SwapVertIcon from "@mui/icons-material/SwapVert";
-import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
-import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
-import LockIcon from "@mui/icons-material/Lock";
-import LockOpenIcon from "@mui/icons-material/LockOpen";
-import ChevronRightIcon from "@heroicons/react/24/outline/ChevronRightIcon";
-import ChevronDownIcon from "@heroicons/react/24/outline/ChevronDownIcon";
-import { useSettings } from "../hooks/use-settings";
-import { useUserBookmarks } from "../hooks/use-user-bookmarks";
-
-// alignWithRail: the pinned side nav sits beside the content area's breadcrumb rail, and the
-// two header rows share a divider line across the seam — the desktop nav passes this so the
-// Bookmarks row matches the rail's 28px row instead of the 48px nav-item rhythm. The mobile
-// drawer has no rail beside it and keeps the roomier row.
-export const SideNavBookmarks = ({ collapse = false, alignWithRail = false }) => {
- const settings = useSettings();
- const compactNav = settings.compactNav ?? false;
- const navItemPy = compactNav ? "6px" : "12px";
- const headerPy = alignWithRail ? "2px" : navItemPy;
- const emptyStatePy = compactNav ? "4px" : "8px";
- const { bookmarks, setBookmarks } = useUserBookmarks();
- const [open, setOpen] = useState(settings.bookmarksOpen ?? false);
- const reorderMode = settings.bookmarkReorderMode || "arrows";
- const locked = settings.bookmarkLocked ?? true;
- const [sortOrder, setSortOrder] = useState(settings.bookmarkSortOrder || "custom");
- const [dragIndex, setDragIndex] = useState(null);
- const [dragOverIndex, setDragOverIndex] = useState(null);
- const [animatingPair, setAnimatingPair] = useState(null);
- const [flashSort, setFlashSort] = useState(false);
- const [flashLock, setFlashLock] = useState(false);
- const itemRefs = useRef({});
- const touchDragRef = useRef({ startIdx: null, overIdx: null });
-
- const handleToggle = useCallback(() => {
- setOpen((prev) => {
- const next = !prev;
- settings.handleUpdate({ bookmarksOpen: next });
- return next;
- });
- }, [settings]);
-
- const moveBookmarkUp = useCallback(
- (index) => {
- if (index <= 0) return;
- const updatedBookmarks = [...bookmarks];
- const temp = updatedBookmarks[index];
- updatedBookmarks[index] = updatedBookmarks[index - 1];
- updatedBookmarks[index - 1] = temp;
- setBookmarks(updatedBookmarks);
- },
- [bookmarks, setBookmarks],
- );
-
- const moveBookmarkDown = useCallback(
- (index) => {
- if (index >= bookmarks.length - 1) return;
- const updatedBookmarks = [...bookmarks];
- const temp = updatedBookmarks[index];
- updatedBookmarks[index] = updatedBookmarks[index + 1];
- updatedBookmarks[index + 1] = temp;
- setBookmarks(updatedBookmarks);
- },
- [bookmarks, setBookmarks],
- );
-
- const removeBookmark = useCallback(
- (path) => {
- const updatedBookmarks = [...bookmarks];
- const origIdx = updatedBookmarks.findIndex((b) => b.path === path);
- if (origIdx !== -1) {
- updatedBookmarks.splice(origIdx, 1);
- setBookmarks(updatedBookmarks);
- }
- },
- [bookmarks, setBookmarks],
- );
-
- const animatedMoveUp = useCallback(
- (index) => {
- if (index <= 0 || animatingPair) return;
- const el1 = itemRefs.current[index];
- const el2 = itemRefs.current[index - 1];
- if (!el1 || !el2) {
- moveBookmarkUp(index);
- return;
- }
- const distance = el1.getBoundingClientRect().top - el2.getBoundingClientRect().top;
- setAnimatingPair({ idx1: index, idx2: index - 1, offset1: -distance, offset2: distance });
- setTimeout(() => {
- moveBookmarkUp(index);
- setAnimatingPair(null);
- }, 250);
- },
- [animatingPair, moveBookmarkUp],
- );
-
- const animatedMoveDown = useCallback(
- (index) => {
- if (index >= bookmarks.length - 1 || animatingPair) return;
- const el1 = itemRefs.current[index];
- const el2 = itemRefs.current[index + 1];
- if (!el1 || !el2) {
- moveBookmarkDown(index);
- return;
- }
- const distance = el2.getBoundingClientRect().top - el1.getBoundingClientRect().top;
- setAnimatingPair({ idx1: index, idx2: index + 1, offset1: distance, offset2: -distance });
- setTimeout(() => {
- moveBookmarkDown(index);
- setAnimatingPair(null);
- }, 250);
- },
- [animatingPair, bookmarks, moveBookmarkDown],
- );
-
- const triggerSortFlash = useCallback(() => {
- setFlashSort(true);
- setTimeout(() => setFlashSort(false), 600);
- }, []);
-
- const triggerLockFlash = useCallback(() => {
- setFlashLock(true);
- setTimeout(() => setFlashLock(false), 600);
- }, []);
-
- const handleToggleLock = useCallback(() => {
- settings.handleUpdate({ bookmarkLocked: !locked });
- }, [settings, locked]);
-
- const handleDragStart = useCallback((index) => {
- setDragIndex(index);
- }, []);
-
- const handleDragOver = useCallback((e, index) => {
- e.preventDefault();
- setDragOverIndex(index);
- }, []);
-
- const handleDrop = useCallback(
- (e, dropIndex) => {
- e.preventDefault();
- if (dragIndex === null || dragIndex === dropIndex) {
- setDragIndex(null);
- setDragOverIndex(null);
- return;
- }
- const items = [...bookmarks];
- const [reordered] = items.splice(dragIndex, 1);
- items.splice(dropIndex, 0, reordered);
- setBookmarks(items);
- setDragIndex(null);
- setDragOverIndex(null);
- },
- [dragIndex, bookmarks, setBookmarks],
- );
-
- const handleDragEnd = useCallback(() => {
- setDragIndex(null);
- setDragOverIndex(null);
- }, []);
-
- const handleSortCycle = useCallback(() => {
- const next = sortOrder === "custom" ? "asc" : sortOrder === "asc" ? "desc" : "custom";
- setSortOrder(next);
- settings.handleUpdate({ bookmarkSortOrder: next });
- }, [sortOrder, settings]);
-
- const displayBookmarks = useMemo(() => {
- if (sortOrder === "custom") return bookmarks;
- return [...bookmarks].sort((a, b) => {
- const cmp = (a.label || "").localeCompare(b.label || "");
- return sortOrder === "asc" ? cmp : -cmp;
- });
- }, [bookmarks, sortOrder]);
-
- return (
-
-
- theme.typography.fontFamily,
- fontSize: 14,
- fontWeight: 500,
- justifyContent: "flex-start",
- px: "6px",
- py: headerPy,
- textAlign: "left",
- whiteSpace: "nowrap",
- width: "100%",
- }}
- >
-
-
-
-
-
- Bookmarks
-
-
- {!collapse && (
- <>
-
- {locked ?
- Z" : "Z > A"
- }
- >
- {sortOrder === "custom" &&
-
- )}
-
-
- {open ?
-
-
-
-
- {displayBookmarks.length === 0 ? (
-
-
- No bookmarks added yet
-
-
- ) : (
- displayBookmarks.map((bookmark, idx) => (
- {
- itemRefs.current[idx] = el;
- }}
- data-bookmark-index={idx}
- draggable={reorderMode === "drag" && !locked}
- {...(reorderMode === "drag"
- ? {
- onDragStart: (e) => {
- if (locked) {
- e.preventDefault();
- triggerLockFlash();
- return;
- }
- handleDragStart(idx);
- },
- onDragEnd: handleDragEnd,
- ...(!locked
- ? {
- onDragOver: (e) => handleDragOver(e, idx),
- onDrop: (e) => handleDrop(e, idx),
- }
- : {}),
- }
- : {})}
- style={{
- ...(animatingPair && (animatingPair.idx1 === idx || animatingPair.idx2 === idx)
- ? {
- transform: `translateY(${animatingPair.idx1 === idx ? animatingPair.offset1 : animatingPair.offset2}px)`,
- transition: "transform 250ms ease-in-out",
- position: "relative",
- zIndex: animatingPair.idx1 === idx ? 1 : 0,
- }
- : {}),
- }}
- >
-
- {reorderMode === "drag" && !locked && (
- e.preventDefault()}
- onTouchStart={() => {
- if (locked) {
- triggerLockFlash();
- return;
- }
- touchDragRef.current.startIdx = idx;
- setDragIndex(idx);
- }}
- onTouchMove={(e) => {
- if (touchDragRef.current.startIdx === null) return;
- const touch = e.touches[0];
- const draggedLi = itemRefs.current[touchDragRef.current.startIdx];
- if (draggedLi) draggedLi.style.pointerEvents = "none";
- const el = document.elementFromPoint(touch.clientX, touch.clientY);
- if (draggedLi) draggedLi.style.pointerEvents = "";
- const li = el?.closest("[data-bookmark-index]");
- if (li) {
- const overIdx = parseInt(li.dataset.bookmarkIndex, 10);
- if (!isNaN(overIdx) && overIdx >= 0 && overIdx < bookmarks.length) {
- touchDragRef.current.overIdx = overIdx;
- setDragOverIndex(overIdx);
- }
- }
- }}
- onTouchEnd={() => {
- const { startIdx, overIdx } = touchDragRef.current;
- if (startIdx !== null && overIdx !== null && startIdx !== overIdx) {
- const items = [...bookmarks];
- const [reordered] = items.splice(startIdx, 1);
- items.splice(overIdx, 0, reordered);
- setBookmarks(items);
- }
- touchDragRef.current = { startIdx: null, overIdx: null };
- setDragIndex(null);
- setDragOverIndex(null);
- }}
- sx={{
- touchAction: "none",
- position: "absolute",
- left: "6px",
- top: "50%",
- transform: "translateY(-50%)",
- display: "flex",
- alignItems: "center",
- color: "neutral.500",
- cursor: "grab",
- }}
- >
-
- )}
- theme.typography.fontFamily,
- fontSize: 13,
- fontWeight: 500,
- justifyContent: "flex-start",
- pl: "36px",
- py: navItemPy,
- textAlign: "left",
- whiteSpace: "nowrap",
- flexGrow: 1,
- overflow: "hidden",
- }}
- >
-
- {bookmark.category && (
-
- {bookmark.category}
-
- )}
- {bookmark.label}
-
-
-
- {reorderMode === "arrows" && !locked && (
- <>
- {
- e.preventDefault();
- if (locked) {
- triggerLockFlash();
- return;
- }
- sortOrder === "custom" ? animatedMoveUp(idx) : triggerSortFlash();
- }}
- disabled={sortOrder === "custom" && idx === 0}
- sx={{ p: "2px", opacity: sortOrder !== "custom" || locked ? 0.4 : 1 }}
- >
-
- {
- e.preventDefault();
- if (locked) {
- triggerLockFlash();
- return;
- }
- sortOrder === "custom" ? animatedMoveDown(idx) : triggerSortFlash();
- }}
- disabled={sortOrder === "custom" && idx === displayBookmarks.length - 1}
- sx={{ p: "2px", opacity: sortOrder !== "custom" || locked ? 0.4 : 1 }}
- >
-
-
- )}
- {!locked && (
- {
- e.preventDefault();
- removeBookmark(bookmark.path);
- }}
- sx={{ p: "2px" }}
- >
-
- )}
-
-
-
- ))
- )}
-
-
-
- );
-};
diff --git a/src/layouts/side-nav-bookmarks.jsx b/src/layouts/side-nav-bookmarks.jsx
new file mode 100644
index 000000000000..8cd4f472453c
--- /dev/null
+++ b/src/layouts/side-nav-bookmarks.jsx
@@ -0,0 +1,544 @@
+import { useCallback, useMemo, useState, useEffect, useRef } from "react";
+import { CippIcons } from "../utils/icon-registry";
+import NextLink from "next/link";
+import { Box, ButtonBase, Collapse, IconButton, Stack, SvgIcon, Typography } from "@mui/material";
+import { useSettings } from "../hooks/use-settings";
+import { useUserBookmarks } from "../hooks/use-user-bookmarks";
+
+// alignWithRail: the pinned side nav sits beside the content area's breadcrumb rail, and the
+// two header rows share a divider line across the seam — the desktop nav passes this so the
+// Bookmarks row matches the rail's 28px row instead of the 48px nav-item rhythm. The mobile
+// drawer has no rail beside it and keeps the roomier row.
+export const SideNavBookmarks = ({ collapse = false, alignWithRail = false }) => {
+ const settings = useSettings();
+ const compactNav = settings.compactNav ?? false;
+ const navItemPy = compactNav ? "6px" : "12px";
+ const headerPy = alignWithRail ? "2px" : navItemPy;
+ const emptyStatePy = compactNav ? "4px" : "8px";
+ const { bookmarks, setBookmarks } = useUserBookmarks();
+ const [open, setOpen] = useState(settings.bookmarksOpen ?? false);
+ const reorderMode = settings.bookmarkReorderMode || "arrows";
+ const locked = settings.bookmarkLocked ?? true;
+ const [sortOrder, setSortOrder] = useState(settings.bookmarkSortOrder || "custom");
+ const [dragIndex, setDragIndex] = useState(null);
+ const [dragOverIndex, setDragOverIndex] = useState(null);
+ const [animatingPair, setAnimatingPair] = useState(null);
+ const [flashSort, setFlashSort] = useState(false);
+ const [flashLock, setFlashLock] = useState(false);
+ const itemRefs = useRef({});
+ const touchDragRef = useRef({ startIdx: null, overIdx: null });
+
+ const handleToggle = useCallback(() => {
+ setOpen((prev) => {
+ const next = !prev;
+ settings.handleUpdate({ bookmarksOpen: next });
+ return next;
+ });
+ }, [settings]);
+
+ const moveBookmarkUp = useCallback(
+ (index) => {
+ if (index <= 0) return;
+ const updatedBookmarks = [...bookmarks];
+ const temp = updatedBookmarks[index];
+ updatedBookmarks[index] = updatedBookmarks[index - 1];
+ updatedBookmarks[index - 1] = temp;
+ setBookmarks(updatedBookmarks);
+ },
+ [bookmarks, setBookmarks],
+ );
+
+ const moveBookmarkDown = useCallback(
+ (index) => {
+ if (index >= bookmarks.length - 1) return;
+ const updatedBookmarks = [...bookmarks];
+ const temp = updatedBookmarks[index];
+ updatedBookmarks[index] = updatedBookmarks[index + 1];
+ updatedBookmarks[index + 1] = temp;
+ setBookmarks(updatedBookmarks);
+ },
+ [bookmarks, setBookmarks],
+ );
+
+ const removeBookmark = useCallback(
+ (path) => {
+ const updatedBookmarks = [...bookmarks];
+ const origIdx = updatedBookmarks.findIndex((b) => b.path === path);
+ if (origIdx !== -1) {
+ updatedBookmarks.splice(origIdx, 1);
+ setBookmarks(updatedBookmarks);
+ }
+ },
+ [bookmarks, setBookmarks],
+ );
+
+ const animatedMoveUp = useCallback(
+ (index) => {
+ if (index <= 0 || animatingPair) return;
+ const el1 = itemRefs.current[index];
+ const el2 = itemRefs.current[index - 1];
+ if (!el1 || !el2) {
+ moveBookmarkUp(index);
+ return;
+ }
+ const distance = el1.getBoundingClientRect().top - el2.getBoundingClientRect().top;
+ setAnimatingPair({ idx1: index, idx2: index - 1, offset1: -distance, offset2: distance });
+ setTimeout(() => {
+ moveBookmarkUp(index);
+ setAnimatingPair(null);
+ }, 250);
+ },
+ [animatingPair, moveBookmarkUp],
+ );
+
+ const animatedMoveDown = useCallback(
+ (index) => {
+ if (index >= bookmarks.length - 1 || animatingPair) return;
+ const el1 = itemRefs.current[index];
+ const el2 = itemRefs.current[index + 1];
+ if (!el1 || !el2) {
+ moveBookmarkDown(index);
+ return;
+ }
+ const distance = el2.getBoundingClientRect().top - el1.getBoundingClientRect().top;
+ setAnimatingPair({ idx1: index, idx2: index + 1, offset1: distance, offset2: -distance });
+ setTimeout(() => {
+ moveBookmarkDown(index);
+ setAnimatingPair(null);
+ }, 250);
+ },
+ [animatingPair, bookmarks, moveBookmarkDown],
+ );
+
+ const triggerSortFlash = useCallback(() => {
+ setFlashSort(true);
+ setTimeout(() => setFlashSort(false), 600);
+ }, []);
+
+ const triggerLockFlash = useCallback(() => {
+ setFlashLock(true);
+ setTimeout(() => setFlashLock(false), 600);
+ }, []);
+
+ const handleToggleLock = useCallback(() => {
+ settings.handleUpdate({ bookmarkLocked: !locked });
+ }, [settings, locked]);
+
+ const handleDragStart = useCallback((index) => {
+ setDragIndex(index);
+ }, []);
+
+ const handleDragOver = useCallback((e, index) => {
+ e.preventDefault();
+ setDragOverIndex(index);
+ }, []);
+
+ const handleDrop = useCallback(
+ (e, dropIndex) => {
+ e.preventDefault();
+ if (dragIndex === null || dragIndex === dropIndex) {
+ setDragIndex(null);
+ setDragOverIndex(null);
+ return;
+ }
+ const items = [...bookmarks];
+ const [reordered] = items.splice(dragIndex, 1);
+ items.splice(dropIndex, 0, reordered);
+ setBookmarks(items);
+ setDragIndex(null);
+ setDragOverIndex(null);
+ },
+ [dragIndex, bookmarks, setBookmarks],
+ );
+
+ const handleDragEnd = useCallback(() => {
+ setDragIndex(null);
+ setDragOverIndex(null);
+ }, []);
+
+ const handleSortCycle = useCallback(() => {
+ const next = sortOrder === "custom" ? "asc" : sortOrder === "asc" ? "desc" : "custom";
+ setSortOrder(next);
+ settings.handleUpdate({ bookmarkSortOrder: next });
+ }, [sortOrder, settings]);
+
+ const displayBookmarks = useMemo(() => {
+ if (sortOrder === "custom") return bookmarks;
+ return [...bookmarks].sort((a, b) => {
+ const cmp = (a.label || "").localeCompare(b.label || "");
+ return sortOrder === "asc" ? cmp : -cmp;
+ });
+ }, [bookmarks, sortOrder]);
+
+ return (
+
+
+ theme.typography.fontFamily,
+ fontSize: 14,
+ fontWeight: 500,
+ justifyContent: "flex-start",
+ px: "6px",
+ py: headerPy,
+ textAlign: "left",
+ whiteSpace: "nowrap",
+ width: "100%",
+ }}
+ >
+
+
+
+
+
+ Bookmarks
+
+
+ {!collapse && (
+ <>
+
+ {locked ?
+ Z" : "Z > A"
+ }
+ >
+ {sortOrder === "custom" &&
+
+ )}
+
+
+ {open ?
+
+
+
+
+ {displayBookmarks.length === 0 ? (
+
+
+ No bookmarks added yet
+
+
+ ) : (
+ displayBookmarks.map((bookmark, idx) => (
+ {
+ itemRefs.current[idx] = el;
+ }}
+ data-bookmark-index={idx}
+ draggable={reorderMode === "drag" && !locked}
+ {...(reorderMode === "drag"
+ ? {
+ onDragStart: (e) => {
+ if (locked) {
+ e.preventDefault();
+ triggerLockFlash();
+ return;
+ }
+ handleDragStart(idx);
+ },
+ onDragEnd: handleDragEnd,
+ ...(!locked
+ ? {
+ onDragOver: (e) => handleDragOver(e, idx),
+ onDrop: (e) => handleDrop(e, idx),
+ }
+ : {}),
+ }
+ : {})}
+ style={{
+ ...(animatingPair && (animatingPair.idx1 === idx || animatingPair.idx2 === idx)
+ ? {
+ transform: `translateY(${animatingPair.idx1 === idx ? animatingPair.offset1 : animatingPair.offset2}px)`,
+ transition: "transform 250ms ease-in-out",
+ position: "relative",
+ zIndex: animatingPair.idx1 === idx ? 1 : 0,
+ }
+ : {}),
+ }}
+ >
+
+ {reorderMode === "drag" && !locked && (
+ e.preventDefault()}
+ onTouchStart={() => {
+ if (locked) {
+ triggerLockFlash();
+ return;
+ }
+ touchDragRef.current.startIdx = idx;
+ setDragIndex(idx);
+ }}
+ onTouchMove={(e) => {
+ if (touchDragRef.current.startIdx === null) return;
+ const touch = e.touches[0];
+ const draggedLi = itemRefs.current[touchDragRef.current.startIdx];
+ if (draggedLi) draggedLi.style.pointerEvents = "none";
+ const el = document.elementFromPoint(touch.clientX, touch.clientY);
+ if (draggedLi) draggedLi.style.pointerEvents = "";
+ const li = el?.closest("[data-bookmark-index]");
+ if (li) {
+ const overIdx = parseInt(li.dataset.bookmarkIndex, 10);
+ if (!isNaN(overIdx) && overIdx >= 0 && overIdx < bookmarks.length) {
+ touchDragRef.current.overIdx = overIdx;
+ setDragOverIndex(overIdx);
+ }
+ }
+ }}
+ onTouchEnd={() => {
+ const { startIdx, overIdx } = touchDragRef.current;
+ if (startIdx !== null && overIdx !== null && startIdx !== overIdx) {
+ const items = [...bookmarks];
+ const [reordered] = items.splice(startIdx, 1);
+ items.splice(overIdx, 0, reordered);
+ setBookmarks(items);
+ }
+ touchDragRef.current = { startIdx: null, overIdx: null };
+ setDragIndex(null);
+ setDragOverIndex(null);
+ }}
+ sx={{
+ touchAction: "none",
+ position: "absolute",
+ left: "6px",
+ top: "50%",
+ transform: "translateY(-50%)",
+ display: "flex",
+ alignItems: "center",
+ color: "neutral.500",
+ cursor: "grab",
+ }}
+ >
+
+ )}
+ theme.typography.fontFamily,
+ fontSize: 13,
+ fontWeight: 500,
+ justifyContent: "flex-start",
+ pl: "36px",
+ py: navItemPy,
+ textAlign: "left",
+ whiteSpace: "nowrap",
+ flexGrow: 1,
+ overflow: "hidden",
+ }}
+ >
+
+ {bookmark.category && (
+
+ {bookmark.category}
+
+ )}
+ {bookmark.label}
+
+
+
+ {reorderMode === "arrows" && !locked && (
+ <>
+ {
+ e.preventDefault();
+ if (locked) {
+ triggerLockFlash();
+ return;
+ }
+ sortOrder === "custom" ? animatedMoveUp(idx) : triggerSortFlash();
+ }}
+ disabled={sortOrder === "custom" && idx === 0}
+ sx={{ p: "2px", opacity: sortOrder !== "custom" || locked ? 0.4 : 1 }}
+ >
+
+ {
+ e.preventDefault();
+ if (locked) {
+ triggerLockFlash();
+ return;
+ }
+ sortOrder === "custom" ? animatedMoveDown(idx) : triggerSortFlash();
+ }}
+ disabled={sortOrder === "custom" && idx === displayBookmarks.length - 1}
+ sx={{ p: "2px", opacity: sortOrder !== "custom" || locked ? 0.4 : 1 }}
+ >
+
+
+ )}
+ {!locked && (
+ {
+ e.preventDefault();
+ removeBookmark(bookmark.path);
+ }}
+ sx={{ p: "2px" }}
+ >
+
+ )}
+
+
+
+ ))
+ )}
+
+
+
+ );
+};
diff --git a/src/layouts/side-nav-item.js b/src/layouts/side-nav-item.js
deleted file mode 100644
index b6044105b6ac..000000000000
--- a/src/layouts/side-nav-item.js
+++ /dev/null
@@ -1,279 +0,0 @@
-import { useCallback, useState } from "react";
-import NextLink from "next/link";
-import PropTypes from "prop-types";
-import ChevronRightIcon from "@heroicons/react/24/outline/ChevronRightIcon";
-import ChevronDownIcon from "@heroicons/react/24/outline/ChevronDownIcon";
-import ArrowTopRightOnSquareIcon from "@heroicons/react/24/outline/ArrowTopRightOnSquareIcon";
-import { Box, ButtonBase, Collapse, SvgIcon, Stack } from "@mui/material";
-import BookmarkBorderIcon from "@mui/icons-material/BookmarkBorder";
-import BookmarkIcon from "@mui/icons-material/Bookmark";
-import LanguageIcon from "@mui/icons-material/Language";
-import { useUserBookmarks } from "../hooks/use-user-bookmarks";
-import { useSettings } from "../hooks/use-settings";
-
-export const SideNavItem = (props) => {
- const {
- active = false,
- category = "",
- children,
- collapse = false,
- depth = 0,
- external = false,
- icon,
- openImmediately = false,
- path,
- scope,
- title,
- } = props;
-
- const isGlobal = scope === "global";
-
- const [open, setOpen] = useState(openImmediately);
- const [hovered, setHovered] = useState(false);
- const { isBookmarked: isPathBookmarked, toggleBookmark } = useUserBookmarks();
- const settings = useSettings();
- const compactNav = settings.compactNav ?? false;
- const isBookmarked = isPathBookmarked(path);
-
- const handleToggle = useCallback(() => {
- setOpen((prevOpen) => !prevOpen);
- }, []);
-
- const handleBookmarkToggle = useCallback(
- (event) => {
- event.stopPropagation();
- toggleBookmark({ label: title, path, category: category || "" });
- },
- [toggleBookmark, path, title, category]
- );
-
- // Dynamic spacing and font sizing based on depth
- const indent = depth > 0 ? depth * 1.5 : 1; // adjust multiplication factor as needed
- const fontSize = depth === 0 ? 14 : 13; // top-level 14, nested 13
- const navItemPy = compactNav ? "6px" : "12px";
-
- if (children) {
- return (
-
- setHovered(true)}
- onMouseLeave={() => setHovered(false)}
- >
- theme.typography.fontFamily,
- fontSize: fontSize,
- fontWeight: 500,
- justifyContent: "flex-start",
- px: `${indent * 6}px`,
- py: navItemPy,
- textAlign: "left",
- whiteSpace: "nowrap",
- width: "100%",
- }}
- >
-
- {icon}
-
-
- {title}
-
-
- {open ?
-
-
-
- {children}
-
-
- );
- }
-
- // Leaf
- const linkProps = path
- ? external
- ? {
- component: "a",
- href: path,
- target: "_blank",
- }
- : {
- component: NextLink,
- href: path,
- }
- : {};
-
- return (
-
- setHovered(true)}
- onMouseLeave={() => setHovered(false)}
- sx={{
- display: "flex",
- alignItems: "center",
- width: "100%",
- px: `${indent * 6}px`,
- }}
- >
- theme.typography.fontFamily,
- fontSize: fontSize,
- fontWeight: 500,
- justifyContent: "flex-start",
- textAlign: "left",
- whiteSpace: "nowrap",
- width: "calc(100% - 20px)", // Adjust the width to leave space for the bookmark icon
- py: navItemPy,
- }}
- {...linkProps}
- onClick={(e) => e.currentTarget.blur()}
- >
-
- {icon}
-
-
- {title}
-
- {isGlobal && (
-
-
-
-
- )}
- {external && (
-
-
- )}
-
-
- {isBookmarked ?
-
-
- );
-};
-
-SideNavItem.propTypes = {
- active: PropTypes.bool,
- children: PropTypes.any,
- collapse: PropTypes.bool,
- depth: PropTypes.number,
- external: PropTypes.bool,
- icon: PropTypes.any,
- openImmediately: PropTypes.bool,
- path: PropTypes.string,
- scope: PropTypes.string,
- title: PropTypes.string.isRequired,
-};
diff --git a/src/layouts/side-nav-item.jsx b/src/layouts/side-nav-item.jsx
new file mode 100644
index 000000000000..bc02bdd10ecb
--- /dev/null
+++ b/src/layouts/side-nav-item.jsx
@@ -0,0 +1,276 @@
+import { useCallback, useState } from "react";
+import { CippIcons } from "../utils/icon-registry";
+import NextLink from "next/link";
+import PropTypes from "prop-types";
+import { Box, ButtonBase, Collapse, SvgIcon, Stack } from "@mui/material";
+import { useUserBookmarks } from "../hooks/use-user-bookmarks";
+import { useSettings } from "../hooks/use-settings";
+
+export const SideNavItem = (props) => {
+ const {
+ active = false,
+ category = "",
+ children,
+ collapse = false,
+ depth = 0,
+ external = false,
+ icon,
+ openImmediately = false,
+ path,
+ scope,
+ title,
+ } = props;
+
+ const isGlobal = scope === "global";
+
+ const [open, setOpen] = useState(openImmediately);
+ const [hovered, setHovered] = useState(false);
+ const { isBookmarked: isPathBookmarked, toggleBookmark } = useUserBookmarks();
+ const settings = useSettings();
+ const compactNav = settings.compactNav ?? false;
+ const isBookmarked = isPathBookmarked(path);
+
+ const handleToggle = useCallback(() => {
+ setOpen((prevOpen) => !prevOpen);
+ }, []);
+
+ const handleBookmarkToggle = useCallback(
+ (event) => {
+ event.stopPropagation();
+ toggleBookmark({ label: title, path, category: category || "" });
+ },
+ [toggleBookmark, path, title, category]
+ );
+
+ // Dynamic spacing and font sizing based on depth
+ const indent = depth > 0 ? depth * 1.5 : 1; // adjust multiplication factor as needed
+ const fontSize = depth === 0 ? 14 : 13; // top-level 14, nested 13
+ const navItemPy = compactNav ? "6px" : "12px";
+
+ if (children) {
+ return (
+
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ sx={{
+ alignItems: "center"
+ }}
+ >
+ theme.typography.fontFamily,
+ fontSize: fontSize,
+ fontWeight: 500,
+ justifyContent: "flex-start",
+ px: `${indent * 6}px`,
+ py: navItemPy,
+ textAlign: "left",
+ whiteSpace: "nowrap",
+ width: "100%",
+ }}
+ >
+
+ {icon}
+
+
+ {title}
+
+
+ {open ?
+
+
+
+ {children}
+
+
+ );
+ }
+
+ // Leaf
+ const linkProps = path
+ ? external
+ ? {
+ component: "a",
+ href: path,
+ target: "_blank",
+ }
+ : {
+ component: NextLink,
+ href: path,
+ }
+ : {};
+
+ return (
+
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ sx={{
+ display: "flex",
+ alignItems: "center",
+ width: "100%",
+ px: `${indent * 6}px`,
+ }}
+ >
+ theme.typography.fontFamily,
+ fontSize: fontSize,
+ fontWeight: 500,
+ justifyContent: "flex-start",
+ textAlign: "left",
+ whiteSpace: "nowrap",
+ width: "calc(100% - 20px)", // Adjust the width to leave space for the bookmark icon
+ py: navItemPy,
+ }}
+ {...linkProps}
+ onClick={(e) => e.currentTarget.blur()}
+ >
+
+ {icon}
+
+
+ {title}
+
+ {isGlobal && (
+
+
+
+
+ )}
+ {external && (
+
+
+ )}
+
+
+ {isBookmarked ?
+
+
+ );
+};
+
+SideNavItem.propTypes = {
+ active: PropTypes.bool,
+ children: PropTypes.any,
+ collapse: PropTypes.bool,
+ depth: PropTypes.number,
+ external: PropTypes.bool,
+ icon: PropTypes.any,
+ openImmediately: PropTypes.bool,
+ path: PropTypes.string,
+ scope: PropTypes.string,
+ title: PropTypes.string.isRequired,
+};
diff --git a/src/layouts/side-nav.js b/src/layouts/side-nav.js
deleted file mode 100644
index 5181643c64e8..000000000000
--- a/src/layouts/side-nav.js
+++ /dev/null
@@ -1,279 +0,0 @@
-import { useState, useRef, useEffect } from 'react'
-import { usePathname } from 'next/navigation'
-import PropTypes from 'prop-types'
-import { Box, Divider, Drawer, Stack } from '@mui/material'
-import { SideNavItem } from './side-nav-item'
-import { SideNavBookmarks } from './side-nav-bookmarks'
-import { ApiGetCall } from '../api/ApiCall.jsx'
-import { CippSponsor } from '../components/CippComponents/CippSponsor'
-import { useSettings } from '../hooks/use-settings'
-
-import {
- BANNER_HEIGHT_VAR,
- SIDE_NAV_COLLAPSED_WIDTH,
- SIDE_NAV_WIDTH,
- TOP_NAV_HEIGHT,
-} from './constants'
-
-const isPathPrefix = (pathname, itemPath) => {
- if (!pathname || !itemPath) return false
- if (pathname === itemPath) return true
- // Root "/" maps to /dashboardv2 under the hood
- if (itemPath === '/') return pathname.startsWith('/dashboardv2')
- return pathname.startsWith(itemPath + '/') || pathname.startsWith(itemPath + '?')
-}
-
-const markOpenItems = (items, pathname) => {
- return items.map((item) => {
- const checkPath = !!(item.path && pathname)
- const exactMatch = checkPath ? pathname === item.path : false
- const partialMatch = checkPath ? isPathPrefix(pathname, item.path) : false
-
- let openImmediately = exactMatch
- let newItems = item.items || []
-
- if (newItems.length > 0) {
- newItems = markOpenItems(newItems, pathname)
- const childOpen = newItems.some((child) => child.openImmediately)
- openImmediately = openImmediately || childOpen || exactMatch // Ensure parent opens if child is open
- } else {
- openImmediately = openImmediately || partialMatch // Leaf items open on partial match
- }
-
- return {
- ...item,
- items: newItems,
- openImmediately,
- }
- })
-}
-
-const renderItems = ({ collapse = false, depth = 0, items, pathname, category = '' }) =>
- items.reduce(
- (acc, item) => reduceChildRoutes({ acc, collapse, depth, item, pathname, category }),
- []
- )
-
-const reduceChildRoutes = ({ acc, collapse, depth, item, pathname, category }) => {
- const checkPath = !!(item.path && pathname)
- const exactMatch = checkPath && pathname === item.path
- const partialMatch = checkPath ? isPathPrefix(pathname, item.path) : false
-
- const hasChildren = item.items && item.items.length > 0
- const isActive = exactMatch || (partialMatch && !hasChildren)
- const currentCategory = depth === 0 && item.type === 'header' ? item.title : category
-
- if (hasChildren) {
- acc.push(
-
-
- {renderItems({
- collapse,
- depth: depth + 1,
- items: item.items,
- pathname,
- category: currentCategory,
- })}
-
-
- )
- } else {
- acc.push(
- setHovered(true),
- onMouseLeave: () => setHovered(false),
- sx: {
- backgroundColor: 'background.default',
- height: `calc(100% - ${TOP_NAV_HEIGHT}px - ${BANNER_HEIGHT_VAR})`,
- overflowX: 'hidden',
- overflowY: 'auto',
- scrollbarGutter: 'stable',
- top: `calc(${TOP_NAV_HEIGHT}px + ${BANNER_HEIGHT_VAR})`,
- transition: 'width 250ms ease-in-out',
- width: collapse ? SIDE_NAV_COLLAPSED_WIDTH : SIDE_NAV_WIDTH,
- zIndex: (theme) => theme.zIndex.appBar - 100,
- },
- }}
- >
-
-
- {/* Bookmarks section above Dashboard */}
- {showSidebarBookmarks && (
- <>
- {' '}
- {/* Add this closing tag */}
- {profile?.clientPrincipal && (
-
-
- )}
- {' '}
- {/* Closing tag for the parent Box */}
-
- )}
-
- )
-}
-
-SideNav.propTypes = {
- onPin: PropTypes.func,
- pinned: PropTypes.bool,
-}
diff --git a/src/layouts/side-nav.jsx b/src/layouts/side-nav.jsx
new file mode 100644
index 000000000000..c9f83a31bd5a
--- /dev/null
+++ b/src/layouts/side-nav.jsx
@@ -0,0 +1,280 @@
+import { useState, useRef, useEffect } from 'react'
+import { usePathname } from 'next/navigation'
+import PropTypes from 'prop-types'
+import { Box, Divider, Drawer, Stack } from '@mui/material'
+import { SideNavItem } from './side-nav-item'
+import { SideNavBookmarks } from './side-nav-bookmarks'
+import { ApiGetCall } from '../api/ApiCall.jsx'
+import { CippSponsor } from '../components/CippComponents/CippSponsor'
+import { useSettings } from '../hooks/use-settings'
+
+import {
+ CHROME_TOP_OFFSET,
+ SIDE_NAV_COLLAPSED_WIDTH,
+ SIDE_NAV_WIDTH,
+} from './constants'
+
+const isPathPrefix = (pathname, itemPath) => {
+ if (!pathname || !itemPath) return false
+ if (pathname === itemPath) return true
+ // Root "/" maps to /dashboardv2 under the hood
+ if (itemPath === '/') return pathname.startsWith('/dashboardv2')
+ return pathname.startsWith(itemPath + '/') || pathname.startsWith(itemPath + '?')
+}
+
+const markOpenItems = (items, pathname) => {
+ return items.map((item) => {
+ const checkPath = !!(item.path && pathname)
+ const exactMatch = checkPath ? pathname === item.path : false
+ const partialMatch = checkPath ? isPathPrefix(pathname, item.path) : false
+
+ let openImmediately = exactMatch
+ let newItems = item.items || []
+
+ if (newItems.length > 0) {
+ newItems = markOpenItems(newItems, pathname)
+ const childOpen = newItems.some((child) => child.openImmediately)
+ openImmediately = openImmediately || childOpen || exactMatch // Ensure parent opens if child is open
+ } else {
+ openImmediately = openImmediately || partialMatch // Leaf items open on partial match
+ }
+
+ return {
+ ...item,
+ items: newItems,
+ openImmediately,
+ }
+ })
+}
+
+const renderItems = ({ collapse = false, depth = 0, items, pathname, category = '' }) =>
+ items.reduce(
+ (acc, item) => reduceChildRoutes({ acc, collapse, depth, item, pathname, category }),
+ []
+ )
+
+const reduceChildRoutes = ({ acc, collapse, depth, item, pathname, category }) => {
+ const checkPath = !!(item.path && pathname)
+ const exactMatch = checkPath && pathname === item.path
+ const partialMatch = checkPath ? isPathPrefix(pathname, item.path) : false
+
+ const hasChildren = item.items && item.items.length > 0
+ const isActive = exactMatch || (partialMatch && !hasChildren)
+ const currentCategory = depth === 0 && item.type === 'header' ? item.title : category
+
+ if (hasChildren) {
+ acc.push(
+
+
+ {renderItems({
+ collapse,
+ depth: depth + 1,
+ items: item.items,
+ pathname,
+ category: currentCategory,
+ })}
+
+
+ )
+ } else {
+ acc.push(
+ setHovered(true),
+ onMouseLeave: () => setHovered(false),
+ sx: {
+ backgroundColor: 'background.default',
+ height: `calc(100% - (${CHROME_TOP_OFFSET}))`,
+ overflowX: 'hidden',
+ overflowY: 'auto',
+ scrollbarGutter: 'stable',
+ top: CHROME_TOP_OFFSET,
+ transition: 'width 250ms ease-in-out',
+ width: collapse ? SIDE_NAV_COLLAPSED_WIDTH : SIDE_NAV_WIDTH,
+ zIndex: (theme) => theme.zIndex.appBar - 100,
+ },
+ }
+ }}
+ >
+
+
+ {/* Bookmarks section above Dashboard */}
+ {showSidebarBookmarks && (
+ <>
+ {' '}
+ {/* Add this closing tag */}
+ {profile?.clientPrincipal && (
+
+
+ )}
+ {' '}
+ {/* Closing tag for the parent Box */}
+
+ )}
+
+ );
+}
+
+SideNav.propTypes = {
+ onPin: PropTypes.func,
+ pinned: PropTypes.bool,
+}
diff --git a/src/layouts/top-nav.js b/src/layouts/top-nav.js
deleted file mode 100644
index f796bc222996..000000000000
--- a/src/layouts/top-nav.js
+++ /dev/null
@@ -1,734 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import NextLink from 'next/link'
-import PropTypes from 'prop-types'
-import Bars3Icon from '@heroicons/react/24/outline/Bars3Icon'
-import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon'
-import MoonIcon from '@heroicons/react/24/outline/MoonIcon'
-import SunIcon from '@heroicons/react/24/outline/SunIcon'
-import BookmarkIcon from '@mui/icons-material/Bookmark'
-import TravelExploreIcon from '@mui/icons-material/TravelExplore'
-import DragIndicatorIcon from '@mui/icons-material/DragIndicator'
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
-import CloseIcon from '@mui/icons-material/Close'
-import SwapVertIcon from '@mui/icons-material/SwapVert'
-import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
-import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
-import LockIcon from '@mui/icons-material/Lock'
-import LockOpenIcon from '@mui/icons-material/LockOpen'
-import {
- Box,
- Divider,
- Dialog,
- DialogContent,
- DialogTitle,
- IconButton,
- Stack,
- SvgIcon,
- Tooltip,
- Popover,
- List,
- ListItem,
- ListItemText,
- Typography,
-} from '@mui/material'
-import { useTheme } from '@mui/material/styles'
-import { Logo } from '../components/logo'
-import { useIsMobileLayout } from '../hooks/use-breakpoint'
-import { useSettings } from '../hooks/use-settings'
-import { useUserBookmarks } from '../hooks/use-user-bookmarks'
-import { paths } from '../paths'
-import { AccountPopover } from './account-popover'
-import { CippTenantSelector } from '../components/CippComponents/CippTenantSelector'
-import { CippMobileTenantPicker } from '../components/CippComponents/CippMobileTenantPicker'
-import { NotificationsPopover } from './notifications-popover'
-import { useDialog } from '../hooks/use-dialog'
-import { CippUniversalSearchV2 } from '../components/CippCards/CippUniversalSearchV2'
-import { CippOffCanvas } from '../components/CippComponents/CippOffCanvas'
-import { CippLicenseDetailsDrawer } from '../components/CippComponents/CippLicenseDetailsDrawer'
-
-import { BANNER_HEIGHT_VAR, TOP_NAV_HEIGHT } from './constants'
-
-export const TopNav = (props) => {
- const universalSearchDialog = useDialog()
- const { onNavOpen } = props
- const settings = useSettings()
- const { bookmarks, setBookmarks } = useUserBookmarks()
- // same gate as the side nav in layouts/index.js, the hamburger below is the drawer's only opener
- const navCollapsed = useIsMobileLayout()
- const showPopoverBookmarks = settings.bookmarkPopover === true
- const reorderMode = settings.bookmarkReorderMode || 'arrows'
- const locked = settings.bookmarkLocked ?? true
- // Flip based on the RENDERED mode, not the stored value: the default
- // currentTheme is 'browser' (follows prefers-color-scheme), so the stored
- // value alone doesn't say which mode the user is actually looking at.
- // Toggling always stores an explicit light/dark choice.
- const theme = useTheme()
- const effectivePaletteMode = theme.palette.mode
- const handleThemeSwitch = useCallback(() => {
- const themeName = effectivePaletteMode === 'light' ? 'dark' : 'light'
- settings.handleUpdate({
- currentTheme: { value: themeName, label: themeName },
- paletteMode: themeName,
- })
- }, [settings, effectivePaletteMode])
-
- const [anchorEl, setAnchorEl] = useState(null)
- const [sortOrder, setSortOrder] = useState(settings.bookmarkSortOrder || 'custom')
- const [dragIndex, setDragIndex] = useState(null)
- const [dragOverIndex, setDragOverIndex] = useState(null)
- const [animatingPair, setAnimatingPair] = useState(null)
- const [flashSort, setFlashSort] = useState(false)
- const [flashLock, setFlashLock] = useState(false)
- const [universalSearchKey, setUniversalSearchKey] = useState(0)
- const [licenseDrawerVisible, setLicenseDrawerVisible] = useState(false)
- const [licenseDrawerData, setLicenseDrawerData] = useState(null)
- const [universalSearchDefaultType, setUniversalSearchDefaultType] = useState('Users')
- const itemRefs = useRef({})
- const touchDragRef = useRef({ startIdx: null, overIdx: null })
- const tenantSelectorRef = useRef(null)
-
- const handleBookmarkClick = (event) => {
- setAnchorEl(event.currentTarget)
- }
-
- const handleBookmarkClose = () => {
- setAnchorEl(null)
- }
-
- const handleDragStart = (index) => {
- setDragIndex(index)
- }
-
- const handleDragOver = (e, index) => {
- e.preventDefault()
- setDragOverIndex(index)
- }
-
- const handleDrop = (e, dropIndex) => {
- e.preventDefault()
- if (dragIndex === null || dragIndex === dropIndex) {
- setDragIndex(null)
- setDragOverIndex(null)
- return
- }
- const items = [...bookmarks]
- const [reordered] = items.splice(dragIndex, 1)
- items.splice(dropIndex, 0, reordered)
- setBookmarks(items)
- setDragIndex(null)
- setDragOverIndex(null)
- }
-
- const handleDragEnd = () => {
- setDragIndex(null)
- setDragOverIndex(null)
- }
-
- const moveBookmarkUp = (index) => {
- if (index <= 0) return
- const updatedBookmarks = [...bookmarks]
- const temp = updatedBookmarks[index]
- updatedBookmarks[index] = updatedBookmarks[index - 1]
- updatedBookmarks[index - 1] = temp
- setBookmarks(updatedBookmarks)
- }
-
- const moveBookmarkDown = (index) => {
- if (index >= bookmarks.length - 1) return
- const updatedBookmarks = [...bookmarks]
- const temp = updatedBookmarks[index]
- updatedBookmarks[index] = updatedBookmarks[index + 1]
- updatedBookmarks[index + 1] = temp
- setBookmarks(updatedBookmarks)
- }
-
- const removeBookmark = (path) => {
- const updatedBookmarks = [...bookmarks]
- const origIdx = updatedBookmarks.findIndex((b) => b.path === path)
- if (origIdx !== -1) {
- updatedBookmarks.splice(origIdx, 1)
- setBookmarks(updatedBookmarks)
- }
- }
-
- const triggerSortFlash = () => {
- setFlashSort(true)
- setTimeout(() => setFlashSort(false), 600)
- }
-
- const triggerLockFlash = () => {
- setFlashLock(true)
- setTimeout(() => setFlashLock(false), 600)
- }
-
- const handleToggleLock = () => {
- settings.handleUpdate({ bookmarkLocked: !locked })
- }
-
- const animatedMoveUp = (index) => {
- if (index <= 0 || animatingPair) return
- const el1 = itemRefs.current[index]
- const el2 = itemRefs.current[index - 1]
- if (!el1 || !el2) {
- moveBookmarkUp(index)
- return
- }
- const distance = el1.getBoundingClientRect().top - el2.getBoundingClientRect().top
- setAnimatingPair({ idx1: index, idx2: index - 1, offset1: -distance, offset2: distance })
- setTimeout(() => {
- moveBookmarkUp(index)
- setAnimatingPair(null)
- }, 250)
- }
-
- const animatedMoveDown = (index) => {
- if (index >= bookmarks.length - 1 || animatingPair) return
- const el1 = itemRefs.current[index]
- const el2 = itemRefs.current[index + 1]
- if (!el1 || !el2) {
- moveBookmarkDown(index)
- return
- }
- const distance = el2.getBoundingClientRect().top - el1.getBoundingClientRect().top
- setAnimatingPair({ idx1: index, idx2: index + 1, offset1: distance, offset2: -distance })
- setTimeout(() => {
- moveBookmarkDown(index)
- setAnimatingPair(null)
- }, 250)
- }
-
- const handleSortCycle = () => {
- const next = sortOrder === 'custom' ? 'asc' : sortOrder === 'asc' ? 'desc' : 'custom'
- setSortOrder(next)
- settings.handleUpdate({ bookmarkSortOrder: next })
- }
-
- const displayBookmarks = useMemo(() => {
- if (sortOrder === 'custom') return bookmarks
- return [...bookmarks].sort((a, b) => {
- const cmp = (a.label || '').localeCompare(b.label || '')
- return sortOrder === 'asc' ? cmp : -cmp
- })
- }, [bookmarks, sortOrder])
- const popoverOpen = Boolean(anchorEl)
- const popoverId = popoverOpen ? 'bookmark-popover' : undefined
-
- const openUniversalSearch = useCallback(
- (defaultType = 'Users') => {
- setUniversalSearchDefaultType(defaultType)
- universalSearchDialog.handleOpen()
- },
- [universalSearchDialog.handleOpen]
- )
-
- const closeUniversalSearch = useCallback(() => {
- universalSearchDialog.handleClose()
- setUniversalSearchKey((prev) => prev + 1)
- }, [universalSearchDialog.handleClose])
-
- useEffect(() => {
- const handleKeyDown = (event) => {
- if ((event.metaKey || event.ctrlKey) && event.altKey && event.key === 'k') {
- event.preventDefault()
- tenantSelectorRef.current?.focus()
- } else if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key === 'F') {
- event.preventDefault()
- openUniversalSearch('Users')
- } else if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
- event.preventDefault()
- openUniversalSearch('Pages')
- }
- }
- window.addEventListener('keydown', handleKeyDown)
- return () => {
- window.removeEventListener('keydown', handleKeyDown)
- }
- }, [openUniversalSearch])
-
- return (
- theme.zIndex.appBar,
- }}
- >
-
-
-
- )}
- {!navCollapsed && (
-
-
- )}
- {navCollapsed && (
-
-
-
-
- )}
- {navCollapsed && (
-
-
- )}
-
- {/* 0.5 left the notification dot and the account avatar sharing the same few pixels */}
-
- {!navCollapsed && (
-
- openUniversalSearch('Users')}
- aria-label="Open universal search (Ctrl/Cmd+Shift+F)"
- >
-
-
- )}
- {!navCollapsed && (
-
-
- {effectivePaletteMode === 'dark' ?
-
- )}
- {!navCollapsed && (
-
- openUniversalSearch('Pages')}
- aria-label="Open page search (Ctrl/Cmd+K)"
- >
-
-
-
-
- )}
- {/* Mobile: no search icon in the bar — the tenant chip is the more important
- control and gets the width. Universal search lives in the account menu. */}
- {showPopoverBookmarks && (
- <>
-
-
-
-
-
-
-
- )}
-
- setLicenseDrawerVisible(false)}
- size="xl"
- contentPadding={0}
- >
-
- openUniversalSearch('Pages')}
- paletteMode={effectivePaletteMode === 'light' ? 'dark' : 'light'}
- />
-
-
-
- )
-}
-
-TopNav.propTypes = {
- onNavOpen: PropTypes.func,
- openNav: PropTypes.bool,
-}
diff --git a/src/layouts/top-nav.jsx b/src/layouts/top-nav.jsx
new file mode 100644
index 000000000000..0f0b320ac4db
--- /dev/null
+++ b/src/layouts/top-nav.jsx
@@ -0,0 +1,764 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { CippIcons } from '../utils/icon-registry'
+import NextLink from 'next/link'
+import PropTypes from 'prop-types'
+import {
+ Box,
+ Divider,
+ Dialog,
+ DialogContent,
+ DialogTitle,
+ IconButton,
+ Stack,
+ SvgIcon,
+ Tooltip,
+ Popover,
+ List,
+ ListItem,
+ ListItemText,
+ Typography,
+} from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+import { Logo } from '../components/logo'
+import { useIsMobileLayout } from '../hooks/use-breakpoint'
+import { useSettings } from '../hooks/use-settings'
+import { useUserBookmarks } from '../hooks/use-user-bookmarks'
+import { paths } from '../paths'
+import { AccountPopover } from './account-popover'
+import { CippTenantSelector } from '../components/CippComponents/CippTenantSelector'
+import { CippMobileTenantPicker } from '../components/CippComponents/CippMobileTenantPicker'
+import { NotificationsPopover } from './notifications-popover'
+import { useDialog } from '../hooks/use-dialog'
+import { CippUniversalSearchV2 } from '../components/CippCards/CippUniversalSearchV2'
+import { CippOffCanvas } from '../components/CippComponents/CippOffCanvas'
+import { CippLicenseDetailsDrawer } from '../components/CippComponents/CippLicenseDetailsDrawer'
+import { BANNER_HEIGHT_VAR, SAFE_AREA_TOP_OFFSET, TOP_NAV_HEIGHT } from './constants'
+
+export const TopNav = (props) => {
+ const universalSearchDialog = useDialog()
+ const { onNavOpen } = props
+ const settings = useSettings()
+ const { bookmarks, setBookmarks } = useUserBookmarks()
+ // same gate as the side nav in layouts/index.js, the hamburger below is the drawer's only opener
+ const navCollapsed = useIsMobileLayout()
+ const showPopoverBookmarks = settings.bookmarkPopover === true
+ const reorderMode = settings.bookmarkReorderMode || 'arrows'
+ const locked = settings.bookmarkLocked ?? true
+ // Flip based on the RENDERED mode, not the stored value: the default
+ // currentTheme is 'browser' (follows prefers-color-scheme), so the stored
+ // value alone doesn't say which mode the user is actually looking at.
+ // Toggling always stores an explicit light/dark choice.
+ const theme = useTheme()
+ const effectivePaletteMode = theme.palette.mode
+ const handleThemeSwitch = useCallback(() => {
+ const themeName = effectivePaletteMode === 'light' ? 'dark' : 'light'
+ settings.handleUpdate({
+ currentTheme: { value: themeName, label: themeName },
+ paletteMode: themeName,
+ })
+ }, [settings, effectivePaletteMode])
+
+ const [anchorEl, setAnchorEl] = useState(null)
+ const [sortOrder, setSortOrder] = useState(settings.bookmarkSortOrder || 'custom')
+ const [dragIndex, setDragIndex] = useState(null)
+ const [dragOverIndex, setDragOverIndex] = useState(null)
+ const [animatingPair, setAnimatingPair] = useState(null)
+ const [flashSort, setFlashSort] = useState(false)
+ const [flashLock, setFlashLock] = useState(false)
+ const [universalSearchKey, setUniversalSearchKey] = useState(0)
+ const [licenseDrawerVisible, setLicenseDrawerVisible] = useState(false)
+ const [licenseDrawerData, setLicenseDrawerData] = useState(null)
+ const [universalSearchDefaultType, setUniversalSearchDefaultType] = useState('Users')
+ const itemRefs = useRef({})
+ const touchDragRef = useRef({ startIdx: null, overIdx: null })
+ const tenantSelectorRef = useRef(null)
+
+ const handleBookmarkClick = (event) => {
+ setAnchorEl(event.currentTarget)
+ }
+
+ const handleBookmarkClose = () => {
+ setAnchorEl(null)
+ }
+
+ const handleDragStart = (index) => {
+ setDragIndex(index)
+ }
+
+ const handleDragOver = (e, index) => {
+ e.preventDefault()
+ setDragOverIndex(index)
+ }
+
+ const handleDrop = (e, dropIndex) => {
+ e.preventDefault()
+ if (dragIndex === null || dragIndex === dropIndex) {
+ setDragIndex(null)
+ setDragOverIndex(null)
+ return
+ }
+ const items = [...bookmarks]
+ const [reordered] = items.splice(dragIndex, 1)
+ items.splice(dropIndex, 0, reordered)
+ setBookmarks(items)
+ setDragIndex(null)
+ setDragOverIndex(null)
+ }
+
+ const handleDragEnd = () => {
+ setDragIndex(null)
+ setDragOverIndex(null)
+ }
+
+ const moveBookmarkUp = (index) => {
+ if (index <= 0) return
+ const updatedBookmarks = [...bookmarks]
+ const temp = updatedBookmarks[index]
+ updatedBookmarks[index] = updatedBookmarks[index - 1]
+ updatedBookmarks[index - 1] = temp
+ setBookmarks(updatedBookmarks)
+ }
+
+ const moveBookmarkDown = (index) => {
+ if (index >= bookmarks.length - 1) return
+ const updatedBookmarks = [...bookmarks]
+ const temp = updatedBookmarks[index]
+ updatedBookmarks[index] = updatedBookmarks[index + 1]
+ updatedBookmarks[index + 1] = temp
+ setBookmarks(updatedBookmarks)
+ }
+
+ const removeBookmark = (path) => {
+ const updatedBookmarks = [...bookmarks]
+ const origIdx = updatedBookmarks.findIndex((b) => b.path === path)
+ if (origIdx !== -1) {
+ updatedBookmarks.splice(origIdx, 1)
+ setBookmarks(updatedBookmarks)
+ }
+ }
+
+ const triggerSortFlash = () => {
+ setFlashSort(true)
+ setTimeout(() => setFlashSort(false), 600)
+ }
+
+ const triggerLockFlash = () => {
+ setFlashLock(true)
+ setTimeout(() => setFlashLock(false), 600)
+ }
+
+ const handleToggleLock = () => {
+ settings.handleUpdate({ bookmarkLocked: !locked })
+ }
+
+ const animatedMoveUp = (index) => {
+ if (index <= 0 || animatingPair) return
+ const el1 = itemRefs.current[index]
+ const el2 = itemRefs.current[index - 1]
+ if (!el1 || !el2) {
+ moveBookmarkUp(index)
+ return
+ }
+ const distance = el1.getBoundingClientRect().top - el2.getBoundingClientRect().top
+ setAnimatingPair({ idx1: index, idx2: index - 1, offset1: -distance, offset2: distance })
+ setTimeout(() => {
+ moveBookmarkUp(index)
+ setAnimatingPair(null)
+ }, 250)
+ }
+
+ const animatedMoveDown = (index) => {
+ if (index >= bookmarks.length - 1 || animatingPair) return
+ const el1 = itemRefs.current[index]
+ const el2 = itemRefs.current[index + 1]
+ if (!el1 || !el2) {
+ moveBookmarkDown(index)
+ return
+ }
+ const distance = el2.getBoundingClientRect().top - el1.getBoundingClientRect().top
+ setAnimatingPair({ idx1: index, idx2: index + 1, offset1: distance, offset2: -distance })
+ setTimeout(() => {
+ moveBookmarkDown(index)
+ setAnimatingPair(null)
+ }, 250)
+ }
+
+ const handleSortCycle = () => {
+ const next = sortOrder === 'custom' ? 'asc' : sortOrder === 'asc' ? 'desc' : 'custom'
+ setSortOrder(next)
+ settings.handleUpdate({ bookmarkSortOrder: next })
+ }
+
+ const displayBookmarks = useMemo(() => {
+ if (sortOrder === 'custom') return bookmarks
+ return [...bookmarks].sort((a, b) => {
+ const cmp = (a.label || '').localeCompare(b.label || '')
+ return sortOrder === 'asc' ? cmp : -cmp
+ })
+ }, [bookmarks, sortOrder])
+ const popoverOpen = Boolean(anchorEl)
+ const popoverId = popoverOpen ? 'bookmark-popover' : undefined
+
+ const openUniversalSearch = useCallback(
+ (defaultType = 'Users') => {
+ setUniversalSearchDefaultType(defaultType)
+ universalSearchDialog.handleOpen()
+ },
+ [universalSearchDialog.handleOpen]
+ )
+
+ const closeUniversalSearch = useCallback(() => {
+ universalSearchDialog.handleClose()
+ setUniversalSearchKey((prev) => prev + 1)
+ }, [universalSearchDialog.handleClose])
+
+ useEffect(() => {
+ const handleKeyDown = (event) => {
+ if ((event.metaKey || event.ctrlKey) && event.altKey && event.key === 'k') {
+ event.preventDefault()
+ tenantSelectorRef.current?.focus()
+ } else if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key === 'F') {
+ event.preventDefault()
+ openUniversalSearch('Users')
+ } else if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+ event.preventDefault()
+ openUniversalSearch('Pages')
+ }
+ }
+ window.addEventListener('keydown', handleKeyDown)
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown)
+ }
+ }, [openUniversalSearch])
+
+ return (
+ theme.zIndex.appBar,
+ }}
+ >
+
+
+
+ )}
+ {!navCollapsed && (
+
+
+ )}
+ {navCollapsed && (
+
+
+
+
+ )}
+ {navCollapsed && (
+
+
+ )}
+
+ {/* 0.5 left the notification dot and the account avatar sharing the same few pixels */}
+
+ {!navCollapsed && (
+
+ openUniversalSearch('Users')}
+ aria-label="Open universal search (Ctrl/Cmd+Shift+F)"
+ >
+
+
+ )}
+ {!navCollapsed && (
+
+
+
+ {effectivePaletteMode === 'dark' ?
+
+
+ )}
+ {!navCollapsed && (
+
+ openUniversalSearch('Pages')}
+ aria-label="Open page search (Ctrl/Cmd+K)"
+ >
+
+
+
+
+ )}
+ {/* Mobile: no search icon in the bar — the tenant chip is the more important
+ control and gets the width. Universal search lives in the account menu. */}
+ {showPopoverBookmarks && (
+ <>
+
+
+
+
+
+
+
+
+
+ )}
+
+ setLicenseDrawerVisible(false)}
+ size="xl"
+ contentPadding={0}
+ >
+
+ openUniversalSearch('Pages')}
+ paletteMode={effectivePaletteMode === 'light' ? 'dark' : 'light'}
+ />
+
+
+
+ );
+}
+
+TopNav.propTypes = {
+ onNavOpen: PropTypes.func,
+ openNav: PropTypes.bool,
+}
diff --git a/src/pages/401.js b/src/pages/401.js
deleted file mode 100644
index e237a8ea356d..000000000000
--- a/src/pages/401.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import Head from 'next/head'
-import { CippErrorState } from '../components/CippComponents/CippErrorState'
-import { Layout as DashboardLayout } from '../layouts/index.js'
-
-const Page = () => (
-
-
- 401 - Not allowed
-
-
-)
-
-export default Page
diff --git a/src/pages/401.jsx b/src/pages/401.jsx
new file mode 100644
index 000000000000..4c50d0e33beb
--- /dev/null
+++ b/src/pages/401.jsx
@@ -0,0 +1,21 @@
+import Head from 'next/head'
+import { CippErrorState } from '../components/CippComponents/CippErrorState'
+import { Layout as DashboardLayout } from '../layouts/index'
+
+const Page = () => (
+
+
+ 401 - Not allowed
+
+
+)
+
+export default Page
diff --git a/src/pages/404.js b/src/pages/404.js
deleted file mode 100644
index bb1c435b49d4..000000000000
--- a/src/pages/404.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import Head from 'next/head'
-import { CippErrorState } from '../components/CippComponents/CippErrorState'
-import { Layout as DashboardLayout } from '../layouts/index.js'
-
-const Page = () => (
-
-
- 404 - Not Found
-
-
-)
-
-export default Page
diff --git a/src/pages/404.jsx b/src/pages/404.jsx
new file mode 100644
index 000000000000..412342d80644
--- /dev/null
+++ b/src/pages/404.jsx
@@ -0,0 +1,83 @@
+import { useEffect, useState, useSyncExternalStore } from 'react'
+import { useRouter } from 'next/router'
+import Head from 'next/head'
+import { CippErrorState } from '../components/CippComponents/CippErrorState'
+import { Layout as DashboardLayout } from '../layouts/index'
+import { getRedirectTarget } from '../utils/route-redirects'
+
+const REDIRECT_SECONDS = 3
+
+// window.location is client-only. useSyncExternalStore reads it without a hydration
+// mismatch: the server snapshot is null, so the prerender and the first client paint
+// both render the plain 404, then the client swaps in the redirect notice. (The store
+// never changes, so subscribe is a no-op.)
+const subscribe = () => () => {}
+const getPathname = () => window.location.pathname
+const getServerPathname = () => null
+
+const Page = () => {
+ const router = useRouter()
+ const pathname = useSyncExternalStore(
+ subscribe,
+ getPathname,
+ getServerPathname
+ )
+ const target = pathname ? getRedirectTarget(pathname) : null
+ // Carry the query string and hash across the redirect so retired routes that take
+ // params (e.g. an edit page's ?id=…) still resolve. target is only ever set client-side
+ // (pathname comes from window.location), so window is available here.
+ const targetWithParams =
+ target && typeof window !== 'undefined'
+ ? `${target}${window.location.search}${window.location.hash}`
+ : target
+ const [secondsLeft, setSecondsLeft] = useState(REDIRECT_SECONDS)
+
+ // Static export (output: 'export') has no server-side redirects, so retired routes
+ // land here (the host serves 404.html for an unknown path) and are sent on to their
+ // replacement after a short visible countdown. setSecondsLeft runs in the timeout
+ // callback, so no state is set synchronously in the effect body.
+ useEffect(() => {
+ if (!targetWithParams) return
+ if (secondsLeft <= 0) {
+ router.replace(targetWithParams)
+ return
+ }
+ const timer = setTimeout(() => setSecondsLeft((s) => s - 1), 1000)
+ return () => clearTimeout(timer)
+ }, [targetWithParams, secondsLeft, router])
+
+ if (target) {
+ return (
+
+
+ Redirecting…
+
+
+ )
+ }
+
+ return (
+
+
+ 404 - Not Found
+
+
+ )
+}
+
+export default Page
diff --git a/src/pages/500.js b/src/pages/500.js
deleted file mode 100644
index 9cdd08dc5bdf..000000000000
--- a/src/pages/500.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Box, Button, Container, Stack, Typography } from '@mui/material'
-import Head from 'next/head'
-import { CippErrorState } from '../components/CippComponents/CippErrorState'
-import { Layout as DashboardLayout } from '../layouts/index.js'
-import { clearQueryCacheAndReload } from '../utils/clear-query-cache'
-import { useEffect } from 'react'
-import { useRouter } from 'next/router.js'
-import { ErrorBoundary } from 'react-error-boundary'
-
-// Minimal fallback if DashboardLayout itself crashes — breaks the infinite loop.
-// Deliberately plain: no layout, no shared component, nothing that could be the
-// thing that just threw.
-const MinimalErrorFallback = ({ error, resetErrorBoundary, outerError }) => (
-
-
-
- Error 500 - Something went wrong
- Oh no! It seems something went wrong.
-
- {outerError?.message || error?.message}
-
-
-
-
-
-
-
-
-)
-
-const Error500 = (props) => {
- //when we browse away from the page we want to reset the error boundary
- //this will prevent the error from showing on other pages
- const router = useRouter()
- useEffect(() => {
- // The app-level ErrorBoundary keeps showing this fallback across route
- // changes until it is reset, so an unmount cleanup never fires — reset when
- // navigation completes instead, letting the new route render. Guarded:
- // resetErrorBoundary is undefined when /500 is visited as a plain route.
- if (!props.resetErrorBoundary) return
- const handleRouteChange = () => props.resetErrorBoundary()
- router.events.on('routeChangeComplete', handleRouteChange)
- return () => router.events.off('routeChangeComplete', handleRouteChange)
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [])
-
- return (
- (
-
-
- 500 - Error
-
-
-
- )
-}
-
-export default Error500
diff --git a/src/pages/500.jsx b/src/pages/500.jsx
new file mode 100644
index 000000000000..09beb51886ea
--- /dev/null
+++ b/src/pages/500.jsx
@@ -0,0 +1,93 @@
+import { Box, Button, Container, Stack, Typography } from '@mui/material'
+import Head from 'next/head'
+import { CippErrorState } from '../components/CippComponents/CippErrorState'
+import { Layout as DashboardLayout } from '../layouts/index'
+import { clearQueryCacheAndReload } from '../utils/clear-query-cache'
+import { useEffect } from 'react'
+import { useRouter } from 'next/router.js'
+import { ErrorBoundary } from 'react-error-boundary'
+
+// Minimal fallback if DashboardLayout itself crashes — breaks the infinite loop.
+// Deliberately plain: no layout, no shared component, nothing that could be the
+// thing that just threw.
+const MinimalErrorFallback = ({ error, resetErrorBoundary, outerError }) => (
+
+
+
+ Error 500 - Something went wrong
+ Oh no! It seems something went wrong.
+
+ {outerError?.message || error?.message}
+
+
+
+
+
+
+
+
+)
+
+const Error500 = (props) => {
+ //when we browse away from the page we want to reset the error boundary
+ //this will prevent the error from showing on other pages
+ const router = useRouter()
+ useEffect(() => {
+ // The app-level ErrorBoundary keeps showing this fallback across route
+ // changes until it is reset, so an unmount cleanup never fires — reset when
+ // navigation completes instead, letting the new route render. Guarded:
+ // resetErrorBoundary is undefined when /500 is visited as a plain route.
+ if (!props.resetErrorBoundary) return
+ const handleRouteChange = () => props.resetErrorBoundary()
+ router.events.on('routeChangeComplete', handleRouteChange)
+ return () => router.events.off('routeChangeComplete', handleRouteChange)
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
+
+ return (
+ (
+
+
+ 500 - Error
+
+
+
+ )
+}
+
+export default Error500
diff --git a/src/pages/_app.js b/src/pages/_app.js
deleted file mode 100644
index a3f69ebe2727..000000000000
--- a/src/pages/_app.js
+++ /dev/null
@@ -1,340 +0,0 @@
-import Head from 'next/head'
-import { Toaster } from 'react-hot-toast'
-import { Provider as ReduxProvider } from 'react-redux'
-import { CacheProvider } from '@emotion/react'
-import { ThemeProvider } from '@mui/material/styles'
-import CssBaseline from '@mui/material/CssBaseline'
-import { ReleaseNotesProvider } from '../contexts/release-notes-context'
-import { SettingsConsumer, SettingsProvider } from '../contexts/settings-context'
-import { RTL } from '../components/rtl'
-import { store } from '../store'
-import { createTheme } from '../theme'
-import { createEmotionCache } from '../utils/create-emotion-cache'
-import '../libs/nprogress'
-import 'driver.js/dist/driver.css'
-import '../styles/tutorial-overrides.css'
-import { PrivateRoute } from '../components/PrivateRoute'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { useSystemPrefersDark } from '../hooks/use-system-prefers-dark'
-import Error500 from './500'
-import { ErrorBoundary } from 'react-error-boundary'
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
-import {
- enUS,
- enGB,
- nl,
- fr,
- de,
- es,
- it,
- pt,
- sv,
- da,
- nb,
- fi,
- is,
- pl,
- cs,
- sk,
- hu,
- ro,
- ru,
- enAU,
- enNZ,
-} from 'date-fns/locale'
-import TimeAgo from 'javascript-time-ago'
-import en from 'javascript-time-ago/locale/en.json'
-import CippSpeedDial from '../components/CippComponents/CippSpeedDial'
-import {
- Help as HelpIcon,
- BugReport as BugReportIcon,
- Feedback as FeedbackIcon,
- AutoStories,
- Gavel,
- ClearAll as ClearAllIcon,
- SupportAgent,
- FiberManualRecord,
-} from '@mui/icons-material'
-import { School as TutorialIcon } from '@mui/icons-material'
-import { getHelpLinks, clearCippCache } from '../utils/help-links'
-import { Chip, SvgIcon } from '@mui/material'
-import React, { useEffect, useState, useRef } from 'react'
-import { usePathname } from 'next/navigation'
-import { useRouter } from 'next/router'
-import { persistQueryClient } from '@tanstack/react-query-persist-client'
-import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
-import { TutorialProvider } from '../contexts/tutorial-context'
-import CippTutorialDialog from '../components/CippComponents/CippTutorialDialog'
-import CippSupportBundleDialog from '../components/CippComponents/CippSupportBundleDialog'
-
-const ReactQueryDevtoolsProduction = React.lazy(() =>
- import('@tanstack/react-query-devtools/build/modern/production.js').then((d) => ({
- default: d.ReactQueryDevtools,
- }))
-)
-TimeAgo.addDefaultLocale(en)
-
-const queryClient = new QueryClient()
-const clientSideEmotionCache = createEmotionCache()
-
-const App = (props) => {
- const { Component, emotionCache = clientSideEmotionCache, pageProps } = props
- const getLayout = Component.getLayout ?? ((page) => page)
- const preferredTheme = useSystemPrefersDark() ? 'dark' : 'light'
-
- // The _document.js init style painted the page dark and hid the stale light
- // prerender for dark-mode users. By the time passive effects run, the themed
- // UI is committed and painted (useSystemPrefersDark flushes pre-paint), so
- // the guard style has done its job.
- useEffect(() => {
- document.getElementById('cipp-color-init')?.remove()
- }, [])
-
- const pathname = usePathname()
- const route = useRouter()
- const [dateLocale, setDateLocale] = useState(enUS)
- const [tutorialDialogOpen, setTutorialDialogOpen] = useState(false)
- const [supportBundleOpen, setSupportBundleOpen] = useState(false)
- const [supportRecording, setSupportRecording] = useState(false)
-
- useEffect(() => {
- if (typeof window === 'undefined') return
-
- // Register minimal service worker for Chrome installability
- if ('serviceWorker' in navigator) {
- navigator.serviceWorker.register('/sw.js').catch(() => {})
- }
-
- const language = navigator.language || navigator.userLanguage || 'en-US'
- const baseLang = language.split('-')[0]
-
- const localeMap = {
- // English variants
- en: enUS,
- 'en-US': enUS,
- 'en-GB': enGB,
- 'en-AU': enAU,
- 'en-NZ': enNZ,
-
- // Western Europe
- nl: nl,
- 'nl-NL': nl,
- fr: fr,
- 'fr-FR': fr,
- de: de,
- 'de-DE': de,
- es: es,
- 'es-ES': es,
- it: it,
- 'it-IT': it,
- pt: pt,
- 'pt-PT': pt,
- 'pt-BR': pt,
-
- // Scandinavia / Nordics
- sv: sv,
- 'sv-SE': sv,
- da: da,
- 'da-DK': da,
- nb: nb,
- 'nb-NO': nb,
- fi: fi,
- 'fi-FI': fi,
- is: is,
- 'is-IS': is,
-
- // Eastern Europe
- pl: pl,
- 'pl-PL': pl,
- cs: cs,
- 'cs-CZ': cs,
- sk: sk,
- 'sk-SK': sk,
- hu: hu,
- 'hu-HU': hu,
- ro: ro,
- 'ro-RO': ro,
- ru: ru,
- 'ru-RU': ru,
- }
-
- const resolvedLocale = localeMap[language] || localeMap[baseLang] || enUS
- setDateLocale(resolvedLocale)
- }, [])
-
- // authmecipp not persisted, stale clientPrincipal:null flashes 401 on post-login reload
- const excludeQueryKeys = ['authmeswa', 'authmecipp', 'alertsDashboard']
-
- // 👇 Persist TanStack Query cache to localStorage
- useEffect(() => {
- if (typeof window !== 'undefined') {
- const localStoragePersister = createSyncStoragePersister({
- storage: window.localStorage,
- })
-
- persistQueryClient({
- queryClient,
- persister: localStoragePersister,
- maxAge: 1000 * 60 * 60 * 24, // 24 hours
- staleTime: 1000 * 60 * 5, // optional: 5 minutes
- buster: 'v2',
- dehydrateOptions: {
- shouldDehydrateQuery: (query) => {
- const queryIsReadyForPersistence = query.state.status === 'success'
- if (queryIsReadyForPersistence) {
- const { queryKey } = query
- // Check if queryKey exists and has elements before accessing index 0
- if (!queryKey || !queryKey.length) {
- return false
- }
- const queryKeyString = String(queryKey[0] || '')
- const excludeFromPersisting = excludeQueryKeys.some((key) =>
- queryKeyString.includes(key)
- )
- return !excludeFromPersisting
- }
- return queryIsReadyForPersistence
- },
- },
- })
- }
- }, [])
-
- // Link/cache destinations are shared with AccountPopover's mobile help section — see
- // utils/help-links.js. Only the icons and SpeedDial-specific actions live here.
- const helpLinkIcons = {
- 'bug-report': 
,
- documentation:
-
- CIPP
-
-
-
-
-
-
-
- {(settings) => {
- // Create theme even while initializing to avoid blank screen
- const theme = createTheme({
- colorPreset: 'orange',
- direction: settings.direction || 'ltr',
- paletteMode:
- settings.currentTheme?.value !== 'browser'
- ? settings.currentTheme?.value || 'light'
- : preferredTheme,
- contrast: 'high',
- })
-
- return (
- <>
-
-
-
-
-
-
- {getLayout(
- setTutorialDialogOpen(false)}
- />
- setSupportBundleOpen(false)}
- onRecordingChange={setSupportRecording}
- />
-
-
-
-
-
- {settings.isInitialized && settings?.showDevtools === true ? (
-
-
- ) : null}
-
- )
- }}
-
-
-
-
-
-
- )
-}
-
-export default App
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
new file mode 100644
index 000000000000..3e92f7cc88ac
--- /dev/null
+++ b/src/pages/_app.jsx
@@ -0,0 +1,328 @@
+import Head from 'next/head'
+import { CippIcons } from '../utils/icon-registry'
+import { Provider as ReduxProvider } from 'react-redux'
+import { CacheProvider } from '@emotion/react'
+import { ThemeProvider } from '@mui/material/styles'
+import CssBaseline from '@mui/material/CssBaseline'
+import { ReleaseNotesProvider } from '../contexts/release-notes-context'
+import { SettingsConsumer, SettingsProvider } from '../contexts/settings-context'
+import { RTL } from '../components/rtl'
+import { store } from '../store'
+import { createTheme } from '../theme'
+import { createEmotionCache } from '../utils/create-emotion-cache'
+import '../libs/nprogress'
+import 'driver.js/dist/driver.css'
+import '../styles/tutorial-overrides.css'
+import { PrivateRoute } from '../components/PrivateRoute'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { useSystemPrefersDark } from '../hooks/use-system-prefers-dark'
+import Error500 from './500'
+import { ErrorBoundary } from 'react-error-boundary'
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
+import {
+ enUS,
+ enGB,
+ nl,
+ fr,
+ de,
+ es,
+ it,
+ pt,
+ sv,
+ da,
+ nb,
+ fi,
+ is,
+ pl,
+ cs,
+ sk,
+ hu,
+ ro,
+ ru,
+ enAU,
+ enNZ,
+} from 'date-fns/locale'
+import TimeAgo from 'javascript-time-ago'
+import en from 'javascript-time-ago/locale/en.json'
+import CippSpeedDial from '../components/CippComponents/CippSpeedDial'
+import { getHelpLinks, clearCippCache } from '../utils/help-links'
+import { Chip, SvgIcon } from '@mui/material'
+import React, { useEffect, useState, useRef } from 'react'
+import { usePathname } from 'next/navigation'
+import { useRouter } from 'next/router'
+import { persistQueryClient } from '@tanstack/react-query-persist-client'
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
+import { TutorialProvider } from '../contexts/tutorial-context'
+import CippTutorialDialog from '../components/CippComponents/CippTutorialDialog'
+import CippSupportBundleDialog from '../components/CippComponents/CippSupportBundleDialog'
+
+const ReactQueryDevtoolsProduction = React.lazy(() =>
+ import('@tanstack/react-query-devtools/build/modern/production.js').then((d) => ({
+ default: d.ReactQueryDevtools,
+ }))
+)
+TimeAgo.addDefaultLocale(en)
+
+const queryClient = new QueryClient()
+const clientSideEmotionCache = createEmotionCache()
+
+const App = (props) => {
+ const { Component, emotionCache = clientSideEmotionCache, pageProps } = props
+ const getLayout = Component.getLayout ?? ((page) => page)
+ const preferredTheme = useSystemPrefersDark() ? 'dark' : 'light'
+
+ // The _document.js init style painted the page dark and hid the stale light
+ // prerender for dark-mode users. By the time passive effects run, the themed
+ // UI is committed and painted (useSystemPrefersDark flushes pre-paint), so
+ // the guard style has done its job.
+ useEffect(() => {
+ document.getElementById('cipp-color-init')?.remove()
+ }, [])
+
+ const pathname = usePathname()
+ const route = useRouter()
+ const [dateLocale, setDateLocale] = useState(enUS)
+ const [tutorialDialogOpen, setTutorialDialogOpen] = useState(false)
+ const [supportBundleOpen, setSupportBundleOpen] = useState(false)
+ const [supportRecording, setSupportRecording] = useState(false)
+
+ useEffect(() => {
+ if (typeof window === 'undefined') return
+
+ // Register minimal service worker for Chrome installability
+ if ('serviceWorker' in navigator) {
+ navigator.serviceWorker.register('/sw.js').catch(() => {})
+ }
+
+ const language = navigator.language || navigator.userLanguage || 'en-US'
+ const baseLang = language.split('-')[0]
+
+ const localeMap = {
+ // English variants
+ en: enUS,
+ 'en-US': enUS,
+ 'en-GB': enGB,
+ 'en-AU': enAU,
+ 'en-NZ': enNZ,
+
+ // Western Europe
+ nl: nl,
+ 'nl-NL': nl,
+ fr: fr,
+ 'fr-FR': fr,
+ de: de,
+ 'de-DE': de,
+ es: es,
+ 'es-ES': es,
+ it: it,
+ 'it-IT': it,
+ pt: pt,
+ 'pt-PT': pt,
+ 'pt-BR': pt,
+
+ // Scandinavia / Nordics
+ sv: sv,
+ 'sv-SE': sv,
+ da: da,
+ 'da-DK': da,
+ nb: nb,
+ 'nb-NO': nb,
+ fi: fi,
+ 'fi-FI': fi,
+ is: is,
+ 'is-IS': is,
+
+ // Eastern Europe
+ pl: pl,
+ 'pl-PL': pl,
+ cs: cs,
+ 'cs-CZ': cs,
+ sk: sk,
+ 'sk-SK': sk,
+ hu: hu,
+ 'hu-HU': hu,
+ ro: ro,
+ 'ro-RO': ro,
+ ru: ru,
+ 'ru-RU': ru,
+ }
+
+ const resolvedLocale = localeMap[language] || localeMap[baseLang] || enUS
+ setDateLocale(resolvedLocale)
+ }, [])
+
+ // authmecipp not persisted, stale clientPrincipal:null flashes 401 on post-login reload
+ const excludeQueryKeys = ['authmeswa', 'authmecipp', 'alertsDashboard']
+
+ // 👇 Persist TanStack Query cache to localStorage
+ useEffect(() => {
+ if (typeof window !== 'undefined') {
+ const localStoragePersister = createSyncStoragePersister({
+ storage: window.localStorage,
+ })
+
+ persistQueryClient({
+ queryClient,
+ persister: localStoragePersister,
+ maxAge: 1000 * 60 * 60 * 24, // 24 hours
+ staleTime: 1000 * 60 * 5, // optional: 5 minutes
+ buster: 'v2',
+ dehydrateOptions: {
+ shouldDehydrateQuery: (query) => {
+ const queryIsReadyForPersistence = query.state.status === 'success'
+ if (queryIsReadyForPersistence) {
+ const { queryKey } = query
+ // Check if queryKey exists and has elements before accessing index 0
+ if (!queryKey || !queryKey.length) {
+ return false
+ }
+ const queryKeyString = String(queryKey[0] || '')
+ const excludeFromPersisting = excludeQueryKeys.some((key) =>
+ queryKeyString.includes(key)
+ )
+ return !excludeFromPersisting
+ }
+ return queryIsReadyForPersistence
+ },
+ },
+ })
+ }
+ }, [])
+
+ // Link/cache destinations are shared with AccountPopover's mobile help section — see
+ // utils/help-links.js. Only the icons and SpeedDial-specific actions live here.
+ const helpLinkIcons = {
+ 'bug-report':
+
+ CIPP
+
+
+
+
+
+
+
+ {(settings) => {
+ // Create theme even while initializing to avoid blank screen
+ const theme = createTheme({
+ colorPreset: 'orange',
+ direction: settings.direction || 'ltr',
+ paletteMode:
+ settings.currentTheme?.value !== 'browser'
+ ? settings.currentTheme?.value || 'light'
+ : preferredTheme,
+ contrast: 'high',
+ })
+
+ return (
+ <>
+
+
+
+
+
+
+ {getLayout(
+ setTutorialDialogOpen(false)}
+ />
+ setSupportBundleOpen(false)}
+ onRecordingChange={setSupportRecording}
+ />
+
+
+
+ {supportRecording && !supportBundleOpen && (
+
+
+ {settings.isInitialized && settings?.showDevtools === true ? (
+
+
+ ) : null}
+
+ )
+ }}
+
+
+
+
+
+
+ )
+}
+
+export default App
diff --git a/src/pages/_document.js b/src/pages/_document.js
deleted file mode 100644
index 95f09bc14bc8..000000000000
--- a/src/pages/_document.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Children } from 'react';
-import Document, { Head, Html, Main, NextScript } from 'next/document';
-import createEmotionServer from '@emotion/server/create-instance';
-import { createEmotionCache } from '../utils/create-emotion-cache';
-
-class CustomDocument extends Document {
- render() {
- return (
-
-
- {/* Runs before first paint. The served HTML is the light prerender - a
- fully drawn light page plus SSR'd CssBaseline body background - so
- for dark-mode users it flashes white for as long as the bundle takes
- to load and hydrate. When the effective theme resolves dark (stored
- explicit choice wins, 'browser'/no stored settings falls back to the
- OS preference - same order as _app.js), paint the page dark and hide
- the stale light prerender. _app.js removes the style once React has
- painted the themed UI; a timeout failsafe unhides if hydration never
- completes. Hex is dark high-contrast background.default. */}
-
-
-
-
-
-
-
-
-
-
-
-
-
- API Offline
-
-
-
- The CIPP API appears to be offline or out of date.
-
-
- If you are self-hosting CIPP, please ensure your Function App is running and up to
- date.
-
-
- }
- actionText={testingConnection ? 'Testing Connection...' : 'Test API Connection'}
- onActionClick={handleTestConnection}
- actionDisabled={testingConnection}
- >
- {testResult && (
-
- {testResult.message}
- {testResult.success && (
-
-
-
- )}
-
- )}
-
-
- )
-}
-
-export default ApiOfflinePage
diff --git a/src/pages/api-offline.jsx b/src/pages/api-offline.jsx
new file mode 100644
index 000000000000..6d983622d0fd
--- /dev/null
+++ b/src/pages/api-offline.jsx
@@ -0,0 +1,110 @@
+import { Alert, Box, Button, SvgIcon, Typography } from '@mui/material'
+import { CippIcons } from '../utils/icon-registry'
+import Head from 'next/head'
+import { useState } from 'react'
+import axios from 'axios'
+import { CippAuthShell } from '../components/CippComponents/CippAuthShell'
+import { ApiGetCall } from '../api/ApiCall'
+
+// Reached almost exclusively from legacy Function App deployments, which are
+// still supported — hence the wording here.
+const ApiOfflinePage = () => {
+ const [testingConnection, setTestingConnection] = useState(false)
+ const [testResult, setTestResult] = useState(null)
+
+ const version = ApiGetCall({
+ url: '/version.json',
+ queryKey: 'LocalVersion',
+ })
+
+ const handleTestConnection = async () => {
+ setTestingConnection(true)
+ setTestResult(null)
+
+ try {
+ // Try to ping the API
+ const testCall = await axios.get('/api/me', { timeout: 45000 })
+ console.log('API Test Call Response:', testCall)
+ if (!testCall.headers['content-type']?.includes('application/json')) {
+ throw new Error('API did not return the expected response.')
+ }
+ setTestResult({
+ success: true,
+ message: 'Connection successful! Try refreshing the page.',
+ })
+ } catch (error) {
+ let errorMessage = 'Connection failed.'
+
+ if (error.response) {
+ // Request was made and server responded with a status code outside of 2xx range
+ errorMessage = `API responded with status: ${error.response.status}`
+ if (error.response.status === 404) {
+ errorMessage +=
+ ' (API endpoint not found, this can be the case if your Function App is on Version 7 or below)'
+ }
+ } else if (error.request) {
+ // Request was made but no response received
+ errorMessage = 'No response received from API. Check if your Function App is running.'
+ } else {
+ // Error in setting up the request
+ errorMessage = `Error: ${error.message}`
+ }
+
+ setTestResult({ success: false, message: errorMessage })
+ } finally {
+ setTestingConnection(false)
+ }
+ }
+
+ return (
+ <>
+
+ API Offline
+
+
+
+ The CIPP API appears to be offline or out of date.
+
+
+ If you are self-hosting CIPP, please ensure your Function App is running and up to
+ date.
+
+
+ }
+ actionText={testingConnection ? 'Testing Connection...' : 'Test API Connection'}
+ onActionClick={handleTestConnection}
+ actionDisabled={testingConnection}
+ >
+ {testResult && (
+
+ {testResult.message}
+ {testResult.success && (
+
+
+
+ )}
+
+ )}
+
+
+ )
+}
+
+export default ApiOfflinePage
diff --git a/src/pages/authredirect.js b/src/pages/authredirect.jsx
similarity index 100%
rename from src/pages/authredirect.js
rename to src/pages/authredirect.jsx
diff --git a/src/pages/cipp/advanced/authentication/cipp-roles/add.js b/src/pages/cipp/advanced/authentication/cipp-roles/add.js
deleted file mode 100644
index 5d6f994deb46..000000000000
--- a/src/pages/cipp/advanced/authentication/cipp-roles/add.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../../layouts/index.js";
-import CippPageCard from "../../../../../components/CippCards/CippPageCard";
-import { CippRoleAddEdit } from "../../../../../components/CippSettings/CippRoleAddEdit";
-import { CardContent, Stack, Alert } from "@mui/material";
-
-const AddRolePage = () => {
- return (
-
-
-
-
- Create a new custom role with specific permissions and settings.
-
-
-
-
- );
-};
-
-AddRolePage.getLayout = (page) => {page} ;
-
-export default AddRolePage;
diff --git a/src/pages/cipp/advanced/authentication/cipp-roles/add.jsx b/src/pages/cipp/advanced/authentication/cipp-roles/add.jsx
new file mode 100644
index 000000000000..8c1d93078c64
--- /dev/null
+++ b/src/pages/cipp/advanced/authentication/cipp-roles/add.jsx
@@ -0,0 +1,23 @@
+import { Layout as DashboardLayout } from "../../../../../layouts/index";
+import CippPageCard from "../../../../../components/CippCards/CippPageCard";
+import { CippRoleAddEdit } from "../../../../../components/CippSettings/CippRoleAddEdit";
+import { CardContent, Stack, Alert } from "@mui/material";
+
+const AddRolePage = () => {
+ return (
+
+
+
+
+ Create a new custom role with specific permissions and settings.
+
+
+
+
+ );
+};
+
+AddRolePage.getLayout = (page) => {page} ;
+
+export default AddRolePage;
diff --git a/src/pages/cipp/advanced/authentication/cipp-roles/edit.js b/src/pages/cipp/advanced/authentication/cipp-roles/edit.js
deleted file mode 100644
index 0c2a4aeaae89..000000000000
--- a/src/pages/cipp/advanced/authentication/cipp-roles/edit.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useRouter } from "next/router";
-import { Layout as DashboardLayout } from "../../../../../layouts/index.js";
-import CippPageCard from "../../../../../components/CippCards/CippPageCard";
-import { CippRoleAddEdit } from "../../../../../components/CippSettings/CippRoleAddEdit";
-import { CardContent, Stack, Alert } from "@mui/material";
-
-const EditRolePage = () => {
- const router = useRouter();
- const { role } = router.query;
-
- return (
-
-
-
-
- Editing an existing role will update the permissions for all users assigned to this
- role.
-
-
-
-
- );
-};
-
-EditRolePage.getLayout = (page) => {page} ;
-
-export default EditRolePage;
diff --git a/src/pages/cipp/advanced/authentication/cipp-roles/edit.jsx b/src/pages/cipp/advanced/authentication/cipp-roles/edit.jsx
new file mode 100644
index 000000000000..0c4e99bbf419
--- /dev/null
+++ b/src/pages/cipp/advanced/authentication/cipp-roles/edit.jsx
@@ -0,0 +1,37 @@
+import { useRouter } from "next/router";
+import { Layout as DashboardLayout } from "../../../../../layouts/index";
+import CippPageCard from "../../../../../components/CippCards/CippPageCard";
+import { CippRoleAddEdit } from "../../../../../components/CippSettings/CippRoleAddEdit";
+import { CardContent, Stack, Alert } from "@mui/material";
+
+const EditRolePage = () => {
+ const router = useRouter();
+ const { role } = router.query;
+
+ return (
+
+
+
+ {!role && (
+
+ No role selected. Open this page from the CIPP Roles list to edit a role.
+
+ )}
+ {role && (
+ <>
+
+ Editing an existing role will update the permissions for all users assigned to
+ this role.
+
+
+
+
+ );
+};
+
+EditRolePage.getLayout = (page) => {page} ;
+
+export default EditRolePage;
diff --git a/src/pages/cipp/advanced/authentication/cipp-roles/index.js b/src/pages/cipp/advanced/authentication/cipp-roles/index.js
deleted file mode 100644
index fc2c7e20aab4..000000000000
--- a/src/pages/cipp/advanced/authentication/cipp-roles/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { TabbedLayout } from "../../../../../layouts/TabbedLayout";
-import { Layout as DashboardLayout } from "../../../../../layouts/index.js";
-import tabOptions from "../tabOptions";
-import CippPageCard from "../../../../../components/CippCards/CippPageCard";
-import CippRoles from "../../../../../components/CippSettings/CippRoles";
-import { CippExpandableAlert } from "../../../../../components/CippComponents/CippExpandableAlert";
-import { CardContent, Stack } from "@mui/material";
-
-const Page = () => {
- return (
-
-
-
-
- Custom roles can be used to restrict permissions for users with the 'editor' or
- 'readonly' roles in CIPP. They can be limited to a subset of tenants and API
- permissions. Built-in and custom roles can be assigned to Entra security groups for
- granular access control.
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/advanced/authentication/cipp-roles/index.jsx b/src/pages/cipp/advanced/authentication/cipp-roles/index.jsx
new file mode 100644
index 000000000000..0330b8ce515c
--- /dev/null
+++ b/src/pages/cipp/advanced/authentication/cipp-roles/index.jsx
@@ -0,0 +1,33 @@
+import { TabbedLayout } from "../../../../../layouts/TabbedLayout";
+import { Layout as DashboardLayout } from "../../../../../layouts/index";
+import tabOptions from "../tabOptions";
+import CippPageCard from "../../../../../components/CippCards/CippPageCard";
+import CippRoles from "../../../../../components/CippSettings/CippRoles";
+import { CippExpandableAlert } from "../../../../../components/CippComponents/CippExpandableAlert";
+import { CardContent, Stack } from "@mui/material";
+
+const Page = () => {
+ return (
+
+
+
+
+ Custom roles can be used to restrict permissions for users with the 'editor' or
+ 'readonly' roles in CIPP. They can be limited to a subset of tenants and API
+ permissions. Built-in and custom roles can be assigned to Entra security groups for
+ granular access control.
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
diff --git a/src/pages/cipp/advanced/authentication/cipp-users.js b/src/pages/cipp/advanced/authentication/cipp-users.js
deleted file mode 100644
index c2d37ea3f344..000000000000
--- a/src/pages/cipp/advanced/authentication/cipp-users.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { TabbedLayout } from "../../../../layouts/TabbedLayout";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import tabOptions from "./tabOptions";
-import CippPageCard from "../../../../components/CippCards/CippPageCard";
-import { CippUserManagement } from "../../../../components/CippSettings/CippUserManagement";
-import { CippExpandableAlert } from "../../../../components/CippComponents/CippExpandableAlert";
-import { CardContent, Stack } from "@mui/material";
-
-const Page = () => {
- return (
- // Titled to match the tab label, so the mobile picker claims the heading and the page
- // does not say "CIPP Users" and "CIPP User Management" back to back.
-
-
-
-
- Manage users who can access CIPP. Users are automatically synced from your partner
- tenant every 15 minutes based on Entra group memberships configured on the CIPP Roles
- page. You can also manually add users or assign additional roles — manual assignments
- are preserved independently and will not be overwritten by the sync. Users assigned the
- superadmin role have full access to CIPP and all other permissions applied will be ignored.
- You must have at least one superadmin user in CIPP at all times, and you cannot remove the
- superadmin role from a user if they are the only superadmin. If you have only one superadmin
- and need to change who it is, first assign another user the superadmin role, then you can
- remove the superadmin role from the original user. To allow users from outside your partner tenant
- to access CIPP, you can add them as guest users in your partner tenant and assign them the
- appropriate roles in CIPP or enable the multi tenant mode in the CIPP SSO tab and add the users
- to the list below without needing to add them as guest users in your tenant.
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/advanced/authentication/cipp-users.jsx b/src/pages/cipp/advanced/authentication/cipp-users.jsx
new file mode 100644
index 000000000000..f6d4f5b6bc92
--- /dev/null
+++ b/src/pages/cipp/advanced/authentication/cipp-users.jsx
@@ -0,0 +1,43 @@
+import { TabbedLayout } from "../../../../layouts/TabbedLayout";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import tabOptions from "./tabOptions";
+import CippPageCard from "../../../../components/CippCards/CippPageCard";
+import { CippUserManagement } from "../../../../components/CippSettings/CippUserManagement";
+import { CippExpandableAlert } from "../../../../components/CippComponents/CippExpandableAlert";
+import { CardContent, Stack } from "@mui/material";
+
+const Page = () => {
+ return (
+ // Titled to match the tab label, so the mobile picker claims the heading and the page
+ // does not say "CIPP Users" and "CIPP User Management" back to back.
+
+
+
+
+ Manage users who can access CIPP. Users are automatically synced from your partner
+ tenant every 15 minutes based on Entra group memberships configured on the CIPP Roles
+ page. You can also manually add users or assign additional roles — manual assignments
+ are preserved independently and will not be overwritten by the sync. Users assigned the
+ superadmin role have full access to CIPP and all other permissions applied will be ignored.
+ You must have at least one superadmin user in CIPP at all times, and you cannot remove the
+ superadmin role from a user if they are the only superadmin. If you have only one superadmin
+ and need to change who it is, first assign another user the superadmin role, then you can
+ remove the superadmin role from the original user. To allow users from outside your partner tenant
+ to access CIPP, you can add them as guest users in your partner tenant and assign them the
+ appropriate roles in CIPP or enable the multi tenant mode in the CIPP SSO tab and add the users
+ to the list below without needing to add them as guest users in your tenant.
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
diff --git a/src/pages/cipp/advanced/authentication/sam-app-permissions.js b/src/pages/cipp/advanced/authentication/sam-app-permissions.js
deleted file mode 100644
index 19e26b4143cb..000000000000
--- a/src/pages/cipp/advanced/authentication/sam-app-permissions.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import { TabbedLayout } from "../../../../layouts/TabbedLayout";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import tabOptions from "./tabOptions";
-import { useForm } from "react-hook-form";
-import { useState } from "react";
-import { ApiGetCall, ApiPostCall } from "../../../../api/ApiCall";
-import CippAppPermissionBuilder from "../../../../components/CippComponents/CippAppPermissionBuilder";
-import CippPageCard from "../../../../components/CippCards/CippPageCard";
-import { CippApiResults } from "../../../../components/CippComponents/CippApiResults";
-import { ConfirmationDialog } from "../../../../components/confirmation-dialog";
-import { Alert, Button, CardContent, Skeleton, Stack, SvgIcon, Typography } from "@mui/material";
-import { SettingsBackupRestore, WarningAmberOutlined } from "@mui/icons-material";
-
-const Page = () => {
- const pageTitle = "SAM App Permissions";
-
- const [resetKey, setResetKey] = useState(0);
- const [resetDialogOpen, setResetDialogOpen] = useState(false);
-
- const formControl = useForm({
- mode: "onBlur",
- });
-
- const execSamAppPermissions = ApiGetCall({
- url: "/api/ExecSAMAppPermissions",
- queryKey: "execSamAppPermissions",
- waiting: true,
- });
-
- const updatePermissions = ApiPostCall({
- urlFromData: true,
- });
-
- const resetPermissions = ApiPostCall({
- relatedQueryKeys: ["execSamAppPermissions"],
- onResult: () => {
- // Remount the builder so it re-seeds its internal state from the freshly defaulted data
- setResetKey((prev) => prev + 1);
- execSamAppPermissions.refetch();
- },
- });
-
- const handleUpdatePermissions = (data) => {
- updatePermissions.mutate({
- url: "/api/ExecSAMAppPermissions?Action=Update",
- data: data,
- queryKey: "execSamAppPermissions",
- });
- };
-
- const handleResetToCippDefaults = () => {
- resetPermissions.mutate({
- url: "/api/ExecSAMAppPermissions?Action=Reset",
- data: {},
- });
- };
-
- return (
-
-
-
-
- This is an advanced setting that allows you to modify the permissions used for CPV
- consent on customer tenants.
-
-
-
-
-
-
- setResetDialogOpen(false)}
- title="Reset to CIPP Defaults"
- variant="warning"
- message="This removes all additional permissions you have layered on top of the CIPP-SAM defaults and returns the saved permission set to the built-in CIPP manifest defaults. The default permissions themselves are unaffected. You will need to complete a Permissions repair from the Permissions page, then complete a CPV refresh to finalise the chnages. Continue?"
- onConfirm={() => {
- handleResetToCippDefaults();
- setResetDialogOpen(false);
- }}
- />
-
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/advanced/authentication/sam-app-permissions.jsx b/src/pages/cipp/advanced/authentication/sam-app-permissions.jsx
new file mode 100644
index 000000000000..308455febc60
--- /dev/null
+++ b/src/pages/cipp/advanced/authentication/sam-app-permissions.jsx
@@ -0,0 +1,122 @@
+import { TabbedLayout } from "../../../../layouts/TabbedLayout";
+import { CippIcons } from "../../../../utils/icon-registry";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import tabOptions from "./tabOptions";
+import { useForm } from "react-hook-form";
+import { useState } from "react";
+import { ApiGetCall, ApiPostCall } from "../../../../api/ApiCall";
+import CippAppPermissionBuilder from "../../../../components/CippComponents/CippAppPermissionBuilder";
+import CippPageCard from "../../../../components/CippCards/CippPageCard";
+import { CippApiResults } from "../../../../components/CippComponents/CippApiResults";
+import { ConfirmationDialog } from "../../../../components/confirmation-dialog";
+import { Alert, Button, CardContent, Skeleton, Stack, SvgIcon, Typography } from "@mui/material";
+
+const Page = () => {
+ const pageTitle = "SAM App Permissions";
+
+ const [resetKey, setResetKey] = useState(0);
+ const [resetDialogOpen, setResetDialogOpen] = useState(false);
+
+ const formControl = useForm({
+ mode: "onBlur",
+ });
+
+ const execSamAppPermissions = ApiGetCall({
+ url: "/api/ExecSAMAppPermissions",
+ queryKey: "execSamAppPermissions",
+ waiting: true,
+ });
+
+ const updatePermissions = ApiPostCall({
+ urlFromData: true,
+ });
+
+ const resetPermissions = ApiPostCall({
+ relatedQueryKeys: ["execSamAppPermissions"],
+ onResult: () => {
+ // Remount the builder so it re-seeds its internal state from the freshly defaulted data
+ setResetKey((prev) => prev + 1);
+ execSamAppPermissions.refetch();
+ },
+ });
+
+ const handleUpdatePermissions = (data) => {
+ updatePermissions.mutate({
+ url: "/api/ExecSAMAppPermissions?Action=Update",
+ data: data,
+ queryKey: "execSamAppPermissions",
+ });
+ };
+
+ const handleResetToCippDefaults = () => {
+ resetPermissions.mutate({
+ url: "/api/ExecSAMAppPermissions?Action=Reset",
+ data: {},
+ });
+ };
+
+ return (
+
+
+
+
+ This is an advanced setting that allows you to modify the permissions used for CPV
+ consent on customer tenants.
+
+
+
+
+
+
+ setResetDialogOpen(false)}
+ title="Reset to CIPP Defaults"
+ variant="warning"
+ message="This removes all additional permissions you have layered on top of the CIPP-SAM defaults and returns the saved permission set to the built-in CIPP manifest defaults. The default permissions themselves are unaffected. You will need to complete a Permissions repair from the Permissions page, then complete a CPV refresh to finalise the chnages. Continue?"
+ onConfirm={() => {
+ handleResetToCippDefaults();
+ setResetDialogOpen(false);
+ }}
+ />
+
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
diff --git a/src/pages/cipp/advanced/authentication/sam-app-roles.js b/src/pages/cipp/advanced/authentication/sam-app-roles.js
deleted file mode 100644
index 03764c9e927b..000000000000
--- a/src/pages/cipp/advanced/authentication/sam-app-roles.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import { TabbedLayout } from "../../../../layouts/TabbedLayout";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import tabOptions from "./tabOptions";
-import CippFormPage from "../../../../components/CippFormPages/CippFormPage";
-import { Alert, CardContent, Stack, Typography } from "@mui/material";
-import { WarningAmberOutlined } from "@mui/icons-material";
-import { useForm } from "react-hook-form";
-import { ApiGetCall, ApiGetCallWithPagination } from "../../../../api/ApiCall";
-import { useEffect } from "react";
-import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
-import GDAPRoles from "../../../../data/GDAPRoles";
-import { CippFormTenantSelector } from "../../../../components/CippComponents/CippFormTenantSelector";
-
-const Page = () => {
- const pageTitle = "SAM App Roles";
-
- const formControl = useForm({
- mode: "onChange",
- });
-
- const execSAMRoles = ApiGetCall({
- url: "/api/ExecSAMRoles",
- queryKey: "ExecSAMRoles",
- });
-
- const { data: tenantsData = { pages: [] }, isSuccess: tenantsSuccess } = ApiGetCallWithPagination({
- url: "/api/ListTenants?AllTenantSelector=true",
- queryKey: "ListTenants-AllTenantSelector",
- });
- const tenants = tenantsData?.pages?.[0] || [];
-
- useEffect(() => {
- if (execSAMRoles.isSuccess && tenantsSuccess) {
- var selectedTenants = [];
- execSAMRoles.data?.Tenants.map((tenant) => {
- var tenantObj = false;
- if (tenant?.value) {
- tenantObj = tenants.find((t) => t?.defaultDomainName === tenant?.value);
- } else {
- tenantObj = tenants.find((t) => t?.defaultDomainName === tenant);
- }
- if (tenantObj) {
- selectedTenants.push({
- value: tenantObj?.defaultDomainName,
- label: tenantObj?.displayName,
- });
- }
- });
- formControl.reset({
- Roles: execSAMRoles.data?.Roles,
- Tenants: selectedTenants,
- });
- }
- }, [execSAMRoles.isSuccess, tenantsSuccess]);
-
- return (
-
-
-
-
- Add your CIPP-SAM application Service Principal directly to Admin Roles in the tenant.
- This is an advanced use case where you need access to additional Graph endpoints or
- Exchange Cmdlets otherwise unavailable via Delegated permissions.
-
- {
- return { value: role.ObjectId, label: role.Name };
- })}
- />
-
-
-
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/advanced/authentication/sam-app-roles.jsx b/src/pages/cipp/advanced/authentication/sam-app-roles.jsx
new file mode 100644
index 000000000000..51af178bb160
--- /dev/null
+++ b/src/pages/cipp/advanced/authentication/sam-app-roles.jsx
@@ -0,0 +1,99 @@
+import { TabbedLayout } from "../../../../layouts/TabbedLayout";
+import { CippIcons } from "../../../../utils/icon-registry";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import tabOptions from "./tabOptions";
+import CippFormPage from "../../../../components/CippFormPages/CippFormPage";
+import { Alert, CardContent, Stack, Typography } from "@mui/material";
+import { useForm } from "react-hook-form";
+import { ApiGetCall, ApiGetCallWithPagination } from "../../../../api/ApiCall";
+import { useEffect } from "react";
+import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
+import GDAPRoles from "../../../../data/GDAPRoles";
+import { CippFormTenantSelector } from "../../../../components/CippComponents/CippFormTenantSelector";
+
+const Page = () => {
+ const pageTitle = "SAM App Roles";
+
+ const formControl = useForm({
+ mode: "onChange",
+ });
+
+ const execSAMRoles = ApiGetCall({
+ url: "/api/ExecSAMRoles",
+ queryKey: "ExecSAMRoles",
+ });
+
+ const { data: tenantsData = { pages: [] }, isSuccess: tenantsSuccess } = ApiGetCallWithPagination({
+ url: "/api/ListTenants?AllTenantSelector=true",
+ queryKey: "ListTenants-AllTenantSelector",
+ });
+ const tenants = tenantsData?.pages?.[0] || [];
+
+ useEffect(() => {
+ if (execSAMRoles.isSuccess && tenantsSuccess) {
+ var selectedTenants = [];
+ execSAMRoles.data?.Tenants.map((tenant) => {
+ var tenantObj = false;
+ if (tenant?.value) {
+ tenantObj = tenants.find((t) => t?.defaultDomainName === tenant?.value);
+ } else {
+ tenantObj = tenants.find((t) => t?.defaultDomainName === tenant);
+ }
+ if (tenantObj) {
+ selectedTenants.push({
+ value: tenantObj?.defaultDomainName,
+ label: tenantObj?.displayName,
+ });
+ }
+ });
+ formControl.reset({
+ Roles: execSAMRoles.data?.Roles,
+ Tenants: selectedTenants,
+ });
+ }
+ }, [execSAMRoles.isSuccess, tenantsSuccess]);
+
+ return (
+
+
+
+
+ Add your CIPP-SAM application Service Principal directly to Admin Roles in the tenant.
+ This is an advanced use case where you need access to additional Graph endpoints or
+ Exchange Cmdlets otherwise unavailable via Delegated permissions.
+
+ {
+ return { value: role.ObjectId, label: role.Name };
+ })}
+ />
+
+
+
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
diff --git a/src/pages/cipp/advanced/authentication/sso.js b/src/pages/cipp/advanced/authentication/sso.js
deleted file mode 100644
index ec8cb012df9a..000000000000
--- a/src/pages/cipp/advanced/authentication/sso.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Container } from "@mui/material";
-import { Grid } from "@mui/system";
-import { TabbedLayout } from "../../../../layouts/TabbedLayout";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import tabOptions from "./tabOptions";
-import { CippSSOSettings } from "../../../../components/CippSettings/CippSSOSettings";
-
-const Page = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/advanced/authentication/sso.jsx b/src/pages/cipp/advanced/authentication/sso.jsx
new file mode 100644
index 000000000000..ec3d585514c1
--- /dev/null
+++ b/src/pages/cipp/advanced/authentication/sso.jsx
@@ -0,0 +1,26 @@
+import { Container } from "@mui/material";
+import { Grid } from "@mui/system";
+import { TabbedLayout } from "../../../../layouts/TabbedLayout";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import tabOptions from "./tabOptions";
+import { CippSSOSettings } from "../../../../components/CippSettings/CippSSOSettings";
+
+const Page = () => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
diff --git a/src/pages/cipp/advanced/cippdb-cache.jsx b/src/pages/cipp/advanced/cippdb-cache.jsx
new file mode 100644
index 000000000000..3c159e8ab31c
--- /dev/null
+++ b/src/pages/cipp/advanced/cippdb-cache.jsx
@@ -0,0 +1,503 @@
+import { Layout as DashboardLayout } from '../../../layouts/index'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { ApiPostCall } from '../../../api/ApiCall'
+import { CippPropertyListCard } from '../../../components/CippCards/CippPropertyListCard'
+import { CippDataTable } from '../../../components/CippTable/CippDataTable'
+import { useDialog } from '../../../hooks/use-dialog'
+import {
+ Alert,
+ Box,
+ Button,
+ Container,
+ IconButton,
+ InputAdornment,
+ ListItemIcon,
+ ListItemText,
+ Menu,
+ MenuItem,
+ Stack,
+ SvgIcon,
+ Tooltip,
+ Typography,
+} from '@mui/material'
+import { MagnifyingGlassIcon, TrashIcon } from '@heroicons/react/24/outline'
+import {
+ Check,
+ DeleteSweep,
+ FilterList,
+ Sync,
+ WarningAmber,
+} from '@mui/icons-material'
+import CippFormComponent from '../../../components/CippComponents/CippFormComponent'
+import { useSettings } from '../../../hooks/use-settings'
+import { useForm, useWatch } from 'react-hook-form'
+import { CippApiDialog } from '../../../components/CippComponents/CippApiDialog'
+import { Grid } from '@mui/system'
+import { CippApiResults } from '../../../components/CippComponents/CippApiResults'
+import { CippHead } from '../../../components/CippComponents/CippHead'
+import { CippQueueTracker } from '../../../components/CippTable/CippQueueTracker'
+import cacheTypes from '../../../data/CIPPDBCacheTypes.json'
+import {
+ CACHE_CATEGORY_LABELS,
+ CACHE_CATEGORY_OPTIONS,
+ getCacheTypeCategory,
+} from '../../../utils/cippdb-cache-categories'
+
+const apiUrl = '/api/ExecCIPPDBCacheAdmin'
+const syncApiUrl = '/api/ExecCIPPDBCache'
+const pageTitle = 'CIPPDB Cache'
+const META_COLUMNS = ['CIPPPartitionKey', 'CIPPRowKey', 'CIPPETag']
+// Browsable, but written as a side effect of another collector rather than by a
+// Set-CIPPDBCache of their own, so the sync endpoint has nothing to call for them.
+const NON_SYNCABLE_TYPES = ['OneDriveSiteListing', 'SharePointSiteListing']
+
+const unwrapResults = (result) => {
+ if (Array.isArray(result)) return result
+ if (Array.isArray(result?.Results)) return result.Results
+ return []
+}
+
+const deriveSimpleColumns = (rows) => {
+ if (!Array.isArray(rows) || rows.length === 0) return []
+ const keys = new Set()
+ rows.slice(0, 50).forEach((row) => {
+ if (!row || typeof row !== 'object') return
+ Object.keys(row).forEach((key) => {
+ if (!META_COLUMNS.includes(key)) keys.add(key)
+ })
+ })
+ return [...keys]
+}
+
+const Page = () => {
+ const formControl = useForm({ mode: 'onChange' })
+ const emptyDialog = useDialog()
+ const syncDialog = useDialog()
+ const [selectedType, setSelectedType] = useState(null)
+ const [tableData, setTableData] = useState([])
+ const [categoryFilter, setCategoryFilter] = useState('All')
+ const [categoryMenuAnchor, setCategoryMenuAnchor] = useState(null)
+ const [syncQueueId, setSyncQueueId] = useState(null)
+ const loadGeneration = useRef(0)
+
+ const typeFilter = useWatch({
+ control: formControl.control,
+ name: 'typeFilter',
+ })
+ // The header tenant picker is the only tenant source on this page. A second selector here
+ // could disagree with it, and both reach the API as one case-insensitive query key, which the
+ // service joins into a single "tenantA,tenantB" value instead of picking one.
+ const tenantValue = useSettings().currentTenant ?? null
+
+ const fetchCacheData = ApiPostCall({
+ queryKey: 'CIPPDBCacheAdminList',
+ })
+
+ const rowAction = ApiPostCall({
+ queryKey: 'CIPPDBCacheAdminRemove',
+ onResult: () => {
+ handleLoad()
+ },
+ })
+
+ const applyListResult = (generation, response) => {
+ if (generation !== loadGeneration.current) return
+ setTableData(unwrapResults(response?.data ?? response))
+ }
+
+ const handleLoad = () => {
+ if (!selectedType || !tenantValue) return
+ const generation = ++loadGeneration.current
+ fetchCacheData.mutate(
+ {
+ url: apiUrl,
+ data: {
+ Action: 'List',
+ TenantFilter: tenantValue,
+ Type: selectedType,
+ },
+ },
+ {
+ onSuccess: (response) => applyListResult(generation, response),
+ }
+ )
+ }
+
+ // Switching tenant in the header would otherwise leave the previous tenant's rows on screen
+ // under the new tenant's name, so drop them and fetch the new tenant's set.
+ useEffect(() => {
+ loadGeneration.current += 1
+ setTableData([])
+ handleLoad()
+ }, [tenantValue])
+
+ const handleTypeSelect = (type) => {
+ setSelectedType(type)
+ setTableData([])
+ if (!tenantValue) return
+ const generation = ++loadGeneration.current
+ fetchCacheData.mutate(
+ {
+ url: apiUrl,
+ data: {
+ Action: 'List',
+ TenantFilter: tenantValue,
+ Type: type,
+ },
+ },
+ {
+ onSuccess: (response) => applyListResult(generation, response),
+ }
+ )
+ }
+
+ const simpleColumns = useMemo(
+ () => deriveSimpleColumns(tableData),
+ [tableData]
+ )
+
+ const selectedTypeMeta = cacheTypes.find(
+ (entry) => entry.type === selectedType
+ )
+
+ const actionItems = cacheTypes
+ .filter((entry) => {
+ if (
+ categoryFilter !== 'All' &&
+ getCacheTypeCategory(entry.type) !== categoryFilter
+ ) {
+ return false
+ }
+ if (!typeFilter) return true
+ const needle = String(typeFilter).toLowerCase()
+ return (
+ entry.type.toLowerCase().includes(needle) ||
+ entry.friendlyName?.toLowerCase().includes(needle) ||
+ entry.description?.toLowerCase().includes(needle)
+ )
+ })
+ .map((entry) => ({
+ label: `${entry.friendlyName} (${entry.type})`,
+ customFunction: () => handleTypeSelect(entry.type),
+ noConfirm: true,
+ }))
+
+ const propertyItems = [
+ {
+ label: '',
+ value: (
+
+
+
+
+
+
+ ),
+ sx: {
+ '& .MuiInputAdornment-root': {
+ marginTop: '0 !important',
+ marginBottom: '0 !important',
+ alignSelf: 'center',
+ },
+ },
+ },
+ }}
+ />
+
+
+ setCategoryMenuAnchor(event.currentTarget)}
+ aria-label="Filter cache categories"
+ >
+
+
+
+
+ ),
+ },
+ ]
+
+ const isSyncable =
+ Boolean(selectedType) && !NON_SYNCABLE_TYPES.includes(selectedType)
+
+ const syncConfirmText =
+ tenantValue === 'AllTenants' ? (
+
+ Re-collect {selectedType} from Microsoft for{' '}
+ every tenant and write it back to the cache? This
+ queues one job per tenant and runs in the background.
+
+ ) : (
+
+ Re-collect {selectedType} from Microsoft for{' '}
+ {tenantValue} and write it back to the cache? This runs
+ in the background; the grid refreshes when the queue finishes.
+
+ )
+
+ const emptyConfirmText =
+ tenantValue === 'AllTenants' ? (
+
+
+ Empty {selectedType} for AllTenants?
+ This deletes every row of that cache type across every tenant
+ partition, including count metadata. Data returns only after the next
+ cache sync. This cannot be undone.
+
+
+ ) : (
+
+
+ Empty {selectedType} for{' '}
+ {tenantValue}? This deletes all rows for that cache
+ type on the tenant, including count metadata. Data returns only after
+ the next cache sync. This cannot be undone.
+
+
+ )
+
+ return (
+
+
+ {pageTitle}
+
+
+ SuperAdmin tool for browsing and clearing CIPPDB reporting cache
+ collections. Deletes are permanent until the next nightly or manual
+ cache sync. Prefer this over Table Maintenance when working with
+ CippReportingDB.
+
+
+
+
+
+
+
+
+ Tenant
+
+
+ {tenantValue ?? 'Select a tenant in the header'}
+
+
+
+ {selectedType && (
+
+
+
+
+
+
+
+
+
+ }
+ actions={[
+ {
+ label: 'Delete',
+ type: 'POST',
+ icon: (
+
+
+ ),
+ url: apiUrl,
+ customFunction: (row) => {
+ const rows = Array.isArray(row) ? row : [row]
+ rowAction.mutate({
+ url: apiUrl,
+ data: {
+ Action: 'Remove',
+ Type: selectedType,
+ TenantFilter: tenantValue,
+ Rows: rows.map((r) => ({
+ CIPPPartitionKey: r.CIPPPartitionKey,
+ CIPPRowKey: r.CIPPRowKey,
+ CIPPETag: r.CIPPETag,
+ })),
+ },
+ })
+ },
+ confirmText:
+ 'Delete the selected cache record(s)? This cannot be undone until the cache is synced again.',
+ multiPost: true,
+ },
+ ]}
+ />
+
+ )}
+
+ {!selectedType && (
+
+ Select a cache type to browse its rows for a tenant.
+
+ )}
+
+
+
+
+ {
+ if (result?.Metadata?.QueueId) {
+ setSyncQueueId(result.Metadata.QueueId)
+ }
+ },
+ }}
+ />
+
+ ({
+ Action: 'Empty',
+ Type: selectedType,
+ TenantFilter: tenantValue,
+ }),
+ onSuccess: () => {
+ // Invalidate any in-flight List so it cannot repopulate the grid after Empty.
+ loadGeneration.current += 1
+ setTableData([])
+ handleLoad()
+ },
+ }}
+ />
+
+ )
+}
+
+Page.getLayout = (page) => {page}
+
+export default Page
diff --git a/src/pages/cipp/advanced/container-management/custom-domains.js b/src/pages/cipp/advanced/container-management/custom-domains.js
deleted file mode 100644
index 3015eddc612d..000000000000
--- a/src/pages/cipp/advanced/container-management/custom-domains.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Container } from '@mui/material'
-import { TabbedLayout } from '../../../../layouts/TabbedLayout'
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import tabOptions from './tabOptions'
-import { CippAppServiceDomains } from '../../../../components/CippSettings/CippAppServiceDomains'
-
-const Page = () => {
- return (
-
-
- )
-}
-
-Page.getLayout = (page) => (
-
- {page}
-
-)
-
-export default Page
diff --git a/src/pages/cipp/advanced/container-management/custom-domains.jsx b/src/pages/cipp/advanced/container-management/custom-domains.jsx
new file mode 100644
index 000000000000..9967a731a8ac
--- /dev/null
+++ b/src/pages/cipp/advanced/container-management/custom-domains.jsx
@@ -0,0 +1,21 @@
+import { Container } from '@mui/material'
+import { TabbedLayout } from '../../../../layouts/TabbedLayout'
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import tabOptions from './tabOptions'
+import { CippAppServiceDomains } from '../../../../components/CippSettings/CippAppServiceDomains'
+
+const Page = () => {
+ return (
+
+
+ )
+}
+
+Page.getLayout = (page) => (
+
+ {page}
+
+)
+
+export default Page
diff --git a/src/pages/cipp/advanced/container-management/logs.js b/src/pages/cipp/advanced/container-management/logs.js
deleted file mode 100644
index 44f7745e5388..000000000000
--- a/src/pages/cipp/advanced/container-management/logs.js
+++ /dev/null
@@ -1,589 +0,0 @@
-import { useState, useEffect, useMemo } from "react";
-import { useForm, useWatch } from "react-hook-form";
-import {
- Box,
- Button,
- Stack,
- Typography,
- Chip,
- Accordion,
- AccordionSummary,
- AccordionDetails,
- Alert,
- AlertTitle,
- Tab,
- Tabs,
-} from "@mui/material";
-import { ExpandMore, Search, Refresh, PlayArrow } from "@mui/icons-material";
-import { CippFormComponent } from "../../../../components/CippComponents/CippFormComponent";
-import { Grid } from "@mui/system";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { TabbedLayout } from "../../../../layouts/TabbedLayout";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage";
-import { ApiGetCall } from "../../../../api/ApiCall";
-import defaultPresets from "../../../../data/ContainerLogPresets.json";
-import tabOptions from "./tabOptions";
-import { CippExpandableAlert } from "../../../../components/CippComponents/CippExpandableAlert";
-
-const levelOptions = [
- { label: "All Levels", value: "" },
- { label: "Debug", value: "DBG" },
- { label: "Information", value: "INF" },
- { label: "Warning", value: "WRN" },
- { label: "Error", value: "ERR" },
- { label: "Critical", value: "CRT" },
-];
-
-const timeRangeOptions = [
- { label: "Last 15 minutes", value: "15" },
- { label: "Last 30 minutes", value: "30" },
- { label: "Last 1 hour", value: "60" },
- { label: "Last 3 hours", value: "180" },
- { label: "Last 6 hours", value: "360" },
- { label: "Last 12 hours", value: "720" },
- { label: "Last 24 hours", value: "1440" },
- { label: "Custom Range", value: "custom" },
- { label: "No Time Filter", value: "" },
-];
-
-const getLevelColor = (level) => {
- switch (level) {
- case "CRT":
- return "error";
- case "ERR":
- return "error";
- case "WRN":
- return "warning";
- case "INF":
- return "info";
- case "DBG":
- return "default";
- default:
- return "default";
- }
-};
-
-const getLevelLabel = (level) => {
- switch (level) {
- case "CRT":
- return "Critical";
- case "ERR":
- return "Error";
- case "WRN":
- return "Warning";
- case "INF":
- return "Info";
- case "DBG":
- return "Debug";
- case "TRC":
- return "Trace";
- default:
- return level || "Unknown";
- }
-};
-
-const ContainerLogsFilter = ({ onSubmitFilter }) => {
- const [expanded, setExpanded] = useState(true);
- const [tabValue, setTabValue] = useState(0); // 0 = Query, 1 = Guided
- const [selectedPreset, setSelectedPreset] = useState(null);
-
- // Query mode form
- const queryForm = useForm({
- mode: "onChange",
- defaultValues: {
- queryPreset: null,
- query: 'where Timestamp > ago(1h)\n| take 500\n| sort by Timestamp desc',
- },
- });
-
- const queryValue = useWatch({ control: queryForm.control, name: "query" });
- const queryPreset = useWatch({ control: queryForm.control, name: "queryPreset" });
-
- // Guided mode form
- const guidedForm = useForm({
- mode: "onChange",
- defaultValues: {
- timeRange: "60",
- level: "",
- search: "",
- exclude: "",
- regex: "",
- file: "",
- tail: "500",
- searchAll: false,
- sortDesc: true,
- fromDate: "",
- toDate: "",
- },
- });
-
- const timeRange = useWatch({ control: guidedForm.control, name: "timeRange" });
-
- // Preset options (built-in only — no API save/load for container log presets)
- const presetOptions = useMemo(
- () =>
- defaultPresets.map((preset) => ({
- label: preset.name,
- value: preset.id,
- query: preset.query,
- isBuiltin: true,
- })),
- []
- );
-
- // Load preset when selected
- useEffect(() => {
- if (queryPreset) {
- const preset = Array.isArray(queryPreset) ? queryPreset[0] : queryPreset;
- if (preset?.query) {
- queryForm.setValue("query", preset.query);
- setSelectedPreset(preset);
- queryForm.setValue("queryPreset", null);
- }
- }
- }, [queryPreset, queryForm]);
-
- const fileListQuery = ApiGetCall({
- url: "/api/ListContainerLogs",
- data: { Action: "ListFiles" },
- queryKey: "ContainerLogFiles",
- });
-
- const fileOptions = useMemo(() => {
- const opts = [{ label: "Current Log", value: "" }];
- if (fileListQuery.isSuccess && fileListQuery.data?.Results) {
- fileListQuery.data.Results.forEach((f) => {
- if (!f.IsCurrent) {
- opts.push({
- label: `${f.Name} (${f.SizeFormatted})`,
- value: f.Name,
- });
- }
- });
- }
- return opts;
- }, [fileListQuery.isSuccess, fileListQuery.data]);
-
- // Submit query mode
- const handleQuerySubmit = queryForm.handleSubmit((values) => {
- if (values.query && values.query.trim()) {
- onSubmitFilter({
- Action: "Query",
- Query: values.query.trim(),
- });
- setExpanded(false);
- }
- });
-
- // Submit guided mode
- const handleGuidedSubmit = guidedForm.handleSubmit((values) => {
- const params = {
- Action: values.searchAll ? "SearchAll" : "ReadLog",
- Tail: values.tail || "500",
- };
-
- if (values.sortDesc) params.SortDesc = "true";
-
- // Level filter
- const levelVal = Array.isArray(values.level) ? values.level[0]?.value : values.level;
- if (levelVal) params.Level = levelVal;
-
- // Search text
- if (values.search) params.Search = values.search;
-
- // Exclude text
- if (values.exclude) params.Exclude = values.exclude;
-
- // Regex pattern
- if (values.regex) params.Regex = values.regex;
-
- // File selection
- const fileVal = Array.isArray(values.file) ? values.file[0]?.value : values.file;
- if (fileVal && !values.searchAll) params.File = fileVal;
-
- // Time range
- const rangeVal = Array.isArray(values.timeRange)
- ? values.timeRange[0]?.value
- : values.timeRange;
- if (rangeVal === "custom") {
- if (values.fromDate) params.From = new Date(values.fromDate).toISOString();
- if (values.toDate) params.To = new Date(values.toDate).toISOString();
- } else if (rangeVal && rangeVal !== "") {
- const minutes = parseInt(rangeVal, 10);
- if (!isNaN(minutes)) {
- params.From = new Date(Date.now() - minutes * 60 * 1000).toISOString();
- }
- }
-
- onSubmitFilter(params);
- setExpanded(false);
- });
-
- const handleClear = () => {
- if (tabValue === 0) {
- queryForm.reset();
- setSelectedPreset(null);
- } else {
- guidedForm.reset();
- }
- onSubmitFilter(null);
- setExpanded(true);
- };
-
- return (
- setExpanded(!expanded)}>
- Log Query
-
-
-
- setTabValue(v)}
- sx={{ borderBottom: 1, borderColor: "divider" }}
- >
-
-
- {/* ── Tab 0: Query Editor ── */}
- {tabValue === 0 && (
-
-
-
- Query Syntax
-
- Use a KQL-inspired pipe syntax to filter container logs. Separate clauses with{" "}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ago(1h)\n| take 500\n| sort by Timestamp desc`}
- sx={{
- "& textarea": {
- fontFamily: "monospace",
- fontSize: "0.875rem",
- },
- }}
- />
-
-
- }
- disabled={!queryValue || !queryValue.trim()}
- >
- Run Query
-
-
-
-
-
- )}
-
- {/* ── Tab 1: Guided Filter ── */}
- {tabValue === 1 && (
-
-
-
- Search the local container log files directly. Logs are rotated by size and
- retained on disk. Use “Search All Files” to search across rotated log
- files.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {(Array.isArray(timeRange) ? timeRange[0]?.value : timeRange) === "custom" && (
-
-
-
-
-
-
- )}
-
-
-
-
-
-
-
-
-
- }>
- Search Logs
-
-
-
-
-
- )}
-
-
-
- );
-};
-
-const Page = () => {
- const [apiFilter, setApiFilter] = useState(null);
- const queryKey = JSON.stringify(apiFilter);
-
- return (
-
-
-
-
- }
- clearOnError={true}
- offCanvas={{
- size: "lg",
- children: (row) => {
- const levelColor = getLevelColor(row.Level);
- return (
-
-
-
-
-
- {row.Timestamp}
-
-
-
-
-
- Message
-
-
-
- {row.Message}
-
-
-
- {row.Raw && row.Raw !== row.Message && (
-
-
- Raw Log Line
-
-
-
- {row.Raw}
-
-
-
- )}
-
-
- );
- },
- }}
- title="Container Logs"
- tenantInTitle={false}
- apiDataKey="Results"
- apiUrl={apiFilter ? "/api/ListContainerLogs" : "/api/ListEmptyResults"}
- apiData={apiFilter}
- queryKey={queryKey}
- simpleColumns={["Timestamp", "Level", "Message"]}
- actions={[]}
- />
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/advanced/container-management/logs.jsx b/src/pages/cipp/advanced/container-management/logs.jsx
new file mode 100644
index 000000000000..79a14b4fd40d
--- /dev/null
+++ b/src/pages/cipp/advanced/container-management/logs.jsx
@@ -0,0 +1,600 @@
+import { useState, useEffect, useMemo } from "react";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { useForm, useWatch } from "react-hook-form";
+import {
+ Box,
+ Button,
+ Stack,
+ Typography,
+ Chip,
+ Accordion,
+ AccordionSummary,
+ AccordionDetails,
+ Alert,
+ AlertTitle,
+ Tab,
+ Tabs,
+} from "@mui/material";
+import { CippFormComponent } from "../../../../components/CippComponents/CippFormComponent";
+import { Grid } from "@mui/system";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { TabbedLayout } from "../../../../layouts/TabbedLayout";
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage";
+import { ApiGetCall } from "../../../../api/ApiCall";
+import defaultPresets from "../../../../data/ContainerLogPresets.json";
+import tabOptions from "./tabOptions";
+import { CippExpandableAlert } from "../../../../components/CippComponents/CippExpandableAlert";
+
+const levelOptions = [
+ { label: "All Levels", value: "" },
+ { label: "Debug", value: "DBG" },
+ { label: "Information", value: "INF" },
+ { label: "Warning", value: "WRN" },
+ { label: "Error", value: "ERR" },
+ { label: "Critical", value: "CRT" },
+];
+
+const timeRangeOptions = [
+ { label: "Last 15 minutes", value: "15" },
+ { label: "Last 30 minutes", value: "30" },
+ { label: "Last 1 hour", value: "60" },
+ { label: "Last 3 hours", value: "180" },
+ { label: "Last 6 hours", value: "360" },
+ { label: "Last 12 hours", value: "720" },
+ { label: "Last 24 hours", value: "1440" },
+ { label: "Custom Range", value: "custom" },
+ { label: "No Time Filter", value: "" },
+];
+
+const getLevelColor = (level) => {
+ switch (level) {
+ case "CRT":
+ return "error";
+ case "ERR":
+ return "error";
+ case "WRN":
+ return "warning";
+ case "INF":
+ return "info";
+ case "DBG":
+ return "default";
+ default:
+ return "default";
+ }
+};
+
+const getLevelLabel = (level) => {
+ switch (level) {
+ case "CRT":
+ return "Critical";
+ case "ERR":
+ return "Error";
+ case "WRN":
+ return "Warning";
+ case "INF":
+ return "Info";
+ case "DBG":
+ return "Debug";
+ case "TRC":
+ return "Trace";
+ default:
+ return level || "Unknown";
+ }
+};
+
+const ContainerLogsFilter = ({ onSubmitFilter }) => {
+ const [expanded, setExpanded] = useState(true);
+ const [tabValue, setTabValue] = useState(0); // 0 = Query, 1 = Guided
+ const [selectedPreset, setSelectedPreset] = useState(null);
+
+ // Query mode form
+ const queryForm = useForm({
+ mode: "onChange",
+ defaultValues: {
+ queryPreset: null,
+ query: 'where Timestamp > ago(1h)\n| take 500\n| sort by Timestamp desc',
+ },
+ });
+
+ const queryValue = useWatch({ control: queryForm.control, name: "query" });
+ const queryPreset = useWatch({ control: queryForm.control, name: "queryPreset" });
+
+ // Guided mode form
+ const guidedForm = useForm({
+ mode: "onChange",
+ defaultValues: {
+ timeRange: "60",
+ level: "",
+ search: "",
+ exclude: "",
+ regex: "",
+ file: "",
+ tail: "500",
+ searchAll: false,
+ sortDesc: true,
+ fromDate: "",
+ toDate: "",
+ },
+ });
+
+ const timeRange = useWatch({ control: guidedForm.control, name: "timeRange" });
+
+ // Preset options (built-in only — no API save/load for container log presets)
+ const presetOptions = useMemo(
+ () =>
+ defaultPresets.map((preset) => ({
+ label: preset.name,
+ value: preset.id,
+ query: preset.query,
+ isBuiltin: true,
+ })),
+ []
+ );
+
+ // Load preset when selected
+ useEffect(() => {
+ if (queryPreset) {
+ const preset = Array.isArray(queryPreset) ? queryPreset[0] : queryPreset;
+ if (preset?.query) {
+ queryForm.setValue("query", preset.query);
+ setSelectedPreset(preset);
+ queryForm.setValue("queryPreset", null);
+ }
+ }
+ }, [queryPreset, queryForm]);
+
+ const fileListQuery = ApiGetCall({
+ url: "/api/ListContainerLogs",
+ data: { Action: "ListFiles" },
+ queryKey: "ContainerLogFiles",
+ });
+
+ const fileOptions = useMemo(() => {
+ const opts = [{ label: "Current Log", value: "" }];
+ if (fileListQuery.isSuccess && fileListQuery.data?.Results) {
+ fileListQuery.data.Results.forEach((f) => {
+ if (!f.IsCurrent) {
+ opts.push({
+ label: `${f.Name} (${f.SizeFormatted})`,
+ value: f.Name,
+ });
+ }
+ });
+ }
+ return opts;
+ }, [fileListQuery.isSuccess, fileListQuery.data]);
+
+ // Submit query mode
+ const handleQuerySubmit = queryForm.handleSubmit((values) => {
+ if (values.query && values.query.trim()) {
+ onSubmitFilter({
+ Action: "Query",
+ Query: values.query.trim(),
+ });
+ setExpanded(false);
+ }
+ });
+
+ // Submit guided mode
+ const handleGuidedSubmit = guidedForm.handleSubmit((values) => {
+ const params = {
+ Action: values.searchAll ? "SearchAll" : "ReadLog",
+ Tail: values.tail || "500",
+ };
+
+ if (values.sortDesc) params.SortDesc = "true";
+
+ // Level filter
+ const levelVal = Array.isArray(values.level) ? values.level[0]?.value : values.level;
+ if (levelVal) params.Level = levelVal;
+
+ // Search text
+ if (values.search) params.Search = values.search;
+
+ // Exclude text
+ if (values.exclude) params.Exclude = values.exclude;
+
+ // Regex pattern
+ if (values.regex) params.Regex = values.regex;
+
+ // File selection
+ const fileVal = Array.isArray(values.file) ? values.file[0]?.value : values.file;
+ if (fileVal && !values.searchAll) params.File = fileVal;
+
+ // Time range
+ const rangeVal = Array.isArray(values.timeRange)
+ ? values.timeRange[0]?.value
+ : values.timeRange;
+ if (rangeVal === "custom") {
+ if (values.fromDate) params.From = new Date(values.fromDate).toISOString();
+ if (values.toDate) params.To = new Date(values.toDate).toISOString();
+ } else if (rangeVal && rangeVal !== "") {
+ const minutes = parseInt(rangeVal, 10);
+ if (!isNaN(minutes)) {
+ params.From = new Date(Date.now() - minutes * 60 * 1000).toISOString();
+ }
+ }
+
+ onSubmitFilter(params);
+ setExpanded(false);
+ });
+
+ const handleClear = () => {
+ if (tabValue === 0) {
+ queryForm.reset();
+ setSelectedPreset(null);
+ } else {
+ guidedForm.reset();
+ }
+ onSubmitFilter(null);
+ setExpanded(true);
+ };
+
+ return (
+ setExpanded(!expanded)}>
+ Log Query
+
+
+
+ setTabValue(v)}
+ sx={{ borderBottom: 1, borderColor: "divider" }}
+ >
+
+
+ {/* ── Tab 0: Query Editor ── */}
+ {tabValue === 0 && (
+
+
+
+ Query Syntax
+
+ Use a KQL-inspired pipe syntax to filter container logs. Separate clauses with{" "}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ago(1h)\n| take 500\n| sort by Timestamp desc`}
+ sx={{
+ "& textarea": {
+ fontFamily: "monospace",
+ fontSize: "0.875rem",
+ },
+ }}
+ />
+
+
+ }
+ disabled={!queryValue || !queryValue.trim()}
+ >
+ Run Query
+
+
+
+
+
+ )}
+
+ {/* ── Tab 1: Guided Filter ── */}
+ {tabValue === 1 && (
+
+
+
+ Search the local container log files directly. Logs are rotated by size and
+ retained on disk. Use “Search All Files” to search across rotated log
+ files.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {(Array.isArray(timeRange) ? timeRange[0]?.value : timeRange) === "custom" && (
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ }>
+ Search Logs
+
+
+
+
+
+ )}
+
+
+
+ );
+};
+
+const Page = () => {
+ const [apiFilter, setApiFilter] = useState(null);
+ const queryKey = JSON.stringify(apiFilter);
+
+ return (
+
+
+
+
+ }
+ clearOnError={true}
+ offCanvas={{
+ size: "lg",
+ children: (row) => {
+ const levelColor = getLevelColor(row.Level);
+ return (
+
+
+
+
+
+ {row.Timestamp}
+
+
+
+
+
+ Message
+
+
+
+ {row.Message}
+
+
+
+ {row.Raw && row.Raw !== row.Message && (
+
+
+ Raw Log Line
+
+
+
+ {row.Raw}
+
+
+
+ )}
+
+
+ );
+ },
+ }}
+ title="Container Logs"
+ tenantInTitle={false}
+ apiDataKey="Results"
+ apiUrl={apiFilter ? "/api/ListContainerLogs" : "/api/ListEmptyResults"}
+ apiData={apiFilter}
+ queryKey={queryKey}
+ simpleColumns={["Timestamp", "Level", "Message"]}
+ actions={[]}
+ />
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
+
diff --git a/src/pages/cipp/advanced/container-management/status.js b/src/pages/cipp/advanced/container-management/status.js
deleted file mode 100644
index 8e0d27ce6217..000000000000
--- a/src/pages/cipp/advanced/container-management/status.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Container } from '@mui/material'
-import { TabbedLayout } from '../../../../layouts/TabbedLayout'
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import tabOptions from './tabOptions'
-import { CippContainerManagement } from '../../../../components/CippSettings/CippContainerManagement'
-
-const Page = () => {
- return (
-
-
- )
-}
-
-Page.getLayout = (page) => (
-
- {page}
-
-)
-
-export default Page
diff --git a/src/pages/cipp/advanced/container-management/status.jsx b/src/pages/cipp/advanced/container-management/status.jsx
new file mode 100644
index 000000000000..c569c8310d11
--- /dev/null
+++ b/src/pages/cipp/advanced/container-management/status.jsx
@@ -0,0 +1,21 @@
+import { Container } from '@mui/material'
+import { TabbedLayout } from '../../../../layouts/TabbedLayout'
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import tabOptions from './tabOptions'
+import { CippContainerManagement } from '../../../../components/CippSettings/CippContainerManagement'
+
+const Page = () => {
+ return (
+
+
+ )
+}
+
+Page.getLayout = (page) => (
+
+ {page}
+
+)
+
+export default Page
diff --git a/src/pages/cipp/advanced/container-management/worker-health.js b/src/pages/cipp/advanced/container-management/worker-health.js
deleted file mode 100644
index 27a5b422cc75..000000000000
--- a/src/pages/cipp/advanced/container-management/worker-health.js
+++ /dev/null
@@ -1,1242 +0,0 @@
-import { Fragment, useCallback, useMemo, useRef, useState } from "react";
-import Head from "next/head";
-import {
- Box,
- Button,
- Card,
- CardContent,
- CardHeader,
- Chip,
- CircularProgress,
- Container,
- IconButton,
- LinearProgress,
- Stack,
- Table,
- TableBody,
- TableCell,
- TableContainer,
- TableHead,
- TableRow,
- ToggleButton,
- ToggleButtonGroup,
- Tooltip,
- Typography,
-} from "@mui/material";
-import {
- Memory,
- Speed,
- PlayArrow,
- HourglassEmpty,
- CheckCircle,
- Warning,
- Cancel,
- Delete,
- LowPriority,
- Timeline,
- RocketLaunch,
- Pause,
- FileDownload,
- FileUpload,
- Refresh,
- Close,
-} from "@mui/icons-material";
-import { Grid } from "@mui/system";
-import { useTheme } from "@mui/material/styles";
-import { useQueryClient } from "@tanstack/react-query";
-import {
- AreaChart,
- Area,
- LineChart,
- Line,
- BarChart,
- Bar,
- CartesianGrid,
- XAxis,
- YAxis,
- ResponsiveContainer,
- Tooltip as RechartsTooltip,
- Legend,
-} from "recharts";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { TabbedLayout } from "../../../../layouts/TabbedLayout";
-import { CippInfoBar } from "../../../../components/CippCards/CippInfoBar";
-import { CippDataTable } from "../../../../components/CippTable/CippDataTable";
-import { ApiGetCall, ApiPostCall } from "../../../../api/ApiCall";
-import tabOptions from "./tabOptions";
-import { useTitleClaimedByTabPicker } from "../../../../layouts/tab-navigation-context";
-
-const formatDuration = (ms) => {
- if (ms === 0 || ms == null) return "—";
- if (ms < 1000) return `${ms}ms`;
- if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
- return `${(ms / 60000).toFixed(1)}m`;
-};
-
-const formatUptime = (seconds) => {
- if (!seconds) return "—";
- const h = Math.floor(seconds / 3600);
- const m = Math.floor((seconds % 3600) / 60);
- if (h > 0) return `${h}h ${m}m`;
- return `${m}m`;
-};
-
-const WorkerStatusChip = ({ isBusy, currentFunction }) => {
- if (isBusy) {
- return (
-
-
- );
- }
- return
-
- 80 ? "error" : value > 50 ? "warning" : "primary"}
- sx={{ height: 8, borderRadius: 4 }}
- />
-
-
- {value}%
-
-
-);
-
-const WorkerTable = ({ workers, title }) => {
- if (!workers || workers.length === 0) return null;
-
- return (
-
-
-
-
-
-
-
-
- );
-};
-
-const TIME_RANGES = [
- { label: "1h", minutes: 60 },
- { label: "6h", minutes: 360 },
- { label: "24h", minutes: 1440 },
- { label: "3d", minutes: 4320 },
- { label: "7d", minutes: 10080 },
-];
-
-const formatChartTime = (timestamp, rangeMinutes) => {
- const d = new Date(timestamp);
- if (rangeMinutes <= 1440) {
- return d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
- }
- return d.toLocaleDateString("en-US", {
- month: "short",
- day: "numeric",
- hour: "2-digit",
- minute: "2-digit",
- });
-};
-
-const STARTUP_PHASES = [
- { key: "BaseWorkerMs", label: "Base Worker", fkey: "BaseFunctionCount", color: "#7c4dff" },
- { key: "WarmupMs", label: "Warmup", fkey: null, color: "#ffc107" },
- { key: "HttpReadyMs", label: "HTTP Ready", fkey: "HttpFunctionCount", color: "#00c853" },
- { key: "HttpPoolFullMs", label: "HTTP Pool Full", fkey: null, color: "#69f0ae" },
- { key: "BgReadyMs", label: "BG Ready", fkey: "BgFunctionCount", color: "#29b6f6" },
- { key: "FullyReadyMs", label: "Fully Ready", fkey: null, color: "#66bb6a" },
-];
-
-const StartupTimingBar = ({ startup }) => {
- if (!startup) return null;
-
- // Build segments as incremental durations between phases
- const phases = STARTUP_PHASES.filter((p) => startup[p.key] > 0);
- const totalMs = startup.FullyReadyMs || Math.max(...phases.map((p) => startup[p.key]), 1);
-
- // Compute incremental segments (each phase = cumulative time to that point)
- const segments = phases.map((phase, i) => {
- const cumMs = startup[phase.key];
- const prevMs = i > 0 ? startup[phases[i - 1].key] : 0;
- const deltaMs = Math.max(cumMs - prevMs, 0);
- return {
- ...phase,
- cumMs,
- deltaMs,
- pct: totalMs > 0 ? (deltaMs / totalMs) * 100 : 0,
- functions: phase.fkey ? startup[phase.fkey] : null,
- };
- });
-
- return (
-
-
- {/* Single horizontal stacked bar */}
-
- {segments.map((seg) => (
-
-
- {seg.label}
-
-
- {formatDuration(seg.deltaMs)} (cumulative: {formatDuration(seg.cumMs)})
-
- {seg.functions != null && (
-
- {seg.functions} functions loaded
-
- )}
-
- }
- >
- 8 ? 0 : 4,
- cursor: "pointer",
- transition: "filter 0.15s",
- "&:hover": { filter: "brightness(1.2)" },
- }}
- >
- {seg.pct > 12 && (
-
- {formatDuration(seg.deltaMs)}
-
- )}
-
-
- ))}
-
- {/* Legend */}
-
- {segments.map((seg) => (
-
-
- {seg.label}
- {seg.functions != null && ` (${seg.functions})`}
-
-
- ))}
-
- Modules: {startup.SharedModuleCount} shared
- {startup.HttpOnlyModuleCount > 0 && `, ${startup.HttpOnlyModuleCount} HTTP`}
- {startup.BgOnlyModuleCount > 0 && `, ${startup.BgOnlyModuleCount} BG`}
-
-
-
-
- );
-};
-
-const CompactStatsRow = ({ snapshot }) => {
- if (!snapshot) return null;
-
- const http = snapshot.HttpPool || {};
- const bg = snapshot.BgPool || {};
- const jobs = snapshot.Jobs || {};
- const limiter = snapshot.Limiter || {};
- const mem = snapshot.Memory || {};
-
- const sections = [
- {
- label: "HTTP Pool",
- color: "primary",
- stats: [
- { k: "Size", v: http.PoolSize ?? 0 },
- { k: "Busy", v: http.BusyCount ?? 0, w: http.BusyCount >= http.PoolSize },
- { k: "Invocations", v: http.TotalInvocations?.toLocaleString() ?? 0 },
- { k: "Util", v: `${http.AvgUtilizationPct ?? 0}%`, w: http.AvgUtilizationPct > 80 },
- { k: "Avg", v: formatDuration(http.AvgDurationMs) },
- { k: "Faults", v: http.TotalFaults ?? 0, w: http.TotalFaults > 0 },
- ],
- },
- {
- label: "BG Pool",
- color: "warning",
- stats: [
- { k: "Size", v: bg.PoolSize ?? 0 },
- { k: "Busy", v: bg.BusyCount ?? 0, w: bg.BusyCount >= bg.PoolSize },
- { k: "Invocations", v: bg.TotalInvocations?.toLocaleString() ?? 0 },
- { k: "Util", v: `${bg.AvgUtilizationPct ?? 0}%`, w: bg.AvgUtilizationPct > 80 },
- { k: "Avg", v: formatDuration(bg.AvgDurationMs) },
- { k: "Faults", v: bg.TotalFaults ?? 0, w: bg.TotalFaults > 0 },
- ],
- },
- {
- label: "Jobs",
- color: "info",
- stats: [
- { k: "Running", v: jobs.Running ?? 0 },
- { k: "Queued", v: jobs.Queued ?? 0, w: jobs.Queued > 10 },
- { k: "Done", v: jobs.Completed?.toLocaleString() ?? 0 },
- { k: "Failed", v: jobs.Failed ?? 0, w: jobs.Failed > 0 },
- // Stale queue entries whose task was gone by dispatch time — benign, so never flagged.
- { k: "Skipped", v: jobs.Skipped ?? 0 },
- ],
- },
- {
- label: "Limiter",
- color: "default",
- stats: [
- { k: "Active", v: `${limiter.Active ?? 0} / ${limiter.CurrentMax ?? 0}` },
- { k: "Waiting", v: limiter.Waiting ?? 0 },
- ...(limiter.IsHttpThrottled ? [{ k: "Status", v: "Throttled", w: true }] : []),
- ],
- },
- {
- label: "Memory",
- color: "secondary",
- stats: [
- { k: "Container", v: `${mem.ContainerUsedMB ?? mem.RssMB ?? 0} / ${mem.ContainerLimitMB ?? 0}MB`, w: mem.UsagePct > 85 },
- { k: "App RSS", v: `${mem.RssMB ?? 0}MB` },
- { k: "Other", v: `${mem.OtherRssMB ?? 0}MB` },
- { k: "GC Heap", v: `${mem.HeapMB ?? 0}MB` },
- { k: "Committed", v: `${mem.CommittedMB ?? 0}MB` },
- { k: "GC Limit", v: `${mem.GCHeapLimitMB ?? 0}MB` },
- { k: "Usage", v: `${mem.UsagePct ?? 0}%`, w: mem.UsagePct > 85 },
- { k: "GC", v: `${mem.GC0 ?? 0}/${mem.GC1 ?? 0}/${mem.GC2 ?? 0}` },
- ...(mem.TestDataCacheCount != null ? [{ k: "Cache", v: `${mem.TestDataCacheCount} entries` }] : []),
- ],
- },
- {
- label: "CPU",
- color: "warning",
- stats: [
- { k: "Container", v: `${mem.ContainerCpuPct ?? mem.CpuPct ?? 0}%`, w: (mem.ContainerCpuPct ?? 0) > 80 },
- { k: "App", v: `${mem.CpuPct ?? 0}%`, w: mem.CpuPct > 80 },
- { k: "Other", v: `${mem.OtherCpuPct ?? 0}%` },
- ],
- },
- ];
-
- return (
-
-
-
-
-
-
-
-
- );
-};
-
-const HistoryChart = ({ data, rangeMinutes, title, icon, children }) => {
- const theme = useTheme();
-
- if (!data || data.length === 0) {
- return (
-
-
-
-
- No historical data available yet — data collection starts after 60 seconds
-
-
-
-
- );
- }
-
- return (
-
-
-
- {/* numeric height, recharts warns before its first measure when both sizes are percentages */}
-
- {children(data, theme)}
-
-
-
-
- );
-};
-
-const Page = () => {
- const theme = useTheme();
- const titleClaimed = useTitleClaimedByTabPicker("Worker Health");
- const queryClient = useQueryClient();
- const fileInputRef = useRef(null);
- const [historyRange, setHistoryRange] = useState(60);
- const [paused, setPaused] = useState(false);
- const [importedData, setImportedData] = useState(null);
- const [jobLimit, setJobLimit] = useState(2000);
- const [jobStatus, setJobStatus] = useState("");
-
- const isImported = importedData !== null;
- const effectivePaused = paused || isImported;
-
- const healthQuery = ApiGetCall({
- url: "/api/ListWorkerHealth",
- data: { Action: "Snapshot" },
- queryKey: "WorkerHealth",
- refetchInterval: effectivePaused ? false : 5000,
- });
-
- const startupQuery = ApiGetCall({
- url: "/api/ListWorkerHealth",
- data: { Action: "Startup" },
- queryKey: "WorkerStartup",
- });
-
- const historyQuery = ApiGetCall({
- url: "/api/ListWorkerHealth",
- data: { Action: "History", Minutes: String(historyRange), MaxPoints: "500" },
- queryKey: `WorkerHistory-${historyRange}`,
- refetchInterval: effectivePaused ? false : 60000,
- });
-
- const jobAction = ApiPostCall({
- // wildcard: the job table's query key carries the limit/status suffix
- relatedQueryKeys: ["WorkerHealthJobs*", "WorkerHealth"],
- });
-
- const cacheDiagQuery = ApiGetCall({
- url: "/api/ListWorkerHealth",
- data: { Action: "CacheDiag" },
- queryKey: "WorkerCacheDiag",
- refetchInterval: effectivePaused ? false : 30000,
- });
-
- // Resolve data: imported overrides live
- const snapshot = isImported ? importedData.snapshot : healthQuery.data?.Results;
- const startupInfo = isImported ? importedData.startup : startupQuery.data?.Results;
- const importedJobs = useMemo(() => {
- if (!isImported || !importedData.jobs) return null;
- // Handle both array and { Results: [...] } shapes from query cache
- if (Array.isArray(importedData.jobs)) return importedData.jobs;
- if (Array.isArray(importedData.jobs?.Results)) return importedData.jobs.Results;
- if (Array.isArray(importedData.jobs?.data?.Results)) return importedData.jobs.data.Results;
- if (Array.isArray(importedData.jobs?.data)) return importedData.jobs.data;
- return [];
- }, [isImported, importedData]);
-
- const historyData = useMemo(() => {
- const raw = isImported
- ? importedData.history?.Data ?? importedData.history
- : historyQuery.data?.Results?.Data;
- if (!raw || !Array.isArray(raw)) return [];
- return raw.map((p) => ({
- ...p,
- time: formatChartTime(p.TimestampUtc, isImported ? importedData.historyRange ?? 60 : historyRange),
- }));
- }, [historyQuery.data, historyRange, importedData, isImported]);
-
- // ── Export ──
- const handleExport = useCallback(() => {
- const payload = {
- exportedAt: new Date().toISOString(),
- historyRange,
- snapshot: healthQuery.data?.Results ?? null,
- startup: startupQuery.data?.Results ?? null,
- history: historyQuery.data?.Results ?? null,
- jobs: null,
- };
- // Grab the job data for the currently selected limit/status only — a prefix match
- // would hand back a stale query from a previous filter.
- const jobsData = queryClient.getQueryData([`WorkerHealthJobs-${jobLimit}-${jobStatus}`]);
- if (jobsData) {
- // CippDataTable uses an infinite query, so the cache holds { pages: [{ Results }] }.
- const rows = Array.isArray(jobsData.pages)
- ? jobsData.pages.flatMap((page) => page?.Results ?? [])
- : (jobsData.Results ?? jobsData);
- if (Array.isArray(rows)) payload.jobs = rows;
- }
-
- const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
- const url = URL.createObjectURL(blob);
- const a = document.createElement("a");
- a.href = url;
- a.download = `worker-health-${new Date().toISOString().slice(0, 16).replace(/:/g, "")}.json`;
- a.click();
- URL.revokeObjectURL(url);
- }, [
- healthQuery.data,
- startupQuery.data,
- historyQuery.data,
- historyRange,
- queryClient,
- jobLimit,
- jobStatus,
- ]);
-
- // ── Import ──
- const handleImport = useCallback((event) => {
- const file = event.target.files?.[0];
- if (!file) return;
- const reader = new FileReader();
- reader.onload = (e) => {
- try {
- const data = JSON.parse(e.target.result);
- setImportedData(data);
- setPaused(true);
- } catch {
- // invalid JSON — ignore
- }
- };
- reader.readAsText(file);
- // Reset input so same file can be re-imported
- event.target.value = "";
- }, []);
-
- const handleClearImport = useCallback(() => {
- setImportedData(null);
- setPaused(false);
- }, []);
-
- const handleRefreshHistory = useCallback(() => {
- queryClient.invalidateQueries({ queryKey: [`WorkerHistory-${historyRange}`] });
- }, [queryClient, historyRange]);
-
- const infoBarData = useMemo(() => {
- if (!snapshot) return [];
- const http = snapshot.HttpPool || {};
- const bg = snapshot.BgPool || {};
- const jobs = snapshot.Jobs || {};
- const limiter = snapshot.Limiter || {};
-
- return [
- {
- icon: Worker Health | CIPP
-
-
-
-
- {/* ── Header toolbar ── */}
-
- {/* Empty Box keeps the toolbar on the right when the mobile tab picker has
- already said "Worker Health" directly above this row. */}
- {titleClaimed ? Worker Health }
-
- {isImported && (
-
- Uptime: {formatUptime(snapshot.UptimeSeconds)}
-
- )}
-
-
- setPaused((p) => !p)}
- color={effectivePaused ? "warning" : "default"}
- disabled={isImported}
- >
- {effectivePaused ? (
-
-
-
-
-
-
-
-
- fileInputRef.current?.click()}>
-
-
-
-
-
-
- {/* ── KPI bar ── */}
-
-
- {importedJobs.length === 0 ? (
-
-
- No job data was captured in this export
-
-
- ) : (
-
-
-
-
- )}
-
-
- ) : (
-
- val !== null && setJobStatus(val)}
- size="small"
- >
- {["", "Queued", "Running", "Completed", "Failed", "Cancelled", "Skipped"].map((s) => (
-
- {s || "All"}
-
- ))}
-
- val !== null && setJobLimit(val)}
- size="small"
- >
- {[500, 2000, 5000, 10000].map((n) => (
-
- {n >= 1000 ? `${n / 1000}k` : n}
-
- ))}
-
-
- }
- />
- )}
-
- {/* ── Historical Trends header with controls ── */}
-
-
- {!isImported && (
-
-
-
-
- )}
- val !== null && setHistoryRange(val)}
- size="small"
- disabled={isImported}
- >
- {TIME_RANGES.map((r) => (
-
- {r.label}
-
- ))}
-
-
- }
- />
-
-
-
-
-
-
- )}
-
-
-
-
-
- )}
-
-
-
-
-
-
-
-
- )}
-
-
-
-
-
- )}
-
-
-
-
-
-
-
-
- )}
-
-
-
-
-
- )}
-
-
-
-
- {/* ── TestData Cache Diagnostics ── */}
- {(() => {
- const diag = cacheDiagQuery.data?.Results;
- if (!diag) return null;
- const types = diag.TypeBreakdown ?? [];
- const trackedMB = diag.TrackedTotalMB ?? 0;
- const maxMB = diag.MaxMB ?? 0;
- const memPct = maxMB > 0 ? (trackedMB / maxMB) * 100 : 0;
- const totalReads = (diag.Hits ?? 0) + (diag.Misses ?? 0);
- const fmtUtc = (s) => (s ? new Date(s).toLocaleString() : "—");
-
- const cacheStats = [
- { k: "Hits", v: (diag.Hits ?? 0).toLocaleString() },
- { k: "Misses", v: (diag.Misses ?? 0).toLocaleString() },
- {
- k: "Hit Rate",
- v: `${diag.HitRate ?? 0}%`,
- w: totalReads > 100 && diag.HitRate < 50,
- },
- {
- k: "Evictions",
- v: (diag.Evictions ?? 0).toLocaleString(),
- w: (diag.Evictions ?? 0) > 0,
- },
- {
- k: "Oversized",
- v: (diag.Oversized ?? 0).toLocaleString(),
- w: (diag.Oversized ?? 0) > 0,
- tip: "Values that exceeded the per-entry size cap and were silently dropped — they were never cached.",
- },
- { k: "Accesses", v: (diag.AccessCount ?? 0).toLocaleString() },
- {
- k: "TTL",
- v: `${diag.TtlSeconds ?? 0}s`,
- tip: `Earliest expiry: ${fmtUtc(diag.EarliestExpiryUtc)} • Latest expiry: ${fmtUtc(diag.LatestExpiryUtc)}`,
- },
- ];
-
- return (
-
- 5000 ? "error" : diag.TotalEntries > 1000 ? "warning" : "success"}
- size="small"
- />
- }
- />
- 0 ? 2 : "12px !important" }}>
- {/* Capacity bar */}
-
-
-
- Capacity
-
-
- {trackedMB} / {maxMB} MB ({Math.round(memPct)}%)
-
-
- 85 ? "error" : memPct > 70 ? "warning" : "primary"}
- sx={{ height: 6, borderRadius: 3 }}
- />
-
- {/* Stats row */}
-
- {cacheStats.map((s) => {
- const cell = (
-
-
- {s.k}
-
-
- {s.v}
-
-
- );
- if (s.tip) {
- return (
-
- {cell}
-
- );
- }
- return {cell} ;
- })}
-
-
- {types.length > 0 && (
-
-
-
-
-
-
- )}
-
- );
- })()}
-
- {/* ── Startup Timing (bottom) ── */}
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/advanced/container-management/worker-health.jsx b/src/pages/cipp/advanced/container-management/worker-health.jsx
new file mode 100644
index 000000000000..67bf10c1c163
--- /dev/null
+++ b/src/pages/cipp/advanced/container-management/worker-health.jsx
@@ -0,0 +1,1417 @@
+import { Fragment, useCallback, useMemo, useRef, useState } from "react";
+import { CippIcons } from "../../../../utils/icon-registry"
+import Head from "next/head";
+import {
+ Box,
+ Button,
+ Card,
+ CardContent,
+ CardHeader,
+ Chip,
+ CircularProgress,
+ Container,
+ IconButton,
+ LinearProgress,
+ Stack,
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TableRow,
+ ToggleButton,
+ ToggleButtonGroup,
+ Tooltip,
+ Typography,
+} from "@mui/material";
+import { Grid } from "@mui/system";
+import { useTheme } from "@mui/material/styles";
+import { useQueryClient } from "@tanstack/react-query";
+import {
+ AreaChart,
+ Area,
+ LineChart,
+ Line,
+ BarChart,
+ Bar,
+ CartesianGrid,
+ XAxis,
+ YAxis,
+ ResponsiveContainer,
+ Tooltip as RechartsTooltip,
+ Legend,
+} from "recharts";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { TabbedLayout } from "../../../../layouts/TabbedLayout";
+import { CippInfoBar } from "../../../../components/CippCards/CippInfoBar";
+import { CippDataTable } from "../../../../components/CippTable/CippDataTable";
+import { ApiGetCall, ApiPostCall } from "../../../../api/ApiCall";
+import tabOptions from "./tabOptions";
+import { useTitleClaimedByTabPicker } from "../../../../layouts/tab-navigation-context";
+import { useIsNarrowForTables } from "../../../../hooks/use-breakpoint";
+
+const formatDuration = (ms) => {
+ if (ms === 0 || ms == null) return "—";
+ if (ms < 1000) return `${ms}ms`;
+ if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+ return `${(ms / 60000).toFixed(1)}m`;
+};
+
+const formatUptime = (seconds) => {
+ if (!seconds) return "—";
+ const h = Math.floor(seconds / 3600);
+ const m = Math.floor((seconds % 3600) / 60);
+ if (h > 0) return `${h}h ${m}m`;
+ return `${m}m`;
+};
+
+const WorkerStatusChip = ({ isBusy, currentFunction }) => {
+ if (isBusy) {
+ return (
+
+
+ );
+ }
+ return
+
+ 80 ? "error" : value > 50 ? "warning" : "primary"}
+ sx={{ height: 8, borderRadius: 4 }}
+ />
+
+
+ {value}%
+
+
+);
+
+// Stat pairs shared by the worker table columns and the narrow-screen cards.
+const workerStats = (w) => [
+ { k: "Invocations", v: w.TotalInvocations?.toLocaleString() ?? 0 },
+ { k: "Avg", v: formatDuration(w.AvgDurationMs) },
+ { k: "Min", v: formatDuration(w.MinDurationMs) },
+ { k: "Max", v: formatDuration(w.MaxDurationMs) },
+ { k: "Last", v: formatDuration(w.LastDurationMs) },
+ { k: "Alloc", v: w.TotalAllocMB != null ? `${w.TotalAllocMB} MB` : "—" },
+ { k: "Faults", v: w.TotalFaults ?? 0, w: w.TotalFaults > 0 },
+];
+
+const StatPair = ({ label, value, warn }) => (
+
+
+ {label}
+
+
+ {value}
+
+
+);
+
+const WorkerCards = ({ workers }) => (
+
+ {workers.map((w) => (
+ `1px solid ${t.palette.divider}`, borderRadius: 1, p: 1.5 }}
+ >
+
+
+ W{w.WorkerId}
+
+
+
+ {workerStats(w).map((s) => (
+
+
+ ))}
+
+);
+
+const WorkerTable = ({ workers, title }) => {
+ const isNarrow = useIsNarrowForTables();
+
+ if (!workers || workers.length === 0) return null;
+
+ return (
+
+
+ {isNarrow ? (
+
+
+
+
+ )}
+
+
+ );
+};
+
+const TIME_RANGES = [
+ { label: "1h", minutes: 60 },
+ { label: "6h", minutes: 360 },
+ { label: "24h", minutes: 1440 },
+ { label: "3d", minutes: 4320 },
+ { label: "7d", minutes: 10080 },
+];
+
+const formatChartTime = (timestamp, rangeMinutes) => {
+ const d = new Date(timestamp);
+ if (rangeMinutes <= 1440) {
+ return d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
+ }
+ return d.toLocaleDateString("en-US", {
+ month: "short",
+ day: "numeric",
+ hour: "2-digit",
+ minute: "2-digit",
+ });
+};
+
+const STARTUP_PHASES = [
+ { key: "BaseWorkerMs", label: "Base Worker", fkey: "BaseFunctionCount", color: "#7c4dff" },
+ { key: "WarmupMs", label: "Warmup", fkey: null, color: "#ffc107" },
+ { key: "HttpReadyMs", label: "HTTP Ready", fkey: "HttpFunctionCount", color: "#00c853" },
+ { key: "HttpPoolFullMs", label: "HTTP Pool Full", fkey: null, color: "#69f0ae" },
+ { key: "BgReadyMs", label: "BG Ready", fkey: "BgFunctionCount", color: "#29b6f6" },
+ { key: "FullyReadyMs", label: "Fully Ready", fkey: null, color: "#66bb6a" },
+];
+
+const StartupTimingBar = ({ startup }) => {
+ if (!startup) return null;
+
+ // Build segments as incremental durations between phases
+ const phases = STARTUP_PHASES.filter((p) => startup[p.key] > 0);
+ const totalMs = startup.FullyReadyMs || Math.max(...phases.map((p) => startup[p.key]), 1);
+
+ // Compute incremental segments (each phase = cumulative time to that point)
+ const segments = phases.map((phase, i) => {
+ const cumMs = startup[phase.key];
+ const prevMs = i > 0 ? startup[phases[i - 1].key] : 0;
+ const deltaMs = Math.max(cumMs - prevMs, 0);
+ return {
+ ...phase,
+ cumMs,
+ deltaMs,
+ pct: totalMs > 0 ? (deltaMs / totalMs) * 100 : 0,
+ functions: phase.fkey ? startup[phase.fkey] : null,
+ };
+ });
+
+ return (
+
+
+ {/* Single horizontal stacked bar */}
+
+ {segments.map((seg) => (
+
+
+ {seg.label}
+
+
+ {formatDuration(seg.deltaMs)} (cumulative: {formatDuration(seg.cumMs)})
+
+ {seg.functions != null && (
+
+ {seg.functions} functions loaded
+
+ )}
+
+ }
+ >
+ 8 ? 0 : 4,
+ cursor: "pointer",
+ transition: "filter 0.15s",
+ "&:hover": { filter: "brightness(1.2)" },
+ }}
+ >
+ {seg.pct > 12 && (
+
+ {formatDuration(seg.deltaMs)}
+
+ )}
+
+
+ ))}
+
+ {/* Legend */}
+
+ {segments.map((seg) => (
+
+
+ {seg.label}
+ {seg.functions != null && ` (${seg.functions})`}
+
+
+ ))}
+
+ Modules: {startup.SharedModuleCount} shared
+ {startup.HttpOnlyModuleCount > 0 && `, ${startup.HttpOnlyModuleCount} HTTP`}
+ {startup.BgOnlyModuleCount > 0 && `, ${startup.BgOnlyModuleCount} BG`}
+
+
+
+
+ );
+};
+
+const CompactStatsRow = ({ snapshot }) => {
+ const isNarrow = useIsNarrowForTables();
+
+ if (!snapshot) return null;
+
+ const http = snapshot.HttpPool || {};
+ const bg = snapshot.BgPool || {};
+ const jobs = snapshot.Jobs || {};
+ const limiter = snapshot.Limiter || {};
+ const mem = snapshot.Memory || {};
+
+ const sections = [
+ {
+ label: "HTTP Pool",
+ color: "primary",
+ stats: [
+ { k: "Size", v: http.PoolSize ?? 0 },
+ { k: "Busy", v: http.BusyCount ?? 0, w: http.BusyCount >= http.PoolSize },
+ { k: "Invocations", v: http.TotalInvocations?.toLocaleString() ?? 0 },
+ { k: "Util", v: `${http.AvgUtilizationPct ?? 0}%`, w: http.AvgUtilizationPct > 80 },
+ { k: "Avg", v: formatDuration(http.AvgDurationMs) },
+ { k: "Faults", v: http.TotalFaults ?? 0, w: http.TotalFaults > 0 },
+ ],
+ },
+ {
+ label: "BG Pool",
+ color: "warning",
+ stats: [
+ { k: "Size", v: bg.PoolSize ?? 0 },
+ { k: "Busy", v: bg.BusyCount ?? 0, w: bg.BusyCount >= bg.PoolSize },
+ { k: "Invocations", v: bg.TotalInvocations?.toLocaleString() ?? 0 },
+ { k: "Util", v: `${bg.AvgUtilizationPct ?? 0}%`, w: bg.AvgUtilizationPct > 80 },
+ { k: "Avg", v: formatDuration(bg.AvgDurationMs) },
+ { k: "Faults", v: bg.TotalFaults ?? 0, w: bg.TotalFaults > 0 },
+ ],
+ },
+ {
+ label: "Jobs",
+ color: "info",
+ stats: [
+ { k: "Running", v: jobs.Running ?? 0 },
+ { k: "Queued", v: jobs.Queued ?? 0, w: jobs.Queued > 10 },
+ { k: "Done", v: jobs.Completed?.toLocaleString() ?? 0 },
+ { k: "Failed", v: jobs.Failed ?? 0, w: jobs.Failed > 0 },
+ // Stale queue entries whose task was gone by dispatch time — benign, so never flagged.
+ { k: "Skipped", v: jobs.Skipped ?? 0 },
+ ],
+ },
+ {
+ label: "Limiter",
+ color: "default",
+ stats: [
+ { k: "Active", v: `${limiter.Active ?? 0} / ${limiter.CurrentMax ?? 0}` },
+ { k: "Waiting", v: limiter.Waiting ?? 0 },
+ ...(limiter.IsHttpThrottled ? [{ k: "Status", v: "Throttled", w: true }] : []),
+ ],
+ },
+ {
+ label: "Memory",
+ color: "secondary",
+ stats: [
+ { k: "Container", v: `${mem.ContainerUsedMB ?? mem.RssMB ?? 0} / ${mem.ContainerLimitMB ?? 0}MB`, w: mem.UsagePct > 85 },
+ { k: "App RSS", v: `${mem.RssMB ?? 0}MB` },
+ { k: "Other", v: `${mem.OtherRssMB ?? 0}MB` },
+ { k: "GC Heap", v: `${mem.HeapMB ?? 0}MB` },
+ { k: "Committed", v: `${mem.CommittedMB ?? 0}MB` },
+ { k: "GC Limit", v: `${mem.GCHeapLimitMB ?? 0}MB` },
+ { k: "Usage", v: `${mem.UsagePct ?? 0}%`, w: mem.UsagePct > 85 },
+ { k: "GC", v: `${mem.GC0 ?? 0}/${mem.GC1 ?? 0}/${mem.GC2 ?? 0}` },
+ ...(mem.TestDataCacheCount != null ? [{ k: "Cache", v: `${mem.TestDataCacheCount} entries` }] : []),
+ ],
+ },
+ {
+ label: "CPU",
+ color: "warning",
+ stats: [
+ { k: "Container", v: `${mem.ContainerCpuPct ?? mem.CpuPct ?? 0}%`, w: (mem.ContainerCpuPct ?? 0) > 80 },
+ { k: "App", v: `${mem.CpuPct ?? 0}%`, w: mem.CpuPct > 80 },
+ { k: "Other", v: `${mem.OtherCpuPct ?? 0}%` },
+ ],
+ },
+ ];
+
+ if (isNarrow) {
+ // Six aligned stat columns do not survive a phone — stack the sections and let the
+ // stats wrap instead of scrolling them off the right edge.
+ return (
+
+
+
+ {sections.map((sec) => (
+
+
+ {sec.stats.map((s) => (
+
+
+ ))}
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+// CippInfoBar renders its value slot nowrap + ellipsis; a block child re-enables wrapping
+// so long memory/CPU strings stay whole instead of truncating mid-number.
+const WrappedStat = ({ children }) => (
+
+ {children}
+
+);
+
+const HistoryChart = ({ data, rangeMinutes, title, icon, children }) => {
+ const theme = useTheme();
+
+ if (!data || data.length === 0) {
+ return (
+
+
+
+
+ No historical data available yet — data collection starts after 60 seconds
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ {/* numeric height, recharts warns before its first measure when both sizes are percentages */}
+
+ {children(data, theme)}
+
+
+
+
+ );
+};
+
+const Page = () => {
+ const theme = useTheme();
+ const titleClaimed = useTitleClaimedByTabPicker("Worker Health");
+ const queryClient = useQueryClient();
+ const fileInputRef = useRef(null);
+ const [historyRange, setHistoryRange] = useState(60);
+ const [paused, setPaused] = useState(false);
+ const [importedData, setImportedData] = useState(null);
+ const [jobLimit, setJobLimit] = useState(2000);
+ const [jobStatus, setJobStatus] = useState("");
+
+ const isImported = importedData !== null;
+ const effectivePaused = paused || isImported;
+
+ const healthQuery = ApiGetCall({
+ url: "/api/ListWorkerHealth",
+ data: { Action: "Snapshot" },
+ queryKey: "WorkerHealth",
+ refetchInterval: effectivePaused ? false : 5000,
+ });
+
+ const startupQuery = ApiGetCall({
+ url: "/api/ListWorkerHealth",
+ data: { Action: "Startup" },
+ queryKey: "WorkerStartup",
+ });
+
+ const historyQuery = ApiGetCall({
+ url: "/api/ListWorkerHealth",
+ data: { Action: "History", Minutes: String(historyRange), MaxPoints: "500" },
+ queryKey: `WorkerHistory-${historyRange}`,
+ refetchInterval: effectivePaused ? false : 60000,
+ });
+
+ const jobAction = ApiPostCall({
+ // wildcard: the job table's query key carries the limit/status suffix
+ relatedQueryKeys: ["WorkerHealthJobs*", "WorkerHealth"],
+ });
+
+ const cacheDiagQuery = ApiGetCall({
+ url: "/api/ListWorkerHealth",
+ data: { Action: "CacheDiag" },
+ queryKey: "WorkerCacheDiag",
+ refetchInterval: effectivePaused ? false : 30000,
+ });
+
+ // Resolve data: imported overrides live
+ const snapshot = isImported ? importedData.snapshot : healthQuery.data?.Results;
+ const startupInfo = isImported ? importedData.startup : startupQuery.data?.Results;
+ const importedJobs = useMemo(() => {
+ if (!isImported || !importedData.jobs) return null;
+ // Handle both array and { Results: [...] } shapes from query cache
+ if (Array.isArray(importedData.jobs)) return importedData.jobs;
+ if (Array.isArray(importedData.jobs?.Results)) return importedData.jobs.Results;
+ if (Array.isArray(importedData.jobs?.data?.Results)) return importedData.jobs.data.Results;
+ if (Array.isArray(importedData.jobs?.data)) return importedData.jobs.data;
+ return [];
+ }, [isImported, importedData]);
+
+ const historyData = useMemo(() => {
+ const raw = isImported
+ ? importedData.history?.Data ?? importedData.history
+ : historyQuery.data?.Results?.Data;
+ if (!raw || !Array.isArray(raw)) return [];
+ return raw.map((p) => ({
+ ...p,
+ time: formatChartTime(p.TimestampUtc, isImported ? importedData.historyRange ?? 60 : historyRange),
+ }));
+ }, [historyQuery.data, historyRange, importedData, isImported]);
+
+ // ── Export ──
+ const handleExport = useCallback(() => {
+ const payload = {
+ exportedAt: new Date().toISOString(),
+ historyRange,
+ snapshot: healthQuery.data?.Results ?? null,
+ startup: startupQuery.data?.Results ?? null,
+ history: historyQuery.data?.Results ?? null,
+ jobs: null,
+ };
+ // Grab the job data for the currently selected limit/status only — a prefix match
+ // would hand back a stale query from a previous filter.
+ const jobsData = queryClient.getQueryData([`WorkerHealthJobs-${jobLimit}-${jobStatus}`]);
+ if (jobsData) {
+ // CippDataTable uses an infinite query, so the cache holds { pages: [{ Results }] }.
+ const rows = Array.isArray(jobsData.pages)
+ ? jobsData.pages.flatMap((page) => page?.Results ?? [])
+ : (jobsData.Results ?? jobsData);
+ if (Array.isArray(rows)) payload.jobs = rows;
+ }
+
+ const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = `worker-health-${new Date().toISOString().slice(0, 16).replace(/:/g, "")}.json`;
+ a.click();
+ URL.revokeObjectURL(url);
+ }, [
+ healthQuery.data,
+ startupQuery.data,
+ historyQuery.data,
+ historyRange,
+ queryClient,
+ jobLimit,
+ jobStatus,
+ ]);
+
+ // ── Import ──
+ const handleImport = useCallback((event) => {
+ const file = event.target.files?.[0];
+ if (!file) return;
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ try {
+ const data = JSON.parse(e.target.result);
+ setImportedData(data);
+ setPaused(true);
+ } catch {
+ // invalid JSON — ignore
+ }
+ };
+ reader.readAsText(file);
+ // Reset input so same file can be re-imported
+ event.target.value = "";
+ }, []);
+
+ const handleClearImport = useCallback(() => {
+ setImportedData(null);
+ setPaused(false);
+ }, []);
+
+ const handleRefreshHistory = useCallback(() => {
+ queryClient.invalidateQueries({ queryKey: [`WorkerHistory-${historyRange}`] });
+ }, [queryClient, historyRange]);
+
+ const infoBarData = useMemo(() => {
+ if (!snapshot) return [];
+ const http = snapshot.HttpPool || {};
+ const bg = snapshot.BgPool || {};
+ const jobs = snapshot.Jobs || {};
+ const limiter = snapshot.Limiter || {};
+
+ return [
+ {
+ icon: {`${snapshot.Memory?.ContainerUsedMB ?? snapshot.Memory?.RssMB ?? 0}MB / ${snapshot.Memory?.ContainerLimitMB ?? 0}MB (${snapshot.Memory?.UsagePct ?? 0}%)`}
+ ),
+ color: (snapshot.Memory?.UsagePct ?? 0) > 85 ? "error" : (snapshot.Memory?.UsagePct ?? 0) > 70 ? "warning" : "primary",
+ },
+ {
+ icon: {`${snapshot.Memory?.ContainerCpuPct ?? snapshot.Memory?.CpuPct ?? 0}% container / ${snapshot.Memory?.CpuPct ?? 0}% app`}
+ ),
+ color: (snapshot.Memory?.ContainerCpuPct ?? snapshot.Memory?.CpuPct ?? 0) > 80 ? "error" : (snapshot.Memory?.ContainerCpuPct ?? snapshot.Memory?.CpuPct ?? 0) > 50 ? "warning" : "primary",
+ },
+ ];
+ }, [snapshot]);
+
+ const jobSimpleColumns = ["Name", "RunName", "Priority", "Status", "QueuedUtc", "WaitSeconds", "DurationSeconds"];
+
+ const jobActions = useMemo(
+ () => [
+ {
+ label: "Cancel Job",
+ icon: Worker Health | CIPP
+
+
+
+
+ {/* ── Header toolbar ── */}
+
+ {/* Empty Box keeps the toolbar on the right when the mobile tab picker has
+ already said "Worker Health" directly above this row. */}
+ {titleClaimed ? Worker Health }
+
+ {isImported && (
+
+ Uptime: {formatUptime(snapshot.UptimeSeconds)}
+
+ )}
+
+
+ setPaused((p) => !p)}
+ color={effectivePaused ? "warning" : "default"}
+ disabled={isImported}
+ >
+ {effectivePaused ? (
+
+
+
+
+
+
+
+
+ fileInputRef.current?.click()}>
+
+
+
+
+
+
+ {/* ── KPI bar ── */}
+
+
+ {importedJobs.length === 0 ? (
+
+
+ No job data was captured in this export
+
+
+ ) : (
+
+
+
+
+ )}
+
+
+ ) : (
+
+ val !== null && setJobStatus(val)}
+ size="small"
+ >
+ {["", "Queued", "Running", "Completed", "Failed", "Cancelled", "Skipped"].map((s) => (
+
+ {s || "All"}
+
+ ))}
+
+ val !== null && setJobLimit(val)}
+ size="small"
+ >
+ {[500, 2000, 5000, 10000].map((n) => (
+
+ {n >= 1000 ? `${n / 1000}k` : n}
+
+ ))}
+
+
+ }
+ />
+ )}
+
+ {/* ── Historical Trends header with controls ── */}
+
+
+ {!isImported && (
+
+
+
+
+ )}
+ val !== null && setHistoryRange(val)}
+ size="small"
+ disabled={isImported}
+ >
+ {TIME_RANGES.map((r) => (
+
+ {r.label}
+
+ ))}
+
+
+ }
+ slotProps={{
+ title: { variant: "h6" }
+ }}
+ />
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ )}
+
+
+
+
+ {/* ── TestData Cache Diagnostics ── */}
+ {(() => {
+ const diag = cacheDiagQuery.data?.Results;
+ if (!diag) return null;
+ const types = diag.TypeBreakdown ?? [];
+ const trackedMB = diag.TrackedTotalMB ?? 0;
+ const maxMB = diag.MaxMB ?? 0;
+ const memPct = maxMB > 0 ? (trackedMB / maxMB) * 100 : 0;
+ const totalReads = (diag.Hits ?? 0) + (diag.Misses ?? 0);
+ const fmtUtc = (s) => (s ? new Date(s).toLocaleString() : "—");
+
+ const cacheStats = [
+ { k: "Hits", v: (diag.Hits ?? 0).toLocaleString() },
+ { k: "Misses", v: (diag.Misses ?? 0).toLocaleString() },
+ {
+ k: "Hit Rate",
+ v: `${diag.HitRate ?? 0}%`,
+ w: totalReads > 100 && diag.HitRate < 50,
+ },
+ {
+ k: "Evictions",
+ v: (diag.Evictions ?? 0).toLocaleString(),
+ w: (diag.Evictions ?? 0) > 0,
+ },
+ {
+ k: "Oversized",
+ v: (diag.Oversized ?? 0).toLocaleString(),
+ w: (diag.Oversized ?? 0) > 0,
+ tip: "Values that exceeded the per-entry size cap and were silently dropped — they were never cached.",
+ },
+ { k: "Accesses", v: (diag.AccessCount ?? 0).toLocaleString() },
+ {
+ k: "TTL",
+ v: `${diag.TtlSeconds ?? 0}s`,
+ tip: `Earliest expiry: ${fmtUtc(diag.EarliestExpiryUtc)} • Latest expiry: ${fmtUtc(diag.LatestExpiryUtc)}`,
+ },
+ ];
+
+ return (
+
+ 5000 ? "error" : diag.TotalEntries > 1000 ? "warning" : "success"}
+ size="small"
+ />
+ }
+ slotProps={{
+ title: { variant: "h6" }
+ }}
+ />
+ 0 ? 2 : "12px !important" }}>
+ {/* Capacity bar */}
+
+
+
+ Capacity
+
+
+ {trackedMB} / {maxMB} MB ({Math.round(memPct)}%)
+
+
+ 85 ? "error" : memPct > 70 ? "warning" : "primary"}
+ sx={{ height: 6, borderRadius: 3 }}
+ />
+
+ {/* Stats row */}
+
+ {cacheStats.map((s) => {
+ const cell = (
+
+
+ {s.k}
+
+
+ {s.v}
+
+
+ );
+ if (s.tip) {
+ return (
+
+ {cell}
+
+ );
+ }
+ return {cell} ;
+ })}
+
+
+ {types.length > 0 && (
+
+
+
+
+
+
+ )}
+
+ );
+ })()}
+
+ {/* ── Startup Timing (bottom) ── */}
+
+
+
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
+
diff --git a/src/pages/cipp/advanced/diagnostics.js b/src/pages/cipp/advanced/diagnostics.js
deleted file mode 100644
index 962eced7a27a..000000000000
--- a/src/pages/cipp/advanced/diagnostics.js
+++ /dev/null
@@ -1,399 +0,0 @@
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-import { CippTablePage } from "../../../components/CippComponents/CippTablePage.jsx";
-import CippDiagnosticsFilter from "../../../components/CippTable/CippDiagnosticsFilter";
-import { CippPropertyListCard } from "../../../components/CippCards/CippPropertyListCard";
-import { useState } from "react";
-import { Grid } from "@mui/system";
-import { Box, Typography, Chip, Stack, Divider } from "@mui/material";
-import {
- Error as ErrorIcon,
- Warning as WarningIcon,
- Info as InfoIcon,
- BugReport as DebugIcon,
-} from "@mui/icons-material";
-
-const Page = () => {
- const [apiFilter, setApiFilter] = useState({ query: "", presetDisplayName: null, columns: null });
- const queryKey = JSON.stringify(apiFilter);
-
- const pageTitle = apiFilter.presetDisplayName
- ? `Diagnostics - ${apiFilter.presetDisplayName}`
- : "Diagnostics - Application Insights Query";
-
- // Determine simpleColumns based on preset columns
- const simpleColumns = apiFilter.columns || [];
-
- return (
-
-
-
-
- }
- clearOnError={true}
- offCanvas={{
- size: "lg",
- children: (row) => {
- // Detect event type
- const eventName = row.name || "";
- const isConsoleLog = eventName === "CIPP.ConsoleLog";
- const isTaskCompleted = eventName === "CIPP.TaskCompleted";
- const isStandardCompleted = eventName === "CIPP.StandardCompleted";
-
- // Console Log Renderer
- if (isConsoleLog) {
- const getSeverityConfig = (level) => {
- const levelStr = String(level || "").toLowerCase();
- switch (levelStr) {
- case "error":
- case "4":
- return { icon:
-
- {/* Header with severity and timestamp */}
-
-
-
- {new Date(timestamp).toLocaleString()}
-
-
-
-
- {/* Message */}
-
-
- Message
- {isJson && (
-
-
- {isJson ? (
-
- {preJsonText && (
-
- {preJsonText}
-
- )}
-
- {JSON.stringify(parsedMessage, null, 2)}
-
- {postJsonText && (
-
- {postJsonText}
-
- )}
-
- ) : (
-
- {message}
-
- )}
-
-
-
-
- );
- }
-
- // Task/Standard Completed Renderer
- if (isTaskCompleted || isStandardCompleted) {
- const taskName = row.TaskName || row.customDimensions?.TaskName || "Unknown Task";
- const command =
- row.Command ||
- row.customDimensions?.Command ||
- row.customDimensions?.Standard ||
- "N/A";
- const tenant = row.Tenant || row.customDimensions?.Tenant || "N/A";
- const count = row.Count || row.customDimensions?.Count;
- const totalDuration = row.TotalDurationMs || row.customDimensions?.TotalDurationMs;
- const avgDuration = row.AvgDurationMs || row.customDimensions?.AvgDurationMs;
- const maxDuration = row.MaxDurationMs || row.customDimensions?.MaxDurationMs;
- const timestamp = row.timestamp || new Date().toISOString();
- const status = row.Status || row.customDimensions?.Status || "Completed";
-
- return (
-
-
- {/* Header */}
-
-
-
- {new Date(timestamp).toLocaleString()}
-
-
-
-
- {/* Summary */}
-
-
- Summary
-
-
-
-
- {isTaskCompleted ? "Task Name" : "Standard"}
-
- {taskName}
-
-
-
- Command
-
-
- {command}
-
-
-
-
- Tenant
-
- {tenant}
-
- {count && (
-
-
- Count
-
- {count}
-
- )}
- {totalDuration && (
-
-
- Total Duration (ms)
-
- {totalDuration.toFixed(2)}
-
- )}
- {avgDuration && (
-
-
- Average Duration (ms)
-
- {avgDuration.toFixed(2)}
-
- )}
- {maxDuration && (
-
-
- Max Duration (ms)
-
- {maxDuration.toFixed(2)}
-
- )}
-
-
-
-
- );
- }
-
- // Default/Generic Renderer for other event types
- const renderValue = (value) => {
- if (value === null || value === undefined) {
- return (
-
- {String(value)}
-
- );
- }
- if (typeof value === "boolean") {
- return (
-
- {JSON.stringify(value, null, 2)}
-
- );
- }
- return String(value);
- };
-
- // Build property items for CippPropertyListCard
- const propertyItems = [];
-
- // Add timestamp first
- propertyItems.push({
- label: "timestamp",
- value: new Date(row.timestamp || new Date().toISOString()).toLocaleString(),
- });
-
- // Add all other properties
- Object.entries(row)
- .filter(([key]) => key !== "timestamp" && key !== "customDimensions")
- .sort(([a], [b]) => a.localeCompare(b))
- .forEach(([key, value]) => {
- propertyItems.push({
- label: key,
- value: renderValue(value),
- });
- });
-
- // Add customDimensions properties
- if (row.customDimensions) {
- Object.entries(row.customDimensions)
- .sort(([a], [b]) => a.localeCompare(b))
- .forEach(([key, value]) => {
- propertyItems.push({
- label: `customDimensions.${key}`,
- value: renderValue(value),
- });
- });
- }
-
- return (
-
-
-
-
-
-
-
-
-
- );
- },
- }}
- title={pageTitle}
- tenantInTitle={false}
- apiDataKey="Results"
- apiUrl={apiFilter.query ? "/api/ExecAppInsightsQuery" : "/api/ListEmptyResults"}
- apiData={apiFilter}
- queryKey={queryKey}
- simpleColumns={simpleColumns}
- actions={[]}
- />
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/cipp/advanced/diagnostics.jsx b/src/pages/cipp/advanced/diagnostics.jsx
new file mode 100644
index 000000000000..d5885e188d94
--- /dev/null
+++ b/src/pages/cipp/advanced/diagnostics.jsx
@@ -0,0 +1,437 @@
+import { Layout as DashboardLayout } from "../../../layouts/index";
+import { CippIcons } from "../../../utils/icon-registry";
+import { CippTablePage } from "../../../components/CippComponents/CippTablePage.jsx";
+import CippDiagnosticsFilter from "../../../components/CippTable/CippDiagnosticsFilter";
+import { CippPropertyListCard } from "../../../components/CippCards/CippPropertyListCard";
+import { useState } from "react";
+import { Grid } from "@mui/system";
+import { Box, Typography, Chip, Stack, Divider } from "@mui/material";
+
+const Page = () => {
+ const [apiFilter, setApiFilter] = useState({ query: "", presetDisplayName: null, columns: null });
+ const queryKey = JSON.stringify(apiFilter);
+
+ const pageTitle = apiFilter.presetDisplayName
+ ? `Diagnostics - ${apiFilter.presetDisplayName}`
+ : "Diagnostics - Application Insights Query";
+
+ // Determine simpleColumns based on preset columns
+ const simpleColumns = apiFilter.columns || [];
+
+ return (
+
+
+
+
+ }
+ clearOnError={true}
+ offCanvas={{
+ size: "lg",
+ children: (row) => {
+ // Detect event type
+ const eventName = row.name || "";
+ const isConsoleLog = eventName === "CIPP.ConsoleLog";
+ const isTaskCompleted = eventName === "CIPP.TaskCompleted";
+ const isStandardCompleted = eventName === "CIPP.StandardCompleted";
+
+ // Console Log Renderer
+ if (isConsoleLog) {
+ const getSeverityConfig = (level) => {
+ const levelStr = String(level || "").toLowerCase();
+ switch (levelStr) {
+ case "error":
+ case "4":
+ return { icon:
+
+ {/* Header with severity and timestamp */}
+
+
+
+ {new Date(timestamp).toLocaleString()}
+
+
+
+
+ {/* Message */}
+
+
+ Message
+ {isJson && (
+
+
+ {isJson ? (
+
+ {preJsonText && (
+
+ {preJsonText}
+
+ )}
+
+ {JSON.stringify(parsedMessage, null, 2)}
+
+ {postJsonText && (
+
+ {postJsonText}
+
+ )}
+
+ ) : (
+
+ {message}
+
+ )}
+
+
+
+
+ );
+ }
+
+ // Task/Standard Completed Renderer
+ if (isTaskCompleted || isStandardCompleted) {
+ const taskName = row.TaskName || row.customDimensions?.TaskName || "Unknown Task";
+ const command =
+ row.Command ||
+ row.customDimensions?.Command ||
+ row.customDimensions?.Standard ||
+ "N/A";
+ const tenant = row.Tenant || row.customDimensions?.Tenant || "N/A";
+ const count = row.Count || row.customDimensions?.Count;
+ const totalDuration = row.TotalDurationMs || row.customDimensions?.TotalDurationMs;
+ const avgDuration = row.AvgDurationMs || row.customDimensions?.AvgDurationMs;
+ const maxDuration = row.MaxDurationMs || row.customDimensions?.MaxDurationMs;
+ const timestamp = row.timestamp || new Date().toISOString();
+ const status = row.Status || row.customDimensions?.Status || "Completed";
+
+ return (
+
+
+ {/* Header */}
+
+
+
+ {new Date(timestamp).toLocaleString()}
+
+
+
+
+ {/* Summary */}
+
+
+ Summary
+
+
+
+
+ {isTaskCompleted ? "Task Name" : "Standard"}
+
+ {taskName}
+
+
+
+ Command
+
+
+ {command}
+
+
+
+
+ Tenant
+
+ {tenant}
+
+ {count && (
+
+
+ Count
+
+ {count}
+
+ )}
+ {totalDuration && (
+
+
+ Total Duration (ms)
+
+ {totalDuration.toFixed(2)}
+
+ )}
+ {avgDuration && (
+
+
+ Average Duration (ms)
+
+ {avgDuration.toFixed(2)}
+
+ )}
+ {maxDuration && (
+
+
+ Max Duration (ms)
+
+ {maxDuration.toFixed(2)}
+
+ )}
+
+
+
+
+ );
+ }
+
+ // Default/Generic Renderer for other event types
+ const renderValue = (value) => {
+ if (value === null || value === undefined) {
+ return (
+
+ {String(value)}
+
+ );
+ }
+ if (typeof value === "boolean") {
+ return (
+
+ {JSON.stringify(value, null, 2)}
+
+ );
+ }
+ return String(value);
+ };
+
+ // Build property items for CippPropertyListCard
+ const propertyItems = [];
+
+ // Add timestamp first
+ propertyItems.push({
+ label: "timestamp",
+ value: new Date(row.timestamp || new Date().toISOString()).toLocaleString(),
+ });
+
+ // Add all other properties
+ Object.entries(row)
+ .filter(([key]) => key !== "timestamp" && key !== "customDimensions")
+ .sort(([a], [b]) => a.localeCompare(b))
+ .forEach(([key, value]) => {
+ propertyItems.push({
+ label: key,
+ value: renderValue(value),
+ });
+ });
+
+ // Add customDimensions properties
+ if (row.customDimensions) {
+ Object.entries(row.customDimensions)
+ .sort(([a], [b]) => a.localeCompare(b))
+ .forEach(([key, value]) => {
+ propertyItems.push({
+ label: `customDimensions.${key}`,
+ value: renderValue(value),
+ });
+ });
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+ },
+ }}
+ title={pageTitle}
+ tenantInTitle={false}
+ apiDataKey="Results"
+ apiUrl={apiFilter.query ? "/api/ExecAppInsightsQuery" : "/api/ListEmptyResults"}
+ apiData={apiFilter}
+ queryKey={queryKey}
+ simpleColumns={simpleColumns}
+ actions={[]}
+ />
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
+
diff --git a/src/pages/cipp/advanced/exchange-cmdlets.js b/src/pages/cipp/advanced/exchange-cmdlets.js
deleted file mode 100644
index 9e6e61bcd379..000000000000
--- a/src/pages/cipp/advanced/exchange-cmdlets.js
+++ /dev/null
@@ -1,180 +0,0 @@
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-import {
- Alert,
- Button,
- Container,
- Stack,
- Dialog,
- DialogTitle,
- DialogContent,
- IconButton,
- Skeleton,
-} from "@mui/material";
-import { Grid } from "@mui/system";
-import { useForm } from "react-hook-form";
-import CippFormComponent from "../../../components/CippComponents/CippFormComponent";
-import { ApiPostCall } from "../../../api/ApiCall";
-import CippButtonCard from "../../../components/CippCards/CippButtonCard";
-import { CippDataTable } from "../../../components/CippTable/CippDataTable";
-import { useState, useEffect } from "react";
-import { Search, Close } from "@mui/icons-material";
-import { CippFormTenantSelector } from "../../../components/CippComponents/CippFormTenantSelector";
-import { CippHead } from "../../../components/CippComponents/CippHead";
-
-const simpleColumns = ["Cmdlet"];
-const roleColumns = ["Error", "Name", "Description"];
-const apiUrl = "/api/ListExoRequest";
-const pageTitle = "Exchange Cmdlets";
-
-const Page = () => {
- const formControl = useForm({
- mode: "onChange",
- });
-
- const [searchResults, setSearchResults] = useState([]);
- const [dialogOpen, setDialogOpen] = useState(false);
- const [roleDetails, setRoleDetails] = useState([]);
- const [selectedCmdlet, setSelectedCmdlet] = useState(null);
-
- const exchangeCmdlets = ApiPostCall({
- urlFromData: true,
- queryKey: "ExchangeCmdlets",
- onResult: (result) => {
- setSearchResults(result);
- },
- });
-
- const managementRole = ApiPostCall({
- urlFromData: true,
- queryKey: "ManagementRole",
- onResult: (result) => {
- setRoleDetails(result);
- },
- });
-
- const onSubmit = () => {
- const formData = formControl.getValues();
- exchangeCmdlets.mutate({
- url: apiUrl,
- data: {
- availableCmdlets: true,
- tenantFilter: formData.tenant.value,
- compliance: formData.compliance,
- asApp: formData.asApp,
- },
- });
- };
-
- const checkCmdletRoles = (row) => {
- setSelectedCmdlet(row.Cmdlet);
- managementRole.mutate({
- url: "/api/ListExoRequest",
- data: {
- cmdlet: "Get-ManagementRole",
- cmdParams: {
- cmdlet: row.Cmdlet,
- },
- compliance: formControl.getValues().compliance,
- tenantFilter: formControl.getValues().tenant.value,
- },
- });
- setDialogOpen(true);
- };
-
- useEffect(() => {
- if (managementRole.isSuccess) {
- setRoleDetails(managementRole.data);
- }
- }, [managementRole.isSuccess]);
-
- const actions = [
- {
- label: "Check Roles",
- noConfirm: true,
- customFunction: checkCmdletRoles,
- },
- ];
-
- return (
-
-
-
- This tool allows you to search for Exchange cmdlets available in your environment based on
- tenant, compliance, and application context. You can also check which management roles are
- permitted to use specific cmdlets. Cmdlet availability may vary depending on the tenant
- licensing and configuration.
-
-
-
- {/* Tenant Filter */}
-
-
- {/* Compliance Filter */}
-
-
- {/* AsApp Filter */}
-
-
- {/* Submit Button */}
-
- }>
- Search
-
-
-
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/cipp/advanced/exchange-cmdlets.jsx b/src/pages/cipp/advanced/exchange-cmdlets.jsx
new file mode 100644
index 000000000000..ca1a9200fc68
--- /dev/null
+++ b/src/pages/cipp/advanced/exchange-cmdlets.jsx
@@ -0,0 +1,180 @@
+import { Layout as DashboardLayout } from "../../../layouts/index";
+import { CippIcons } from "../../../utils/icon-registry"
+import {
+ Alert,
+ Button,
+ Container,
+ Stack,
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ IconButton,
+ Skeleton,
+} from "@mui/material";
+import { Grid } from "@mui/system";
+import { useForm } from "react-hook-form";
+import CippFormComponent from "../../../components/CippComponents/CippFormComponent";
+import { ApiPostCall } from "../../../api/ApiCall";
+import CippButtonCard from "../../../components/CippCards/CippButtonCard";
+import { CippDataTable } from "../../../components/CippTable/CippDataTable";
+import { useState, useEffect } from "react";
+import { CippFormTenantSelector } from "../../../components/CippComponents/CippFormTenantSelector";
+import { CippHead } from "../../../components/CippComponents/CippHead";
+
+const simpleColumns = ["Cmdlet"];
+const roleColumns = ["Error", "Name", "Description"];
+const apiUrl = "/api/ListExoRequest";
+const pageTitle = "Exchange Cmdlets";
+
+const Page = () => {
+ const formControl = useForm({
+ mode: "onChange",
+ });
+
+ const [searchResults, setSearchResults] = useState([]);
+ const [dialogOpen, setDialogOpen] = useState(false);
+ const [roleDetails, setRoleDetails] = useState([]);
+ const [selectedCmdlet, setSelectedCmdlet] = useState(null);
+
+ const exchangeCmdlets = ApiPostCall({
+ urlFromData: true,
+ queryKey: "ExchangeCmdlets",
+ onResult: (result) => {
+ setSearchResults(result);
+ },
+ });
+
+ const managementRole = ApiPostCall({
+ urlFromData: true,
+ queryKey: "ManagementRole",
+ onResult: (result) => {
+ setRoleDetails(result);
+ },
+ });
+
+ const onSubmit = () => {
+ const formData = formControl.getValues();
+ exchangeCmdlets.mutate({
+ url: apiUrl,
+ data: {
+ availableCmdlets: true,
+ tenantFilter: formData.tenant.value,
+ compliance: formData.compliance,
+ asApp: formData.asApp,
+ },
+ });
+ };
+
+ const checkCmdletRoles = (row) => {
+ setSelectedCmdlet(row.Cmdlet);
+ managementRole.mutate({
+ url: "/api/ListExoRequest",
+ data: {
+ cmdlet: "Get-ManagementRole",
+ cmdParams: {
+ cmdlet: row.Cmdlet,
+ },
+ compliance: formControl.getValues().compliance,
+ tenantFilter: formControl.getValues().tenant.value,
+ },
+ });
+ setDialogOpen(true);
+ };
+
+ useEffect(() => {
+ if (managementRole.isSuccess) {
+ setRoleDetails(managementRole.data);
+ }
+ }, [managementRole.isSuccess]);
+
+ const actions = [
+ {
+ label: "Check Roles",
+ noConfirm: true,
+ customFunction: checkCmdletRoles,
+ },
+ ];
+
+ return (
+
+
+
+ This tool allows you to search for Exchange cmdlets available in your environment based on
+ tenant, compliance, and application context. You can also check which management roles are
+ permitted to use specific cmdlets. Cmdlet availability may vary depending on the tenant
+ licensing and configuration.
+
+
+
+ {/* Tenant Filter */}
+
+
+ {/* Compliance Filter */}
+
+
+ {/* AsApp Filter */}
+
+
+ {/* Submit Button */}
+
+ }>
+ Search
+
+
+
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/cipp/advanced/super-admin/cipp-roles/add.js b/src/pages/cipp/advanced/super-admin/cipp-roles/add.js
deleted file mode 100644
index 1ed58660a0b7..000000000000
--- a/src/pages/cipp/advanced/super-admin/cipp-roles/add.js
+++ /dev/null
@@ -1,18 +0,0 @@
-// Legacy redirect: this page moved to /cipp/advanced/authentication/cipp-roles/add when the
-// Super Admin area was split into Super Admin / Container Management / Authentication.
-// Safe to delete once bookmarks and docs links have aged out.
-import { useEffect } from "react";
-import { useRouter } from "next/router";
-
-const Page = () => {
- const router = useRouter();
-
- useEffect(() => {
- if (!router.isReady) return;
- router.replace({ pathname: "/cipp/advanced/authentication/cipp-roles/add", query: router.query });
- }, [router.isReady]);
-
- return null;
-};
-
-export default Page;
diff --git a/src/pages/cipp/advanced/super-admin/cipp-roles/edit.js b/src/pages/cipp/advanced/super-admin/cipp-roles/edit.js
deleted file mode 100644
index 409f8d0c4535..000000000000
--- a/src/pages/cipp/advanced/super-admin/cipp-roles/edit.js
+++ /dev/null
@@ -1,18 +0,0 @@
-// Legacy redirect: this page moved to /cipp/advanced/authentication/cipp-roles/edit when the
-// Super Admin area was split into Super Admin / Container Management / Authentication.
-// Safe to delete once bookmarks and docs links have aged out.
-import { useEffect } from "react";
-import { useRouter } from "next/router";
-
-const Page = () => {
- const router = useRouter();
-
- useEffect(() => {
- if (!router.isReady) return;
- router.replace({ pathname: "/cipp/advanced/authentication/cipp-roles/edit", query: router.query });
- }, [router.isReady]);
-
- return null;
-};
-
-export default Page;
diff --git a/src/pages/cipp/advanced/super-admin/cipp-roles/index.js b/src/pages/cipp/advanced/super-admin/cipp-roles/index.js
deleted file mode 100644
index 262a83a66f61..000000000000
--- a/src/pages/cipp/advanced/super-admin/cipp-roles/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-// Legacy redirect: this page moved to /cipp/advanced/authentication/cipp-roles when the
-// Super Admin area was split into Super Admin / Container Management / Authentication.
-// Safe to delete once bookmarks and docs links have aged out.
-import { useEffect } from "react";
-import { useRouter } from "next/router";
-
-const Page = () => {
- const router = useRouter();
-
- useEffect(() => {
- if (!router.isReady) return;
- router.replace({ pathname: "/cipp/advanced/authentication/cipp-roles", query: router.query });
- }, [router.isReady]);
-
- return null;
-};
-
-export default Page;
diff --git a/src/pages/cipp/advanced/super-admin/function-offloading.js b/src/pages/cipp/advanced/super-admin/function-offloading.js
deleted file mode 100644
index d758a7168dab..000000000000
--- a/src/pages/cipp/advanced/super-admin/function-offloading.js
+++ /dev/null
@@ -1,165 +0,0 @@
-import { TabbedLayout } from "../../../../layouts/TabbedLayout";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import tabOptions from "./tabOptions";
-import CippTablePage from "../../../../components/CippComponents/CippTablePage";
-import { Alert, Button, FormControlLabel, Link, Stack, Switch, Typography } from "@mui/material";
-import { Grid } from "@mui/system";
-import { ApiGetCall, ApiPostCall } from "../../../../api/ApiCall";
-import { useEffect, useState } from "react";
-import NextLink from "next/link";
-import { TrashIcon } from "@heroicons/react/24/outline";
-import { CippApiResults } from "../../../../components/CippComponents/CippApiResults";
-
-const Page = () => {
- const pageTitle = "Function Offloading";
- const [offloadFunctions, setOffloadFunctions] = useState(false);
- const [isDirty, setIsDirty] = useState(false);
-
- const execOffloadFunctions = ApiGetCall({
- url: "/api/ExecOffloadFunctions?Action=ListCurrent",
- queryKey: "execOffloadFunctionsSettings",
- });
-
- const updateOffloadFunctions = ApiPostCall({
- relatedQueryKeys: ["execOffloadFunctions", "execOffloadFunctionsSettings"],
- });
-
- const deleteOffloadEntry = ApiPostCall({
- urlFromData: true,
- relatedQueryKeys: ["execOffloadFunctions", "execOffloadFunctionsSettings"],
- });
-
- const handleDeleteOffloadEntry = (row) => {
- const entity = {
- RowKey: row.Name,
- PartitionKey: "Version",
- };
-
- deleteOffloadEntry.mutate({
- url: "/api/ExecAzBobbyTables",
- data: {
- FunctionName: "Remove-AzDataTableEntity",
- TableName: "Version",
- Parameters: {
- Entity: entity,
- Force: true,
- },
- },
- });
- };
-
- useEffect(() => {
- if (execOffloadFunctions.isSuccess) {
- setOffloadFunctions(Boolean(execOffloadFunctions.data?.OffloadFunctions));
- setIsDirty(false);
- }
- }, [execOffloadFunctions.isSuccess, execOffloadFunctions.data]);
-
- const handleSave = () => {
- updateOffloadFunctions.mutate({
- url: "/api/ExecOffloadFunctions",
- data: {
- OffloadFunctions: offloadFunctions,
- },
- });
- };
-
- const canEnable =
- execOffloadFunctions?.data?.OffloadFunctions || execOffloadFunctions?.data?.CanEnable;
-
- return (
-
- {
- setOffloadFunctions(event.target.checked);
- setIsDirty(true);
- }}
- disabled={execOffloadFunctions.isFetching || !canEnable}
- />
- }
- label="Enable Function Offloading"
- />
-
-
- }
- title={pageTitle}
- tenantInTitle={false}
- apiUrl="/api/ExecOffloadFunctions?Action=ListCurrent"
- apiDataKey="Version"
- queryKey="execOffloadFunctions"
- simpleColumns={["Name", "Version", "Default"]}
- actions={[
- {
- label: "Delete Offloading Entry",
- icon:
-
-
- This mode enables offloading some of the more processor intensive functions to a
- separate function app. This can be useful in environments where the CIPP server is
- under heavy load. Please review{" "}
-
- our documentation
- {" "}
- for more information on how to configure this for your environment.
-
-
-
-
- If you are self-hosted, you must deploy the additional function app(s) to your CIPP
- resource group and enable CI/CD or all background tasks will fail.
-
-
- {execOffloadFunctions.data?.Alerts?.length > 0 && (
-
- {execOffloadFunctions.data?.Alerts.map((alert, index) => (
-
- {alert}
-
- ))}
-
- )}
-
-
-
- }
- >
-
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/advanced/super-admin/function-offloading.jsx b/src/pages/cipp/advanced/super-admin/function-offloading.jsx
new file mode 100644
index 000000000000..d3a55da7f0c7
--- /dev/null
+++ b/src/pages/cipp/advanced/super-admin/function-offloading.jsx
@@ -0,0 +1,167 @@
+import { TabbedLayout } from "../../../../layouts/TabbedLayout";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import tabOptions from "./tabOptions";
+import CippTablePage from "../../../../components/CippComponents/CippTablePage";
+import { Alert, Button, FormControlLabel, Link, Stack, Switch, Typography } from "@mui/material";
+import { Grid } from "@mui/system";
+import { ApiGetCall, ApiPostCall } from "../../../../api/ApiCall";
+import { useEffect, useState } from "react";
+import NextLink from "next/link";
+import { CippApiResults } from "../../../../components/CippComponents/CippApiResults";
+
+const Page = () => {
+ const pageTitle = "Function Offloading";
+ const [offloadFunctions, setOffloadFunctions] = useState(false);
+ const [isDirty, setIsDirty] = useState(false);
+
+ const execOffloadFunctions = ApiGetCall({
+ url: "/api/ExecOffloadFunctions?Action=ListCurrent",
+ queryKey: "execOffloadFunctionsSettings",
+ });
+
+ const updateOffloadFunctions = ApiPostCall({
+ relatedQueryKeys: ["execOffloadFunctions", "execOffloadFunctionsSettings"],
+ });
+
+ const deleteOffloadEntry = ApiPostCall({
+ urlFromData: true,
+ relatedQueryKeys: ["execOffloadFunctions", "execOffloadFunctionsSettings"],
+ });
+
+ const handleDeleteOffloadEntry = (row) => {
+ const entity = {
+ RowKey: row.Name,
+ PartitionKey: "Version",
+ };
+
+ deleteOffloadEntry.mutate({
+ url: "/api/ExecAzBobbyTables",
+ data: {
+ FunctionName: "Remove-AzDataTableEntity",
+ TableName: "Version",
+ Parameters: {
+ Entity: entity,
+ Force: true,
+ },
+ },
+ });
+ };
+
+ useEffect(() => {
+ if (execOffloadFunctions.isSuccess) {
+ setOffloadFunctions(Boolean(execOffloadFunctions.data?.OffloadFunctions));
+ setIsDirty(false);
+ }
+ }, [execOffloadFunctions.isSuccess, execOffloadFunctions.data]);
+
+ const handleSave = () => {
+ updateOffloadFunctions.mutate({
+ url: "/api/ExecOffloadFunctions",
+ data: {
+ OffloadFunctions: offloadFunctions,
+ },
+ });
+ };
+
+ const canEnable =
+ execOffloadFunctions?.data?.OffloadFunctions || execOffloadFunctions?.data?.CanEnable;
+
+ return (
+
+ {
+ setOffloadFunctions(event.target.checked);
+ setIsDirty(true);
+ }}
+ disabled={execOffloadFunctions.isFetching || !canEnable}
+ />
+ }
+ label="Enable Function Offloading"
+ />
+
+
+ }
+ title={pageTitle}
+ tenantInTitle={false}
+ apiUrl="/api/ExecOffloadFunctions?Action=ListCurrent"
+ apiDataKey="Version"
+ queryKey="execOffloadFunctions"
+ simpleColumns={["Name", "Version", "Default"]}
+ actions={[
+ {
+ label: "Delete Offloading Entry",
+ icon:
+
+
+ This mode enables offloading some of the more processor intensive functions to a
+ separate function app. This can be useful in environments where the CIPP server is
+ under heavy load. Please review{" "}
+
+ our documentation
+ {" "}
+ for more information on how to configure this for your environment.
+
+
+
+
+ If you are self-hosted, you must deploy the additional function app(s) to your CIPP
+ resource group and enable CI/CD or all background tasks will fail.
+
+
+ {execOffloadFunctions.data?.Alerts?.length > 0 && (
+
+ {execOffloadFunctions.data?.Alerts.map((alert, index) => (
+
+ {alert}
+
+ ))}
+
+ )}
+
+
+
+ }
+ >
+
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
diff --git a/src/pages/cipp/advanced/super-admin/jit-admin-settings.js b/src/pages/cipp/advanced/super-admin/jit-admin-settings.js
deleted file mode 100644
index 514b5b097c07..000000000000
--- a/src/pages/cipp/advanced/super-admin/jit-admin-settings.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import { TabbedLayout } from "../../../../layouts/TabbedLayout";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import tabOptions from "./tabOptions";
-import CippFormPage from "../../../../components/CippFormPages/CippFormPage";
-import { useForm } from "react-hook-form";
-import { Typography, Alert } from "@mui/material";
-import { Grid } from "@mui/system";
-import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
-import { ApiGetCall } from "../../../../api/ApiCall";
-import { CippExpandableAlert } from "../../../../components/CippComponents/CippExpandableAlert";
-import { useEffect } from "react";
-
-const Page = () => {
- const pageTitle = "JIT Admin Settings";
-
- const formControl = useForm({
- mode: "onChange",
- defaultValues: {
- MaxDuration: "",
- },
- });
-
- const jitSettings = ApiGetCall({
- url: "/api/ExecJITAdminSettings?Action=Get",
- queryKey: "jitAdminSettings",
- });
-
- useEffect(() => {
- if (jitSettings.isSuccess && jitSettings.data) {
- formControl.reset({
- MaxDuration: jitSettings.data?.MaxDuration || [],
- });
- }
- }, [jitSettings.isSuccess, jitSettings.data]);
-
- return (
- ({
- Action: "Set",
- MaxDuration: values.MaxDuration || null,
- })}
- >
-
-
-
- Configure maximum allowed duration for Just-In-Time (JIT) admin accounts. This setting
- helps enforce security policies by preventing technicians from creating JIT admin
- accounts with excessively long lifespans. Validation is performed on the backend when
- creating JIT admin accounts.
-
-
-
-
-
- Set the maximum duration in ISO 8601 format, or leave empty for no limit (default). The
- backend will validate that the difference between the start and end dates of any JIT
- admin account does not exceed the configured maximum duration.
-
-
-
-
- {
- // Allow empty value (no limit)
- if (typeof value !== "string" || value.trim() === "") {
- return true;
- }
- const iso8601Regex = /^P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)W)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+(?:\.\d+)?)S)?)?$/;
- if (!iso8601Regex.test(value)) {
- return "Invalid format. Use PT1H, P1D, P7D, P28D, etc.";
- }
- return true;
- },
- },
- }}
- formControl={formControl}
- helperText="ISO 8601 format: PT1H (1 hour), P1D (1 day), P7D (1 week), P28D (4 weeks). Leave empty for no limit."
- />
-
-
-
-
-
- Important Notes:
-
-
-
-
-
-
-
-
- Example: If maximum duration is set to P28D (4 weeks), and a
- technician tries to create a JIT admin account lasting 1.5 months, the backend will
- reject the request with an error: "Requested JIT Admin duration (56 days) exceeds the
- maximum allowed duration of P28D (28 days)".
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/advanced/super-admin/jit-admin-settings.jsx b/src/pages/cipp/advanced/super-admin/jit-admin-settings.jsx
new file mode 100644
index 000000000000..1d372ef520a2
--- /dev/null
+++ b/src/pages/cipp/advanced/super-admin/jit-admin-settings.jsx
@@ -0,0 +1,147 @@
+import { TabbedLayout } from "../../../../layouts/TabbedLayout";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import tabOptions from "./tabOptions";
+import CippFormPage from "../../../../components/CippFormPages/CippFormPage";
+import { useForm } from "react-hook-form";
+import { Typography, Alert } from "@mui/material";
+import { Grid } from "@mui/system";
+import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
+import { ApiGetCall } from "../../../../api/ApiCall";
+import { CippExpandableAlert } from "../../../../components/CippComponents/CippExpandableAlert";
+import { useEffect } from "react";
+
+const Page = () => {
+ const pageTitle = "JIT Admin Settings";
+
+ const formControl = useForm({
+ mode: "onChange",
+ defaultValues: {
+ MaxDuration: "",
+ },
+ });
+
+ const jitSettings = ApiGetCall({
+ url: "/api/ExecJITAdminSettings?Action=Get",
+ queryKey: "jitAdminSettings",
+ });
+
+ useEffect(() => {
+ if (jitSettings.isSuccess && jitSettings.data) {
+ formControl.reset({
+ MaxDuration: jitSettings.data?.MaxDuration || [],
+ });
+ }
+ }, [jitSettings.isSuccess, jitSettings.data]);
+
+ return (
+ ({
+ Action: "Set",
+ MaxDuration: values.MaxDuration || null,
+ })}
+ >
+
+
+
+ Configure maximum allowed duration for Just-In-Time (JIT) admin accounts. This setting
+ helps enforce security policies by preventing technicians from creating JIT admin
+ accounts with excessively long lifespans. Validation is performed on the backend when
+ creating JIT admin accounts.
+
+
+
+
+
+ Set the maximum duration in ISO 8601 format, or leave empty for no limit (default). The
+ backend will validate that the difference between the start and end dates of any JIT
+ admin account does not exceed the configured maximum duration.
+
+
+
+
+ {
+ // Allow empty value (no limit)
+ if (typeof value !== "string" || value.trim() === "") {
+ return true;
+ }
+ const iso8601Regex = /^P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)W)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+(?:\.\d+)?)S)?)?$/;
+ if (!iso8601Regex.test(value)) {
+ return "Invalid format. Use PT1H, P1D, P7D, P28D, etc.";
+ }
+ return true;
+ },
+ },
+ }}
+ formControl={formControl}
+ helperText="ISO 8601 format: PT1H (1 hour), P1D (1 day), P7D (1 week), P28D (4 weeks). Leave empty for no limit."
+ />
+
+
+
+
+
+ Important Notes:
+
+
+
+
+
+
+
+
+ Example: If maximum duration is set to P28D (4 weeks), and a
+ technician tries to create a JIT admin account lasting 1.5 months, the backend will
+ reject the request with an error: "Requested JIT Admin duration (56 days) exceeds the
+ maximum allowed duration of P28D (28 days)".
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
diff --git a/src/pages/cipp/advanced/super-admin/tenant-mode.js b/src/pages/cipp/advanced/super-admin/tenant-mode.js
deleted file mode 100644
index 43174776a30e..000000000000
--- a/src/pages/cipp/advanced/super-admin/tenant-mode.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import { TabbedLayout } from "../../../../layouts/TabbedLayout";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import tabOptions from "./tabOptions";
-import CippFormPage from "../../../../components/CippFormPages/CippFormPage";
-import { useForm } from "react-hook-form";
-import { Typography } from "@mui/material";
-import { Grid } from "@mui/system";
-import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
-import { ApiGetCall } from "../../../../api/ApiCall";
-import { useEffect } from "react";
-import Link from "next/link";
-
-const Page = () => {
- const pageTitle = "Tenant Mode";
-
- const formControl = useForm({
- mode: "onChange",
- defaultValues: {
- TenantMode: "default",
- },
- });
-
- const tenantModeOptions = [
- {
- label: "Multi Tenant - GDAP Mode",
- value: "default",
- },
- {
- label: "Multi Tenant - Add Partner Tenant",
- value: "PartnerTenantAvailable",
- },
- {
- label: "Single Tenant - Own Tenant Mode",
- value: "owntenant",
- },
- ];
-
- const execPartnerMode = ApiGetCall({
- url: "/api/ExecPartnerMode?Action=ListCurrent",
- queryKey: "execPartnerMode",
- });
-
- useEffect(() => {
- if (execPartnerMode.isSuccess) {
- formControl.reset({
- TenantMode: execPartnerMode.data?.TenantMode,
- });
- }
- }, [execPartnerMode.isSuccess, execPartnerMode.data]);
-
- return (
-
-
-
-
- The configuration settings below should only be modified by a super admin. Super admins
- can configure what tenant mode CIPP operates in. See{" "}
-
- our documentation
- {" "}
- for more information on how to configure these modes and what they mean.
-
-
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/advanced/super-admin/tenant-mode.jsx b/src/pages/cipp/advanced/super-admin/tenant-mode.jsx
new file mode 100644
index 000000000000..94a2bed07eed
--- /dev/null
+++ b/src/pages/cipp/advanced/super-admin/tenant-mode.jsx
@@ -0,0 +1,95 @@
+import { TabbedLayout } from "../../../../layouts/TabbedLayout";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import tabOptions from "./tabOptions";
+import CippFormPage from "../../../../components/CippFormPages/CippFormPage";
+import { useForm } from "react-hook-form";
+import { Typography } from "@mui/material";
+import { Grid } from "@mui/system";
+import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
+import { ApiGetCall } from "../../../../api/ApiCall";
+import { useEffect } from "react";
+import Link from "next/link";
+
+const Page = () => {
+ const pageTitle = "Tenant Mode";
+
+ const formControl = useForm({
+ mode: "onChange",
+ defaultValues: {
+ TenantMode: "default",
+ },
+ });
+
+ const tenantModeOptions = [
+ {
+ label: "Multi Tenant - GDAP Mode",
+ value: "default",
+ },
+ {
+ label: "Multi Tenant - Add Partner Tenant",
+ value: "PartnerTenantAvailable",
+ },
+ {
+ label: "Single Tenant - Own Tenant Mode",
+ value: "owntenant",
+ },
+ ];
+
+ const execPartnerMode = ApiGetCall({
+ url: "/api/ExecPartnerMode?Action=ListCurrent",
+ queryKey: "execPartnerMode",
+ });
+
+ useEffect(() => {
+ if (execPartnerMode.isSuccess) {
+ formControl.reset({
+ TenantMode: execPartnerMode.data?.TenantMode,
+ });
+ }
+ }, [execPartnerMode.isSuccess, execPartnerMode.data]);
+
+ return (
+
+
+
+
+ The configuration settings below should only be modified by a super admin. Super admins
+ can configure what tenant mode CIPP operates in. See{" "}
+
+ our documentation
+ {" "}
+ for more information on how to configure these modes and what they mean.
+
+
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
diff --git a/src/pages/cipp/advanced/super-admin/time-settings.js b/src/pages/cipp/advanced/super-admin/time-settings.js
deleted file mode 100644
index 2fa73742f06c..000000000000
--- a/src/pages/cipp/advanced/super-admin/time-settings.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import { TabbedLayout } from '../../../../layouts/TabbedLayout'
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { useForm } from 'react-hook-form'
-import { Grid } from '@mui/system'
-import CippFormComponent from '../../../../components/CippComponents/CippFormComponent'
-import { ApiGetCall } from '../../../../api/ApiCall'
-import { useEffect } from 'react'
-import CippFormPage from '../../../../components/CippFormPages/CippFormPage'
-import { useTimezones } from '../../../../hooks/use-timezones'
-import tabOptions from './tabOptions'
-import { Alert, Typography } from '@mui/material'
-
-const Page = () => {
- const pageTitle = 'Time Settings'
-
- const formControl = useForm({
- mode: 'onChange',
- defaultValues: {
- Timezone: { label: 'UTC', value: 'UTC' },
- },
- })
-
- // Get timezone and backend info
- const backendInfo = ApiGetCall({
- url: '/api/ExecBackendURLs',
- queryKey: 'backendInfo',
- })
-
- const { timezones, loading: timezonesLoading } = useTimezones()
-
- useEffect(() => {
- if (backendInfo.isSuccess && backendInfo.data) {
- const tzStr = backendInfo.data?.Results?.Timezone || 'UTC'
- const tzOption = (timezones || []).find(
- (o) => o?.value === tzStr || o?.alternativeName === tzStr
- ) || {
- label: tzStr,
- value: tzStr,
- }
- formControl.reset({ Timezone: tzOption })
- }
- }, [backendInfo.isSuccess, backendInfo.data, timezones])
-
- return (
-
-
-
-
- Configure the timezone for CIPP. This determines when CIPP's
- built-in background jobs run and which day log entries are grouped
- under. If you have not chosen one, CIPP defaults to the timezone of
- the Azure region it is deployed in, falling back to UTC. Scheduled
- Tasks you create yourself are not affected.
-
-
-
- {!backendInfo.isSuccess && (
-
- Loading backend information...
-
- )}
-
- {timezonesLoading && (
-
- Loading timezones...
-
- )}
-
- {backendInfo.isSuccess && (
-
-
- )}
-
-
- )
-}
-
-Page.getLayout = (page) => (
-
- {page}
-
-)
-
-export default Page
diff --git a/src/pages/cipp/advanced/super-admin/time-settings.jsx b/src/pages/cipp/advanced/super-admin/time-settings.jsx
new file mode 100644
index 000000000000..ef14bbb80317
--- /dev/null
+++ b/src/pages/cipp/advanced/super-admin/time-settings.jsx
@@ -0,0 +1,102 @@
+import { TabbedLayout } from '../../../../layouts/TabbedLayout'
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { useForm } from 'react-hook-form'
+import { Grid } from '@mui/system'
+import CippFormComponent from '../../../../components/CippComponents/CippFormComponent'
+import { ApiGetCall } from '../../../../api/ApiCall'
+import { useEffect } from 'react'
+import CippFormPage from '../../../../components/CippFormPages/CippFormPage'
+import { useTimezones } from '../../../../hooks/use-timezones'
+import tabOptions from './tabOptions'
+import { Alert, Typography } from '@mui/material'
+
+const Page = () => {
+ const pageTitle = 'Time Settings'
+
+ const formControl = useForm({
+ mode: 'onChange',
+ defaultValues: {
+ Timezone: { label: 'UTC', value: 'UTC' },
+ },
+ })
+
+ // Get timezone and backend info
+ const backendInfo = ApiGetCall({
+ url: '/api/ExecBackendURLs',
+ queryKey: 'backendInfo',
+ })
+
+ const { timezones, loading: timezonesLoading } = useTimezones()
+
+ useEffect(() => {
+ if (backendInfo.isSuccess && backendInfo.data) {
+ const tzStr = backendInfo.data?.Results?.Timezone || 'UTC'
+ const tzOption = (timezones || []).find(
+ (o) => o?.value === tzStr || o?.alternativeName === tzStr
+ ) || {
+ label: tzStr,
+ value: tzStr,
+ }
+ formControl.reset({ Timezone: tzOption })
+ }
+ }, [backendInfo.isSuccess, backendInfo.data, timezones])
+
+ return (
+
+
+
+
+ Configure the timezone for CIPP. This determines when CIPP's
+ built-in background jobs run and which day log entries are grouped
+ under. If you have not chosen one, CIPP defaults to the timezone of
+ the Azure region it is deployed in, falling back to UTC. Scheduled
+ Tasks you create yourself are not affected.
+
+
+
+ {!backendInfo.isSuccess && (
+
+ Loading backend information...
+
+ )}
+
+ {timezonesLoading && (
+
+ Loading timezones...
+
+ )}
+
+ {backendInfo.isSuccess && (
+
+
+ )}
+
+
+ )
+}
+
+Page.getLayout = (page) => (
+
+ {page}
+
+)
+
+export default Page
diff --git a/src/pages/cipp/advanced/table-maintenance.js b/src/pages/cipp/advanced/table-maintenance.js
deleted file mode 100644
index a6f83e4dfe96..000000000000
--- a/src/pages/cipp/advanced/table-maintenance.js
+++ /dev/null
@@ -1,577 +0,0 @@
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-import { useEffect, useState } from "react";
-import { ApiPostCall } from "../../../api/ApiCall";
-import { CippPropertyListCard } from "../../../components/CippCards/CippPropertyListCard"; // Fixed import
-import { CippDataTable } from "../../../components/CippTable/CippDataTable"; // Fixed import
-import { useDialog } from "../../../hooks/use-dialog";
-import {
- Box,
- Container,
- Stack,
- Dialog,
- DialogTitle,
- DialogContent,
- DialogActions,
- IconButton,
- Button,
- SvgIcon,
- Tooltip,
- Typography,
- MenuItem,
- Select,
- Alert,
-} from "@mui/material";
-import { MagnifyingGlassIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
-import { Add, AddCircle, RemoveCircle, Sync, WarningAmber } from "@mui/icons-material";
-import CippFormComponent from "../../../components/CippComponents/CippFormComponent";
-import { useForm, useWatch } from "react-hook-form";
-import { CippApiDialog } from "../../../components/CippComponents/CippApiDialog";
-import { Grid } from "@mui/system";
-import CippButtonCard from "../../../components/CippCards/CippButtonCard";
-import { CippApiResults } from "../../../components/CippComponents/CippApiResults";
-import { CippHead } from "../../../components/CippComponents/CippHead";
-
-const CustomAddEditRowDialog = ({ formControl, open, onClose, onSubmit, defaultValues }) => {
- const fields = useWatch({ control: formControl.control, name: "fields" });
-
- useEffect(() => {
- if (open) {
- formControl.reset({
- fields: defaultValues.fields || [],
- });
- }
- }, [open, defaultValues, formControl]);
-
- const addField = () => {
- formControl.reset({
- fields: [...fields, { name: "", value: "", type: "textField" }],
- });
- };
-
- const removeField = (index) => {
- const newFields = fields.filter((_, i) => i !== index);
- formControl.reset({ fields: newFields });
- };
-
- const handleTypeChange = (index, newType) => {
- const newFields = fields.map((field, i) => (i === index ? { ...field, type: newType } : field));
- formControl.reset({ fields: newFields });
- };
-
- return (
-
- );
-};
-
-const Page = () => {
- const pageTitle = "Table Maintenance";
- const apiUrl = "/api/ExecAzBobbyTables";
- const [tables, setTables] = useState([]);
- const [selectedTable, setSelectedTable] = useState(null);
- const [tableData, setTableData] = useState([]);
- const addTableDialog = useDialog(); // Add dialog for adding table
- const deleteTableDialog = useDialog(); // Add dialog for deleting table
- const addEditRowDialog = useDialog(); // Add dialog for adding/editing row
- const [defaultAddEditValues, setDefaultAddEditValues] = useState({});
- const [tableFilterParams, setTableFilterParams] = useState({ First: 1000 });
- const formControl = useForm({
- mode: "onChange",
- });
- const [accordionExpanded, setAccordionExpanded] = useState(false);
-
- const addEditFormControl = useForm({
- mode: "onChange",
- });
-
- const filterFormControl = useForm({
- mode: "onChange",
- defaultValues: {
- First: 1000,
- },
- });
-
- const tableFilter = useWatch({ control: formControl.control, name: "tableFilter" });
-
- const fetchTables = ApiPostCall({
- queryKey: "CippTables",
- onResult: (result) => setTables(result),
- });
-
- const fetchTableData = ApiPostCall({
- queryKey: "CippTableData",
- onResult: (result) => {
- setTableData(result);
- },
- });
-
- const handleTableSelect = (tableName) => {
- setSelectedTable(tableName);
- fetchTableData.mutate({
- url: apiUrl,
- data: {
- FunctionName: "Get-AzDataTableEntity",
- TableName: tableName,
- Parameters: filterFormControl.getValues(),
- },
- });
- };
-
- const handleRefresh = () => {
- if (selectedTable) {
- fetchTableData.mutate({
- url: apiUrl,
- data: {
- FunctionName: "Get-AzDataTableEntity",
- TableName: selectedTable,
- Parameters: tableFilterParams,
- },
- });
- }
- };
-
- const tableRowAction = ApiPostCall({
- queryKey: "CippTableRowAction",
- onResult: handleRefresh,
- });
-
- const handleTableRefresh = () => {
- fetchTables.mutate({ url: apiUrl, data: { FunctionName: "Get-AzDataTable", Parameters: {} } });
- };
-
- const getSelectedProps = (data) => {
- if (data?.Property && data?.Property.length > 0) {
- var selectedProps = ["ETag", "PartitionKey", "RowKey"];
- data?.Property.map((prop) => {
- if (selectedProps.indexOf(prop.value) === -1) {
- selectedProps.push(prop.value);
- }
- });
- return selectedProps;
- } else {
- return [];
- }
- };
-
- useEffect(() => {
- handleTableRefresh();
- }, []);
-
- const actionItems = tables
- .filter(
- (table) =>
- tableFilter === "" ||
- tableFilter === undefined ||
- table.toLowerCase().includes(tableFilter.toLowerCase())
- )
- .map((table) => ({
- label: `${table}`,
- customFunction: () => {
- setTableData([]);
- handleTableSelect(table);
- },
- noConfirm: true,
- }));
-
- const propertyItems = [
- {
- label: "",
- value: (
-
-
-
-
- ),
- },
- ];
-
- const getTableFields = () => {
- if (tableData.length === 0) return [];
- const sampleRow = tableData[0];
- return Object.keys(sampleRow)
- .filter((key) => key !== "ETag" && key !== "Timestamp")
- .map((key) => {
- const value = sampleRow[key];
- let type = "textField";
- if (typeof value === "number") {
- type = "number";
- } else if (typeof value === "boolean") {
- type = "switch";
- }
- return {
- name: key,
- label: key,
- type: type,
- required: false,
- };
- });
- };
-
- return (
-
-
- {pageTitle}
-
-
- This page allows you to view and manage data in Azure Tables. This is advanced functionality
- that should only be used when directed by CyberDrain support.
-
-
-
- a.label.localeCompare(b.label))}
- isFetching={fetchTables.isPending}
- cardSx={{ maxHeight: "calc(100vh - 170px)", overflow: "auto" }}
- actionButton={
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- }
- />
-
-
- {selectedTable && (
-
-
- {
- var properties = getSelectedProps(data);
- setTableFilterParams({ ...data, Property: properties });
- handleRefresh();
- setAccordionExpanded(false);
- })}
- >
- Apply Filters
-
- }
- >
-
- ({
- label: field?.label,
- value: field?.name,
- }))}
- />
-
-
-
-
-
-
-
-
- }
- actions={[
- {
- label: "Edit",
- type: "POST",
- icon: (
-
-
- ),
- customFunction: (row) => {
- setDefaultAddEditValues({
- fields: Object.keys(row)
- .filter((key) => key !== "ETag" && key !== "Timestamp")
- .map((key) => {
- const value = row[key];
- let type = "textField";
- if (typeof value === "number") {
- type = "number";
- } else if (typeof value === "boolean") {
- type = "switch";
- }
- return { name: key, value: value, type: type };
- }),
- });
- addEditRowDialog.handleOpen();
- },
- noConfirm: true,
- hideBulk: true,
- },
- {
- label: "Delete",
- type: "POST",
- icon: (
-
-
- ),
- url: apiUrl,
- customFunction: (row) => {
- var entity = [];
- if (Array.isArray(row)) {
- entity = row.map((r) => ({
- RowKey: r.RowKey,
- PartitionKey: r.PartitionKey,
- ETag: r.ETag,
- }));
- } else {
- entity = {
- RowKey: row.RowKey,
- PartitionKey: row.PartitionKey,
- ETag: row.ETag,
- };
- }
- tableRowAction.mutate({
- url: apiUrl,
- data: {
- FunctionName: "Remove-AzDataTableEntity",
- TableName: selectedTable,
- Parameters: {
- Entity: entity,
- },
- },
- });
- },
- confirmText:
- "Do you want to delete the selected row(s)? This action cannot be undone.",
- multiPost: true,
- },
- ]}
- />
-
-
- )}
-
-
- {
- handleTableRefresh();
- },
- }}
- />
-
-
- Are you sure you want to delete this table? This is a destructive action that cannot
- be undone.
-
-
- ),
- type: "POST",
- data: { FunctionName: "Remove-AzDataTable", TableName: selectedTable, Parameters: {} },
- onSuccess: () => {
- setSelectedTable(null);
- setTableData([]);
- handleTableRefresh();
- },
- }}
- />
- {
- const payload = data.fields.reduce((acc, field) => {
- acc[field.name] = field.value;
- return acc;
- }, {});
- tableRowAction.mutate({
- url: apiUrl,
- data: {
- FunctionName: "Add-AzDataTableEntity",
- TableName: selectedTable,
- Parameters: { Entity: payload, Force: true },
- },
- onSuccess: handleRefresh,
- });
- addEditRowDialog.handleClose();
- }}
- defaultValues={defaultAddEditValues}
- />
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/cipp/advanced/table-maintenance.jsx b/src/pages/cipp/advanced/table-maintenance.jsx
new file mode 100644
index 000000000000..0f1916c31dc2
--- /dev/null
+++ b/src/pages/cipp/advanced/table-maintenance.jsx
@@ -0,0 +1,589 @@
+import { Layout as DashboardLayout } from "../../../layouts/index";
+import { CippIcons } from "../../../utils/icon-registry";
+import { useEffect, useState } from "react";
+import { ApiPostCall } from "../../../api/ApiCall";
+import { CippPropertyListCard } from "../../../components/CippCards/CippPropertyListCard"; // Fixed import
+import { CippDataTable } from "../../../components/CippTable/CippDataTable"; // Fixed import
+import { useDialog } from "../../../hooks/use-dialog";
+import {
+ Box,
+ Container,
+ Stack,
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ DialogActions,
+ IconButton,
+ Button,
+ SvgIcon,
+ Tooltip,
+ Typography,
+ MenuItem,
+ Select,
+ Alert,
+} from "@mui/material";
+import CippFormComponent from "../../../components/CippComponents/CippFormComponent";
+import { useForm, useWatch } from "react-hook-form";
+import { CippApiDialog } from "../../../components/CippComponents/CippApiDialog";
+import { Grid } from "@mui/system";
+import CippButtonCard from "../../../components/CippCards/CippButtonCard";
+import { CippApiResults } from "../../../components/CippComponents/CippApiResults";
+import { CippHead } from "../../../components/CippComponents/CippHead";
+
+const CustomAddEditRowDialog = ({ formControl, open, onClose, onSubmit, defaultValues }) => {
+ const fields = useWatch({ control: formControl.control, name: "fields" });
+
+ useEffect(() => {
+ if (open) {
+ formControl.reset({
+ fields: defaultValues.fields || [],
+ });
+ }
+ }, [open, defaultValues, formControl]);
+
+ const addField = () => {
+ formControl.reset({
+ fields: [...fields, { name: "", value: "", type: "textField" }],
+ });
+ };
+
+ const removeField = (index) => {
+ const newFields = fields.filter((_, i) => i !== index);
+ formControl.reset({ fields: newFields });
+ };
+
+ const handleTypeChange = (index, newType) => {
+ const newFields = fields.map((field, i) => (i === index ? { ...field, type: newType } : field));
+ formControl.reset({ fields: newFields });
+ };
+
+ return (
+
+ );
+};
+
+const Page = () => {
+ const pageTitle = "Table Maintenance";
+ const apiUrl = "/api/ExecAzBobbyTables";
+ const [tables, setTables] = useState([]);
+ const [selectedTable, setSelectedTable] = useState(null);
+ const [tableData, setTableData] = useState([]);
+ const addTableDialog = useDialog(); // Add dialog for adding table
+ const deleteTableDialog = useDialog(); // Add dialog for deleting table
+ const addEditRowDialog = useDialog(); // Add dialog for adding/editing row
+ const [defaultAddEditValues, setDefaultAddEditValues] = useState({});
+ const [tableFilterParams, setTableFilterParams] = useState({ First: 1000 });
+ const formControl = useForm({
+ mode: "onChange",
+ });
+ const [accordionExpanded, setAccordionExpanded] = useState(false);
+
+ const addEditFormControl = useForm({
+ mode: "onChange",
+ });
+
+ const filterFormControl = useForm({
+ mode: "onChange",
+ defaultValues: {
+ First: 1000,
+ },
+ });
+
+ const tableFilter = useWatch({ control: formControl.control, name: "tableFilter" });
+
+ const fetchTables = ApiPostCall({
+ queryKey: "CippTables",
+ onResult: (result) => setTables(result),
+ });
+
+ const fetchTableData = ApiPostCall({
+ queryKey: "CippTableData",
+ onResult: (result) => {
+ setTableData(result);
+ },
+ });
+
+ const handleTableSelect = (tableName) => {
+ setSelectedTable(tableName);
+ fetchTableData.mutate({
+ url: apiUrl,
+ data: {
+ FunctionName: "Get-AzDataTableEntity",
+ TableName: tableName,
+ Parameters: filterFormControl.getValues(),
+ },
+ });
+ };
+
+ const handleRefresh = () => {
+ if (selectedTable) {
+ fetchTableData.mutate({
+ url: apiUrl,
+ data: {
+ FunctionName: "Get-AzDataTableEntity",
+ TableName: selectedTable,
+ Parameters: tableFilterParams,
+ },
+ });
+ }
+ };
+
+ const tableRowAction = ApiPostCall({
+ queryKey: "CippTableRowAction",
+ onResult: handleRefresh,
+ });
+
+ const handleTableRefresh = () => {
+ fetchTables.mutate({ url: apiUrl, data: { FunctionName: "Get-AzDataTable", Parameters: {} } });
+ };
+
+ const getSelectedProps = (data) => {
+ if (data?.Property && data?.Property.length > 0) {
+ var selectedProps = ["ETag", "PartitionKey", "RowKey"];
+ data?.Property.map((prop) => {
+ if (selectedProps.indexOf(prop.value) === -1) {
+ selectedProps.push(prop.value);
+ }
+ });
+ return selectedProps;
+ } else {
+ return [];
+ }
+ };
+
+ useEffect(() => {
+ handleTableRefresh();
+ }, []);
+
+ const actionItems = tables
+ .filter(
+ (table) =>
+ tableFilter === "" ||
+ tableFilter === undefined ||
+ table.toLowerCase().includes(tableFilter.toLowerCase())
+ )
+ .map((table) => ({
+ label: `${table}`,
+ customFunction: () => {
+ setTableData([]);
+ handleTableSelect(table);
+ },
+ noConfirm: true,
+ }));
+
+ const propertyItems = [
+ {
+ label: "",
+ value: (
+
+
+
+
+ ),
+ },
+ ];
+
+ const getTableFields = () => {
+ if (tableData.length === 0) return [];
+ const sampleRow = tableData[0];
+ return Object.keys(sampleRow)
+ .filter((key) => key !== "ETag" && key !== "Timestamp")
+ .map((key) => {
+ const value = sampleRow[key];
+ let type = "textField";
+ if (typeof value === "number") {
+ type = "number";
+ } else if (typeof value === "boolean") {
+ type = "switch";
+ }
+ return {
+ name: key,
+ label: key,
+ type: type,
+ required: false,
+ };
+ });
+ };
+
+ return (
+
+
+ {pageTitle}
+
+
+ This page allows you to view and manage data in Azure Tables. This is advanced functionality
+ that should only be used when directed by CyberDrain support.
+
+
+
+ a.label.localeCompare(b.label))}
+ isFetching={fetchTables.isPending}
+ cardSx={{ maxHeight: "calc(100vh - 170px)", overflow: "auto" }}
+ actionButton={
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ />
+
+
+ {selectedTable && (
+
+
+ {
+ var properties = getSelectedProps(data);
+ setTableFilterParams({ ...data, Property: properties });
+ handleRefresh();
+ setAccordionExpanded(false);
+ })}
+ >
+ Apply Filters
+
+ }
+ >
+
+ ({
+ label: field?.label,
+ value: field?.name,
+ }))}
+ />
+
+
+
+
+
+
+
+
+ }
+ actions={[
+ {
+ label: "Edit",
+ type: "POST",
+ icon: (
+
+
+ ),
+ customFunction: (row) => {
+ setDefaultAddEditValues({
+ fields: Object.keys(row)
+ .filter((key) => key !== "ETag" && key !== "Timestamp")
+ .map((key) => {
+ const value = row[key];
+ let type = "textField";
+ if (typeof value === "number") {
+ type = "number";
+ } else if (typeof value === "boolean") {
+ type = "switch";
+ }
+ return { name: key, value: value, type: type };
+ }),
+ });
+ addEditRowDialog.handleOpen();
+ },
+ noConfirm: true,
+ hideBulk: true,
+ },
+ {
+ label: "Delete",
+ type: "POST",
+ icon: (
+
+
+ ),
+ url: apiUrl,
+ customFunction: (row) => {
+ var entity = [];
+ if (Array.isArray(row)) {
+ entity = row.map((r) => ({
+ RowKey: r.RowKey,
+ PartitionKey: r.PartitionKey,
+ ETag: r.ETag,
+ }));
+ } else {
+ entity = {
+ RowKey: row.RowKey,
+ PartitionKey: row.PartitionKey,
+ ETag: row.ETag,
+ };
+ }
+ tableRowAction.mutate({
+ url: apiUrl,
+ data: {
+ FunctionName: "Remove-AzDataTableEntity",
+ TableName: selectedTable,
+ Parameters: {
+ Entity: entity,
+ },
+ },
+ });
+ },
+ confirmText:
+ "Do you want to delete the selected row(s)? This action cannot be undone.",
+ multiPost: true,
+ },
+ ]}
+ />
+
+
+ )}
+
+
+ {
+ handleTableRefresh();
+ },
+ }}
+ />
+
+
+ Are you sure you want to delete this table? This is a destructive action that cannot
+ be undone.
+
+
+ ),
+ type: "POST",
+ data: { FunctionName: "Remove-AzDataTable", TableName: selectedTable, Parameters: {} },
+ onSuccess: () => {
+ setSelectedTable(null);
+ setTableData([]);
+ handleTableRefresh();
+ },
+ }}
+ />
+ {
+ const payload = data.fields.reduce((acc, field) => {
+ acc[field.name] = field.value;
+ return acc;
+ }, {});
+ tableRowAction.mutate({
+ url: apiUrl,
+ data: {
+ FunctionName: "Add-AzDataTableEntity",
+ TableName: selectedTable,
+ Parameters: { Entity: payload, Force: true },
+ },
+ onSuccess: handleRefresh,
+ });
+ addEditRowDialog.handleClose();
+ }}
+ defaultValues={defaultAddEditValues}
+ />
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/cipp/advanced/timers.js b/src/pages/cipp/advanced/timers.js
deleted file mode 100644
index 669500a24d80..000000000000
--- a/src/pages/cipp/advanced/timers.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-import { SvgIcon, Button } from "@mui/material";
-import { Refresh, PlayArrow } from "@mui/icons-material";
-import { ApiPostCall } from "../../../api/ApiCall";
-import { useEffect, useState } from "react";
-import { CippTablePage } from "../../../components/CippComponents/CippTablePage";
-import { useDialog } from "../../../hooks/use-dialog";
-import { CippApiDialog } from "../../../components/CippComponents/CippApiDialog";
-
-const Page = () => {
- const pageTitle = "Timers";
- const apiUrl = "/api/ExecCippFunction";
- const apiData = { FunctionName: "Get-CIPPTimerFunctions", Parameters: { ListAllTasks: true } };
- const [data, setData] = useState([]);
- const createDialog = useDialog();
- const simpleColumns = [
- "Priority",
- "Command",
- "Parameters",
- "Cron",
- "NextOccurrence",
- "LastOccurrence",
- "Status",
- "PreferredProcessor",
- "ErrorMsg",
- ];
-
- const offCanvas = {
- extendedInfoFields: simpleColumns,
- actions: [],
- };
-
- const fetchData = ApiPostCall({
- relatedQueryKeys: ["CippTimers"],
- onResult: (result) => setData(result),
- });
-
- const handleRefresh = () => {
- fetchData.mutate({ url: apiUrl, data: apiData });
- };
-
- useEffect(() => {
- if (!fetchData.isSuccess) {
- handleRefresh();
- }
- }, [fetchData.isSuccess]);
-
- const ResetToDefaultButton = () => {
- return (
-
- );
- };
-
- return (
- <>
- {page} ;
-
-export default Page;
diff --git a/src/pages/cipp/advanced/timers.jsx b/src/pages/cipp/advanced/timers.jsx
new file mode 100644
index 000000000000..0f008ba9dc5a
--- /dev/null
+++ b/src/pages/cipp/advanced/timers.jsx
@@ -0,0 +1,106 @@
+import { Layout as DashboardLayout } from "../../../layouts/index";
+import { CippIcons } from "../../../utils/icon-registry"
+import { SvgIcon, Button } from "@mui/material";
+import { ApiPostCall } from "../../../api/ApiCall";
+import { useEffect, useState } from "react";
+import { CippTablePage } from "../../../components/CippComponents/CippTablePage";
+import { useDialog } from "../../../hooks/use-dialog";
+import { CippApiDialog } from "../../../components/CippComponents/CippApiDialog";
+
+const Page = () => {
+ const pageTitle = "Timers";
+ const apiUrl = "/api/ExecCippFunction";
+ const apiData = { FunctionName: "Get-CIPPTimerFunctions", Parameters: { ListAllTasks: true } };
+ const [data, setData] = useState([]);
+ const createDialog = useDialog();
+ const simpleColumns = [
+ "Priority",
+ "Command",
+ "Parameters",
+ "Cron",
+ "NextOccurrence",
+ "LastOccurrence",
+ "Status",
+ "PreferredProcessor",
+ "ErrorMsg",
+ ];
+
+ const offCanvas = {
+ extendedInfoFields: simpleColumns,
+ actions: [],
+ };
+
+ const fetchData = ApiPostCall({
+ relatedQueryKeys: ["CippTimers"],
+ onResult: (result) => setData(result),
+ });
+
+ const handleRefresh = () => {
+ fetchData.mutate({ url: apiUrl, data: apiData });
+ };
+
+ useEffect(() => {
+ if (!fetchData.isSuccess) {
+ handleRefresh();
+ }
+ }, [fetchData.isSuccess]);
+
+ const ResetToDefaultButton = () => {
+ return (
+
+ );
+ };
+
+ return (
+ <>
+ {page} ;
+
+export default Page;
diff --git a/src/pages/cipp/custom-data/directory-extensions/add.js b/src/pages/cipp/custom-data/directory-extensions/add.js
deleted file mode 100644
index 0b7d2e11e6ee..000000000000
--- a/src/pages/cipp/custom-data/directory-extensions/add.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { useForm, useFormState } from "react-hook-form";
-import { ApiPostCall } from "../../../../api/ApiCall";
-import { useRouter } from "next/router";
-import {
- Box,
- Button,
- Stack,
- CardContent,
- Typography,
- Divider,
- CardActions,
-} from "@mui/material";
-
-import CippPageCard from "../../../../components/CippCards/CippPageCard";
-import { CippApiResults } from "../../../../components/CippComponents/CippApiResults";
-import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
-
-const availableTargetObjects = [
- { value: "User", label: "User" },
- { value: "Group", label: "Group" },
- { value: "AdministrativeUnit", label: "Administrative Unit" },
- { value: "Application", label: "Application" },
- { value: "Device", label: "Device" },
- { value: "Organization", label: "Organization" },
-];
-
-const Page = () => {
- const router = useRouter();
- const formControl = useForm({
- mode: "onChange",
- defaultValues: {
- isMultiValued: false,
- targetObjects: [],
- },
- });
-
- const formState = useFormState({ control: formControl.control });
-
- const addDirectoryExtensionApi = ApiPostCall({
- urlFromData: true,
- relatedQueryKeys: ["DirectoryExtensionsListPage"],
- });
-
- const handleAddDirectoryExtension = (data) => {
- addDirectoryExtensionApi.mutate({
- url: "/api/ExecCustomData",
- data: {
- Action: "AddDirectoryExtension",
- name: data.name,
- dataType: data.dataType,
- isMultiValued: data.isMultiValued,
- targetObjects: data.targetObjects.map((targetObject) => targetObject.value),
- },
- });
- };
-
- const formFields = [
- {
- name: "name",
- label: "Extension Name",
- type: "textField",
- required: true,
- placeholder: "Enter a unique name for the directory extension",
- disableVariables: true,
- },
- {
- name: "dataType",
- label: "Data Type",
- type: "select",
- required: true,
- placeholder: "Select the data type for the directory extension",
- options: [
- { value: "Binary", label: "Binary (256 bytes max)" },
- { value: "Boolean", label: "Boolean" },
- { value: "DateTime", label: "DateTime (ISO 8601, UTC)" },
- { value: "Integer", label: "Integer (32-bit)" },
- { value: "LargeInteger", label: "LargeInteger (64-bit)" },
- { value: "String", label: "String (256 characters max)" },
- ],
- },
- {
- name: "isMultiValued",
- label: "Is Multi-Valued",
- type: "switch",
- required: false,
- },
- {
- name: "targetObjects",
- label: "Target Objects",
- type: "autoComplete",
- placeholder: "Select the directory objects that can use this extension",
- required: true,
- multiple: true,
- options: availableTargetObjects,
- validate: (value) => {
- if (value.length > 0) return true;
- return "Please select at least one target object.";
- },
- creatable: false,
- },
- ];
-
- return (
-
-
-
-
-
-
- Directory Extension Details
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/cipp/custom-data/directory-extensions/add.jsx b/src/pages/cipp/custom-data/directory-extensions/add.jsx
new file mode 100644
index 000000000000..7d74995eee85
--- /dev/null
+++ b/src/pages/cipp/custom-data/directory-extensions/add.jsx
@@ -0,0 +1,148 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { useForm, useFormState } from "react-hook-form";
+import { ApiPostCall } from "../../../../api/ApiCall";
+import { useRouter } from "next/router";
+import {
+ Box,
+ Button,
+ Stack,
+ CardContent,
+ Typography,
+ Divider,
+ CardActions,
+} from "@mui/material";
+
+import CippPageCard from "../../../../components/CippCards/CippPageCard";
+import { CippApiResults } from "../../../../components/CippComponents/CippApiResults";
+import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
+
+const availableTargetObjects = [
+ { value: "User", label: "User" },
+ { value: "Group", label: "Group" },
+ { value: "AdministrativeUnit", label: "Administrative Unit" },
+ { value: "Application", label: "Application" },
+ { value: "Device", label: "Device" },
+ { value: "Organization", label: "Organization" },
+];
+
+const Page = () => {
+ const router = useRouter();
+ const formControl = useForm({
+ mode: "onChange",
+ defaultValues: {
+ isMultiValued: false,
+ targetObjects: [],
+ },
+ });
+
+ const formState = useFormState({ control: formControl.control });
+
+ const addDirectoryExtensionApi = ApiPostCall({
+ urlFromData: true,
+ relatedQueryKeys: ["DirectoryExtensionsListPage"],
+ });
+
+ const handleAddDirectoryExtension = (data) => {
+ addDirectoryExtensionApi.mutate({
+ url: "/api/ExecCustomData",
+ data: {
+ Action: "AddDirectoryExtension",
+ name: data.name,
+ dataType: data.dataType,
+ isMultiValued: data.isMultiValued,
+ targetObjects: data.targetObjects.map((targetObject) => targetObject.value),
+ },
+ });
+ };
+
+ const formFields = [
+ {
+ name: "name",
+ label: "Extension Name",
+ type: "textField",
+ required: true,
+ placeholder: "Enter a unique name for the directory extension",
+ disableVariables: true,
+ },
+ {
+ name: "dataType",
+ label: "Data Type",
+ type: "select",
+ required: true,
+ placeholder: "Select the data type for the directory extension",
+ options: [
+ { value: "Binary", label: "Binary (256 bytes max)" },
+ { value: "Boolean", label: "Boolean" },
+ { value: "DateTime", label: "DateTime (ISO 8601, UTC)" },
+ { value: "Integer", label: "Integer (32-bit)" },
+ { value: "LargeInteger", label: "LargeInteger (64-bit)" },
+ { value: "String", label: "String (256 characters max)" },
+ ],
+ },
+ {
+ name: "isMultiValued",
+ label: "Is Multi-Valued",
+ type: "switch",
+ required: false,
+ },
+ {
+ name: "targetObjects",
+ label: "Target Objects",
+ type: "autoComplete",
+ placeholder: "Select the directory objects that can use this extension",
+ required: true,
+ multiple: true,
+ options: availableTargetObjects,
+ validate: (value) => {
+ if (value.length > 0) return true;
+ return "Please select at least one target object.";
+ },
+ creatable: false,
+ },
+ ];
+
+ return (
+
+
+
+
+
+
+ Directory Extension Details
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/cipp/custom-data/directory-extensions/index.js b/src/pages/cipp/custom-data/directory-extensions/index.js
deleted file mode 100644
index 5a223007c863..000000000000
--- a/src/pages/cipp/custom-data/directory-extensions/index.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { TabbedLayout } from "../../../../layouts/TabbedLayout";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { Alert, Button, Link, SvgIcon } from "@mui/material";
-import { Add } from "@mui/icons-material";
-import tabOptions from "../tabOptions";
-import NextLink from "next/link";
-import { TrashIcon } from "@heroicons/react/24/outline";
-
-const Page = () => {
- const pageTitle = "Directory Extensions";
-
- // Columns for the table
- const columns = [
- "name", // Extension ID
- "dataType", // Data Type
- "isMultiValued", // Multi-Valued
- "targetObjects", // Target Objects
- ];
-
- const actions = [
- {
- label: "Delete Directory Extension",
- icon:
-
- Directory extensions
- {" "}
- allow you to add custom properties to Microsoft Entra directory objects.
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/custom-data/directory-extensions/index.jsx b/src/pages/cipp/custom-data/directory-extensions/index.jsx
new file mode 100644
index 000000000000..b5241fbd37e7
--- /dev/null
+++ b/src/pages/cipp/custom-data/directory-extensions/index.jsx
@@ -0,0 +1,92 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { TabbedLayout } from "../../../../layouts/TabbedLayout";
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import { Alert, Button, Link, SvgIcon } from "@mui/material";
+import tabOptions from "../tabOptions";
+import NextLink from "next/link";
+
+const Page = () => {
+ const pageTitle = "Directory Extensions";
+
+ // Columns for the table
+ const columns = [
+ "name", // Extension ID
+ "dataType", // Data Type
+ "isMultiValued", // Multi-Valued
+ "targetObjects", // Target Objects
+ ];
+
+ const actions = [
+ {
+ label: "Delete Directory Extension",
+ icon:
+
+ Directory extensions
+ {" "}
+ allow you to add custom properties to Microsoft Entra directory objects.
+
+ {page}
+
+);
+
+export default Page;
diff --git a/src/pages/cipp/custom-data/mappings/add.js b/src/pages/cipp/custom-data/mappings/add.js
deleted file mode 100644
index 601fd777aa9e..000000000000
--- a/src/pages/cipp/custom-data/mappings/add.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { useForm, useFormState } from "react-hook-form";
-import { ApiPostCall } from "../../../../api/ApiCall";
-import { useRouter } from "next/router";
-import { Button, Stack, CardContent, CardActions } from "@mui/material";
-
-import CippPageCard from "../../../../components/CippCards/CippPageCard";
-import { CippApiResults } from "../../../../components/CippComponents/CippApiResults";
-import CippCustomDataMappingForm from "../../../../components/CippFormPages/CippCustomDataMappingForm";
-
-const Page = () => {
- const router = useRouter();
- const formControl = useForm({
- mode: "onChange",
- });
-
- const formState = useFormState({ control: formControl.control });
-
- const addMappingApi = ApiPostCall({
- urlFromData: true,
- relatedQueryKeys: ["MappingsListPage", "ManualEntryMappings*"],
- });
-
- const handleAddMapping = (data) => {
- // Filter data based on source type to only include relevant fields
- let filteredData;
-
- if (data.sourceType?.value === "manualEntry") {
- // For manual entry, only include these fields
- filteredData = {
- sourceType: data.sourceType,
- manualEntryFieldLabel: data.manualEntryFieldLabel,
- directoryObjectType: data.directoryObjectType,
- customDataAttribute: data.customDataAttribute,
- tenantFilter: data.tenantFilter,
- };
- } else if (data.sourceType?.value === "extensionSync") {
- // For extension sync, include the original fields
- filteredData = {
- sourceType: data.sourceType,
- extensionSyncDataset: data.extensionSyncDataset,
- extensionSyncProperty: data.extensionSyncProperty,
- directoryObjectType: data.directoryObjectType,
- customDataAttribute: data.customDataAttribute,
- tenantFilter: data.tenantFilter,
- };
- } else {
- // Fallback to all data if source type is not recognized
- filteredData = data;
- }
-
- addMappingApi.mutate({
- url: "/api/ExecCustomData",
- data: {
- Action: "AddEditMapping",
- Mapping: filteredData,
- },
- });
- };
-
- return (
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/cipp/custom-data/mappings/add.jsx b/src/pages/cipp/custom-data/mappings/add.jsx
new file mode 100644
index 000000000000..ed6cc76a0abc
--- /dev/null
+++ b/src/pages/cipp/custom-data/mappings/add.jsx
@@ -0,0 +1,88 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { useForm, useFormState } from "react-hook-form";
+import { ApiPostCall } from "../../../../api/ApiCall";
+import { useRouter } from "next/router";
+import { Button, Stack, CardContent, CardActions } from "@mui/material";
+
+import CippPageCard from "../../../../components/CippCards/CippPageCard";
+import { CippApiResults } from "../../../../components/CippComponents/CippApiResults";
+import CippCustomDataMappingForm from "../../../../components/CippFormPages/CippCustomDataMappingForm";
+
+const Page = () => {
+ const router = useRouter();
+ const formControl = useForm({
+ mode: "onChange",
+ });
+
+ const formState = useFormState({ control: formControl.control });
+
+ const addMappingApi = ApiPostCall({
+ urlFromData: true,
+ relatedQueryKeys: ["MappingsListPage", "ManualEntryMappings*"],
+ });
+
+ const handleAddMapping = (data) => {
+ // Filter data based on source type to only include relevant fields
+ let filteredData;
+
+ if (data.sourceType?.value === "manualEntry") {
+ // For manual entry, only include these fields
+ filteredData = {
+ sourceType: data.sourceType,
+ manualEntryFieldLabel: data.manualEntryFieldLabel,
+ directoryObjectType: data.directoryObjectType,
+ customDataAttribute: data.customDataAttribute,
+ tenantFilter: data.tenantFilter,
+ };
+ } else if (data.sourceType?.value === "extensionSync") {
+ // For extension sync, include the original fields
+ filteredData = {
+ sourceType: data.sourceType,
+ extensionSyncDataset: data.extensionSyncDataset,
+ extensionSyncProperty: data.extensionSyncProperty,
+ directoryObjectType: data.directoryObjectType,
+ customDataAttribute: data.customDataAttribute,
+ tenantFilter: data.tenantFilter,
+ };
+ } else {
+ // Fallback to all data if source type is not recognized
+ filteredData = data;
+ }
+
+ addMappingApi.mutate({
+ url: "/api/ExecCustomData",
+ data: {
+ Action: "AddEditMapping",
+ Mapping: filteredData,
+ },
+ });
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/cipp/custom-data/mappings/edit.js b/src/pages/cipp/custom-data/mappings/edit.js
deleted file mode 100644
index ca48da77ed14..000000000000
--- a/src/pages/cipp/custom-data/mappings/edit.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { useForm, useFormState } from "react-hook-form";
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { ApiPostCall, ApiGetCall } from "../../../../api/ApiCall";
-import { Button, Stack, CardContent, CardActions, Skeleton } from "@mui/material";
-
-import CippPageCard from "../../../../components/CippCards/CippPageCard";
-import { CippApiResults } from "../../../../components/CippComponents/CippApiResults";
-import CippCustomDataMappingForm from "../../../../components/CippFormPages/CippCustomDataMappingForm";
-
-const Page = () => {
- const router = useRouter();
- const { id } = router.query;
-
- const formControl = useForm({
- mode: "onChange",
- defaultValues: {}, // Default values will be populated after fetching data
- });
-
- const formState = useFormState({ control: formControl.control });
-
- const fetchMappingApi = ApiGetCall({
- url: `/api/ExecCustomData?Action=GetMapping&id=${id}`,
- onResult: (data) => {
- formControl.reset(data?.Results); // Populate form with fetched data
- },
- });
-
- const editMappingApi = ApiPostCall({
- urlFromData: true,
- relatedQueryKeys: ["MappingsListPage"],
- });
-
- const handleEditMapping = (data) => {
- // Filter data based on source type to only include relevant fields
- let filteredData;
-
- if (data.sourceType?.value === "manualEntry") {
- // For manual entry, only include these fields
- filteredData = {
- sourceType: data.sourceType,
- manualEntryFieldLabel: data.manualEntryFieldLabel,
- directoryObjectType: data.directoryObjectType,
- customDataAttribute: data.customDataAttribute,
- tenantFilter: data.tenantFilter,
- };
- } else if (data.sourceType?.value === "extensionSync") {
- // For extension sync, include the original fields
- filteredData = {
- sourceType: data.sourceType,
- extensionSyncDataset: data.extensionSyncDataset,
- extensionSyncProperty: data.extensionSyncProperty,
- directoryObjectType: data.directoryObjectType,
- customDataAttribute: data.customDataAttribute,
- tenantFilter: data.tenantFilter,
- };
- } else {
- // Fallback to all data if source type is not recognized
- filteredData = data;
- }
-
- editMappingApi.mutate({
- url: "/api/ExecCustomData",
- data: {
- Action: "AddEditMapping",
- id: id, // ID at top level for PowerShell function
- Mapping: filteredData,
- },
- });
- };
-
- useEffect(() => {
- if (id) {
- fetchMappingApi.refetch(); // Fetch mapping data when `id` is available
- }
- }, [id]);
-
- return (
-
-
-
- {fetchMappingApi.isFetching ? (
-
-
-
-
-
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/cipp/custom-data/mappings/edit.jsx b/src/pages/cipp/custom-data/mappings/edit.jsx
new file mode 100644
index 000000000000..41ac9e2dece1
--- /dev/null
+++ b/src/pages/cipp/custom-data/mappings/edit.jsx
@@ -0,0 +1,112 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { useForm, useFormState } from "react-hook-form";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { ApiPostCall, ApiGetCall } from "../../../../api/ApiCall";
+import { Button, Stack, CardContent, CardActions, Skeleton } from "@mui/material";
+
+import CippPageCard from "../../../../components/CippCards/CippPageCard";
+import { CippApiResults } from "../../../../components/CippComponents/CippApiResults";
+import CippCustomDataMappingForm from "../../../../components/CippFormPages/CippCustomDataMappingForm";
+
+const Page = () => {
+ const router = useRouter();
+ const { id } = router.query;
+
+ const formControl = useForm({
+ mode: "onChange",
+ defaultValues: {}, // Default values will be populated after fetching data
+ });
+
+ const formState = useFormState({ control: formControl.control });
+
+ const fetchMappingApi = ApiGetCall({
+ url: `/api/ExecCustomData?Action=GetMapping&id=${id}`,
+ onResult: (data) => {
+ formControl.reset(data?.Results); // Populate form with fetched data
+ },
+ });
+
+ const editMappingApi = ApiPostCall({
+ urlFromData: true,
+ relatedQueryKeys: ["MappingsListPage"],
+ });
+
+ const handleEditMapping = (data) => {
+ // Filter data based on source type to only include relevant fields
+ let filteredData;
+
+ if (data.sourceType?.value === "manualEntry") {
+ // For manual entry, only include these fields
+ filteredData = {
+ sourceType: data.sourceType,
+ manualEntryFieldLabel: data.manualEntryFieldLabel,
+ directoryObjectType: data.directoryObjectType,
+ customDataAttribute: data.customDataAttribute,
+ tenantFilter: data.tenantFilter,
+ };
+ } else if (data.sourceType?.value === "extensionSync") {
+ // For extension sync, include the original fields
+ filteredData = {
+ sourceType: data.sourceType,
+ extensionSyncDataset: data.extensionSyncDataset,
+ extensionSyncProperty: data.extensionSyncProperty,
+ directoryObjectType: data.directoryObjectType,
+ customDataAttribute: data.customDataAttribute,
+ tenantFilter: data.tenantFilter,
+ };
+ } else {
+ // Fallback to all data if source type is not recognized
+ filteredData = data;
+ }
+
+ editMappingApi.mutate({
+ url: "/api/ExecCustomData",
+ data: {
+ Action: "AddEditMapping",
+ id: id, // ID at top level for PowerShell function
+ Mapping: filteredData,
+ },
+ });
+ };
+
+ useEffect(() => {
+ if (id) {
+ fetchMappingApi.refetch(); // Fetch mapping data when `id` is available
+ }
+ }, [id]);
+
+ return (
+
+
+
+ {fetchMappingApi.isFetching ? (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/cipp/custom-data/mappings/index.js b/src/pages/cipp/custom-data/mappings/index.js
deleted file mode 100644
index f25c17fd83e1..000000000000
--- a/src/pages/cipp/custom-data/mappings/index.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { TabbedLayout } from "../../../../layouts/TabbedLayout";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { Alert, Button, SvgIcon, Typography } from "@mui/material";
-import { Add } from "@mui/icons-material";
-import tabOptions from "../tabOptions";
-import NextLink from "next/link";
-import { TrashIcon, PencilIcon } from "@heroicons/react/24/outline";
-
-const Page = () => {
- const pageTitle = "Custom Data Mappings";
-
- // Columns for the table
- const columns = [
- "tenant",
- "sourceType",
- "dataset",
- "syncProperty",
- "directoryObject",
- "customDataAttribute",
- ];
-
- const actions = [
- {
- label: "Edit Mapping",
- icon:
-
- Custom data mappings are used to synchronize custom data to directory objects. You can
- add, edit, or delete mappings here.
-
-
- }
- cardButton={
-
- }
- tenantInTitle={false}
- apiUrl="/api/ExecCustomData?Action=ListMappings"
- apiDataKey="Results"
- simpleColumns={columns}
- filters={[]}
- actions={actions}
- />
-
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/custom-data/mappings/index.jsx b/src/pages/cipp/custom-data/mappings/index.jsx
new file mode 100644
index 000000000000..1dbc4deed822
--- /dev/null
+++ b/src/pages/cipp/custom-data/mappings/index.jsx
@@ -0,0 +1,84 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { TabbedLayout } from "../../../../layouts/TabbedLayout";
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import { Alert, Button, SvgIcon, Typography } from "@mui/material";
+import tabOptions from "../tabOptions";
+import NextLink from "next/link";
+
+const Page = () => {
+ const pageTitle = "Custom Data Mappings";
+
+ // Columns for the table
+ const columns = [
+ "tenant",
+ "sourceType",
+ "dataset",
+ "syncProperty",
+ "directoryObject",
+ "customDataAttribute",
+ ];
+
+ const actions = [
+ {
+ label: "Edit Mapping",
+ pinned: true,
+ icon:
+
+ Custom data mappings are used to synchronize custom data to directory objects. You can
+ add, edit, or delete mappings here.
+
+
+ }
+ cardButton={
+
+ }
+ tenantInTitle={false}
+ apiUrl="/api/ExecCustomData?Action=ListMappings"
+ apiDataKey="Results"
+ simpleColumns={columns}
+ filters={[]}
+ actions={actions}
+ />
+
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
diff --git a/src/pages/cipp/custom-data/schema-extensions/add.js b/src/pages/cipp/custom-data/schema-extensions/add.js
deleted file mode 100644
index 4d8fb8760c80..000000000000
--- a/src/pages/cipp/custom-data/schema-extensions/add.js
+++ /dev/null
@@ -1,242 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { useForm, useWatch, useFormState } from "react-hook-form";
-import { ApiPostCall } from "../../../../api/ApiCall";
-import { useRouter } from "next/router";
-import {
- Box,
- Button,
- Stack,
- IconButton,
- CardContent,
- Typography,
- Divider,
- CardActions,
-} from "@mui/material";
-import { AddCircle, RemoveCircle } from "@mui/icons-material";
-
-import CippPageCard from "../../../../components/CippCards/CippPageCard";
-import { CippApiResults } from "../../../../components/CippComponents/CippApiResults";
-import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
-
-const availableTargetTypes = [
- { value: "user", label: "User" },
- { value: "group", label: "Group" },
- { value: "administrativeUnit", label: "Administrative Unit" },
- { value: "contact", label: "Contact" },
- { value: "device", label: "Device" },
- { value: "event", label: "Event (User and Group Calendars)" },
- { value: "message", label: "Message" },
- { value: "organization", label: "Organization" },
- { value: "post", label: "Post" },
-];
-
-const Page = () => {
- const router = useRouter();
- const formControl = useForm({
- mode: "onChange",
- defaultValues: {
- properties: [],
- status: "InDevelopment",
- },
- });
-
- const formState = useFormState({ control: formControl.control });
-
- const addSchemaApi = ApiPostCall({
- urlFromData: true,
- relatedQueryKeys: ["SchemaExtensionsListPage"],
- });
-
- const handleAddSchema = (data) => {
- //console.log(data);
- if (!data.properties || data.properties.length === 0) {
- formControl.setError("properties", {
- type: "manual",
- message: "At least one property must be added.",
- });
- return;
- }
-
- addSchemaApi.mutate({
- url: "/api/ExecCustomData",
- data: {
- Action: "AddSchemaExtension",
- schemaExtension: {
- id: data.id,
- description: data.description,
- targetTypes: data.targetTypes.map((targetType) => targetType.value),
- status: data.status,
- properties: data.properties,
- },
- },
- });
- };
-
- const properties = useWatch({ control: formControl.control, name: "properties" });
-
- const addProperty = () => {
- formControl.setValue("properties", [...properties, { name: "", type: null }]);
- if (formControl.formState.errors.properties) {
- formControl.clearErrors("properties");
- }
- };
-
- const removeProperty = (index) => {
- const updatedProperties = properties.filter((_, i) => i !== index);
- formControl.setValue("properties", updatedProperties);
- };
-
- const handlePropertyChange = (index, field, value) => {
- const updatedProperties = properties.map((property, i) =>
- i === index ? { ...property, [field]: value } : property
- );
- formControl.setValue("properties", updatedProperties);
- };
-
- const formFields = [
- {
- name: "id",
- label: "Schema ID",
- type: "textField",
- required: true,
- placeholder:
- "Enter a schema id (e.g. cippUser). The prefix is generated automatically after creation.",
- disableVariables: true,
- },
- {
- name: "description",
- label: "Description",
- type: "textField",
- required: true,
- placeholder: "Enter a description for the schema extension",
- disableVariables: true,
- },
- {
- name: "status",
- label: "Status",
- type: "select",
- required: true,
- placeholder: "Select a status for the schema extensions (e.g. InDevelopment, Available)",
- options: [
- { value: "InDevelopment", label: "In Development" },
- { value: "Available", label: "Available" },
- ],
- creatable: false,
- },
- {
- name: "targetTypes",
- label: "Target Types",
- type: "autoComplete",
- placeholder: "Select the directory object target types for the schema extension",
- required: true,
- multiple: true,
- options: availableTargetTypes,
- creatable: false,
- validate: (value) => {
- if (value.length > 0) return true;
- return "Please select at least one target type.";
- },
- },
- ];
-
- const propertyTypeOptions = [
- { value: "Binary", label: "Binary (256 bytes max)" },
- { value: "Boolean", label: "Boolean" },
- { value: "DateTime", label: "DateTime (ISO 8601, UTC)" },
- { value: "Integer", label: "Integer (32-bit)" },
- { value: "String", label: "String (256 characters max)" },
- ];
-
- return (
-
-
-
-
-
-
- Schema Details
- Properties
-
-
- handlePropertyChange(index, "name", e.target.value)}
- required={true}
- />
-
-
- handlePropertyChange(index, "type", e.target.value)}
- options={propertyTypeOptions}
- required={true}
- validate={(value) => {
- if (value) return true;
- return "Please select a property type.";
- }}
- />
-
- removeProperty(index)}>
-
-
- ))}
-
- }>
- Add Property
-
- {formControl.formState.errors.properties && (
-
- {formControl.formState.errors.properties.message}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/cipp/custom-data/schema-extensions/add.jsx b/src/pages/cipp/custom-data/schema-extensions/add.jsx
new file mode 100644
index 000000000000..ef6a298b8bcb
--- /dev/null
+++ b/src/pages/cipp/custom-data/schema-extensions/add.jsx
@@ -0,0 +1,248 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry";
+import { useForm, useWatch, useFormState } from "react-hook-form";
+import { ApiPostCall } from "../../../../api/ApiCall";
+import { useRouter } from "next/router";
+import {
+ Box,
+ Button,
+ Stack,
+ IconButton,
+ CardContent,
+ Typography,
+ Divider,
+ CardActions,
+} from "@mui/material";
+import CippPageCard from "../../../../components/CippCards/CippPageCard";
+import { CippApiResults } from "../../../../components/CippComponents/CippApiResults";
+import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
+
+const availableTargetTypes = [
+ { value: "user", label: "User" },
+ { value: "group", label: "Group" },
+ { value: "administrativeUnit", label: "Administrative Unit" },
+ { value: "contact", label: "Contact" },
+ { value: "device", label: "Device" },
+ { value: "event", label: "Event (User and Group Calendars)" },
+ { value: "message", label: "Message" },
+ { value: "organization", label: "Organization" },
+ { value: "post", label: "Post" },
+];
+
+const Page = () => {
+ const router = useRouter();
+ const formControl = useForm({
+ mode: "onChange",
+ defaultValues: {
+ properties: [],
+ status: "InDevelopment",
+ // Without a default, targetTypes.validate ran against undefined the moment the DOM-leak
+ // stopped swallowing the `validate` prop below.
+ targetTypes: [],
+ },
+ });
+
+ const formState = useFormState({ control: formControl.control });
+
+ const addSchemaApi = ApiPostCall({
+ urlFromData: true,
+ relatedQueryKeys: ["SchemaExtensionsListPage"],
+ });
+
+ const handleAddSchema = (data) => {
+ //console.log(data);
+ if (!data.properties || data.properties.length === 0) {
+ formControl.setError("properties", {
+ type: "manual",
+ message: "At least one property must be added.",
+ });
+ return;
+ }
+
+ addSchemaApi.mutate({
+ url: "/api/ExecCustomData",
+ data: {
+ Action: "AddSchemaExtension",
+ schemaExtension: {
+ id: data.id,
+ description: data.description,
+ targetTypes: data.targetTypes.map((targetType) => targetType.value),
+ status: data.status,
+ properties: data.properties,
+ },
+ },
+ });
+ };
+
+ const properties = useWatch({ control: formControl.control, name: "properties" });
+
+ const addProperty = () => {
+ formControl.setValue("properties", [...properties, { name: "", type: null }]);
+ if (formControl.formState.errors.properties) {
+ formControl.clearErrors("properties");
+ }
+ };
+
+ const removeProperty = (index) => {
+ const updatedProperties = properties.filter((_, i) => i !== index);
+ formControl.setValue("properties", updatedProperties);
+ };
+
+ const handlePropertyChange = (index, field, value) => {
+ const updatedProperties = properties.map((property, i) =>
+ i === index ? { ...property, [field]: value } : property
+ );
+ formControl.setValue("properties", updatedProperties);
+ };
+
+ const formFields = [
+ {
+ name: "id",
+ label: "Schema ID",
+ type: "textField",
+ required: true,
+ placeholder:
+ "Enter a schema id (e.g. cippUser). The prefix is generated automatically after creation.",
+ disableVariables: true,
+ },
+ {
+ name: "description",
+ label: "Description",
+ type: "textField",
+ required: true,
+ placeholder: "Enter a description for the schema extension",
+ disableVariables: true,
+ },
+ {
+ name: "status",
+ label: "Status",
+ type: "select",
+ required: true,
+ placeholder: "Select a status for the schema extensions (e.g. InDevelopment, Available)",
+ options: [
+ { value: "InDevelopment", label: "In Development" },
+ { value: "Available", label: "Available" },
+ ],
+ creatable: false,
+ },
+ {
+ name: "targetTypes",
+ label: "Target Types",
+ type: "autoComplete",
+ placeholder: "Select the directory object target types for the schema extension",
+ required: true,
+ multiple: true,
+ options: availableTargetTypes,
+ creatable: false,
+ validate: (value) => {
+ if (value.length > 0) return true;
+ return "Please select at least one target type.";
+ },
+ },
+ ];
+
+ const propertyTypeOptions = [
+ { value: "Binary", label: "Binary (256 bytes max)" },
+ { value: "Boolean", label: "Boolean" },
+ { value: "DateTime", label: "DateTime (ISO 8601, UTC)" },
+ { value: "Integer", label: "Integer (32-bit)" },
+ { value: "String", label: "String (256 characters max)" },
+ ];
+
+ return (
+
+
+
+
+
+
+ Schema Details
+ Properties
+
+
+ handlePropertyChange(index, "name", e.target.value)}
+ required={true}
+ />
+
+
+ handlePropertyChange(index, "type", e.target.value)}
+ options={propertyTypeOptions}
+ required={true}
+ validators={{
+ validate: (value) => {
+ if (value) return true;
+ return "Please select a property type.";
+ },
+ }}
+ />
+
+ removeProperty(index)}>
+
+
+ ))}
+
+ }>
+ Add Property
+
+ {formControl.formState.errors.properties && (
+
+ {formControl.formState.errors.properties.message}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/cipp/custom-data/schema-extensions/index.js b/src/pages/cipp/custom-data/schema-extensions/index.js
deleted file mode 100644
index 17faba908d40..000000000000
--- a/src/pages/cipp/custom-data/schema-extensions/index.js
+++ /dev/null
@@ -1,161 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { TabbedLayout } from "../../../../layouts/TabbedLayout";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { Alert, Button, Link, SvgIcon, Typography } from "@mui/material";
-import { Add, Block, CheckCircleOutline } from "@mui/icons-material";
-import tabOptions from "../tabOptions";
-import { TrashIcon } from "@heroicons/react/24/outline";
-import NextLink from "next/link";
-import { CippExpandableAlert } from "../../../../components/CippComponents/CippExpandableAlert";
-
-const Page = () => {
- const pageTitle = "Schema Extensions";
-
- // Columns for the table
- const columns = [
- "id", // Schema ID
- "status", // Status
- "description", // Description
- "targetTypes", // Target Types
- "properties", // Properties
- ];
-
- const actions = [
- {
- label: "Add Property",
- icon: Add a new property to the schema.
- Properties cannot be deleted once they are created.
-
- ),
- fields: [
- {
- name: "name",
- label: "Property Name",
- type: "textField",
- required: true,
- disableVariables: true,
- },
- {
- name: "type",
- label: "Property Type",
- type: "select",
- required: true,
- options: [
- { value: "Binary", label: "Binary (256 bytes max)" },
- { value: "Boolean", label: "Boolean" },
- { value: "DateTime", label: "DateTime (ISO 8601, UTC)" },
- { value: "Integer", label: "Integer (32-bit)" },
- { value: "String", label: "String (256 characters max)" },
- ],
- creatable: false,
- validate: (value) => {
- if (value) return true;
- return "Please select a property type.";
- },
- },
- ],
- hideBulk: true,
- condition: (row) => row.status !== "Deprecated",
- },
- {
- label: "Set to Available",
- icon:
-
- Schema extensions
- {" "}
- allow you to add custom properties to Microsoft Entra directory objects.
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/custom-data/schema-extensions/index.jsx b/src/pages/cipp/custom-data/schema-extensions/index.jsx
new file mode 100644
index 000000000000..93dffc91150f
--- /dev/null
+++ b/src/pages/cipp/custom-data/schema-extensions/index.jsx
@@ -0,0 +1,160 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { TabbedLayout } from "../../../../layouts/TabbedLayout";
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import { Alert, Button, Link, SvgIcon, Typography } from "@mui/material";
+import tabOptions from "../tabOptions";
+import NextLink from "next/link";
+import { CippExpandableAlert } from "../../../../components/CippComponents/CippExpandableAlert";
+
+const Page = () => {
+ const pageTitle = "Schema Extensions";
+
+ // Columns for the table
+ const columns = [
+ "id", // Schema ID
+ "status", // Status
+ "description", // Description
+ "targetTypes", // Target Types
+ "properties", // Properties
+ ];
+
+ const actions = [
+ {
+ label: "Add Property",
+ icon: Add a new property to the schema.
+ Properties cannot be deleted once they are created.
+
+ ),
+ fields: [
+ {
+ name: "name",
+ label: "Property Name",
+ type: "textField",
+ required: true,
+ disableVariables: true,
+ },
+ {
+ name: "type",
+ label: "Property Type",
+ type: "select",
+ required: true,
+ options: [
+ { value: "Binary", label: "Binary (256 bytes max)" },
+ { value: "Boolean", label: "Boolean" },
+ { value: "DateTime", label: "DateTime (ISO 8601, UTC)" },
+ { value: "Integer", label: "Integer (32-bit)" },
+ { value: "String", label: "String (256 characters max)" },
+ ],
+ creatable: false,
+ validate: (value) => {
+ if (value) return true;
+ return "Please select a property type.";
+ },
+ },
+ ],
+ hideBulk: true,
+ condition: (row) => row.status !== "Deprecated",
+ },
+ {
+ label: "Set to Available",
+ icon:
+
+ Schema extensions
+ {" "}
+ allow you to add custom properties to Microsoft Entra directory objects.
+
+ {page}
+
+);
+
+export default Page;
diff --git a/src/pages/cipp/extension-sync/index.js b/src/pages/cipp/extension-sync/index.js
deleted file mode 100644
index 7fe6fa1c271e..000000000000
--- a/src/pages/cipp/extension-sync/index.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-import { CippTablePage } from "../../../components/CippComponents/CippTablePage.jsx";
-import { Button } from "@mui/material";
-import { Refresh } from "@mui/icons-material";
-
-const Page = () => {
- const pageTitle = "Extension Sync";
-
- return (
- {page} ;
-
-export default Page;
diff --git a/src/pages/cipp/extension-sync/index.jsx b/src/pages/cipp/extension-sync/index.jsx
new file mode 100644
index 000000000000..b62ed014cb47
--- /dev/null
+++ b/src/pages/cipp/extension-sync/index.jsx
@@ -0,0 +1,43 @@
+import { Layout as DashboardLayout } from "../../../layouts/index";
+import { CippIcons } from "../../../utils/icon-registry"
+import { CippTablePage } from "../../../components/CippComponents/CippTablePage.jsx";
+import { Button } from "@mui/material";
+
+const Page = () => {
+ const pageTitle = "Extension Sync";
+
+ return (
+ {page} ;
+
+export default Page;
diff --git a/src/pages/cipp/integrations/configure.js b/src/pages/cipp/integrations/configure.js
deleted file mode 100644
index b83c9c27539d..000000000000
--- a/src/pages/cipp/integrations/configure.js
+++ /dev/null
@@ -1,335 +0,0 @@
-import {
- Alert,
- Box,
- Button,
- Card,
- CardContent,
- Skeleton,
- Stack,
- Tab,
- Tabs,
- Typography,
-} from "@mui/material";
-import CippIntegrationSettings from "../../../components/CippIntegrations/CippIntegrationSettings";
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-import { useForm } from "react-hook-form";
-import { useSettings } from "../../../hooks/use-settings";
-import { ApiGetCall, ApiPostCall } from "../../../api/ApiCall";
-import { useRouter } from "next/router";
-import extensions from "../../../data/Extensions.json";
-import { useEffect } from "react";
-import { ArrowPathIcon, ArrowTopRightOnSquareIcon, BeakerIcon } from "@heroicons/react/24/outline";
-import { SvgIcon } from "@mui/material";
-import { useState } from "react";
-import { CippApiResults } from "../../../components/CippComponents/CippApiResults";
-import CippPageCard from "../../../components/CippCards/CippPageCard";
-import CippIntegrationTenantMapping from "../../../components/CippIntegrations/CippIntegrationTenantMapping";
-import CippIntegrationFieldMapping from "../../../components/CippIntegrations/CippIntegrationFieldMapping";
-import { CippCardTabPanel } from "../../../components/CippComponents/CippCardTabPanel";
-import CippApiClientManagement from "../../../components/CippIntegrations/CippApiClientManagement";
-import CippApiDocumentation from "../../../components/CippIntegrations/CippApiDocumentation";
-
-function tabProps(index) {
- return {
- id: `simple-tab-${index}`,
- "aria-controls": `simple-tabpanel-${index}`,
- };
-}
-
-const Page = () => {
- const router = useRouter();
- const settings = useSettings();
- const preferredTheme = settings.currentTheme?.value;
- const [value, setValue] = useState(0);
-
- const integrations = ApiGetCall({
- url: "/api/ListExtensionsConfig",
- queryKey: "Integrations",
- refetchOnMount: false,
- refetchOnReconnect: false,
- });
-
- const [testQuery, setTestQuery] = useState({ url: "", waiting: false, queryKey: "" });
- const actionTestResults = ApiGetCall({
- ...testQuery,
- });
-
- const handleTabChange = (event, newValue) => {
- setValue(newValue);
- };
-
- const handleIntegrationTest = () => {
- if (testQuery.waiting) {
- actionTestResults.refetch();
- }
- setTestQuery({
- url: "/api/ExecExtensionTest",
- data: {
- extensionName: router.query.id,
- },
- waiting: true,
- queryKey: `ExecExtensionTest-${router.query.id}`,
- });
- };
-
- const [syncQuery, setSyncQuery] = useState({ url: "", waiting: false, queryKey: "" });
- const actionSyncResults = ApiGetCall({
- ...syncQuery,
- });
-
- const [haloTestTicketQuery, setHaloTestTicketQuery] = useState({ url: "", waiting: false, queryKey: "" });
- const actionHaloTestTicketResults = ApiGetCall({
- ...haloTestTicketQuery,
- });
- const handleHaloTestTicket = () => {
- if (haloTestTicketQuery.waiting) {
- actionHaloTestTicketResults.refetch();
- }
- setHaloTestTicketQuery({
- url: "/api/ExecHaloPSATestTicket",
- waiting: true,
- queryKey: `ExecHaloPSATestTicket-${router.query.id}`,
- });
- };
- const clearHIBPKey = ApiPostCall({
- relatedQueryKeys: ["Integrations"],
- });
- const handleIntegrationSync = () => {
- setSyncQuery({
- url: "/api/ExecExtensionSync",
- data: {
- Extension: router.query.id,
- },
- waiting: true,
- queryKey: `ExecExtensionSync-${router.query.id}`,
- });
- };
-
- const formControl = useForm({
- mode: "onChange",
- defaultValues: integrations?.data,
- });
-
- const extension = extensions.find((extension) => extension.id === router.query.id) || {};
-
- var logo = extension?.logo;
- if (preferredTheme === "dark" && extension?.logoDark) {
- logo = extension.logoDark;
- }
-
- useEffect(() => {
- if (integrations.isSuccess) {
- formControl.reset({
- ...integrations.data,
- });
- formControl.trigger();
- }
- }, [integrations.isSuccess]);
-
- return (
- <>
- {integrations.isLoading && (
-
-
-
-
-
-
- )}
- {integrations.isSuccess && extension && (
-
-
- {logo && (
-
- {extension.helpText}
-
- {extension?.alertText && (
-
- {extension.alertText}
-
- )}
-
- {extension?.hideTestButton !== true && (
-
-
-
- )}
- {extension?.forceSyncButton && (
-
-
-
- )}
- {extension?.id === "HaloPSA" && (
-
-
-
- )}
- {extension?.id === "HIBP" && (
-
-
-
- )}
- {extension?.links && (
- <>
- {extension.links.map((link, index) => (
-
-
-
- ))}
-
- )}
-
-
-
-
-
- setting?.name === `${extension.id}.Enabled`
- ) && integrations?.data?.[extension.id]?.Enabled !== true
- }
- />
- )}
- {extension?.fieldMapping && (
- setting.name === `${extension.id}.Enabled`
- ) && integrations?.data?.[extension.id]?.Enabled !== true
- }
- />
- )}
- {/* An explicit value is required: MUI falls back to the child index when a
- Tab has none, and the Tenant Mapping / Field Mapping tabs are absent for
- cippapi, so this would otherwise be tab 1 while its panel waits on 3. */}
- {extension?.id === "cippapi" && (
-
-
-
- {extension?.id === "cippapi" ? (
-
-
- {extension?.mappingRequired && (
-
-
- )}
- {extension?.fieldMapping && (
-
-
- )}
- {extension?.id === "cippapi" && (
-
-
- )}
-
-
- )}
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/cipp/integrations/configure.jsx b/src/pages/cipp/integrations/configure.jsx
new file mode 100644
index 000000000000..0e3f57a49c63
--- /dev/null
+++ b/src/pages/cipp/integrations/configure.jsx
@@ -0,0 +1,337 @@
+import {
+ Alert,
+ Box,
+ Button,
+ Card,
+ CardContent,
+ Skeleton,
+ Stack,
+ Tab,
+ Tabs,
+ Typography,
+} from "@mui/material";
+import { CippIcons } from "../../../utils/icon-registry";
+import CippIntegrationSettings from "../../../components/CippIntegrations/CippIntegrationSettings";
+import { Layout as DashboardLayout } from "../../../layouts/index";
+import { useForm } from "react-hook-form";
+import { useSettings } from "../../../hooks/use-settings";
+import { ApiGetCall, ApiPostCall } from "../../../api/ApiCall";
+import { useRouter } from "next/router";
+import extensions from "../../../data/Extensions.json";
+import { useEffect } from "react";
+import { SvgIcon } from "@mui/material";
+import { useState } from "react";
+import { CippApiResults } from "../../../components/CippComponents/CippApiResults";
+import CippPageCard from "../../../components/CippCards/CippPageCard";
+import CippIntegrationTenantMapping from "../../../components/CippIntegrations/CippIntegrationTenantMapping";
+import CippIntegrationFieldMapping from "../../../components/CippIntegrations/CippIntegrationFieldMapping";
+import { CippCardTabPanel } from "../../../components/CippComponents/CippCardTabPanel";
+import CippApiClientManagement from "../../../components/CippIntegrations/CippApiClientManagement";
+import CippApiDocumentation from "../../../components/CippIntegrations/CippApiDocumentation";
+
+function tabProps(index) {
+ return {
+ id: `simple-tab-${index}`,
+ "aria-controls": `simple-tabpanel-${index}`,
+ };
+}
+
+const Page = () => {
+ const router = useRouter();
+ const settings = useSettings();
+ const preferredTheme = settings.currentTheme?.value;
+ const [value, setValue] = useState(0);
+
+ const integrations = ApiGetCall({
+ url: "/api/ListExtensionsConfig",
+ queryKey: "Integrations",
+ refetchOnMount: false,
+ refetchOnReconnect: false,
+ });
+
+ const [testQuery, setTestQuery] = useState({ url: "", waiting: false, queryKey: "" });
+ const actionTestResults = ApiGetCall({
+ ...testQuery,
+ });
+
+ const handleTabChange = (event, newValue) => {
+ setValue(newValue);
+ };
+
+ const handleIntegrationTest = () => {
+ if (testQuery.waiting) {
+ actionTestResults.refetch();
+ }
+ setTestQuery({
+ url: "/api/ExecExtensionTest",
+ data: {
+ extensionName: router.query.id,
+ },
+ waiting: true,
+ queryKey: `ExecExtensionTest-${router.query.id}`,
+ });
+ };
+
+ const [syncQuery, setSyncQuery] = useState({ url: "", waiting: false, queryKey: "" });
+ const actionSyncResults = ApiGetCall({
+ ...syncQuery,
+ });
+
+ const [haloTestTicketQuery, setHaloTestTicketQuery] = useState({ url: "", waiting: false, queryKey: "" });
+ const actionHaloTestTicketResults = ApiGetCall({
+ ...haloTestTicketQuery,
+ });
+ const handleHaloTestTicket = () => {
+ if (haloTestTicketQuery.waiting) {
+ actionHaloTestTicketResults.refetch();
+ }
+ setHaloTestTicketQuery({
+ url: "/api/ExecHaloPSATestTicket",
+ waiting: true,
+ queryKey: `ExecHaloPSATestTicket-${router.query.id}`,
+ });
+ };
+ const clearHIBPKey = ApiPostCall({
+ relatedQueryKeys: ["Integrations"],
+ });
+ const handleIntegrationSync = () => {
+ setSyncQuery({
+ url: "/api/ExecExtensionSync",
+ data: {
+ Extension: router.query.id,
+ },
+ waiting: true,
+ queryKey: `ExecExtensionSync-${router.query.id}`,
+ });
+ };
+
+ const formControl = useForm({
+ mode: "onChange",
+ defaultValues: integrations?.data,
+ });
+
+ const extension = extensions.find((extension) => extension.id === router.query.id) || {};
+
+ var logo = extension?.logo;
+ if (preferredTheme === "dark" && extension?.logoDark) {
+ logo = extension.logoDark;
+ }
+
+ useEffect(() => {
+ if (integrations.isSuccess) {
+ formControl.reset({
+ ...integrations.data,
+ });
+ formControl.trigger();
+ }
+ }, [integrations.isSuccess]);
+
+ return (
+ <>
+ {integrations.isLoading && (
+
+
+
+
+
+
+ )}
+ {integrations.isSuccess && extension && (
+
+
+ {logo && (
+
+ {extension.helpText}
+
+ {extension?.alertText && (
+
+ {extension.alertText}
+
+ )}
+
+ {extension?.hideTestButton !== true && (
+
+
+
+ )}
+ {extension?.forceSyncButton && (
+
+
+
+ )}
+ {extension?.id === "HaloPSA" && (
+
+
+
+ )}
+ {extension?.id === "HIBP" && (
+
+
+
+ )}
+ {extension?.links && (
+ <>
+ {extension.links.map((link, index) => (
+
+
+
+ ))}
+
+ )}
+
+
+
+
+
+ setting?.name === `${extension.id}.Enabled`
+ ) && integrations?.data?.[extension.id]?.Enabled !== true
+ }
+ />
+ )}
+ {extension?.fieldMapping && (
+ setting.name === `${extension.id}.Enabled`
+ ) && integrations?.data?.[extension.id]?.Enabled !== true
+ }
+ />
+ )}
+ {/* An explicit value is required: MUI falls back to the child index when a
+ Tab has none, and the Tenant Mapping / Field Mapping tabs are absent for
+ cippapi, so this would otherwise be tab 1 while its panel waits on 3. */}
+ {extension?.id === "cippapi" && (
+
+
+
+ {extension?.id === "cippapi" ? (
+
+
+ {extension?.mappingRequired && (
+
+
+ )}
+ {extension?.fieldMapping && (
+
+
+ )}
+ {extension?.id === "cippapi" && (
+
+
+ )}
+
+
+ )}
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/cipp/integrations/index.js b/src/pages/cipp/integrations/index.js
deleted file mode 100644
index a60530323c46..000000000000
--- a/src/pages/cipp/integrations/index.js
+++ /dev/null
@@ -1,198 +0,0 @@
-import { Layout as DashboardLayout } from '../../../layouts/index.js'
-import {
- Box,
- Button,
- Card,
- CardActionArea,
- CardActions,
- CardContent,
- Container,
- Skeleton,
- Stack,
- Typography,
-} from '@mui/material'
-import extensions from '../../../data/Extensions'
-import { Sync } from '@mui/icons-material'
-import { useSettings } from '../../../hooks/use-settings'
-import { ApiGetCall } from '../../../api/ApiCall'
-import Link from 'next/link'
-import { Grid } from '@mui/system'
-import { CippHead } from '../../../components/CippComponents/CippHead'
-
-const Page = () => {
- const settings = useSettings()
- const preferredTheme = settings.currentTheme?.value
-
- const integrations = ApiGetCall({
- url: '/api/ListExtensionsConfig',
- queryKey: 'Integrations',
- refetchOnMount: false,
- refetchOnReconnect: false,
- })
-
- return (
-
-
- Integrations
- }
- LinkComponent={Link}
- href="/cipp/integrations/sync"
- >
- Sync Jobs
-
-
-
-
- {extensions.map((extension) => {
- var logo = extension.logo
- if (preferredTheme === 'dark' && extension?.logoDark) {
- logo = extension.logoDark
- }
-
- var integrationConfig = integrations?.data?.[extension.id]
- var isEnabled = integrationConfig?.Enabled || extension.id === 'cippapi'
- var status = 'Unconfigured'
- if (integrationConfig && !isEnabled) {
- status = 'Disabled'
- } else if ((integrationConfig && isEnabled) || extension.id === 'cippapi') {
- status = 'Enabled'
- }
-
- const cardContent = (
-
- {extension.comingSoon && (
-
- Coming Soon
-
- )}
-
-
- {extension?.logo && (
-
-
- {extension.description}
-
-
-
-
-
- {extension.comingSoon ? (
- <>
- Coming Soon Through Third-Party
-
- ) : (
- <>
- {integrations.isSuccess ? (
-
- {integrations.isSuccess ? status : 'Loading'}
-
-
- )}
-
-
-
- )
-
- return (
-
- {extension.comingSoon ? (
- cardContent
- ) : (
-
- {cardContent}
-
- )}
-
- )
- })}
-
-
- )
-}
-
-Page.getLayout = (page) => {page}
-
-export default Page
diff --git a/src/pages/cipp/integrations/index.jsx b/src/pages/cipp/integrations/index.jsx
new file mode 100644
index 000000000000..93f05171bb54
--- /dev/null
+++ b/src/pages/cipp/integrations/index.jsx
@@ -0,0 +1,214 @@
+import { Layout as DashboardLayout } from '../../../layouts/index'
+import { CippIcons } from '../../../utils/icon-registry'
+import {
+ Box,
+ Button,
+ Card,
+ CardActionArea,
+ CardActions,
+ CardContent,
+ Container,
+ Skeleton,
+ Stack,
+ Typography,
+} from '@mui/material'
+import extensions from '../../../data/Extensions'
+import { useSettings } from '../../../hooks/use-settings'
+import { ApiGetCall } from '../../../api/ApiCall'
+import Link from 'next/link'
+import { Grid } from '@mui/system'
+import { CippHead } from '../../../components/CippComponents/CippHead'
+
+const Page = () => {
+ const settings = useSettings()
+ const preferredTheme = settings.currentTheme?.value
+
+ const integrations = ApiGetCall({
+ url: '/api/ListExtensionsConfig',
+ queryKey: 'Integrations',
+ refetchOnMount: false,
+ refetchOnReconnect: false,
+ })
+
+ return (
+
+
+ Integrations
+ }
+ LinkComponent={Link}
+ href="/cipp/integrations/sync"
+ >
+ Sync Jobs
+
+
+
+
+ {extensions.map((extension) => {
+ var logo = extension.logo
+ if (preferredTheme === 'dark' && extension?.logoDark) {
+ logo = extension.logoDark
+ }
+
+ var integrationConfig = integrations?.data?.[extension.id]
+ var isEnabled = integrationConfig?.Enabled || extension.id === 'cippapi'
+ var status = 'Unconfigured'
+ if (integrationConfig && !isEnabled) {
+ status = 'Disabled'
+ } else if ((integrationConfig && isEnabled) || extension.id === 'cippapi') {
+ status = 'Enabled'
+ }
+
+ const cardContent = (
+
+ {extension.comingSoon && (
+
+ Coming Soon
+
+ )}
+
+
+ {extension?.logo && (
+
+
+ {extension.description}
+
+
+
+
+
+ {extension.comingSoon ? (
+ <>
+ Coming Soon Through Third-Party
+
+ ) : (
+ <>
+ {integrations.isSuccess ? (
+
+ {integrations.isSuccess ? status : 'Loading'}
+
+
+ )}
+
+
+
+ )
+
+ return (
+
+ {extension.comingSoon ? (
+ cardContent
+ ) : (
+
+ {cardContent}
+
+ )}
+
+ )
+ })}
+
+
+ );
+}
+
+Page.getLayout = (page) => {page}
+
+export default Page
diff --git a/src/pages/cipp/integrations/sync.js b/src/pages/cipp/integrations/sync.js
deleted file mode 100644
index 952dae276db2..000000000000
--- a/src/pages/cipp/integrations/sync.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Box } from "@mui/system";
-import CippPageCard from "../../../components/CippCards/CippPageCard";
-import { CippDataTable } from "../../../components/CippTable/CippDataTable";
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-
-const Page = () => {
- const simpleColumns = [
- "Tenant",
- "SyncType",
- "Task",
- "ScheduledTime",
- "ExecutedTime",
- "LastRun",
- "RepeatsEvery",
- "Results",
- ];
-
- return (
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-export default Page;
diff --git a/src/pages/cipp/integrations/sync.jsx b/src/pages/cipp/integrations/sync.jsx
new file mode 100644
index 000000000000..a85de078eccb
--- /dev/null
+++ b/src/pages/cipp/integrations/sync.jsx
@@ -0,0 +1,35 @@
+import { Box } from "@mui/system";
+import CippPageCard from "../../../components/CippCards/CippPageCard";
+import { CippDataTable } from "../../../components/CippTable/CippDataTable";
+import { Layout as DashboardLayout } from "../../../layouts/index";
+
+const Page = () => {
+ const simpleColumns = [
+ "Tenant",
+ "SyncType",
+ "Task",
+ "ScheduledTime",
+ "ExecutedTime",
+ "LastRun",
+ "RepeatsEvery",
+ "Results",
+ ];
+
+ return (
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+export default Page;
diff --git a/src/pages/cipp/logs/index.js b/src/pages/cipp/logs/index.js
deleted file mode 100644
index 43fc64952620..000000000000
--- a/src/pages/cipp/logs/index.js
+++ /dev/null
@@ -1,350 +0,0 @@
-import { useState } from 'react'
-import { Layout as DashboardLayout } from '../../../layouts/index.js'
-import { CippTablePage } from '../../../components/CippComponents/CippTablePage.jsx'
-import {
- Button,
- Accordion,
- AccordionSummary,
- AccordionDetails,
- Typography,
- SvgIcon,
- Stack,
- Alert,
- Box,
-} from '@mui/material'
-import { Grid } from '@mui/system'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import { useForm } from 'react-hook-form'
-import CippFormComponent from '../../../components/CippComponents/CippFormComponent'
-import { FunnelIcon, XMarkIcon } from '@heroicons/react/24/outline'
-import { EyeIcon } from '@heroicons/react/24/outline'
-import { useSettings } from '../../../hooks/use-settings.js'
-
-const simpleColumns = [
- 'DateTime',
- 'Tenant',
- 'User',
- 'Message',
- 'API',
- 'Severity',
- 'AppId',
- 'IP',
- 'LogData',
-]
-
-const offcanvas = {
- extendedInfoFields: ['DateTime', 'API', 'Severity', 'Message', 'User', 'AppId', 'IP', 'LogData'],
-}
-
-const apiUrl = '/api/Listlogs'
-const pageTitle = 'Logbook Results'
-
-const actions = [
- {
- label: 'View Log Entry',
- link: '/cipp/logs/logentry?logentry=[RowKey]&dateFilter=[DateFilter]',
- icon:
-
- You have selected a date range of {Math.ceil(daysDifference)} days. Large date ranges
- may cause timeouts or errors due to the amount of data being processed. Consider
- narrowing your date range if you encounter issues.
-
-
- )
- }
-
- return null
- }
-
- const onSubmit = (data) => {
- // Check if any filter is applied
- const hasFilter =
- data.startDate !== null ||
- data.endDate !== null ||
- data.username !== null ||
- data.severity?.length > 0
- setFilterEnabled(hasFilter)
-
- // Format start date if available
- setStartDate(
- data.startDate
- ? new Date(data.startDate * 1000).toISOString().split('T')[0].replace(/-/g, '')
- : null
- )
-
- // Format end date if available
- setEndDate(
- data.endDate
- ? new Date(data.endDate * 1000).toISOString().split('T')[0].replace(/-/g, '')
- : null
- )
-
- // Set username filter if available
- setUsername(data.username || null)
-
- // Set severity filter if available (convert array to comma-separated string)
- setSeverity(
- data.severity && data.severity.length > 0
- ? data.severity.map((item) => item.value).join(',')
- : null
- )
-
- // Close the accordion after applying filters
- setExpanded(false)
- }
-
- const clearFilters = () => {
- formControl.reset({
- startDate: null,
- endDate: null,
- username: '',
- severity: [],
- })
- setFilterEnabled(false)
- setStartDate(null)
- setEndDate(null)
- setUsername(null)
- setSeverity(null)
- setExpanded(false) // Close the accordion when clearing filters
- }
-
- return (
- setExpanded(!expanded)}>
-
-
-
-
- Logbook Filters
- {filterEnabled ? (
-
- (
- {startDate || endDate ? (
- <>
- {startDate
- ? new Date(
- startDate.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3') + 'T00:00:00'
- ).toLocaleDateString()
- : new Date().toLocaleDateString()}
- {startDate && endDate ? ' - ' : ''}
- {endDate
- ? new Date(
- endDate.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3') + 'T00:00:00'
- ).toLocaleDateString()
- : ''}
-
- ) : null}
- {username && (startDate || endDate) && ' | '}
- {username && <>User: {username}}
- {severity && (username || startDate || endDate) && ' | '}
- {severity && <>Severity: {severity.replace(/,/g, ', ')}})
-
- ) : (
-
- (Today: {new Date().toLocaleDateString()})
-
- )}
-
-
-
-
-
-
-
- }
- title={pageTitle}
- apiUrl={apiUrl}
- simpleColumns={simpleColumns}
- queryKey={`Listlogs-${startDate}-${endDate}-${username}-${severity}-${filterEnabled}-${currentTenant}`}
- tenantInTitle={false}
- apiData={{
- StartDate: startDate, // Pass start date filter from state
- EndDate: endDate, // Pass end date filter from state
- User: username, // Pass username filter from state
- Severity: severity, // Pass severity filter from state
- Filter: filterEnabled, // Pass filter toggle state
- Tenant: currentTenant, // Pass current tenant from settings
- }}
- actions={actions}
- offCanvas={offcanvas}
- />
- )
-}
-
-Page.getLayout = (page) => {page}
-
-export default Page
diff --git a/src/pages/cipp/logs/index.jsx b/src/pages/cipp/logs/index.jsx
new file mode 100644
index 000000000000..962708c127f5
--- /dev/null
+++ b/src/pages/cipp/logs/index.jsx
@@ -0,0 +1,372 @@
+import { useState } from 'react'
+import { CippIcons } from '../../../utils/icon-registry'
+import { Layout as DashboardLayout } from '../../../layouts/index'
+import { CippTablePage } from '../../../components/CippComponents/CippTablePage.jsx'
+import {
+ Button,
+ Accordion,
+ AccordionSummary,
+ AccordionDetails,
+ Typography,
+ SvgIcon,
+ Stack,
+ Alert,
+ Box,
+} from '@mui/material'
+import { Grid } from '@mui/system'
+import { useForm } from 'react-hook-form'
+import CippFormComponent from '../../../components/CippComponents/CippFormComponent'
+import { useSettings } from '../../../hooks/use-settings.js'
+
+const simpleColumns = [
+ 'DateTime',
+ 'Tenant',
+ 'User',
+ 'Message',
+ 'API',
+ 'Severity',
+ 'AppId',
+ 'IP',
+ 'LogData',
+]
+
+const offcanvas = {
+ extendedInfoFields: ['DateTime', 'API', 'Severity', 'Message', 'User', 'AppId', 'IP', 'LogData'],
+}
+
+const apiUrl = '/api/Listlogs'
+const pageTitle = 'Logbook Results'
+
+const actions = [
+ {
+ label: 'View Log Entry',
+ link: '/cipp/logs/logentry?logentry=[RowKey]&dateFilter=[DateFilter]',
+ pinned: true,
+ icon:
+
+ You have selected a date range of {Math.ceil(daysDifference)} days. Large date ranges
+ may cause timeouts or errors due to the amount of data being processed. Consider
+ narrowing your date range if you encounter issues.
+
+
+ )
+ }
+
+ return null
+ }
+
+ const onSubmit = (data) => {
+ // Check if any filter is applied
+ const hasFilter =
+ data.startDate !== null ||
+ data.endDate !== null ||
+ data.username !== null ||
+ data.severity?.length > 0
+ setFilterEnabled(hasFilter)
+
+ // Format start date if available
+ setStartDate(
+ data.startDate
+ ? new Date(data.startDate * 1000).toISOString().split('T')[0].replace(/-/g, '')
+ : null
+ )
+
+ // Format end date if available
+ setEndDate(
+ data.endDate
+ ? new Date(data.endDate * 1000).toISOString().split('T')[0].replace(/-/g, '')
+ : null
+ )
+
+ // Set username filter if available
+ setUsername(data.username || null)
+
+ // Set severity filter if available (convert array to comma-separated string)
+ setSeverity(
+ data.severity && data.severity.length > 0
+ ? data.severity.map((item) => item.value).join(',')
+ : null
+ )
+
+ // Close the accordion after applying filters
+ setExpanded(false)
+ }
+
+ const clearFilters = () => {
+ formControl.reset({
+ startDate: null,
+ endDate: null,
+ username: '',
+ severity: [],
+ })
+ setFilterEnabled(false)
+ setStartDate(null)
+ setEndDate(null)
+ setUsername(null)
+ setSeverity(null)
+ setExpanded(false) // Close the accordion when clearing filters
+ }
+
+ return (
+ setExpanded(!expanded)}>
+
+
+
+
+ Logbook Filters
+ {filterEnabled ? (
+
+ (
+ {startDate || endDate ? (
+ <>
+ {startDate
+ ? new Date(
+ startDate.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3') + 'T00:00:00'
+ ).toLocaleDateString()
+ : new Date().toLocaleDateString()}
+ {startDate && endDate ? ' - ' : ''}
+ {endDate
+ ? new Date(
+ endDate.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3') + 'T00:00:00'
+ ).toLocaleDateString()
+ : ''}
+
+ ) : null}
+ {username && (startDate || endDate) && ' | '}
+ {username && <>User: {username}}
+ {severity && (username || startDate || endDate) && ' | '}
+ {severity && <>Severity: {severity.replace(/,/g, ', ')}})
+
+ ) : (
+
+ (Today: {new Date().toLocaleDateString()})
+
+ )}
+
+
+
+
+
+
+
+ }
+ title={pageTitle}
+ apiUrl={apiUrl}
+ apiDataKey="Results"
+ simpleColumns={simpleColumns}
+ queryKey={`Listlogs-${startDate}-${endDate}-${username}-${severity}-${filterEnabled}-${currentTenant}`}
+ tenantInTitle={false}
+ defaultSorting={[{ id: 'DateTime', desc: true }]}
+ apiData={{
+ StartDate: startDate, // Pass start date filter from state
+ EndDate: endDate, // Pass end date filter from state
+ User: username, // Pass username filter from state
+ Severity: severity, // Pass severity filter from state
+ Filter: filterEnabled, // Pass filter toggle state
+ Tenant: currentTenant, // Pass current tenant from settings
+ manualPagination: true, // Page through ListLogs via Metadata.nextLink
+ // CippTablePage injects tenantFilter from the tenant selector, but ListLogs reads
+ // Tenant instead, and a literal 'AllTenants' tenantFilter would stop
+ // ApiGetCallWithPagination from ever fetching page two. Null drops the param.
+ tenantFilter: null,
+ }}
+ actions={actions}
+ offCanvas={offcanvas}
+ rowOpen={{
+ link: '/cipp/logs/logentry?logentry=[RowKey]&dateFilter=[DateFilter]',
+ condition: (row) => Boolean(row?.RowKey),
+ }}
+ />
+ );
+}
+
+Page.getLayout = (page) => {page}
+
+export default Page
diff --git a/src/pages/cipp/logs/logentry.js b/src/pages/cipp/logs/logentry.js
deleted file mode 100644
index a03397b3b85f..000000000000
--- a/src/pages/cipp/logs/logentry.js
+++ /dev/null
@@ -1,203 +0,0 @@
-import { useRouter } from "next/router";
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-import { ApiGetCall } from "../../../api/ApiCall";
-import { Box, Container, Chip, TextField, Card, CardHeader, CardContent } from "@mui/material";
-import { Stack } from "@mui/system";
-import { CippPropertyListCard } from "../../../components/CippCards/CippPropertyListCard";
-import { CippInfoBar } from "../../../components/CippCards/CippInfoBar";
-import CippFormSkeleton from "../../../components/CippFormPages/CippFormSkeleton";
-import { getCippTranslation } from "../../../utils/get-cipp-translation";
-
-const formatRawError = (rawError) => {
- if (rawError == null || rawError === "") return "";
- try {
- if (typeof rawError === "object") {
- return JSON.stringify(rawError, null, 2) || "";
- }
- const asString = String(rawError).trim();
- if (!asString || asString === "null" || asString === "undefined" || asString === "Not available") {
- return "";
- }
- try {
- return JSON.stringify(JSON.parse(asString), null, 2) || asString;
- } catch {
- return asString;
- }
- } catch {
- return "";
- }
-};
-
-const formatLogDataValue = (value) => {
- if (value == null || value === "") return "N/A";
- try {
- if (typeof value === "object") {
- return JSON.stringify(value, null, 2) || "N/A";
- }
- const asString = String(value);
- return asString || "N/A";
- } catch {
- return "Unable to display value";
- }
-};
-
-const Page = () => {
- const router = useRouter();
- const { logentry, dateFilter } = router.query;
-
- const logRequest = ApiGetCall({
- url: `/api/Listlogs`,
- data: {
- logentryid: logentry,
- dateFilter: dateFilter,
- },
- queryKey: `GetLogEntry-${logentry}`,
- waiting: !!logentry,
- });
-
- // Get the log data from array
- const logData = logRequest.data?.[0];
-
- // Top info bar data like dashboard
- const logInfo = logData
- ? [
- { name: "Log ID", data: logData.RowKey ?? "N/A" },
- {
- name: "Date & Time",
- data: logData.DateTime ? new Date(logData.DateTime).toLocaleString() : "N/A",
- },
- { name: "API", data: logData.API ?? "N/A" },
- {
- name: "Severity",
- data: (
-
-
-
- {logRequest.isLoading &&
-
-
-
- ) : null}
- {standardItems.length > 0 && (
-
-
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/cipp/logs/logentry.jsx b/src/pages/cipp/logs/logentry.jsx
new file mode 100644
index 000000000000..9b51e66b8dbf
--- /dev/null
+++ b/src/pages/cipp/logs/logentry.jsx
@@ -0,0 +1,203 @@
+import { useRouter } from "next/router";
+import { Layout as DashboardLayout } from "../../../layouts/index";
+import { ApiGetCall } from "../../../api/ApiCall";
+import { Box, Container, Chip, TextField, Card, CardHeader, CardContent } from "@mui/material";
+import { Stack } from "@mui/system";
+import { CippPropertyListCard } from "../../../components/CippCards/CippPropertyListCard";
+import { CippInfoBar } from "../../../components/CippCards/CippInfoBar";
+import CippFormSkeleton from "../../../components/CippFormPages/CippFormSkeleton";
+import { getCippTranslation } from "../../../utils/get-cipp-translation";
+
+const formatRawError = (rawError) => {
+ if (rawError == null || rawError === "") return "";
+ try {
+ if (typeof rawError === "object") {
+ return JSON.stringify(rawError, null, 2) || "";
+ }
+ const asString = String(rawError).trim();
+ if (!asString || asString === "null" || asString === "undefined" || asString === "Not available") {
+ return "";
+ }
+ try {
+ return JSON.stringify(JSON.parse(asString), null, 2) || asString;
+ } catch {
+ return asString;
+ }
+ } catch {
+ return "";
+ }
+};
+
+const formatLogDataValue = (value) => {
+ if (value == null || value === "") return "N/A";
+ try {
+ if (typeof value === "object") {
+ return JSON.stringify(value, null, 2) || "N/A";
+ }
+ const asString = String(value);
+ return asString || "N/A";
+ } catch {
+ return "Unable to display value";
+ }
+};
+
+const Page = () => {
+ const router = useRouter();
+ const { logentry, dateFilter } = router.query;
+
+ const logRequest = ApiGetCall({
+ url: `/api/Listlogs`,
+ data: {
+ logentryid: logentry,
+ dateFilter: dateFilter,
+ },
+ queryKey: `GetLogEntry-${logentry}`,
+ waiting: !!logentry,
+ });
+
+ // Get the log data from array
+ const logData = logRequest.data?.[0];
+
+ // Top info bar data like dashboard
+ const logInfo = logData
+ ? [
+ { name: "Log ID", data: logData.RowKey ?? "N/A" },
+ {
+ name: "Date & Time",
+ data: logData.DateTime ? new Date(logData.DateTime).toLocaleString() : "N/A",
+ },
+ { name: "API", data: logData.API ?? "N/A" },
+ {
+ name: "Severity",
+ data: (
+
+
+
+ {logRequest.isLoading &&
+
+
+
+ ) : null}
+ {standardItems.length > 0 && (
+
+
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/cipp/preferences.js b/src/pages/cipp/preferences.js
deleted file mode 100644
index 7d46def78aba..000000000000
--- a/src/pages/cipp/preferences.js
+++ /dev/null
@@ -1,460 +0,0 @@
-import Head from "next/head";
-import { Alert, Box, Container, Stack } from "@mui/material";
-import { Grid } from "@mui/system";
-import { Layout as DashboardLayout } from "../../layouts/index.js";
-import { CippPropertyListCard } from "../../components/CippCards/CippPropertyListCard";
-import CippFormComponent from "../../components/CippComponents/CippFormComponent";
-import { useForm, useWatch } from "react-hook-form";
-import { useSettings } from "../../hooks/use-settings";
-import countryList from "../../data/countryList.json";
-import { CippSettingsSideBar } from "../../components/CippComponents/CippSettingsSideBar";
-import CippDevOptions from "../../components/CippComponents/CippDevOptions";
-import { CippOffboardingDefaultSettings } from "../../components/CippComponents/CippOffboardingDefaultSettings";
-import { ApiGetCall } from "../../api/ApiCall";
-import { getCippFormatting } from "../../utils/get-cipp-formatting";
-import { useEffect, useState } from "react";
-
-const Page = () => {
- const settings = useSettings();
- const [initialUserType, setInitialUserType] = useState(null);
-
- // Default portal links configuration
- const defaultPortalLinks = {
- M365_Portal: true,
- Exchange_Portal: true,
- Entra_Portal: true,
- Teams_Portal: true,
- Azure_Portal: true,
- Intune_Portal: true,
- SharePoint_Admin: true,
- Security_Portal: true,
- Compliance_Portal: true,
- Power_Platform_Portal: true,
- Power_BI_Portal: true,
- };
-
- const auth = ApiGetCall({
- url: "/api/me",
- queryKey: "authmecipp",
- });
-
- // Test suites for the default Home page suite selector (shared cache with the dashboard)
- const reportsApi = ApiGetCall({
- url: "/api/ListTestReports",
- queryKey: "ListTestReports",
- });
-
- const cleanedSettings = { ...settings };
-
- if (cleanedSettings.offboardingDefaults?.keepCopy) {
- delete cleanedSettings.offboardingDefaults.keepCopy;
- settings.handleUpdate(cleanedSettings);
- }
-
- // Determine if we have user-specific settings and set initial user type
- useEffect(() => {
- if (cleanedSettings && auth.data?.clientPrincipal?.userDetails && initialUserType === null) {
- const hasUserSpecificSettings =
- cleanedSettings.UserSpecificSettings &&
- Object.keys(cleanedSettings.UserSpecificSettings).length > 0;
-
- setInitialUserType(hasUserSpecificSettings ? "currentUser" : "allUsers");
- }
- }, [cleanedSettings, auth.data?.clientPrincipal?.userDetails, initialUserType]);
-
- // Set default portal links if they don't exist at global level
- if (!cleanedSettings.portalLinks) {
- cleanedSettings.portalLinks = defaultPortalLinks;
- }
-
- // Determine initial portal links based on user type
- const getInitialPortalLinks = () => {
- if (initialUserType === "currentUser" && cleanedSettings.UserSpecificSettings?.portalLinks) {
- // Merge with defaults to ensure all keys exist
- return { ...defaultPortalLinks, ...cleanedSettings.UserSpecificSettings.portalLinks };
- }
-
- // Use global settings or defaults
- return { ...defaultPortalLinks, ...cleanedSettings.portalLinks };
- };
-
- // Set up initial form values with proper user selector default
- const initialFormValues = {
- ...cleanedSettings,
- user:
- initialUserType === "currentUser"
- ? {
- label: "Current User",
- value: auth.data?.clientPrincipal?.userDetails || "currentUser",
- }
- : {
- label: "All Users",
- value: "allUsers",
- },
- portalLinks: getInitialPortalLinks(),
- };
-
- const formcontrol = useForm({
- mode: "onChange",
- defaultValues: initialFormValues,
- });
-
- // Watch the user selector to determine which settings to show
- const selectedUser = useWatch({
- control: formcontrol.control,
- name: "user",
- });
-
- // Update form when initial user type is determined
- useEffect(() => {
- if (initialUserType !== null && auth.data?.clientPrincipal?.userDetails) {
- const userValue =
- initialUserType === "currentUser"
- ? {
- label: "Current User",
- value: auth.data.clientPrincipal.userDetails,
- }
- : {
- label: "All Users",
- value: "allUsers",
- };
-
- const newFormValues = {
- ...cleanedSettings,
- user: userValue,
- portalLinks: getInitialPortalLinks(),
- };
-
- // Reset the entire form with new values
- formcontrol.reset(newFormValues);
- }
- }, [initialUserType, auth.data?.clientPrincipal?.userDetails]);
-
- // Handle switching between user types
- useEffect(() => {
- if (selectedUser?.value && initialUserType !== null) {
- const getPortalLinksForUserType = () => {
- if (selectedUser.value === "allUsers") {
- // Show global settings (root level)
- return { ...defaultPortalLinks, ...cleanedSettings.portalLinks };
- } else {
- // Show user-specific settings if they exist, otherwise show global settings
- const userSpecificLinks = cleanedSettings.UserSpecificSettings?.portalLinks;
- const globalLinks = cleanedSettings.portalLinks;
- return { ...defaultPortalLinks, ...globalLinks, ...userSpecificLinks };
- }
- };
-
- const newPortalLinks = getPortalLinksForUserType();
- const currentPortalLinks = formcontrol.getValues("portalLinks");
-
- // Only update if the portal links actually changed
- if (JSON.stringify(currentPortalLinks) !== JSON.stringify(newPortalLinks)) {
- // Reset form with updated portal links but preserve other values
- const currentValues = formcontrol.getValues();
- formcontrol.reset({
- ...currentValues,
- portalLinks: newPortalLinks,
- });
- }
- }
- }, [selectedUser?.value, cleanedSettings, initialUserType]);
-
- const addedAttributes = [
- { value: "consentProvidedForMinor", label: "consentProvidedForMinor" },
- { value: "employeeId", label: "employeeId" },
- { value: "employeeHireDate", label: "employeeHireDate" },
- { value: "employeeLeaveDateTime", label: "employeeLeaveDateTime" },
- { value: "employeeType", label: "employeeType" },
- { value: "faxNumber", label: "faxNumber" },
- { value: "legalAgeGroupClassification", label: "legalAgeGroupClassification" },
- { value: "officeLocation", label: "officeLocation" },
- { value: "otherMails", label: "otherMails" },
- { value: "showInAddressList", label: "showInAddressList" },
- { value: "sponsor", label: "sponsor" },
- ];
-
- const pageSizes = [
- { value: "25", label: "25" },
- { value: "50", label: "50" },
- { value: "100", label: "100" },
- { value: "250", label: "250" },
- ];
-
- const languageListOptions = countryList.map((language) => {
- return { value: language.Code, label: language.Name };
- });
-
- // Portal links configuration
- const portalLinksConfig = [
- {
- name: "portalLinks.M365_Portal",
- label: "M365",
- },
- {
- name: "portalLinks.Exchange_Portal",
- label: "Exchange",
- },
- {
- name: "portalLinks.Entra_Portal",
- label: "Entra",
- },
- {
- name: "portalLinks.Teams_Portal",
- label: "Teams",
- },
- {
- name: "portalLinks.Azure_Portal",
- label: "Azure",
- },
- {
- name: "portalLinks.Intune_Portal",
- label: "Intune",
- },
- {
- name: "portalLinks.SharePoint_Admin",
- label: "SharePoint",
- },
- {
- name: "portalLinks.Security_Portal",
- label: "Security",
- },
- {
- name: "portalLinks.Compliance_Portal",
- label: "Purview",
- },
- {
- name: "portalLinks.Power_Platform_Portal",
- label: "Power Platform",
- },
- {
- name: "portalLinks.Power_BI_Portal",
- label: "Power BI",
- },
- ];
-
- // Don't render until we've determined the initial user type
- if (initialUserType === null || !auth.data?.clientPrincipal?.userDetails) {
- return Preferences
-
-
-
-
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/cipp/preferences.jsx b/src/pages/cipp/preferences.jsx
new file mode 100644
index 000000000000..598d95eb79b9
--- /dev/null
+++ b/src/pages/cipp/preferences.jsx
@@ -0,0 +1,460 @@
+import Head from "next/head";
+import { Alert, Box, Container, Stack } from "@mui/material";
+import { Grid } from "@mui/system";
+import { Layout as DashboardLayout } from "../../layouts/index";
+import { CippPropertyListCard } from "../../components/CippCards/CippPropertyListCard";
+import CippFormComponent from "../../components/CippComponents/CippFormComponent";
+import { useForm, useWatch } from "react-hook-form";
+import { useSettings } from "../../hooks/use-settings";
+import countryList from "../../data/countryList.json";
+import { CippSettingsSideBar } from "../../components/CippComponents/CippSettingsSideBar";
+import CippDevOptions from "../../components/CippComponents/CippDevOptions";
+import { CippOffboardingDefaultSettings } from "../../components/CippComponents/CippOffboardingDefaultSettings";
+import { ApiGetCall } from "../../api/ApiCall";
+import { getCippFormatting } from "../../utils/get-cipp-formatting";
+import { useEffect, useState } from "react";
+
+const Page = () => {
+ const settings = useSettings();
+ const [initialUserType, setInitialUserType] = useState(null);
+
+ // Default portal links configuration
+ const defaultPortalLinks = {
+ M365_Portal: true,
+ Exchange_Portal: true,
+ Entra_Portal: true,
+ Teams_Portal: true,
+ Azure_Portal: true,
+ Intune_Portal: true,
+ SharePoint_Admin: true,
+ Security_Portal: true,
+ Compliance_Portal: true,
+ Power_Platform_Portal: true,
+ Power_BI_Portal: true,
+ };
+
+ const auth = ApiGetCall({
+ url: "/api/me",
+ queryKey: "authmecipp",
+ });
+
+ // Test suites for the default Home page suite selector (shared cache with the dashboard)
+ const reportsApi = ApiGetCall({
+ url: "/api/ListTestReports",
+ queryKey: "ListTestReports",
+ });
+
+ const cleanedSettings = { ...settings };
+
+ if (cleanedSettings.offboardingDefaults?.keepCopy) {
+ delete cleanedSettings.offboardingDefaults.keepCopy;
+ settings.handleUpdate(cleanedSettings);
+ }
+
+ // Determine if we have user-specific settings and set initial user type
+ useEffect(() => {
+ if (cleanedSettings && auth.data?.clientPrincipal?.userDetails && initialUserType === null) {
+ const hasUserSpecificSettings =
+ cleanedSettings.UserSpecificSettings &&
+ Object.keys(cleanedSettings.UserSpecificSettings).length > 0;
+
+ setInitialUserType(hasUserSpecificSettings ? "currentUser" : "allUsers");
+ }
+ }, [cleanedSettings, auth.data?.clientPrincipal?.userDetails, initialUserType]);
+
+ // Set default portal links if they don't exist at global level
+ if (!cleanedSettings.portalLinks) {
+ cleanedSettings.portalLinks = defaultPortalLinks;
+ }
+
+ // Determine initial portal links based on user type
+ const getInitialPortalLinks = () => {
+ if (initialUserType === "currentUser" && cleanedSettings.UserSpecificSettings?.portalLinks) {
+ // Merge with defaults to ensure all keys exist
+ return { ...defaultPortalLinks, ...cleanedSettings.UserSpecificSettings.portalLinks };
+ }
+
+ // Use global settings or defaults
+ return { ...defaultPortalLinks, ...cleanedSettings.portalLinks };
+ };
+
+ // Set up initial form values with proper user selector default
+ const initialFormValues = {
+ ...cleanedSettings,
+ user:
+ initialUserType === "currentUser"
+ ? {
+ label: "Current User",
+ value: auth.data?.clientPrincipal?.userDetails || "currentUser",
+ }
+ : {
+ label: "All Users",
+ value: "allUsers",
+ },
+ portalLinks: getInitialPortalLinks(),
+ };
+
+ const formcontrol = useForm({
+ mode: "onChange",
+ defaultValues: initialFormValues,
+ });
+
+ // Watch the user selector to determine which settings to show
+ const selectedUser = useWatch({
+ control: formcontrol.control,
+ name: "user",
+ });
+
+ // Update form when initial user type is determined
+ useEffect(() => {
+ if (initialUserType !== null && auth.data?.clientPrincipal?.userDetails) {
+ const userValue =
+ initialUserType === "currentUser"
+ ? {
+ label: "Current User",
+ value: auth.data.clientPrincipal.userDetails,
+ }
+ : {
+ label: "All Users",
+ value: "allUsers",
+ };
+
+ const newFormValues = {
+ ...cleanedSettings,
+ user: userValue,
+ portalLinks: getInitialPortalLinks(),
+ };
+
+ // Reset the entire form with new values
+ formcontrol.reset(newFormValues);
+ }
+ }, [initialUserType, auth.data?.clientPrincipal?.userDetails]);
+
+ // Handle switching between user types
+ useEffect(() => {
+ if (selectedUser?.value && initialUserType !== null) {
+ const getPortalLinksForUserType = () => {
+ if (selectedUser.value === "allUsers") {
+ // Show global settings (root level)
+ return { ...defaultPortalLinks, ...cleanedSettings.portalLinks };
+ } else {
+ // Show user-specific settings if they exist, otherwise show global settings
+ const userSpecificLinks = cleanedSettings.UserSpecificSettings?.portalLinks;
+ const globalLinks = cleanedSettings.portalLinks;
+ return { ...defaultPortalLinks, ...globalLinks, ...userSpecificLinks };
+ }
+ };
+
+ const newPortalLinks = getPortalLinksForUserType();
+ const currentPortalLinks = formcontrol.getValues("portalLinks");
+
+ // Only update if the portal links actually changed
+ if (JSON.stringify(currentPortalLinks) !== JSON.stringify(newPortalLinks)) {
+ // Reset form with updated portal links but preserve other values
+ const currentValues = formcontrol.getValues();
+ formcontrol.reset({
+ ...currentValues,
+ portalLinks: newPortalLinks,
+ });
+ }
+ }
+ }, [selectedUser?.value, cleanedSettings, initialUserType]);
+
+ const addedAttributes = [
+ { value: "consentProvidedForMinor", label: "consentProvidedForMinor" },
+ { value: "employeeId", label: "employeeId" },
+ { value: "employeeHireDate", label: "employeeHireDate" },
+ { value: "employeeLeaveDateTime", label: "employeeLeaveDateTime" },
+ { value: "employeeType", label: "employeeType" },
+ { value: "faxNumber", label: "faxNumber" },
+ { value: "legalAgeGroupClassification", label: "legalAgeGroupClassification" },
+ { value: "officeLocation", label: "officeLocation" },
+ { value: "otherMails", label: "otherMails" },
+ { value: "showInAddressList", label: "showInAddressList" },
+ { value: "sponsor", label: "sponsor" },
+ ];
+
+ const pageSizes = [
+ { value: "25", label: "25" },
+ { value: "50", label: "50" },
+ { value: "100", label: "100" },
+ { value: "250", label: "250" },
+ ];
+
+ const languageListOptions = countryList.map((language) => {
+ return { value: language.Code, label: language.Name };
+ });
+
+ // Portal links configuration
+ const portalLinksConfig = [
+ {
+ name: "portalLinks.M365_Portal",
+ label: "M365",
+ },
+ {
+ name: "portalLinks.Exchange_Portal",
+ label: "Exchange",
+ },
+ {
+ name: "portalLinks.Entra_Portal",
+ label: "Entra",
+ },
+ {
+ name: "portalLinks.Teams_Portal",
+ label: "Teams",
+ },
+ {
+ name: "portalLinks.Azure_Portal",
+ label: "Azure",
+ },
+ {
+ name: "portalLinks.Intune_Portal",
+ label: "Intune",
+ },
+ {
+ name: "portalLinks.SharePoint_Admin",
+ label: "SharePoint",
+ },
+ {
+ name: "portalLinks.Security_Portal",
+ label: "Security",
+ },
+ {
+ name: "portalLinks.Compliance_Portal",
+ label: "Purview",
+ },
+ {
+ name: "portalLinks.Power_Platform_Portal",
+ label: "Power Platform",
+ },
+ {
+ name: "portalLinks.Power_BI_Portal",
+ label: "Power BI",
+ },
+ ];
+
+ // Don't render until we've determined the initial user type
+ if (initialUserType === null || !auth.data?.clientPrincipal?.userDetails) {
+ return Preferences
+
+
+
+
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/cipp/scheduler/index.js b/src/pages/cipp/scheduler/index.js
deleted file mode 100644
index 446f7ca0593f..000000000000
--- a/src/pages/cipp/scheduler/index.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-import CippTablePage from "../../../components/CippComponents/CippTablePage";
-import { Button } from "@mui/material";
-import { CalendarDaysIcon } from "@heroicons/react/24/outline";
-import { useState } from "react";
-import ScheduledTaskDetails from "../../../components/CippComponents/ScheduledTaskDetails";
-import { CippScheduledTaskActions } from "../../../components/CippComponents/CippScheduledTaskActions";
-import { CippSchedulerDrawer } from "../../../components/CippComponents/CippSchedulerDrawer";
-import { useSettings } from "../../../hooks/use-settings";
-
-const Page = () => {
- const [editTaskId, setEditTaskId] = useState(null);
- const [cloneTaskId, setCloneTaskId] = useState(null);
- const currentTenant = useSettings().currentTenant;
-
- const drawerHandlers = {
- openEditDrawer: (row) => {
- setEditTaskId(row.RowKey);
- },
- openCloneDrawer: (row) => {
- setCloneTaskId(row.RowKey);
- },
- };
-
- const actions = CippScheduledTaskActions(drawerHandlers);
-
- const filterList = [
- {
- filterName: "Running",
- value: [{ id: "TaskState", value: "Running" }],
- type: "column",
- },
- {
- filterName: "Planned",
- value: [{ id: "TaskState", value: "Planned" }],
- type: "column",
- },
- {
- filterName: "Failed",
- value: [{ id: "TaskState", value: "Failed" }],
- type: "column",
- },
- {
- filterName: "Completed",
- value: [{ id: "TaskState", value: "Completed" }],
- type: "column",
- },
- ];
-
- const offCanvas = {
- children: (extendedData) => (
-
-
- setEditTaskId(null)}
- onClose={() => setEditTaskId(null)}
- PermissionButton={({ children }) => <>{children}}
- />
- )}
-
- {/* Clone Drawer */}
- {cloneTaskId && (
- setCloneTaskId(null)}
- onClose={() => setCloneTaskId(null)}
- PermissionButton={({ children }) => <>{children}}
- />
- )}
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/cipp/scheduler/index.jsx b/src/pages/cipp/scheduler/index.jsx
new file mode 100644
index 000000000000..f3aacfef385e
--- /dev/null
+++ b/src/pages/cipp/scheduler/index.jsx
@@ -0,0 +1,133 @@
+import { Layout as DashboardLayout } from "../../../layouts/index";
+import { CippIcons } from "../../../utils/icon-registry";
+import CippTablePage from "../../../components/CippComponents/CippTablePage";
+import { Button } from "@mui/material";
+import { useState } from "react";
+import ScheduledTaskDetails from "../../../components/CippComponents/ScheduledTaskDetails";
+import { CippScheduledTaskActions } from "../../../components/CippComponents/CippScheduledTaskActions";
+import { CippSchedulerDrawer } from "../../../components/CippComponents/CippSchedulerDrawer";
+import { CippSchedulerCountdown } from "../../../components/CippComponents/CippSchedulerCountdown";
+import { useSettings } from "../../../hooks/use-settings";
+
+const Page = () => {
+ const [editTaskId, setEditTaskId] = useState(null);
+ const [cloneTaskId, setCloneTaskId] = useState(null);
+ const currentTenant = useSettings().currentTenant;
+
+ const drawerHandlers = {
+ openEditDrawer: (row) => {
+ setEditTaskId(row.RowKey);
+ },
+ openCloneDrawer: (row) => {
+ setCloneTaskId(row.RowKey);
+ },
+ };
+
+ const actions = CippScheduledTaskActions(drawerHandlers);
+
+ const filterList = [
+ {
+ filterName: "Running",
+ value: [{ id: "TaskState", value: "Running" }],
+ type: "column",
+ },
+ {
+ filterName: "Planned",
+ value: [{ id: "TaskState", value: "Planned" }],
+ type: "column",
+ },
+ {
+ filterName: "Failed",
+ value: [{ id: "TaskState", value: "Failed" }],
+ type: "column",
+ },
+ {
+ filterName: "Completed",
+ value: [{ id: "TaskState", value: "Completed" }],
+ type: "column",
+ },
+ ];
+
+ const offCanvas = {
+ children: (extendedData) => (
+
+
+ setEditTaskId(null)}
+ onClose={() => setEditTaskId(null)}
+ PermissionButton={({ children }) => <>{children}}
+ />
+ )}
+
+ {/* Clone Drawer */}
+ {cloneTaskId && (
+ setCloneTaskId(null)}
+ onClose={() => setCloneTaskId(null)}
+ PermissionButton={({ children }) => <>{children}}
+ />
+ )}
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/cipp/scheduler/job.jsx b/src/pages/cipp/scheduler/job.jsx
index 11b00051a48d..bd3b6eb84e38 100644
--- a/src/pages/cipp/scheduler/job.jsx
+++ b/src/pages/cipp/scheduler/job.jsx
@@ -1,6 +1,6 @@
import { useForm } from "react-hook-form";
import CippFormPage from "../../../components/CippFormPages/CippFormPage";
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
+import { Layout as DashboardLayout } from "../../../layouts/index";
import CippSchedulerForm from "../../../components/CippFormPages/CippSchedulerForm";
import { useRouter } from "next/router";
diff --git a/src/pages/cipp/scheduler/task.js b/src/pages/cipp/scheduler/task.js
deleted file mode 100644
index dd9fdfbcee9e..000000000000
--- a/src/pages/cipp/scheduler/task.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useRouter } from "next/router";
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-import ScheduledTaskDetails from "../../../components/CippComponents/ScheduledTaskDetails";
-import CippPageCard from "../../../components/CippCards/CippPageCard";
-import { CardContent } from "@mui/material";
-
-const Page = () => {
- const router = useRouter();
- const { id } = router.query;
-
- return (
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/cipp/scheduler/task.jsx b/src/pages/cipp/scheduler/task.jsx
new file mode 100644
index 000000000000..cd8a4f9284c3
--- /dev/null
+++ b/src/pages/cipp/scheduler/task.jsx
@@ -0,0 +1,22 @@
+import { useRouter } from "next/router";
+import { Layout as DashboardLayout } from "../../../layouts/index";
+import ScheduledTaskDetails from "../../../components/CippComponents/ScheduledTaskDetails";
+import CippPageCard from "../../../components/CippCards/CippPageCard";
+import { CardContent } from "@mui/material";
+
+const Page = () => {
+ const router = useRouter();
+ const { id } = router.query;
+
+ return (
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/cipp/settings/backend.js b/src/pages/cipp/settings/backend.js
deleted file mode 100644
index 10c97271c984..000000000000
--- a/src/pages/cipp/settings/backend.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import { Container } from "@mui/material";
-import { Grid } from "@mui/system";
-import { TabbedLayout } from "../../../layouts/TabbedLayout";
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-import tabOptions from "./tabOptions";
-import { ApiGetCall } from "../../../api/ApiCall.jsx";
-import { CippBackendCard } from "../../../components/CippSettings/CippBackendCard";
-import { CippCodeBlock } from "../../../components/CippComponents/CippCodeBlock";
-import { CommandLineIcon } from "@heroicons/react/24/outline";
-
-const Page = () => {
- const backendComponents = ApiGetCall({
- url: "/api/ExecBackendURLs",
- queryKey: "ExecBackendURLs",
- });
- const backendInfo = [
- {
- id: "ResourceGroup",
- name: "Resource Group",
- description:
- "The Resource group contains all the CIPP resources in your tenant, except the SAM Application",
- },
- {
- id: "KeyVault",
- name: "Key Vault",
- description:
- "The key vault allows you to retrieve saved authentication details. By default you do not have access.",
- },
- {
- id: "SWARoles",
- name: "Static Web App (Role Management)",
- description:
- "The Static Web App Role Management allows you to invite other users to the application and manage their permissions.",
- },
- {
- id: "FunctionDeployment",
- name: "Function App (Deployment Center)",
- description:
- "The Function App Deployment Center allows you to monitor your deployment history and connect to GitHub for CI/CD.",
- },
- {
- id: "FunctionConfig",
- name: "Function App (Configuration)",
- description:
- "The Function App Configuration allows you to configure your function app settings.",
- },
- {
- id: "FunctionApp",
- name: "Function App (Overview)",
- description:
- "The Function App Overview allows you to monitor your function app's performance and usage. You can also stop and start the function app here.",
- },
- {
- id: "CloudShell",
- name: "Cloud Shell",
- description: "Launch an Azure Cloud Shell Window",
- linkProps: {
- onClick: (e) => {
- e.preventDefault();
- window.open(
- "https://shell.azure.com/powershell",
- "_blank",
- "toolbar=no,scrollbars=yes,resizable=yes,menubar=no,location=no,status=no"
- );
- },
- },
- offcanvas: true,
- offcanvasTitle: "Command Reference",
- offcanvasIcon:
-
- {backendInfo.map((item) => (
-
-
- ))}
-
-
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/settings/backend.jsx b/src/pages/cipp/settings/backend.jsx
new file mode 100644
index 000000000000..1d9ba117a836
--- /dev/null
+++ b/src/pages/cipp/settings/backend.jsx
@@ -0,0 +1,158 @@
+import { Container } from "@mui/material";
+import { CippIcons } from "../../../utils/icon-registry";
+import { Grid } from "@mui/system";
+import { TabbedLayout } from "../../../layouts/TabbedLayout";
+import { Layout as DashboardLayout } from "../../../layouts/index";
+import tabOptions from "./tabOptions";
+import { ApiGetCall } from "../../../api/ApiCall.jsx";
+import { CippBackendCard } from "../../../components/CippSettings/CippBackendCard";
+import { CippCodeBlock } from "../../../components/CippComponents/CippCodeBlock";
+import { usePermissions } from "../../../hooks/use-permissions";
+
+const Page = () => {
+ const backendComponents = ApiGetCall({
+ url: "/api/ExecBackendURLs",
+ queryKey: "ExecBackendURLs",
+ });
+ // CIPP-NG runs as a container web app on an App Service plan; a legacy instance is a function
+ // app plus a static web app. The cards and shell commands follow whichever this instance is.
+ const { isNg } = usePermissions();
+ const results = backendComponents?.data?.Results;
+ const shell = (code) =>
+
+ {backendInfo.map((item) => (
+
+
+ ))}
+
+
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
diff --git a/src/pages/cipp/settings/backup.js b/src/pages/cipp/settings/backup.js
deleted file mode 100644
index dab03a2aacf7..000000000000
--- a/src/pages/cipp/settings/backup.js
+++ /dev/null
@@ -1,499 +0,0 @@
-import {
- Alert,
- Box,
- Button,
- Card,
- CardContent,
- CardHeader,
- Divider,
- FormControlLabel,
- Stack,
- Switch,
- TextField,
- Typography,
- Skeleton,
- Input,
- FormControl,
- FormLabel,
-} from "@mui/material";
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-import CippPageCard from "../../../components/CippCards/CippPageCard";
-import { ApiGetCall, ApiPostCall } from "../../../api/ApiCall";
-import { CippApiResults } from "../../../components/CippComponents/CippApiResults";
-import { CippInfoBar } from "../../../components/CippCards/CippInfoBar";
-import {
- ArrowCircleRight,
- CloudDownload,
- CloudUpload,
- EventRepeat,
- History,
- ManageHistory,
- NextPlan,
- SettingsBackupRestore,
- Storage,
-} from "@mui/icons-material";
-import ReactTimeAgo from "react-time-ago";
-import { CippDataTable } from "../../../components/CippTable/CippDataTable";
-import { CippApiDialog } from "../../../components/CippComponents/CippApiDialog";
-import { CippRestoreWizard } from "../../../components/CippComponents/CippRestoreWizard";
-import { BackupValidator } from "../../../utils/backupValidation";
-import { useEffect, useState } from "react";
-import { useDialog } from "../../../hooks/use-dialog";
-
-const ReplicationScopeCard = ({ scope, label, description, config }) => {
- const save = ApiPostCall({ relatedQueryKeys: "BackupReplicationConfig" });
- const [sasUrl, setSasUrl] = useState("");
- const [enabled, setEnabled] = useState(false);
-
- useEffect(() => {
- setEnabled(Boolean(config?.Enabled));
- setSasUrl("");
- }, [config?.Enabled, config?.IsSet]);
-
- const isSet = Boolean(config?.IsSet);
-
- const handleSave = () => {
- const data = { BackupType: scope, Enabled: enabled };
- if (sasUrl) {
- data.SASUrl = sasUrl;
- } else if (isSet) {
- // Keep the existing stored SAS URL untouched.
- data.SASUrl = "SentToKeyVault";
- }
- save.mutate({ url: "/api/ExecBackupReplicationConfig", data });
- };
-
- return (
-
-
-
-
- {label}
-
- {description}
-
-
- setEnabled(e.target.checked)}
- />
- }
- label={Enable replication }
- />
- setSasUrl(e.target.value)}
- size="small"
- fullWidth
- type="password"
- placeholder={
- isSet ? "•••••••••• (stored — leave blank to keep)" : "https://account.blob.core.windows.net/container?sv=..."
- }
- helperText="Container-level SAS URL with write and create permissions."
- />
-
-
-
-
-
-
- );
-};
-
-const Page = () => {
- const replicationConfig = ApiGetCall({
- url: "/api/ExecBackupReplicationConfig",
- data: { List: true },
- queryKey: "BackupReplicationConfig",
- });
- const [validationResult, setValidationResult] = useState(null);
- const wizardDialog = useDialog();
- const runBackupDialog = useDialog();
- const enableBackupDialog = useDialog();
- const disableBackupDialog = useDialog();
- const [selectedBackupFile, setSelectedBackupFile] = useState(null);
- const [selectedBackupData, setSelectedBackupData] = useState(null);
- const [selectedBackupName, setSelectedBackupName] = useState(null);
- const [wizardLoading, setWizardLoading] = useState(false);
-
- const backupList = ApiGetCall({
- url: "/api/ExecListBackup",
- data: {
- NameOnly: true,
- },
- queryKey: "BackupList",
- });
-
- const scheduledBackup = ApiGetCall({
- url: "/api/ListScheduledItems",
- data: {
- Name: "Automated CIPP Backup",
- },
- queryKey: "ScheduledBackup",
- });
-
- const downloadAction = ApiPostCall({
- urlFromData: true,
- });
-
- const fetchForRestore = ApiPostCall({
- urlFromData: true,
- });
-
- const NextBackupRun = (props) => {
- const date = new Date(props.date);
- if (isNaN(date)) {
- return "Not Scheduled";
- } else {
- return
-
- Backups are stored in the storage account associated with your CIPP instance. You can
- download or restore specific points in time from the list below. Enable automatic
- backups to have CIPP create daily backups using the scheduler.
-
-
- {backupList.isSuccess ? (
-
- backupList.refetch()}
- isFetching={backupList.isFetching}
- actions={actions}
- cardButton={
- <>
-
- }
- onClick={runBackupDialog.handleOpen}
- >
- Run Backup
-
- }>
- Restore From File
-
-
- {scheduledBackup.isSuccess &&
- scheduledBackup.data?.[0]?.Name !== "Automated CIPP Backup" && (
- }
- onClick={enableBackupDialog.handleOpen}
- >
- Schedule Backups
-
- )}
- {scheduledBackup.isSuccess &&
- scheduledBackup.data?.[0]?.Name === "Automated CIPP Backup" && (
- }
- onClick={disableBackupDialog.handleOpen}
- >
- Remove Schedule
-
- )}
-
-
- }
- />
-
- ) : (
-
-
-
-
- )}
-
-
-
-
-
-
-
-
- When enabled, each new backup is also uploaded to the external container described by the
- SAS URL. The SAS URL is stored securely in Key Vault. This does not copy existing backups.
- This will continue to push backups to the container without any consideration for storage costs, so please monitor your external storage usage.
-
-
-
-
-
-
-
-
-
-
-
-
- {
- wizardDialog.handleClose();
- setValidationResult(null);
- setSelectedBackupFile(null);
- setSelectedBackupData(null);
- setSelectedBackupName(null);
- setWizardLoading(false);
- }}
- validationResult={validationResult}
- backupFile={selectedBackupFile}
- backupData={selectedBackupData}
- backupName={selectedBackupName}
- isLoading={wizardLoading}
- />
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/cipp/settings/backup.jsx b/src/pages/cipp/settings/backup.jsx
new file mode 100644
index 000000000000..f74274e9cdaf
--- /dev/null
+++ b/src/pages/cipp/settings/backup.jsx
@@ -0,0 +1,491 @@
+import {
+ Alert,
+ Box,
+ Button,
+ Card,
+ CardContent,
+ CardHeader,
+ Divider,
+ FormControlLabel,
+ Stack,
+ Switch,
+ TextField,
+ Typography,
+ Skeleton,
+ Input,
+ FormControl,
+ FormLabel,
+} from "@mui/material";
+import { CippIcons } from "../../../utils/icon-registry"
+import { Layout as DashboardLayout } from "../../../layouts/index";
+import CippPageCard from "../../../components/CippCards/CippPageCard";
+import { ApiGetCall, ApiPostCall } from "../../../api/ApiCall";
+import { CippApiResults } from "../../../components/CippComponents/CippApiResults";
+import { CippInfoBar } from "../../../components/CippCards/CippInfoBar";
+import ReactTimeAgo from "react-time-ago";
+import { CippDataTable } from "../../../components/CippTable/CippDataTable";
+import { CippApiDialog } from "../../../components/CippComponents/CippApiDialog";
+import { CippRestoreWizard } from "../../../components/CippComponents/CippRestoreWizard";
+import { BackupValidator } from "../../../utils/backupValidation";
+import { useEffect, useState } from "react";
+import { useDialog } from "../../../hooks/use-dialog";
+
+const ReplicationScopeCard = ({ scope, label, description, config }) => {
+ const save = ApiPostCall({ relatedQueryKeys: "BackupReplicationConfig" });
+ const [sasUrl, setSasUrl] = useState("");
+ const [enabled, setEnabled] = useState(false);
+
+ useEffect(() => {
+ setEnabled(Boolean(config?.Enabled));
+ setSasUrl("");
+ }, [config?.Enabled, config?.IsSet]);
+
+ const isSet = Boolean(config?.IsSet);
+
+ const handleSave = () => {
+ const data = { BackupType: scope, Enabled: enabled };
+ if (sasUrl) {
+ data.SASUrl = sasUrl;
+ } else if (isSet) {
+ // Keep the existing stored SAS URL untouched.
+ data.SASUrl = "SentToKeyVault";
+ }
+ save.mutate({ url: "/api/ExecBackupReplicationConfig", data });
+ };
+
+ return (
+
+
+
+
+ {label}
+
+ {description}
+
+
+ setEnabled(e.target.checked)}
+ />
+ }
+ label={Enable replication }
+ />
+ setSasUrl(e.target.value)}
+ size="small"
+ fullWidth
+ type="password"
+ placeholder={
+ isSet ? "•••••••••• (stored — leave blank to keep)" : "https://account.blob.core.windows.net/container?sv=..."
+ }
+ helperText="Container-level SAS URL with write and create permissions."
+ />
+
+
+
+
+
+
+ );
+};
+
+const Page = () => {
+ const replicationConfig = ApiGetCall({
+ url: "/api/ExecBackupReplicationConfig",
+ data: { List: true },
+ queryKey: "BackupReplicationConfig",
+ });
+ const [validationResult, setValidationResult] = useState(null);
+ const wizardDialog = useDialog();
+ const runBackupDialog = useDialog();
+ const enableBackupDialog = useDialog();
+ const disableBackupDialog = useDialog();
+ const [selectedBackupFile, setSelectedBackupFile] = useState(null);
+ const [selectedBackupData, setSelectedBackupData] = useState(null);
+ const [selectedBackupName, setSelectedBackupName] = useState(null);
+ const [wizardLoading, setWizardLoading] = useState(false);
+
+ const backupList = ApiGetCall({
+ url: "/api/ExecListBackup",
+ data: {
+ NameOnly: true,
+ },
+ queryKey: "BackupList",
+ });
+
+ const scheduledBackup = ApiGetCall({
+ url: "/api/ListScheduledItems",
+ data: {
+ Name: "Automated CIPP Backup",
+ },
+ queryKey: "ScheduledBackup",
+ });
+
+ const downloadAction = ApiPostCall({
+ urlFromData: true,
+ });
+
+ const fetchForRestore = ApiPostCall({
+ urlFromData: true,
+ });
+
+ const NextBackupRun = (props) => {
+ const date = new Date(props.date);
+ if (isNaN(date)) {
+ return "Not Scheduled";
+ } else {
+ return
+
+ Backups are stored in the storage account associated with your CIPP instance. You can
+ download or restore specific points in time from the list below. Enable automatic
+ backups to have CIPP create daily backups using the scheduler.
+
+
+ {backupList.isSuccess ? (
+
+ backupList.refetch()}
+ isFetching={backupList.isFetching}
+ actions={actions}
+ cardButton={
+ <>
+
+ }
+ onClick={runBackupDialog.handleOpen}
+ >
+ Run Backup
+
+ }>
+ Restore From File
+
+
+ {scheduledBackup.isSuccess &&
+ scheduledBackup.data?.[0]?.Name !== "Automated CIPP Backup" && (
+ }
+ onClick={enableBackupDialog.handleOpen}
+ >
+ Schedule Backups
+
+ )}
+ {scheduledBackup.isSuccess &&
+ scheduledBackup.data?.[0]?.Name === "Automated CIPP Backup" && (
+ }
+ onClick={disableBackupDialog.handleOpen}
+ >
+ Remove Schedule
+
+ )}
+
+
+ }
+ />
+
+ ) : (
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ When enabled, each new backup is also uploaded to the external container described by the
+ SAS URL. The SAS URL is stored securely in Key Vault. This does not copy existing backups.
+ This will continue to push backups to the container without any consideration for storage costs, so please monitor your external storage usage.
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ wizardDialog.handleClose();
+ setValidationResult(null);
+ setSelectedBackupFile(null);
+ setSelectedBackupData(null);
+ setSelectedBackupName(null);
+ setWizardLoading(false);
+ }}
+ validationResult={validationResult}
+ backupFile={selectedBackupFile}
+ backupData={selectedBackupData}
+ backupName={selectedBackupName}
+ isLoading={wizardLoading}
+ />
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/cipp/settings/branding.js b/src/pages/cipp/settings/branding.js
deleted file mode 100644
index 611c0a65d48e..000000000000
--- a/src/pages/cipp/settings/branding.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Container } from "@mui/material";
-import { TabbedLayout } from "../../../layouts/TabbedLayout";
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-import tabOptions from "./tabOptions";
-import CippBrandingSettings from "../../../components/CippSettings/CippBrandingSettings";
-
-const Page = () => {
- return (
-
-
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/settings/branding.jsx b/src/pages/cipp/settings/branding.jsx
new file mode 100644
index 000000000000..2ead8bdf764a
--- /dev/null
+++ b/src/pages/cipp/settings/branding.jsx
@@ -0,0 +1,21 @@
+import { Container } from "@mui/material";
+import { TabbedLayout } from "../../../layouts/TabbedLayout";
+import { Layout as DashboardLayout } from "../../../layouts/index";
+import tabOptions from "./tabOptions";
+import CippBrandingSettings from "../../../components/CippSettings/CippBrandingSettings";
+
+const Page = () => {
+ return (
+
+
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
diff --git a/src/pages/cipp/settings/features.js b/src/pages/cipp/settings/features.js
deleted file mode 100644
index d630e93eb2ba..000000000000
--- a/src/pages/cipp/settings/features.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-import { TabbedLayout } from "../../../layouts/TabbedLayout";
-import tabOptions from "./tabOptions";
-import { CippTablePage } from "../../../components/CippComponents/CippTablePage";
-import { CheckCircle, Cancel } from "@mui/icons-material";
-
-const Page = () => {
- const pageTitle = "Features";
-
- const actions = [
- {
- label: "Enable Feature",
- type: "POST",
- url: "/api/ExecFeatureFlag",
- data: {
- Action: "Set",
- Id: "Id",
- Enabled: true,
- },
- confirmText: "Are you sure you want to enable this feature?",
- condition: (item) => item.AllowUserToggle && !item.Enabled,
- icon: !row.Hidden}
- />
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/settings/features.jsx b/src/pages/cipp/settings/features.jsx
new file mode 100644
index 000000000000..53dbc689adc0
--- /dev/null
+++ b/src/pages/cipp/settings/features.jsx
@@ -0,0 +1,73 @@
+import { Layout as DashboardLayout } from "../../../layouts/index";
+import { CippIcons } from "../../../utils/icon-registry"
+import { TabbedLayout } from "../../../layouts/TabbedLayout";
+import tabOptions from "./tabOptions";
+import { CippTablePage } from "../../../components/CippComponents/CippTablePage";
+
+const Page = () => {
+ const pageTitle = "Features";
+
+ const actions = [
+ {
+ label: "Enable Feature",
+ type: "POST",
+ url: "/api/ExecFeatureFlag",
+ data: {
+ Action: "Set",
+ Id: "Id",
+ Enabled: true,
+ },
+ confirmText: "Are you sure you want to enable this feature?",
+ condition: (item) => item.AllowUserToggle && !item.Enabled,
+ icon: !row.Hidden}
+ />
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
diff --git a/src/pages/cipp/settings/index.js b/src/pages/cipp/settings/index.js
deleted file mode 100644
index 00c7b3ca640a..000000000000
--- a/src/pages/cipp/settings/index.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Container } from "@mui/material";
-import { Grid } from "@mui/system";
-import { TabbedLayout } from "../../../layouts/TabbedLayout";
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-import tabOptions from "./tabOptions";
-
-import CippVersionProperties from "../../../components/CippSettings/CippVersionProperties";
-import CippPasswordSettings from "../../../components/CippSettings/CippPasswordSettings";
-import CippDnsSettings from "../../../components/CippSettings/CippDnsSettings";
-import CippCacheSettings from "../../../components/CippSettings/CippCacheSettings";
-import CippBackupSettings from "../../../components/CippSettings/CippBackupSettings";
-import CippBackupRetentionSettings from "../../../components/CippSettings/CippBackupRetentionSettings";
-import CippLogRetentionSettings from "../../../components/CippSettings/CippLogRetentionSettings";
-import CippJitAdminSettings from "../../../components/CippSettings/CippJitAdminSettings";
-const Page = () => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/settings/index.jsx b/src/pages/cipp/settings/index.jsx
new file mode 100644
index 000000000000..23e91f0295c5
--- /dev/null
+++ b/src/pages/cipp/settings/index.jsx
@@ -0,0 +1,54 @@
+import { Container } from "@mui/material";
+import { Grid } from "@mui/system";
+import { TabbedLayout } from "../../../layouts/TabbedLayout";
+import { Layout as DashboardLayout } from "../../../layouts/index";
+import tabOptions from "./tabOptions";
+
+import CippVersionProperties from "../../../components/CippSettings/CippVersionProperties";
+import CippPasswordSettings from "../../../components/CippSettings/CippPasswordSettings";
+import CippDnsSettings from "../../../components/CippSettings/CippDnsSettings";
+import CippCacheSettings from "../../../components/CippSettings/CippCacheSettings";
+import CippBackupSettings from "../../../components/CippSettings/CippBackupSettings";
+import CippBackupRetentionSettings from "../../../components/CippSettings/CippBackupRetentionSettings";
+import CippLogRetentionSettings from "../../../components/CippSettings/CippLogRetentionSettings";
+import CippJitAdminSettings from "../../../components/CippSettings/CippJitAdminSettings";
+const Page = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
diff --git a/src/pages/cipp/settings/licenses.js b/src/pages/cipp/settings/licenses.js
deleted file mode 100644
index f8795293be53..000000000000
--- a/src/pages/cipp/settings/licenses.js
+++ /dev/null
@@ -1,265 +0,0 @@
-import tabOptions from './tabOptions'
-import { TabbedLayout } from '../../../layouts/TabbedLayout'
-import { Layout as DashboardLayout } from '../../../layouts/index.js'
-import { CippTablePage } from '../../../components/CippComponents/CippTablePage.jsx'
-import { Button, SvgIcon, Stack, Box } from '@mui/material'
-import { TrashIcon } from '@heroicons/react/24/outline'
-import { Add, RestartAlt, NotificationsOff, Visibility, VisibilityOff } from '@mui/icons-material'
-import { CippApiDialog } from '../../../components/CippComponents/CippApiDialog'
-import { useDialog } from '../../../hooks/use-dialog'
-import CippFormComponent from '../../../components/CippComponents/CippFormComponent'
-import { CippFormCondition } from '../../../components/CippComponents/CippFormCondition'
-import { getM365Licenses } from '../../../utils/m365-licenses-data'
-import { useMemo, useCallback } from 'react'
-
-const Page = () => {
- const pageTitle = 'Excluded Licenses'
- const apiUrl = '/api/ListExcludedLicenses'
- const createDialog = useDialog()
- const resetDialog = useDialog()
- const simpleColumns = ['Product_Display_Name', 'GUID', 'ExclusionType', 'ShowInLicenseDropdown']
-
- const allLicenseOptions = useMemo(() => {
- const allLicenses = getM365Licenses()
- const uniqueLicenses = new Map()
-
- allLicenses.forEach((license) => {
- if (license.GUID && license.Product_Display_Name) {
- if (!uniqueLicenses.has(license.GUID)) {
- uniqueLicenses.set(license.GUID, {
- label: license.Product_Display_Name,
- value: license.GUID,
- })
- }
- }
- })
-
- const options = Array.from(uniqueLicenses.values())
- const nameCounts = {}
- options.forEach((opt) => {
- nameCounts[opt.label] = (nameCounts[opt.label] || 0) + 1
- })
-
- return options
- .map((opt) =>
- nameCounts[opt.label] > 1 ? { ...opt, label: `${opt.label} (${opt.value})` } : opt
- )
- .sort((a, b) => a.label.localeCompare(b.label))
- }, [])
-
- const actions = [
- {
- label: 'Only Exclude from Alerts',
- type: 'POST',
- url: '/api/ExecExcludeLicenses',
- data: { Action: '!AlertOnly', GUID: 'GUID', SKUName: 'Product_Display_Name' },
- confirmText:
- 'This license will remain visible in CIPP but will be excluded from alerts. Continue?',
- icon:
-
- ),
- },
- ]
-
- const CardButtons = () => {
- return (
-
-
- }
- >
- Restore Defaults
-
-
- )
- }
-
- const offCanvas = {
- extendedInfoFields: ['Product_Display_Name', 'GUID', 'ExclusionType', 'ShowInLicenseDropdown'],
- actions: actions,
- }
-
- const addExclusionFormatter = useCallback((row, action, formData) => {
- if (formData.advancedMode) {
- return {
- Action: 'AddExclusion',
- GUID: formData.GUID,
- SKUName: formData.SKUName,
- }
- }
- return {
- Action: 'AddExclusion',
- GUID: formData.selectedLicense?.value,
- SKUName: formData.selectedLicense?.label,
- }
- }, [])
-
- return (
- <>
-
- {({ formHook }) => (
- <>
-
-
-
-
-
-
-
-
-
-
-
- )}
-
-
- {page}
-
-)
-
-export default Page
diff --git a/src/pages/cipp/settings/licenses.jsx b/src/pages/cipp/settings/licenses.jsx
new file mode 100644
index 000000000000..01542f2ebf74
--- /dev/null
+++ b/src/pages/cipp/settings/licenses.jsx
@@ -0,0 +1,264 @@
+import tabOptions from './tabOptions'
+import { CippIcons } from '../../../utils/icon-registry'
+import { TabbedLayout } from '../../../layouts/TabbedLayout'
+import { Layout as DashboardLayout } from '../../../layouts/index'
+import { CippTablePage } from '../../../components/CippComponents/CippTablePage.jsx'
+import { Button, SvgIcon, Stack, Box } from '@mui/material'
+import { CippApiDialog } from '../../../components/CippComponents/CippApiDialog'
+import { useDialog } from '../../../hooks/use-dialog'
+import CippFormComponent from '../../../components/CippComponents/CippFormComponent'
+import { CippFormCondition } from '../../../components/CippComponents/CippFormCondition'
+import { getM365Licenses } from '../../../utils/m365-licenses-data'
+import { useMemo, useCallback } from 'react'
+
+const Page = () => {
+ const pageTitle = 'Excluded Licenses'
+ const apiUrl = '/api/ListExcludedLicenses'
+ const createDialog = useDialog()
+ const resetDialog = useDialog()
+ const simpleColumns = ['Product_Display_Name', 'GUID', 'ExclusionType', 'ShowInLicenseDropdown']
+
+ const allLicenseOptions = useMemo(() => {
+ const allLicenses = getM365Licenses()
+ const uniqueLicenses = new Map()
+
+ allLicenses.forEach((license) => {
+ if (license.GUID && license.Product_Display_Name) {
+ if (!uniqueLicenses.has(license.GUID)) {
+ uniqueLicenses.set(license.GUID, {
+ label: license.Product_Display_Name,
+ value: license.GUID,
+ })
+ }
+ }
+ })
+
+ const options = Array.from(uniqueLicenses.values())
+ const nameCounts = {}
+ options.forEach((opt) => {
+ nameCounts[opt.label] = (nameCounts[opt.label] || 0) + 1
+ })
+
+ return options
+ .map((opt) =>
+ nameCounts[opt.label] > 1 ? { ...opt, label: `${opt.label} (${opt.value})` } : opt
+ )
+ .sort((a, b) => a.label.localeCompare(b.label))
+ }, [])
+
+ const actions = [
+ {
+ label: 'Only Exclude from Alerts',
+ type: 'POST',
+ url: '/api/ExecExcludeLicenses',
+ data: { Action: '!AlertOnly', GUID: 'GUID', SKUName: 'Product_Display_Name' },
+ confirmText:
+ 'This license will remain visible in CIPP but will be excluded from alerts. Continue?',
+ icon:
+
+ ),
+ },
+ ]
+
+ const CardButtons = () => {
+ return (
+
+
+ }
+ >
+ Restore Defaults
+
+
+ )
+ }
+
+ const offCanvas = {
+ extendedInfoFields: ['Product_Display_Name', 'GUID', 'ExclusionType', 'ShowInLicenseDropdown'],
+ actions: actions,
+ }
+
+ const addExclusionFormatter = useCallback((row, action, formData) => {
+ if (formData.advancedMode) {
+ return {
+ Action: 'AddExclusion',
+ GUID: formData.GUID,
+ SKUName: formData.SKUName,
+ }
+ }
+ return {
+ Action: 'AddExclusion',
+ GUID: formData.selectedLicense?.value,
+ SKUName: formData.selectedLicense?.label,
+ }
+ }, [])
+
+ return (
+ <>
+
+ {({ formHook }) => (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ {page}
+
+)
+
+export default Page
diff --git a/src/pages/cipp/settings/notifications.js b/src/pages/cipp/settings/notifications.js
deleted file mode 100644
index 99f2d9441bff..000000000000
--- a/src/pages/cipp/settings/notifications.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { TabbedLayout } from "../../../layouts/TabbedLayout";
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-import tabOptions from "./tabOptions";
-import CippFormPage from "../../../components/CippFormPages/CippFormPage";
-import { useForm } from "react-hook-form";
-import { useDialog } from "../../../hooks/use-dialog";
-import { CippNotificationForm } from "../../../components/CippComponents/CippNotificationForm";
-
-const Page = () => {
- const pageTitle = "Notification Settings";
- const notificationDialog = useDialog();
-
- const formControl = useForm({
- mode: "onChange",
- });
-
- return (
-
- {/* Use the reusable notification form component */}
-
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/settings/notifications.jsx b/src/pages/cipp/settings/notifications.jsx
new file mode 100644
index 000000000000..5021a8999f95
--- /dev/null
+++ b/src/pages/cipp/settings/notifications.jsx
@@ -0,0 +1,40 @@
+import { TabbedLayout } from "../../../layouts/TabbedLayout";
+import { Layout as DashboardLayout } from "../../../layouts/index";
+import tabOptions from "./tabOptions";
+import CippFormPage from "../../../components/CippFormPages/CippFormPage";
+import { useForm } from "react-hook-form";
+import { useDialog } from "../../../hooks/use-dialog";
+import { CippNotificationForm } from "../../../components/CippComponents/CippNotificationForm";
+
+const Page = () => {
+ const pageTitle = "Notification Settings";
+ const notificationDialog = useDialog();
+
+ const formControl = useForm({
+ mode: "onChange",
+ });
+
+ return (
+
+ {/* Use the reusable notification form component */}
+
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
diff --git a/src/pages/cipp/settings/partner-webhooks.js b/src/pages/cipp/settings/partner-webhooks.js
deleted file mode 100644
index e5ae63287d29..000000000000
--- a/src/pages/cipp/settings/partner-webhooks.js
+++ /dev/null
@@ -1,321 +0,0 @@
-import { TabbedLayout } from "../../../layouts/TabbedLayout";
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-import tabOptions from "./tabOptions";
-import CippFormPage from "../../../components/CippFormPages/CippFormPage";
-import { useForm } from "react-hook-form";
-import {
- Alert,
- Box,
- Button,
- Card,
- Chip,
- Stack,
- Typography,
- Link,
- CardHeader,
- CardContent,
- IconButton,
- SvgIcon,
-} from "@mui/material";
-import { Grid } from "@mui/system";
-import CippFormComponent from "../../../components/CippComponents/CippFormComponent";
-import { ApiGetCall, ApiPostCall } from "../../../api/ApiCall";
-import { useEffect } from "react";
-import { CippPropertyList } from "../../../components/CippComponents/CippPropertyList";
-import { CippCodeBlock } from "../../../components/CippComponents/CippCodeBlock";
-import { CippTimeAgo } from "../../../components/CippComponents/CippTimeAgo";
-import { useState } from "react";
-import { Close } from "@mui/icons-material";
-
-const Page = () => {
- const pageTitle = "Automated Onboarding";
- const [testRunning, setTestRunning] = useState(false);
- const [correlationId, setCorrelationId] = useState(null);
- const [validateRunning, setValidateRunning] = useState(false);
-
- const formControl = useForm({
- mode: "onChange",
- });
-
- const listSubscription = ApiGetCall({
- url: "/api/ExecPartnerWebhook",
- data: { Action: "ListSubscription" },
- queryKey: "listSubscription",
- });
-
- const subscription = listSubscription?.data?.Results;
- const expectedWebhookUrl = subscription?.expectedWebhookUrl;
- // The backend resolves the expected URL from the custom domain bound to the instance, not from
- // the host this page was loaded on, so surface which one it picked when there is more than one.
- const customDomains = subscription?.customDomains ?? [];
- const hasMultipleCustomDomains = customDomains.length > 1;
- // Compared case-insensitively to match the backend, which uses PowerShell's -ne
- const webhookUrlIsStale =
- !!expectedWebhookUrl &&
- !!subscription?.webhookUrl &&
- subscription.webhookUrl !== "None" &&
- subscription.webhookUrl.toLowerCase() !== expectedWebhookUrl.toLowerCase();
-
- const listEventTypes = ApiGetCall({
- url: "/api/ExecPartnerWebhook",
- data: { Action: "ListEventTypes" },
- queryKey: "listEventTypes",
- });
-
- const sendTest = ApiPostCall({
- urlFromData: true,
- });
-
- const validateTest = ApiGetCall({
- url: `/api/ExecPartnerWebhook`,
- data: { Action: "ValidateTest", CorrelationId: correlationId },
- waiting: validateRunning,
- });
-
- const handleStartTest = () => {
- setTestRunning(true);
- sendTest.mutate(
- {
- url: "/api/ExecPartnerWebhook?Action=SendTest",
- data: {},
- },
- {
- onSuccess: (data) => {
- if (data?.data?.Results?.correlationId) {
- setTimeout(() => {
- setCorrelationId(data?.data?.Results?.correlationId);
- setValidateRunning(true);
- validateTest.refetch();
- }, 1000);
- }
- },
- }
- );
- };
-
- useEffect(() => {
- if (
- correlationId &&
- validateRunning &&
- validateTest.isSuccess &&
- validateTest?.data?.Results?.status === "Submitted"
- ) {
- setTimeout(() => {
- validateTest.refetch();
- }, 1000);
- } else if (
- validateTest.isSuccess &&
- (validateTest?.data?.Results?.status === "completed" ||
- validateTest?.data?.Results?.status === "failed")
- ) {
- setValidateRunning(false);
- setCorrelationId(null);
- } else {
- setTimeout(() => {
- validateTest.refetch();
- }, 1000);
- }
- }, [validateTest.isSuccess, validateTest?.data?.Results, validateRunning]);
-
- useEffect(() => {
- if (listSubscription.isSuccess && listEventTypes.isSuccess) {
- formControl.reset({
- enabled: listSubscription?.data?.Results?.enabled ?? false,
- EventType: listSubscription?.data?.Results?.webhookEvents?.map((eventType) => {
- var event = listEventTypes?.data?.Results?.find((event) => event === eventType);
- return { label: event, value: event };
- }),
- standardsExcludeAllTenants: listSubscription?.data?.Results?.standardsExcludeAllTenants,
- });
- }
- }, [listSubscription.isSuccess, listEventTypes.isSuccess]);
-
- return (
-
- Test Webhook
-
- }
- >
-
-
-
- Subscribe to Microsoft Partner center webhooks to enable automatic tenant onboarding and
- alerting. Updating the settings will replace any existing webhook subscription with one
- pointing to CIPP. Refer to the{" "}
-
- Microsoft Partner Center documentation
- {" "}
- for more information on the webhook types.
-
-
-
-
-
- This subscription points at a different URL than the one this instance is
- published on. Save the settings below to re-register it against{" "}
- {expectedWebhookUrl}.
-
- )}
- {hasMultipleCustomDomains && (
-
- This instance has {customDomains.length} custom domains bound (
- {customDomains.join(", ")}). CIPP uses the first one,{" "}
- {subscription?.instanceHostname}, for webhook registrations
- and notification links.
-
- )}
-
- ),
- sx: { pl: 0 },
- },
- {
- label: "Last Updated",
- value: (
-
-
-
-
- {
- return { label: eventType, value: eventType };
- })}
- formControl={formControl}
- />
-
-
-
- {testRunning && (
-
-
-
- Test Results
- setTestRunning(false)}>
-
-
-
-
- }
- sx={{ pb: 0 }}
- />
-
-
-
-
- )}
-
-
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/settings/partner-webhooks.jsx b/src/pages/cipp/settings/partner-webhooks.jsx
new file mode 100644
index 000000000000..261b95ae28bf
--- /dev/null
+++ b/src/pages/cipp/settings/partner-webhooks.jsx
@@ -0,0 +1,337 @@
+import { TabbedLayout } from "../../../layouts/TabbedLayout";
+import { CippIcons } from "../../../utils/icon-registry";
+import { Layout as DashboardLayout } from "../../../layouts/index";
+import tabOptions from "./tabOptions";
+import CippFormPage from "../../../components/CippFormPages/CippFormPage";
+import { useForm } from "react-hook-form";
+import {
+ Alert,
+ Box,
+ Button,
+ Card,
+ Chip,
+ Stack,
+ Typography,
+ Link,
+ CardHeader,
+ CardContent,
+ IconButton,
+ SvgIcon,
+} from "@mui/material";
+import { Grid } from "@mui/system";
+import CippFormComponent from "../../../components/CippComponents/CippFormComponent";
+import { ApiGetCall, ApiPostCall } from "../../../api/ApiCall";
+import { useEffect } from "react";
+import { CippPropertyList } from "../../../components/CippComponents/CippPropertyList";
+import { CippCodeBlock } from "../../../components/CippComponents/CippCodeBlock";
+import { CippTimeAgo } from "../../../components/CippComponents/CippTimeAgo";
+import { useState } from "react";
+
+const Page = () => {
+ const pageTitle = "Automated Onboarding";
+ const [testRunning, setTestRunning] = useState(false);
+ const [correlationId, setCorrelationId] = useState(null);
+ const [validateRunning, setValidateRunning] = useState(false);
+
+ const formControl = useForm({
+ mode: "onChange",
+ });
+
+ const listSubscription = ApiGetCall({
+ url: "/api/ExecPartnerWebhook",
+ data: { Action: "ListSubscription" },
+ queryKey: "listSubscription",
+ });
+
+ const subscription = listSubscription?.data?.Results;
+ const expectedWebhookUrl = subscription?.expectedWebhookUrl;
+ // The backend resolves the expected URL from the custom domain bound to the instance, not from
+ // the host this page was loaded on, so surface which one it picked when there is more than one.
+ const customDomains = subscription?.customDomains ?? [];
+ const hasMultipleCustomDomains = customDomains.length > 1;
+ // Compared case-insensitively to match the backend, which uses PowerShell's -ne
+ const webhookUrlIsStale =
+ !!expectedWebhookUrl &&
+ !!subscription?.webhookUrl &&
+ subscription.webhookUrl !== "None" &&
+ subscription.webhookUrl.toLowerCase() !== expectedWebhookUrl.toLowerCase();
+
+ const listEventTypes = ApiGetCall({
+ url: "/api/ExecPartnerWebhook",
+ data: { Action: "ListEventTypes" },
+ queryKey: "listEventTypes",
+ });
+
+ const sendTest = ApiPostCall({
+ urlFromData: true,
+ });
+
+ const validateTest = ApiGetCall({
+ url: `/api/ExecPartnerWebhook`,
+ data: { Action: "ValidateTest", CorrelationId: correlationId },
+ waiting: validateRunning,
+ });
+
+ const handleStartTest = () => {
+ setTestRunning(true);
+ sendTest.mutate(
+ {
+ url: "/api/ExecPartnerWebhook?Action=SendTest",
+ data: {},
+ },
+ {
+ onSuccess: (data) => {
+ if (data?.data?.Results?.correlationId) {
+ setTimeout(() => {
+ setCorrelationId(data?.data?.Results?.correlationId);
+ setValidateRunning(true);
+ validateTest.refetch();
+ }, 1000);
+ }
+ },
+ }
+ );
+ };
+
+ useEffect(() => {
+ if (
+ correlationId &&
+ validateRunning &&
+ validateTest.isSuccess &&
+ validateTest?.data?.Results?.status === "Submitted"
+ ) {
+ setTimeout(() => {
+ validateTest.refetch();
+ }, 1000);
+ } else if (
+ validateTest.isSuccess &&
+ (validateTest?.data?.Results?.status === "completed" ||
+ validateTest?.data?.Results?.status === "failed")
+ ) {
+ setValidateRunning(false);
+ setCorrelationId(null);
+ } else {
+ setTimeout(() => {
+ validateTest.refetch();
+ }, 1000);
+ }
+ }, [validateTest.isSuccess, validateTest?.data?.Results, validateRunning]);
+
+ useEffect(() => {
+ if (listSubscription.isSuccess && listEventTypes.isSuccess) {
+ formControl.reset({
+ enabled: listSubscription?.data?.Results?.enabled ?? false,
+ EventType: listSubscription?.data?.Results?.webhookEvents?.map((eventType) => {
+ var event = listEventTypes?.data?.Results?.find((event) => event === eventType);
+ return { label: event, value: event };
+ }),
+ standardsExcludeAllTenants: listSubscription?.data?.Results?.standardsExcludeAllTenants,
+ });
+ }
+ }, [listSubscription.isSuccess, listEventTypes.isSuccess]);
+
+ return (
+
+ Test Webhook
+
+ }
+ >
+
+
+
+ Subscribe to Microsoft Partner center webhooks to enable automatic tenant onboarding and
+ alerting. Updating the settings will replace any existing webhook subscription with one
+ pointing to CIPP. Refer to the{" "}
+
+ Microsoft Partner Center documentation
+ {" "}
+ for more information on the webhook types.
+
+
+
+
+ {/* The URL is one unbreakable token and the copy button floats over the
+ block's top-right — wrap it and keep the text clear of the button. */}
+
+
+ {webhookUrlIsStale && (
+
+ This subscription points at a different URL than the one this instance is
+ published on. Save the settings below to re-register it against{" "}
+ {expectedWebhookUrl}.
+
+ )}
+ {hasMultipleCustomDomains && (
+
+ This instance has {customDomains.length} custom domains bound (
+ {customDomains.join(", ")}). CIPP uses the first one,{" "}
+ {subscription?.instanceHostname}, for webhook registrations
+ and notification links.
+
+ )}
+
+ ),
+ sx: { pl: 0 },
+ },
+ {
+ label: "Last Updated",
+ value: (
+
+
+
+
+ {
+ return { label: eventType, value: eventType };
+ })}
+ formControl={formControl}
+ />
+
+
+
+ {testRunning && (
+
+
+
+ Test Results
+ setTestRunning(false)}>
+
+
+
+
+ }
+ sx={{ pb: 0 }}
+ />
+
+
+
+
+ )}
+
+
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
diff --git a/src/pages/cipp/settings/password-config/index.js b/src/pages/cipp/settings/password-config/index.js
deleted file mode 100644
index 06d2c452a60a..000000000000
--- a/src/pages/cipp/settings/password-config/index.js
+++ /dev/null
@@ -1,329 +0,0 @@
-import { useEffect, useState, useCallback } from "react";
-import {
- Alert,
- Box,
- Button,
- Card,
- CardContent,
- Container,
- Divider,
- FormControlLabel,
- Stack,
- SvgIcon,
- Switch,
- TextField,
- ToggleButton,
- ToggleButtonGroup,
- Typography,
-} from "@mui/material";
-import { Grid } from "@mui/system";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { useRouter } from "next/router";
-import { ApiGetCall, ApiPostCall } from "../../../../api/ApiCall";
-import { ArrowLeftIcon, CheckIcon } from "@heroicons/react/24/outline";
-import { CippHead } from "../../../../components/CippComponents/CippHead";
-import { CippApiResults } from "../../../../components/CippComponents/CippApiResults";
-
-// Password configuration constants
-const PASSWORD_TYPES = {
- CLASSIC: 'Classic',
- PASSPHRASE: 'Passphrase'
-};
-
-const DEFAULT_VALUES = {
- CHAR_COUNT: 14,
- WORD_COUNT: 4,
- SPECIAL_CHAR_SET: '$%&*#',
- SEPARATOR: '-'
-};
-
-function normalizeConfigForBackend(config) {
- return {
- passwordType: String(config.passwordType || PASSWORD_TYPES.CLASSIC),
- charCount: String(parseInt(config.charCount, 10) || DEFAULT_VALUES.CHAR_COUNT),
- includeUppercase: Boolean(config.includeUppercase),
- includeLowercase: Boolean(config.includeLowercase),
- includeDigits: Boolean(config.includeDigits),
- includeSpecialChars: Boolean(config.includeSpecialChars),
- specialCharSet: String(config.specialCharSet || DEFAULT_VALUES.SPECIAL_CHAR_SET),
- wordCount: String(parseInt(config.wordCount, 10) || DEFAULT_VALUES.WORD_COUNT),
- separator: config.separator !== undefined && config.separator !== null ? String(config.separator) : DEFAULT_VALUES.SEPARATOR,
- capitalizeWords: Boolean(config.capitalizeWords),
- appendNumber: Boolean(config.appendNumber),
- appendSpecialChar: Boolean(config.appendSpecialChar),
- };
-}
-
-
-const DEFAULT_CONFIG = {
- passwordType: PASSWORD_TYPES.CLASSIC,
- charCount: String(DEFAULT_VALUES.CHAR_COUNT),
- includeUppercase: true,
- includeLowercase: true,
- includeDigits: true,
- includeSpecialChars: true,
- specialCharSet: DEFAULT_VALUES.SPECIAL_CHAR_SET,
- wordCount: String(DEFAULT_VALUES.WORD_COUNT),
- separator: DEFAULT_VALUES.SEPARATOR,
- capitalizeWords: false,
- appendNumber: false,
- appendSpecialChar: false,
-};
-
-// ── Page ──────────────────────────────────────────────────────────────────────
-
-const Page = () => {
- const router = useRouter();
- const [config, setConfig] = useState(DEFAULT_CONFIG);
-
- const passwordSetting = ApiGetCall({ url: "/api/ExecPasswordConfig?list=true", queryKey: "PasswordSettings" });
- const passwordSave = ApiPostCall({ datafromUrl: true, relatedQueryKeys: "PasswordSettings" });
-
- useEffect(() => {
- if (passwordSetting.isSuccess && passwordSetting.data) {
- const r = passwordSetting.data.Results;
- const toBool = (v, def) => {
- if (v === undefined || v === null) return def;
- if (typeof v === 'boolean') return v;
- if (typeof v === 'string') return v.toLowerCase() === 'true';
- if (typeof v === 'number') return v === 1;
- return def;
- };
-
- setConfig({
- passwordType: r.passwordType || DEFAULT_CONFIG.passwordType,
- charCount: String(parseInt(r.charCount, 10) || DEFAULT_CONFIG.charCount),
- includeUppercase: toBool(r.includeUppercase, DEFAULT_CONFIG.includeUppercase),
- includeLowercase: toBool(r.includeLowercase, DEFAULT_CONFIG.includeLowercase),
- includeDigits: toBool(r.includeDigits, DEFAULT_CONFIG.includeDigits),
- includeSpecialChars: toBool(r.includeSpecialChars, DEFAULT_CONFIG.includeSpecialChars),
- specialCharSet: r.specialCharSet || DEFAULT_CONFIG.specialCharSet,
- wordCount: String(parseInt(r.wordCount, 10) || DEFAULT_CONFIG.wordCount),
- separator: r.separator !== undefined ? r.separator : DEFAULT_CONFIG.separator,
- capitalizeWords: toBool(r.capitalizeWords, DEFAULT_CONFIG.capitalizeWords),
- appendNumber: toBool(r.appendNumber, DEFAULT_CONFIG.appendNumber),
- appendSpecialChar: toBool(r.appendSpecialChar, DEFAULT_CONFIG.appendSpecialChar),
- });
- }
- }, [passwordSetting.isSuccess, passwordSetting.data]);
-
- const set = useCallback((field, value) => {
- setConfig((p) => ({ ...p, [field]: value }));
- }, []);
-
- const isClassic = config.passwordType === PASSWORD_TYPES.CLASSIC;
-
- const handleSave = () => {
- const normalizedConfig = normalizeConfigForBackend(config);
-
- passwordSave.mutate(
- {
- url: "/api/ExecPasswordConfig",
- data: normalizedConfig,
- queryKey: "PasswordSettingsPost",
- }
- );
- };
-
- const handleBackToSettings = () => {
- router.push("/cipp/settings");
- };
-
- return (
- <>
-
-
-
-
-
-
-
-
-
-
- Type
-
- v && set("passwordType", v)}
- size="small"
- color="primary"
- >
- Classic
- Passphrase
-
-
-
-
-
- {isClassic
- ? "Random characters from the selected classes. Good for systems requiring specific character types. 16+ characters recommended for strong security."
- : "Random dictionary words joined together. Easier to remember and typically stronger at equal length. 5+ words recommended for high security."}
-
-
- {
- const value = e.target.value;
- if (value === '' || /^\d+$/.test(value)) {
- set("charCount", value);
- }
- }}
- size="small"
- sx={{ width: 120 }}
- inputProps={{
- style: { height: "40px" },
- min: 8,
- max: 256
- }}
- error={config.charCount === ''}
- helperText={config.charCount === '' ? "Length cannot be empty" : ""}
- />
-
-
-
- set("includeUppercase", e.target.checked)} />}
- label={Uppercase (A-Z) }
- />
-
-
- set("includeLowercase", e.target.checked)} />}
- label={Lowercase (a-z) }
- />
-
-
- set("includeDigits", e.target.checked)} />}
- label={Digits (0-9) }
- />
-
-
- set("includeSpecialChars", e.target.checked)} />}
- label={Special Characters }
- />
-
-
- {config.includeSpecialChars && (
- set("specialCharSet", e.target.value)}
- size="small"
- fullWidth
- helperText="Allowed: !@#$%^&*()-_=+/"
- />
- )}
-
- ) : (
- <>
-
- {
- const value = e.target.value;
- if (value === '' || /^\d+$/.test(value)) {
- set("wordCount", value);
- }
- }}
- size="small"
- sx={{ width: 120, maxWidth: 160 }}
- inputProps={{
- style: { height: "40px" },
- min: 2,
- max: 10
- }}
- error={config.wordCount === ''}
- helperText={config.wordCount === '' ? "Word count cannot be empty" : ""}
- />
- set("separator", e.target.value)}
- size="small"
- sx={{ maxWidth: 120 }}
- />
-
- Allowed: single space, empty, or !@#$%^&*()-_=+/
-
-
-
-
- set("capitalizeWords", e.target.checked)} />}
- label={Capitalize words }
- />
-
-
- set("appendNumber", e.target.checked)} />}
- label={Append number }
- />
-
-
- set("appendSpecialChar", e.target.checked)} />}
- label={Append Special Character }
- />
-
-
- {config.appendSpecialChar && (
- set("specialCharSet", e.target.value)}
- size="small"
- fullWidth
- helperText="Allowed: !@#$%^&*()-_=+/"
- />
- )}
-
- )}
-
-
-
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/cipp/settings/password-config/index.jsx b/src/pages/cipp/settings/password-config/index.jsx
new file mode 100644
index 000000000000..e27206874aaa
--- /dev/null
+++ b/src/pages/cipp/settings/password-config/index.jsx
@@ -0,0 +1,359 @@
+import { useEffect, useState, useCallback } from "react";
+import { CippIcons } from "../../../../utils/icon-registry";
+import {
+ Alert,
+ Box,
+ Button,
+ Card,
+ CardContent,
+ Container,
+ Divider,
+ FormControlLabel,
+ Stack,
+ SvgIcon,
+ Switch,
+ TextField,
+ ToggleButton,
+ ToggleButtonGroup,
+ Typography,
+} from "@mui/material";
+import { Grid } from "@mui/system";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { useRouter } from "next/router";
+import { ApiGetCall, ApiPostCall } from "../../../../api/ApiCall";
+import { CippHead } from "../../../../components/CippComponents/CippHead";
+import { CippApiResults } from "../../../../components/CippComponents/CippApiResults";
+
+// Password configuration constants
+const PASSWORD_TYPES = {
+ CLASSIC: 'Classic',
+ PASSPHRASE: 'Passphrase'
+};
+
+const DEFAULT_VALUES = {
+ CHAR_COUNT: 14,
+ WORD_COUNT: 4,
+ SPECIAL_CHAR_SET: '$%&*#',
+ SEPARATOR: '-'
+};
+
+function normalizeConfigForBackend(config) {
+ return {
+ passwordType: String(config.passwordType || PASSWORD_TYPES.CLASSIC),
+ charCount: String(parseInt(config.charCount, 10) || DEFAULT_VALUES.CHAR_COUNT),
+ includeUppercase: Boolean(config.includeUppercase),
+ includeLowercase: Boolean(config.includeLowercase),
+ includeDigits: Boolean(config.includeDigits),
+ includeSpecialChars: Boolean(config.includeSpecialChars),
+ specialCharSet: String(config.specialCharSet || DEFAULT_VALUES.SPECIAL_CHAR_SET),
+ wordCount: String(parseInt(config.wordCount, 10) || DEFAULT_VALUES.WORD_COUNT),
+ separator: config.separator !== undefined && config.separator !== null ? String(config.separator) : DEFAULT_VALUES.SEPARATOR,
+ capitalizeWords: Boolean(config.capitalizeWords),
+ appendNumber: Boolean(config.appendNumber),
+ appendSpecialChar: Boolean(config.appendSpecialChar),
+ };
+}
+
+const DEFAULT_CONFIG = {
+ passwordType: PASSWORD_TYPES.CLASSIC,
+ charCount: String(DEFAULT_VALUES.CHAR_COUNT),
+ includeUppercase: true,
+ includeLowercase: true,
+ includeDigits: true,
+ includeSpecialChars: true,
+ specialCharSet: DEFAULT_VALUES.SPECIAL_CHAR_SET,
+ wordCount: String(DEFAULT_VALUES.WORD_COUNT),
+ separator: DEFAULT_VALUES.SEPARATOR,
+ capitalizeWords: false,
+ appendNumber: false,
+ appendSpecialChar: false,
+};
+
+// ── Page ──────────────────────────────────────────────────────────────────────
+
+const Page = () => {
+ const router = useRouter();
+ const [config, setConfig] = useState(DEFAULT_CONFIG);
+
+ const passwordSetting = ApiGetCall({ url: "/api/ExecPasswordConfig?list=true", queryKey: "PasswordSettings" });
+ const passwordSave = ApiPostCall({ datafromUrl: true, relatedQueryKeys: "PasswordSettings" });
+
+ useEffect(() => {
+ if (passwordSetting.isSuccess && passwordSetting.data) {
+ const r = passwordSetting.data.Results;
+ const toBool = (v, def) => {
+ if (v === undefined || v === null) return def;
+ if (typeof v === 'boolean') return v;
+ if (typeof v === 'string') return v.toLowerCase() === 'true';
+ if (typeof v === 'number') return v === 1;
+ return def;
+ };
+
+ setConfig({
+ passwordType: r.passwordType || DEFAULT_CONFIG.passwordType,
+ charCount: String(parseInt(r.charCount, 10) || DEFAULT_CONFIG.charCount),
+ includeUppercase: toBool(r.includeUppercase, DEFAULT_CONFIG.includeUppercase),
+ includeLowercase: toBool(r.includeLowercase, DEFAULT_CONFIG.includeLowercase),
+ includeDigits: toBool(r.includeDigits, DEFAULT_CONFIG.includeDigits),
+ includeSpecialChars: toBool(r.includeSpecialChars, DEFAULT_CONFIG.includeSpecialChars),
+ specialCharSet: r.specialCharSet || DEFAULT_CONFIG.specialCharSet,
+ wordCount: String(parseInt(r.wordCount, 10) || DEFAULT_CONFIG.wordCount),
+ separator: r.separator !== undefined ? r.separator : DEFAULT_CONFIG.separator,
+ capitalizeWords: toBool(r.capitalizeWords, DEFAULT_CONFIG.capitalizeWords),
+ appendNumber: toBool(r.appendNumber, DEFAULT_CONFIG.appendNumber),
+ appendSpecialChar: toBool(r.appendSpecialChar, DEFAULT_CONFIG.appendSpecialChar),
+ });
+ }
+ }, [passwordSetting.isSuccess, passwordSetting.data]);
+
+ const set = useCallback((field, value) => {
+ setConfig((p) => ({ ...p, [field]: value }));
+ }, []);
+
+ const isClassic = config.passwordType === PASSWORD_TYPES.CLASSIC;
+
+ const handleSave = () => {
+ const normalizedConfig = normalizeConfigForBackend(config);
+
+ passwordSave.mutate(
+ {
+ url: "/api/ExecPasswordConfig",
+ data: normalizedConfig,
+ queryKey: "PasswordSettingsPost",
+ }
+ );
+ };
+
+ const handleBackToSettings = () => {
+ router.push("/cipp/settings");
+ };
+
+ return (
+ <>
+
+
+
+
+ {/* wraps on narrow widths instead of clipping the title */}
+
+ Password Configuration
+
+
+
+
+
+
+
+
+ Type
+
+ v && set("passwordType", v)}
+ size="small"
+ color="primary"
+ >
+ Classic
+ Passphrase
+
+
+
+
+
+ {isClassic
+ ? "Random characters from the selected classes. Good for systems requiring specific character types. 16+ characters recommended for strong security."
+ : "Random dictionary words joined together. Easier to remember and typically stronger at equal length. 5+ words recommended for high security."}
+
+
+ {
+ const value = e.target.value;
+ if (value === '' || /^\d+$/.test(value)) {
+ set("charCount", value);
+ }
+ }}
+ size="small"
+ sx={{ width: 120 }}
+ error={config.charCount === ''}
+ helperText={config.charCount === '' ? "Length cannot be empty" : ""}
+ slotProps={{
+ htmlInput: {
+ style: { height: "40px" },
+ min: 8,
+ max: 256
+ }
+ }}
+ />
+
+
+
+ set("includeUppercase", e.target.checked)} />}
+ label={Uppercase (A-Z) }
+ />
+
+
+ set("includeLowercase", e.target.checked)} />}
+ label={Lowercase (a-z) }
+ />
+
+
+ set("includeDigits", e.target.checked)} />}
+ label={Digits (0-9) }
+ />
+
+
+ set("includeSpecialChars", e.target.checked)} />}
+ label={Special Characters }
+ />
+
+
+ {config.includeSpecialChars && (
+ set("specialCharSet", e.target.value)}
+ size="small"
+ fullWidth
+ helperText="Allowed: !@#$%^&*()-_=+/"
+ />
+ )}
+
+ ) : (
+ <>
+ {/* full width fields stacked on xs; helper text moves below instead of squeezing inline */}
+
+
+ {
+ const value = e.target.value;
+ if (value === '' || /^\d+$/.test(value)) {
+ set("wordCount", value);
+ }
+ }}
+ size="small"
+ sx={{ width: { xs: "100%", sm: 120 }, maxWidth: { xs: "100%", sm: 160 } }}
+ error={config.wordCount === ''}
+ helperText={config.wordCount === '' ? "Word count cannot be empty" : ""}
+ slotProps={{
+ htmlInput: {
+ style: { height: "40px" },
+ min: 2,
+ max: 10
+ }
+ }}
+ />
+ set("separator", e.target.value)}
+ size="small"
+ sx={{ width: { xs: "100%", sm: "auto" }, maxWidth: { xs: "100%", sm: 120 } }}
+ />
+
+
+ Allowed: single space, empty, or !@#$%^&*()-_=+/
+
+
+
+
+ set("capitalizeWords", e.target.checked)} />}
+ label={Capitalize words }
+ />
+
+
+ set("appendNumber", e.target.checked)} />}
+ label={Append number }
+ />
+
+
+ set("appendSpecialChar", e.target.checked)} />}
+ label={Append Special Character }
+ />
+
+
+ {config.appendSpecialChar && (
+ set("specialCharSet", e.target.value)}
+ size="small"
+ fullWidth
+ helperText="Allowed: !@#$%^&*()-_=+/"
+ />
+ )}
+
+ )}
+
+
+
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/cipp/settings/permissions.js b/src/pages/cipp/settings/permissions.js
deleted file mode 100644
index 214fd478b1cb..000000000000
--- a/src/pages/cipp/settings/permissions.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Alert, Container } from "@mui/material";
-import { Grid } from "@mui/system";
-import { TabbedLayout } from "../../../layouts/TabbedLayout";
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-import tabOptions from "./tabOptions";
-import CippPermissionCheck from "../../../components/CippSettings/CippPermissionCheck";
-import { CippPermissionReport } from "../../../components/CippSettings/CippPermissionReport";
-import { useState } from "react";
-import { ApiGetCall } from "../../../api/ApiCall";
-
-const Page = () => {
- const [importReport, setImportReport] = useState(false);
-
- // Same signal the Add Tenant wizard uses to decide whether partner-only flows apply, and the
- // same shared query key so the two pages hit one cache entry.
- const organization = ApiGetCall({
- url: "/api/ListPartnerTenantInfo",
- queryKey: "ListPartnerTenantInfo",
- });
-
- const partnerCheckComplete = organization.isSuccess || organization.isError;
- const isPartner = organization.isSuccess && Boolean(organization.data?.isPartnerTenant);
-
- // Keep the GDAP check visible until we know it does not apply, and always show it when an
- // imported report contains GDAP data.
- const showGdapCheck = !partnerCheckComplete || isPartner || Boolean(importReport?.GDAP);
-
- return (
-
-
- {/* Below lg the report renders as a fixed FAB (plus a portaled dialog), so this item
- is empty in flow — display: contents dissolves it, or grid spacing leaves a blank
- 16px row between the picker and the first card. */}
-
-
-
-
-
- {showGdapCheck ? (
-
- GDAP checks do not apply to this environment. Your tenants are added directly rather
- than through Microsoft Partner Center relationships, so access is verified per tenant
- in the Tenants check below.
-
- )}
-
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/settings/permissions.jsx b/src/pages/cipp/settings/permissions.jsx
new file mode 100644
index 000000000000..29ecd53284e2
--- /dev/null
+++ b/src/pages/cipp/settings/permissions.jsx
@@ -0,0 +1,65 @@
+import { Alert, Container } from "@mui/material";
+import { Grid } from "@mui/system";
+import { TabbedLayout } from "../../../layouts/TabbedLayout";
+import { Layout as DashboardLayout } from "../../../layouts/index";
+import tabOptions from "./tabOptions";
+import CippPermissionCheck from "../../../components/CippSettings/CippPermissionCheck";
+import { CippPermissionReport } from "../../../components/CippSettings/CippPermissionReport";
+import { useState } from "react";
+import { ApiGetCall } from "../../../api/ApiCall";
+
+const Page = () => {
+ const [importReport, setImportReport] = useState(false);
+
+ // Same signal the Add Tenant wizard uses to decide whether partner-only flows apply, and the
+ // same shared query key so the two pages hit one cache entry.
+ const organization = ApiGetCall({
+ url: "/api/ListPartnerTenantInfo",
+ queryKey: "ListPartnerTenantInfo",
+ });
+
+ const partnerCheckComplete = organization.isSuccess || organization.isError;
+ const isPartner = organization.isSuccess && Boolean(organization.data?.isPartnerTenant);
+
+ // Keep the GDAP check visible until we know it does not apply, and always show it when an
+ // imported report contains GDAP data.
+ const showGdapCheck = !partnerCheckComplete || isPartner || Boolean(importReport?.GDAP);
+
+ return (
+
+
+ {/* Below lg the report renders as a fixed FAB (plus a portaled dialog), so this item
+ is empty in flow — display: contents dissolves it, or grid spacing leaves a blank
+ 16px row between the picker and the first card. */}
+
+
+
+
+
+ {showGdapCheck ? (
+
+ GDAP checks do not apply to this environment. Your tenants are added directly rather
+ than through Microsoft Partner Center relationships, so access is verified per tenant
+ in the Tenants check below.
+
+ )}
+
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
diff --git a/src/pages/cipp/settings/siem.js b/src/pages/cipp/settings/siem.js
deleted file mode 100644
index 2f201199dbcf..000000000000
--- a/src/pages/cipp/settings/siem.js
+++ /dev/null
@@ -1,192 +0,0 @@
-import {
- Alert,
- Card,
- CardContent,
- CardHeader,
- Container,
- Divider,
- Link as MuiLink,
- Typography,
-} from "@mui/material";
-import { Grid } from "@mui/system";
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-import { TabbedLayout } from "../../../layouts/TabbedLayout";
-import tabOptions from "./tabOptions";
-import CippSiemSettings from "../../../components/CippSettings/CippSiemSettings";
-import { CippCopyToClipBoard } from "../../../components/CippComponents/CippCopyToClipboard";
-
-const filterExamples = [
- {
- label: "Specific day",
- filter: "PartitionKey eq 'YYYYMMDD'",
- note: "Replace YYYYMMDD with the current date, e.g. 20260312",
- },
- {
- label: "Date range (last 7 days)",
- filter: "PartitionKey ge '20260305' and PartitionKey le '20260312'",
- note: "Use ge/le to query a range of dates",
- },
-];
-
-const Page = () => {
- return (
-
-
-
-
-
-
-
-
-
- Always include a PartitionKey filter in your queries. Azure Table
- Storage performs a full table scan without one, which is slow and expensive on
- large tables. Use
-
-
-
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
diff --git a/src/pages/cipp/settings/siem.jsx b/src/pages/cipp/settings/siem.jsx
new file mode 100644
index 000000000000..12a281dfc40b
--- /dev/null
+++ b/src/pages/cipp/settings/siem.jsx
@@ -0,0 +1,207 @@
+import {
+ Alert,
+ Card,
+ CardContent,
+ CardHeader,
+ Container,
+ Divider,
+ Link as MuiLink,
+ Typography,
+} from "@mui/material";
+import { Grid } from "@mui/system";
+import { Layout as DashboardLayout } from "../../../layouts/index";
+import { TabbedLayout } from "../../../layouts/TabbedLayout";
+import tabOptions from "./tabOptions";
+import CippSiemSettings from "../../../components/CippSettings/CippSiemSettings";
+import { CippCopyToClipBoard } from "../../../components/CippComponents/CippCopyToClipboard";
+
+const filterExamples = [
+ {
+ label: "Specific day",
+ filter: "PartitionKey eq 'YYYYMMDD'",
+ note: "Replace YYYYMMDD with the current date, e.g. 20260312",
+ },
+ {
+ label: "Date range (last 7 days)",
+ filter: "PartitionKey ge '20260305' and PartitionKey le '20260312'",
+ note: "Use ge/le to query a range of dates",
+ },
+];
+
+const Page = () => {
+ return (
+
+
+
+
+
+
+
+
+
+ Always include a PartitionKey filter in your queries. Azure Table
+ Storage performs a full table scan without one, which is slow and expensive on
+ large tables. Use
+
+
+
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
diff --git a/src/pages/cipp/settings/tenants.js b/src/pages/cipp/settings/tenants.js
deleted file mode 100644
index 77491217563d..000000000000
--- a/src/pages/cipp/settings/tenants.js
+++ /dev/null
@@ -1,228 +0,0 @@
-import { Button, SvgIcon } from "@mui/material";
-import { CippTablePage } from "../../../components/CippComponents/CippTablePage.jsx";
-import { CippApiDialog } from "../../../components/CippComponents/CippApiDialog";
-import { useCippGDAPTrace } from "../../../components/CippSettings/CippGDAP/CippGDAPTrace";
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-import { TabbedLayout } from "../../../layouts/TabbedLayout";
-import tabOptions from "./tabOptions";
-import { useDialog } from "../../../hooks/use-dialog";
-import {
- Sync,
- Block,
- PlayArrow,
- RestartAlt,
- Delete,
- Add,
- Refresh,
- VpnKey,
-} from "@mui/icons-material";
-import cacheTypes from "../../../data/CIPPDBCacheTypes.json";
-
-const Page = () => {
- const pageTitle = "Tenants - Backend";
- const createDialog = useDialog();
- const { ref: gdapRef, traceGdapAction, CippGDAPTrace } = useCippGDAPTrace();
-
- const actions = [
- {
- label: "Exclude Tenants",
- type: "POST",
- url: "/api/ExecExcludeTenant?AddExclusion=true",
- icon:
-
-
- Force Refresh
-
- }
- />
-
- {page}
-
-);
-export default Page;
diff --git a/src/pages/cipp/settings/tenants.jsx b/src/pages/cipp/settings/tenants.jsx
new file mode 100644
index 000000000000..6607c10266ae
--- /dev/null
+++ b/src/pages/cipp/settings/tenants.jsx
@@ -0,0 +1,219 @@
+import { Button, SvgIcon } from "@mui/material";
+import { CippIcons } from "../../../utils/icon-registry"
+import { CippTablePage } from "../../../components/CippComponents/CippTablePage.jsx";
+import { CippApiDialog } from "../../../components/CippComponents/CippApiDialog";
+import { useCippGDAPTrace } from "../../../components/CippSettings/CippGDAP/CippGDAPTrace";
+import { Layout as DashboardLayout } from "../../../layouts/index";
+import { TabbedLayout } from "../../../layouts/TabbedLayout";
+import tabOptions from "./tabOptions";
+import { useDialog } from "../../../hooks/use-dialog";
+import cacheTypes from "../../../data/CIPPDBCacheTypes.json";
+
+const Page = () => {
+ const pageTitle = "Tenants - Backend";
+ const createDialog = useDialog();
+ const { ref: gdapRef, traceGdapAction, CippGDAPTrace } = useCippGDAPTrace();
+
+ const actions = [
+ {
+ label: "Exclude Tenants",
+ type: "POST",
+ url: "/api/ExecExcludeTenant?AddExclusion=true",
+ icon:
+
+
+ Force Refresh
+
+ }
+ />
+
+ {page}
+
+);
+export default Page;
diff --git a/src/pages/cipp/snooze-alert.js b/src/pages/cipp/snooze-alert.js
deleted file mode 100644
index e998acb7bd16..000000000000
--- a/src/pages/cipp/snooze-alert.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-import { Layout as DashboardLayout } from '../../layouts/index.js'
-import { Box, Typography, CircularProgress, Alert, Button, Stack } from '@mui/material'
-import { ApiPostCall } from '../../api/ApiCall'
-import { CippApiResults } from '../../components/CippComponents/CippApiResults'
-import CippPageCard from '../../components/CippCards/CippPageCard'
-
-const VALID_DURATIONS = [7, 14, 30, 90, -1]
-
-const durationLabel = (d) => {
- if (d === -1) return 'forever'
- return `${d} days`
-}
-
-const Page = () => {
- const router = useRouter()
- const { cmdlet, tenant, data, duration, reason } = router.query
- const [submitted, setSubmitted] = useState(false)
- const [parseError, setParseError] = useState(null)
-
- const snoozeRequest = ApiPostCall({
- relatedQueryKeys: ['ListSnoozedAlerts'],
- })
-
- useEffect(() => {
- if (!router.isReady) return
- if (submitted) return
-
- if (!cmdlet || !tenant || !data || !duration) {
- setParseError('Missing required parameters (cmdlet, tenant, data, duration).')
- return
- }
-
- const durationNum = parseInt(duration, 10)
- if (!VALID_DURATIONS.includes(durationNum)) {
- setParseError(`Invalid duration: ${duration}. Must be 7, 14, 30, or -1.`)
- return
- }
-
- let alertItem
- try {
- alertItem = JSON.parse(data)
- } catch {
- setParseError('Failed to parse alert data from URL.')
- return
- }
-
- setSubmitted(true)
- snoozeRequest.mutate({
- url: '/api/ExecSnoozeAlert',
- data: {
- CmdletName: cmdlet,
- TenantFilter: tenant,
- AlertItem: alertItem,
- Duration: durationNum,
- Reason: reason || '',
- },
- })
- }, [router.isReady, cmdlet, tenant, data, duration, reason])
-
- const preview = (() => {
- if (!data) return null
- try {
- const item = JSON.parse(data)
- return item.UserPrincipalName || item.Message || item.DisplayName || null
- } catch {
- return null
- }
- })()
-
- return (
-
- {parseError ? (
-
- {parseError}
-
- ) : !submitted ? (
-
- Processing snooze request...
-
- ) : (
-
- {preview && (
-
-
- {preview}
-
-
- )}
- {tenant && (
-
- Tenant: {tenant}
-
- )}
- {duration && (
-
- Duration: {durationLabel(parseInt(duration, 10))}
-
- )}
-
-
-
-
- )}
-
- )
-}
-
-Page.getLayout = (page) => {page}
-
-export default Page
diff --git a/src/pages/cipp/snooze-alert.jsx b/src/pages/cipp/snooze-alert.jsx
new file mode 100644
index 000000000000..542ba288168b
--- /dev/null
+++ b/src/pages/cipp/snooze-alert.jsx
@@ -0,0 +1,130 @@
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import { Layout as DashboardLayout } from '../../layouts/index'
+import { Box, Typography, CircularProgress, Alert, Button, Stack } from '@mui/material'
+import { ApiPostCall } from '../../api/ApiCall'
+import { CippApiResults } from '../../components/CippComponents/CippApiResults'
+import CippPageCard from '../../components/CippCards/CippPageCard'
+
+const VALID_DURATIONS = [7, 14, 30, 90, -1]
+
+const durationLabel = (d) => {
+ if (d === -1) return 'forever'
+ return `${d} days`
+}
+
+const Page = () => {
+ const router = useRouter()
+ const { cmdlet, tenant, data, duration, reason } = router.query
+ const [submitted, setSubmitted] = useState(false)
+ const [parseError, setParseError] = useState(null)
+
+ const snoozeRequest = ApiPostCall({
+ relatedQueryKeys: ['ListSnoozedAlerts'],
+ })
+
+ useEffect(() => {
+ if (!router.isReady) return
+ if (submitted) return
+
+ if (!cmdlet || !tenant || !data || !duration) {
+ setParseError('Missing required parameters (cmdlet, tenant, data, duration).')
+ return
+ }
+
+ const durationNum = parseInt(duration, 10)
+ if (!VALID_DURATIONS.includes(durationNum)) {
+ setParseError(`Invalid duration: ${duration}. Must be 7, 14, 30, or -1.`)
+ return
+ }
+
+ let alertItem
+ try {
+ alertItem = JSON.parse(data)
+ } catch {
+ setParseError('Failed to parse alert data from URL.')
+ return
+ }
+
+ setSubmitted(true)
+ snoozeRequest.mutate({
+ url: '/api/ExecSnoozeAlert',
+ data: {
+ CmdletName: cmdlet,
+ TenantFilter: tenant,
+ AlertItem: alertItem,
+ Duration: durationNum,
+ Reason: reason || '',
+ },
+ })
+ }, [router.isReady, cmdlet, tenant, data, duration, reason])
+
+ const preview = (() => {
+ if (!data) return null
+ try {
+ const item = JSON.parse(data)
+ return item.UserPrincipalName || item.Message || item.DisplayName || null
+ } catch {
+ return null
+ }
+ })()
+
+ return (
+
+ {parseError ? (
+
+ {parseError}
+
+ ) : !submitted ? (
+
+ Processing snooze request...
+
+ ) : (
+
+ {preview && (
+
+
+ {preview}
+
+
+ )}
+ {tenant && (
+
+ Tenant: {tenant}
+
+ )}
+ {duration && (
+
+ Duration: {durationLabel(parseInt(duration, 10))}
+
+ )}
+
+
+
+
+ )}
+
+ );
+}
+
+Page.getLayout = (page) => {page}
+
+export default Page
diff --git a/src/pages/cipp/statistics/index.js b/src/pages/cipp/statistics/index.js
deleted file mode 100644
index 445f0ee704e2..000000000000
--- a/src/pages/cipp/statistics/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-
-import { Layout as DashboardLayout } from "../../../layouts/index.js";
-
-const Page = () => {
- const pageTitle = "Statistics";
-
- return (
- {page} ;
-
-export default Page;
diff --git a/src/pages/cipp/statistics/index.jsx b/src/pages/cipp/statistics/index.jsx
new file mode 100644
index 000000000000..23ad44c2b3ff
--- /dev/null
+++ b/src/pages/cipp/statistics/index.jsx
@@ -0,0 +1,17 @@
+
+import { Layout as DashboardLayout } from "../../../layouts/index";
+
+const Page = () => {
+ const pageTitle = "Statistics";
+
+ return (
+ {page} ;
+
+export default Page;
diff --git a/src/pages/copilot/agent365/packages/index.js b/src/pages/copilot/agent365/packages/index.js
deleted file mode 100644
index d2c8d9208614..000000000000
--- a/src/pages/copilot/agent365/packages/index.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
-import CippJsonView from '../../../../components/CippFormPages/CippJSONView'
-import { ApiGetCall } from '../../../../api/ApiCall'
-import { useSettings } from '../../../../hooks/use-settings'
-import { Box, Skeleton, Typography } from '@mui/material'
-
-// Drill-in panel: the list omits allowedUsersAndGroups / acquireUsersAndGroups / elementDetails,
-// so fetch the per-package detail (delegated GET /packages/{id}) when a row is opened.
-const PackageDetailPanel = ({ row }) => {
- const currentTenant = useSettings().currentTenant
- const detail = ApiGetCall({
- url: '/api/ListAgent365PackageDetail',
- data: { id: row?.id, tenantFilter: currentTenant },
- queryKey: `Agent365PackageDetail-${currentTenant}-${row?.id}`,
- waiting: !!row?.id,
- })
-
- return (
-
-
- Package detail (allowed / acquired users & groups, elements)
-
- {detail.isFetching &&
- )
-}
-
-const Page = () => {
- const simpleColumns = [
- 'displayName',
- 'type',
- 'publisher',
- 'version',
- 'supportedHosts',
- 'elementTypes',
- 'availableTo',
- 'deployedTo',
- 'isBlocked',
- 'lastModifiedDateTime',
- ]
-
- const offCanvas = {
- extendedInfoFields: [
- 'id',
- 'displayName',
- 'type',
- 'publisher',
- 'version',
- 'platform',
- 'supportedHosts',
- 'elementTypes',
- 'availableTo',
- 'deployedTo',
- 'isBlocked',
- 'manifestId',
- 'manifestVersion',
- 'appId',
- 'assetId',
- 'shortDescription',
- 'lastModifiedDateTime',
- ],
- children: (row) => {page}
-
-export default Page
diff --git a/src/pages/copilot/agent365/packages/index.jsx b/src/pages/copilot/agent365/packages/index.jsx
new file mode 100644
index 000000000000..b07f8ed79482
--- /dev/null
+++ b/src/pages/copilot/agent365/packages/index.jsx
@@ -0,0 +1,79 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
+import CippJsonView from '../../../../components/CippFormPages/CippJSONView'
+import { ApiGetCall } from '../../../../api/ApiCall'
+import { useSettings } from '../../../../hooks/use-settings'
+import { Box, Skeleton, Typography } from '@mui/material'
+
+// Drill-in panel: the list omits allowedUsersAndGroups / acquireUsersAndGroups / elementDetails,
+// so fetch the per-package detail (delegated GET /packages/{id}) when a row is opened.
+const PackageDetailPanel = ({ row }) => {
+ const currentTenant = useSettings().currentTenant
+ const detail = ApiGetCall({
+ url: '/api/ListAgent365PackageDetail',
+ data: { id: row?.id, tenantFilter: currentTenant },
+ queryKey: `Agent365PackageDetail-${currentTenant}-${row?.id}`,
+ waiting: !!row?.id,
+ })
+
+ return (
+
+
+ Package detail (allowed / acquired users & groups, elements)
+
+ {detail.isFetching &&
+ )
+}
+
+const Page = () => {
+ const simpleColumns = [
+ 'displayName',
+ 'type',
+ 'publisher',
+ 'version',
+ 'supportedHosts',
+ 'elementTypes',
+ 'availableTo',
+ 'deployedTo',
+ 'isBlocked',
+ 'lastModifiedDateTime',
+ ]
+
+ const offCanvas = {
+ extendedInfoFields: [
+ 'id',
+ 'displayName',
+ 'type',
+ 'publisher',
+ 'version',
+ 'platform',
+ 'supportedHosts',
+ 'elementTypes',
+ 'availableTo',
+ 'deployedTo',
+ 'isBlocked',
+ 'manifestId',
+ 'manifestVersion',
+ 'appId',
+ 'assetId',
+ 'shortDescription',
+ 'lastModifiedDateTime',
+ ],
+ children: (row) => {page}
+
+export default Page
diff --git a/src/pages/copilot/reports/copilot-adoption/index.js b/src/pages/copilot/reports/copilot-adoption/index.js
deleted file mode 100644
index 366871784203..000000000000
--- a/src/pages/copilot/reports/copilot-adoption/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
-
-const Page = () => {
- return (
- {page}
-
-export default Page
diff --git a/src/pages/copilot/reports/copilot-adoption/index.jsx b/src/pages/copilot/reports/copilot-adoption/index.jsx
new file mode 100644
index 000000000000..fc1035ed20d2
--- /dev/null
+++ b/src/pages/copilot/reports/copilot-adoption/index.jsx
@@ -0,0 +1,17 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
+
+const Page = () => {
+ return (
+ {page}
+
+export default Page
diff --git a/src/pages/copilot/reports/copilot-trend/index.js b/src/pages/copilot/reports/copilot-trend/index.js
deleted file mode 100644
index 20a7994df2ed..000000000000
--- a/src/pages/copilot/reports/copilot-trend/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
-
-const Page = () => {
- return (
- {page}
-
-export default Page
diff --git a/src/pages/copilot/reports/copilot-trend/index.jsx b/src/pages/copilot/reports/copilot-trend/index.jsx
new file mode 100644
index 000000000000..5398841d4f94
--- /dev/null
+++ b/src/pages/copilot/reports/copilot-trend/index.jsx
@@ -0,0 +1,29 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
+
+const Page = () => {
+ return (
+ {page}
+
+export default Page
diff --git a/src/pages/copilot/reports/copilot-usage/index.js b/src/pages/copilot/reports/copilot-usage/index.js
deleted file mode 100644
index b85bfa096053..000000000000
--- a/src/pages/copilot/reports/copilot-usage/index.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
-import {
- CippAnonymizedReportAlert,
- useReportAnonymized,
-} from '../../../../components/CippComponents/CippAnonymizedReportAlert'
-import { useSettings } from '../../../../hooks/use-settings'
-
-const Page = () => {
- const tenant = useSettings().currentTenant
- const queryKey = `CopilotUserActivity-${tenant}`
-
- const anonymized = useReportAnonymized({
- url: '/api/ListCopilotUsage',
- data: { Type: 'UserDetail' },
- queryKey: queryKey,
- fields: ['userPrincipalName', 'displayName'],
- })
-
- return (
- {page}
-
-export default Page
diff --git a/src/pages/copilot/reports/copilot-usage/index.jsx b/src/pages/copilot/reports/copilot-usage/index.jsx
new file mode 100644
index 000000000000..178103ae5246
--- /dev/null
+++ b/src/pages/copilot/reports/copilot-usage/index.jsx
@@ -0,0 +1,46 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
+import {
+ CippAnonymizedReportAlert,
+ useReportAnonymized,
+} from '../../../../components/CippComponents/CippAnonymizedReportAlert'
+import { useSettings } from '../../../../hooks/use-settings'
+
+const Page = () => {
+ const tenant = useSettings().currentTenant
+ const queryKey = `CopilotUserActivity-${tenant}`
+
+ const anonymized = useReportAnonymized({
+ url: '/api/ListCopilotUsage',
+ data: { Type: 'UserDetail' },
+ queryKey: queryKey,
+ fields: ['userPrincipalName', 'displayName'],
+ })
+
+ return (
+ {page}
+
+export default Page
diff --git a/src/pages/copilot/settings/index.js b/src/pages/copilot/settings/index.js
deleted file mode 100644
index 67cf5c246515..000000000000
--- a/src/pages/copilot/settings/index.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import { Layout as DashboardLayout } from '../../../layouts/index.js'
-import { CippTablePage } from '../../../components/CippComponents/CippTablePage.jsx'
-import { useSettings } from '../../../hooks/use-settings'
-import { Cog6ToothIcon } from '@heroicons/react/24/outline'
-
-const Page = () => {
- const currentTenant = useSettings().currentTenant
- const queryKey = `ListCopilotSettings-${currentTenant}`
-
- const actions = [
- {
- label: 'Set Status',
- type: 'POST',
- url: '/api/ExecCopilotSettings',
- icon: {page}
-
-export default Page
diff --git a/src/pages/copilot/settings/index.jsx b/src/pages/copilot/settings/index.jsx
new file mode 100644
index 000000000000..87eff0f1bbf6
--- /dev/null
+++ b/src/pages/copilot/settings/index.jsx
@@ -0,0 +1,117 @@
+import { Layout as DashboardLayout } from '../../../layouts/index'
+import { CippIcons } from '../../../utils/icon-registry'
+import { CippTablePage } from '../../../components/CippComponents/CippTablePage.jsx'
+import { useSettings } from '../../../hooks/use-settings'
+
+const Page = () => {
+ const currentTenant = useSettings().currentTenant
+ const queryKey = `ListCopilotSettings-${currentTenant}`
+
+ const actions = [
+ {
+ label: 'Set Status',
+ type: 'POST',
+ url: '/api/ExecCopilotSettings',
+ icon: {page}
+
+export default Page
diff --git a/src/pages/copilot/shadow-ai/index.js b/src/pages/copilot/shadow-ai/index.js
deleted file mode 100644
index 34cfe395ed26..000000000000
--- a/src/pages/copilot/shadow-ai/index.js
+++ /dev/null
@@ -1,502 +0,0 @@
-import { useState } from 'react'
-import { Layout as DashboardLayout } from '../../../layouts/index.js'
-import { CippInfoBar } from '../../../components/CippCards/CippInfoBar'
-import { CippChartCard } from '../../../components/CippCards/CippChartCard'
-import { CippImageCard } from '../../../components/CippCards/CippImageCard'
-import { CippDataTable } from '../../../components/CippTable/CippDataTable'
-import { CippApiDialog } from '../../../components/CippComponents/CippApiDialog'
-import { CippOffCanvas } from '../../../components/CippComponents/CippOffCanvas'
-import { ShadowAIReportButton } from '../../../components/ShadowAIReportButton'
-import { useDialog } from '../../../hooks/use-dialog'
-import { ApiGetCall } from '../../../api/ApiCall'
-import { useSettings } from '../../../hooks/use-settings'
-import {
- Alert,
- Box,
- Button,
- Chip,
- Container,
- Divider,
- Stack,
- SvgIcon,
- ToggleButton,
- ToggleButtonGroup,
- Typography,
-} from '@mui/material'
-import { Grid } from '@mui/system'
-import {
- ArrowPathIcon,
- CheckCircleIcon,
- CpuChipIcon,
- ComputerDesktopIcon,
- KeyIcon,
- ExclamationTriangleIcon,
- NoSymbolIcon,
- UserGroupIcon,
-} from '@heroicons/react/24/outline'
-
-const riskChipColor = (risk) => {
- switch (String(risk).toLowerCase()) {
- case 'high':
- return 'error'
- case 'medium':
- return 'warning'
- case 'low':
- return 'info'
- case 'informational':
- return 'success'
- default:
- return 'default'
- }
-}
-
-// Row detail shown when an AI tool row is clicked, for both the Intune and the Entra table.
-const AiToolDetail = ({ row }) => {
- if (!row) return null
- const isIntune = Array.isArray(row.managedDevices)
-
- const properties = isIntune
- ? [
- { label: 'Application', value: row.application },
- { label: 'Vendor', value: row.vendor },
- { label: 'Category', value: row.category },
- { label: 'Publisher', value: row.publisher },
- { label: 'Version', value: row.version },
- { label: 'Platform', value: row.platform },
- { label: 'Device Installs', value: row.deviceCount },
- ]
- : [
- { label: 'Application', value: row.application },
- { label: 'Vendor', value: row.vendor },
- { label: 'Category', value: row.category },
- { label: 'Application ID', value: row.applicationId },
- {
- label: 'First Consented',
- value: row.firstConsentedDateTime
- ? new Date(row.firstConsentedDateTime).toLocaleString()
- : 'Unknown',
- },
- { label: 'Sign-ins (7 Days)', value: row.signInsLast7Days },
- { label: 'Active Users (7 Days)', value: row.activeUsersLast7Days },
- ]
-
- return (
-
-
- {row.aiTool}
-
- {row.toolDescription && (
-
- {row.toolDescription}
-
- )}
- {row.riskReason && (
- {
- const color = riskChipColor(row.catalogRisk ?? row.risk)
- return color === 'default' ? 'divider' : `${color}.main`
- })(),
- }}
- >
-
- Why {row.aiTool} is rated {row.catalogRisk ?? row.risk} risk
-
-
- {row.riskReason}
-
-
- )}
- {row.status === 'Sanctioned' ? (
-
- This tool is marked as company sanctioned for this tenant, so it reports the Informational
- risk level. Use the Remove Company Sanctioned Status action to restore its catalog risk
- level.
-
- ) : (
-
- This tool is not company sanctioned. If your customer approves its use, mark it as company
- sanctioned via the row actions to set its risk level to Informational.
-
- )}
-
- {properties
- .filter((prop) => prop.value !== undefined && prop.value !== null && prop.value !== '')
- .map((prop) => (
-
-
- {prop.label}
-
- {String(prop.value)}
-
- ))}
-
- {!isIntune &&
- Array.isArray(row.approvedPermissions) &&
- row.approvedPermissions.length > 0 && (
- <>
-
- Approved Permissions
-
-
- {row.approvedPermissions.map((permission) => (
-
-
- )}
-
- )
-}
-
-// Drawer listing the users who signed in to an AI application in the last 7 days.
-const ApplicationUsersDrawer = ({ row, drawerVisible, setDrawerVisible }) => (
- setDrawerVisible(false)}
- >
-
-)
-
-// Datasets in the CIPP reporting database this report is compiled from.
-const syncRows = [
- { Name: 'DetectedApps' },
- { Name: 'ServicePrincipals' },
- { Name: 'OAuth2PermissionGrants' },
-]
-
-const Page = () => {
- const currentTenant = useSettings().currentTenant
- const syncDialog = useDialog()
- const queryKey = `ListShadowAI-${currentTenant}`
- const [topToolsMode, setTopToolsMode] = useState('installations')
-
- const shadowAi = ApiGetCall({
- url: '/api/ListShadowAI',
- data: { tenantFilter: currentTenant },
- queryKey: queryKey,
- waiting: !!currentTenant && currentTenant !== 'AllTenants',
- })
-
- const data = shadowAi.data ?? {}
- const summary = data.summary ?? {}
- const byCategory = data.byCategory ?? []
- const byRisk = data.byRisk ?? []
- const topTools = data.topTools ?? []
- const needsSync = shadowAi.isSuccess && !summary.intuneSynced && !summary.entraSynced
- const showCharts = shadowAi.isFetching || byCategory.length > 0
-
- const topToolsMetric = topToolsMode === 'users' ? 'users' : 'devices'
- const topToolsSorted = [...topTools].sort(
- (a, b) => (b[topToolsMetric] ?? 0) - (a[topToolsMetric] ?? 0)
- )
-
- const sanctionActions = [
- {
- label: 'Mark as Company Sanctioned',
- type: 'POST',
- url: '/api/ExecShadowAISanction',
- icon: (
-
-
- ),
- data: { Tool: 'aiTool', Action: '!Sanction' },
- confirmText:
- "Mark [aiTool] as company sanctioned for this tenant? Its risk level will report as Informational and its status as 'Sanctioned'.",
- relatedQueryKeys: [queryKey],
- condition: (row) => row.status !== 'Sanctioned',
- multiPost: false,
- },
- {
- label: 'Remove Company Sanctioned Status',
- type: 'POST',
- url: '/api/ExecShadowAISanction',
- icon: (
-
-
- ),
- data: { Tool: 'aiTool', Action: '!Unsanction' },
- confirmText:
- "Remove the company sanctioned status from [aiTool]? Its catalog risk level will apply again and its status will report as 'Unsanctioned'.",
- relatedQueryKeys: [queryKey],
- condition: (row) => row.status === 'Sanctioned',
- multiPost: false,
- },
- ]
-
- const statusFilters = [
- {
- filterName: 'Sanctioned',
- value: [{ id: 'status', value: 'Sanctioned' }],
- type: 'column',
- },
- {
- filterName: 'Unsanctioned',
- value: [{ id: 'status', value: 'Unsanctioned' }],
- type: 'column',
- },
- {
- filterName: 'High Risk',
- value: [{ id: 'risk', value: 'High' }],
- type: 'column',
- },
- ]
-
- const toolDetailOffCanvas = {
- size: 'lg',
- children: (row) =>
-
- {currentTenant === 'AllTenants' ? (
-
-
- ) : (
- <>
-
-
-
- {summary.lastDataRefresh
- ? `Last data refresh: ${new Date(summary.lastDataRefresh).toLocaleString()}`
- : ''}
-
-
-
-
- {needsSync && (
-
- No cached data found for this tenant yet. Click "Sync data" to collect the Intune
- and Entra datasets; the report populates once the sync completes.
-
- )}
-
-
-
-
- {showCharts && (
- <>
-
- item.category)}
- chartSeries={byCategory.map((item) => item.tools)}
- totalLabel="Tools"
- />
-
-
- item.tool)}
- chartSeries={topToolsSorted.map((item) => item[topToolsMetric] ?? 0)}
- totalLabel={
- topToolsMode === 'users' ? 'Active Users (7 Days)' : 'Device Installs'
- }
- headerAction={
- value && setTopToolsMode(value)}
- >
- By installations
- By users
-
- }
- />
-
-
- item.risk)}
- chartSeries={byRisk.map((item) => item.tools)}
- totalLabel="Tools"
- />
-
-
- )}
-
-
-
-
-
-
-
-
-
- )
-}
-
-Page.getLayout = (page) => {page}
-
-export default Page
diff --git a/src/pages/copilot/shadow-ai/index.jsx b/src/pages/copilot/shadow-ai/index.jsx
new file mode 100644
index 000000000000..5c394678122a
--- /dev/null
+++ b/src/pages/copilot/shadow-ai/index.jsx
@@ -0,0 +1,527 @@
+import { useState } from 'react'
+import { CippIcons } from '../../../utils/icon-registry'
+import { Layout as DashboardLayout } from '../../../layouts/index'
+import { CippInfoBar } from '../../../components/CippCards/CippInfoBar'
+import { CippChartCard } from '../../../components/CippCards/CippChartCard'
+import { CippImageCard } from '../../../components/CippCards/CippImageCard'
+import { CippDataTable } from '../../../components/CippTable/CippDataTable'
+import { CippApiDialog } from '../../../components/CippComponents/CippApiDialog'
+import { CippOffCanvas } from '../../../components/CippComponents/CippOffCanvas'
+import { ShadowAIReportButton } from '../../../components/ShadowAIReportButton'
+import { useDialog } from '../../../hooks/use-dialog'
+import { ApiGetCall } from '../../../api/ApiCall'
+import { useSettings } from '../../../hooks/use-settings'
+import {
+ Alert,
+ Box,
+ Button,
+ Chip,
+ Container,
+ Divider,
+ Stack,
+ SvgIcon,
+ ToggleButton,
+ ToggleButtonGroup,
+ Typography,
+} from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+import { riskChartColor, sortByRiskSeverity } from '../../../utils/shadow-ai'
+import { Grid } from '@mui/system'
+
+const riskChipColor = (risk) => {
+ switch (String(risk).toLowerCase()) {
+ case 'high':
+ return 'error'
+ case 'medium':
+ return 'warning'
+ case 'low':
+ return 'info'
+ case 'informational':
+ return 'success'
+ default:
+ return 'default'
+ }
+}
+
+// Row detail shown when an AI tool row is clicked, for both the Intune and the Entra table.
+const AiToolDetail = ({ row }) => {
+ if (!row) return null
+ const isIntune = Array.isArray(row.managedDevices)
+
+ const properties = isIntune
+ ? [
+ { label: 'Application', value: row.application },
+ { label: 'Vendor', value: row.vendor },
+ { label: 'Category', value: row.category },
+ { label: 'Publisher', value: row.publisher },
+ { label: 'Version', value: row.version },
+ { label: 'Platform', value: row.platform },
+ { label: 'Device Installs', value: row.deviceCount },
+ ]
+ : [
+ { label: 'Application', value: row.application },
+ { label: 'Vendor', value: row.vendor },
+ { label: 'Category', value: row.category },
+ { label: 'Application ID', value: row.applicationId },
+ {
+ label: 'First Consented',
+ value: row.firstConsentedDateTime
+ ? new Date(row.firstConsentedDateTime).toLocaleString()
+ : 'Unknown',
+ },
+ { label: 'Sign-ins (7 Days)', value: row.signInsLast7Days },
+ { label: 'Active Users (7 Days)', value: row.activeUsersLast7Days },
+ ]
+
+ return (
+
+
+ {row.aiTool}
+
+ {row.toolDescription && (
+
+ {row.toolDescription}
+
+ )}
+ {row.riskReason && (
+ {
+ const color = riskChipColor(row.catalogRisk ?? row.risk)
+ return color === 'default' ? 'divider' : `${color}.main`
+ })(),
+ }}
+ >
+
+ Why {row.aiTool} is rated {row.catalogRisk ?? row.risk} risk
+
+
+ {row.riskReason}
+
+
+ )}
+ {row.status === 'Sanctioned' ? (
+
+ This tool is marked as company sanctioned for this tenant, so it reports the Informational
+ risk level. Use the Remove Company Sanctioned Status action to restore its catalog risk
+ level.
+
+ ) : (
+
+ This tool is not company sanctioned. If your customer approves its use, mark it as company
+ sanctioned via the row actions to set its risk level to Informational.
+
+ )}
+
+ {properties
+ .filter((prop) => prop.value !== undefined && prop.value !== null && prop.value !== '')
+ .map((prop) => (
+
+
+ {prop.label}
+
+ {String(prop.value)}
+
+ ))}
+
+ {!isIntune &&
+ Array.isArray(row.approvedPermissions) &&
+ row.approvedPermissions.length > 0 && (
+ <>
+
+ Approved Permissions
+
+
+ {row.approvedPermissions.map((permission) => (
+
+
+ )}
+
+ );
+}
+
+// Drawer listing the users who signed in to an AI application in the last 7 days.
+const ApplicationUsersDrawer = ({ row, drawerVisible, setDrawerVisible }) => (
+ setDrawerVisible(false)}
+ >
+
+)
+
+// Datasets in the CIPP reporting database this report is compiled from.
+const syncRows = [
+ { Name: 'DetectedApps' },
+ { Name: 'ServicePrincipals' },
+ { Name: 'OAuth2PermissionGrants' },
+]
+
+// The summary stamp arrives as an ISO string or as the backend's { UtcDateTime } object;
+// anything unparseable must not render as "Invalid Date".
+const formatLastDataRefresh = (value) => {
+ if (!value) return "";
+ const date = new Date(value?.UtcDateTime ?? value);
+ return Number.isNaN(date.getTime()) ? "" : `Last data refresh: ${date.toLocaleString()}`;
+};
+
+const Page = () => {
+ const theme = useTheme()
+ const currentTenant = useSettings().currentTenant
+ const syncDialog = useDialog()
+ const queryKey = `ListShadowAI-${currentTenant}`
+ const [topToolsMode, setTopToolsMode] = useState('installations')
+
+ const shadowAi = ApiGetCall({
+ url: '/api/ListShadowAI',
+ data: { tenantFilter: currentTenant },
+ queryKey: queryKey,
+ waiting: !!currentTenant && currentTenant !== 'AllTenants',
+ })
+
+ const data = shadowAi.data ?? {}
+ const summary = data.summary ?? {}
+ const byCategory = data.byCategory ?? []
+ const byRisk = sortByRiskSeverity(data.byRisk ?? [])
+ const byRiskChartColors = byRisk.map((item) => riskChartColor(item.risk, theme))
+ const topTools = data.topTools ?? []
+ const needsSync = shadowAi.isSuccess && !summary.intuneSynced && !summary.entraSynced
+ const showCharts = shadowAi.isFetching || byCategory.length > 0
+
+ const topToolsMetric = topToolsMode === 'users' ? 'users' : 'devices'
+ const topToolsSorted = [...topTools].sort(
+ (a, b) => (b[topToolsMetric] ?? 0) - (a[topToolsMetric] ?? 0)
+ )
+
+ const sanctionActions = [
+ {
+ label: 'Mark as Company Sanctioned',
+ type: 'POST',
+ url: '/api/ExecShadowAISanction',
+ icon: (
+
+
+ ),
+ data: { Tool: 'aiTool', Action: '!Sanction' },
+ confirmText:
+ "Mark [aiTool] as company sanctioned for this tenant? Its risk level will report as Informational and its status as 'Sanctioned'.",
+ relatedQueryKeys: [queryKey],
+ condition: (row) => row.status !== 'Sanctioned',
+ multiPost: false,
+ },
+ {
+ label: 'Remove Company Sanctioned Status',
+ type: 'POST',
+ url: '/api/ExecShadowAISanction',
+ icon: (
+
+
+ ),
+ data: { Tool: 'aiTool', Action: '!Unsanction' },
+ confirmText:
+ "Remove the company sanctioned status from [aiTool]? Its catalog risk level will apply again and its status will report as 'Unsanctioned'.",
+ relatedQueryKeys: [queryKey],
+ condition: (row) => row.status === 'Sanctioned',
+ multiPost: false,
+ },
+ ]
+
+ const statusFilters = [
+ {
+ filterName: 'Sanctioned',
+ value: [{ id: 'status', value: 'Sanctioned' }],
+ type: 'column',
+ },
+ {
+ filterName: 'Unsanctioned',
+ value: [{ id: 'status', value: 'Unsanctioned' }],
+ type: 'column',
+ },
+ {
+ filterName: 'High Risk',
+ value: [{ id: 'risk', value: 'High' }],
+ type: 'column',
+ },
+ ]
+
+ const toolDetailOffCanvas = {
+ size: 'lg',
+ children: (row) =>
+
+ {currentTenant === 'AllTenants' ? (
+
+
+ ) : (
+ <>
+
+ {/* Both buttons beside the refresh stamp squeeze to three lines on a phone. */}
+
+
+ {formatLastDataRefresh(summary.lastDataRefresh)}
+
+
+
+
+ {needsSync && (
+
+ No cached data found for this tenant yet. Click "Sync data" to collect the Intune
+ and Entra datasets; the report populates once the sync completes.
+
+ )}
+
+
+
+
+ {showCharts && (
+ <>
+
+ item.category)}
+ chartSeries={byCategory.map((item) => item.tools)}
+ totalLabel="Tools"
+ />
+
+
+ item.tool)}
+ chartSeries={topToolsSorted.map((item) => item[topToolsMetric] ?? 0)}
+ totalLabel={
+ topToolsMode === 'users' ? 'Active Users (7 Days)' : 'Device Installs'
+ }
+ headerAction={
+ value && setTopToolsMode(value)}
+ >
+ By installations
+ By users
+
+ }
+ />
+
+
+ item.risk)}
+ chartSeries={byRisk.map((item) => item.tools)}
+ colors={byRiskChartColors}
+ totalLabel="Tools"
+ />
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ );
+}
+
+Page.getLayout = (page) => {page}
+
+export default Page
+
diff --git a/src/pages/dashboardv1.js b/src/pages/dashboardv1.js
deleted file mode 100644
index 268c9f123799..000000000000
--- a/src/pages/dashboardv1.js
+++ /dev/null
@@ -1,464 +0,0 @@
-import Head from "next/head";
-import { useEffect, useState } from "react";
-import { Box, Container, Button, Card, CardContent } from "@mui/material";
-import { Grid } from "@mui/system";
-import { CippInfoBar } from "../components/CippCards/CippInfoBar";
-import { CippChartCard } from "../components/CippCards/CippChartCard";
-import { CippPropertyListCard } from "../components/CippCards/CippPropertyListCard";
-import { Layout as DashboardLayout } from "../layouts/index.js";
-import { useSettings } from "../hooks/use-settings";
-import { getCippFormatting } from "../utils/get-cipp-formatting.js";
-import Portals from "../data/portals";
-import { BulkActionsMenu } from "../components/bulk-actions-menu.js";
-import { CippUniversalSearch } from "../components/CippCards/CippUniversalSearch.jsx";
-import { ApiGetCall } from "../api/ApiCall.jsx";
-import { CippCopyToClipBoard } from "../components/CippComponents/CippCopyToClipboard.jsx";
-import { ExecutiveReportButton } from "../components/ExecutiveReportButton.js";
-
-const Page = () => {
- const settings = useSettings();
- const { currentTenant } = settings;
- const [domainVisible, setDomainVisible] = useState(false);
-
- const organization = ApiGetCall({
- url: "/api/ListGraphRequest",
- queryKey: `${currentTenant}-ListGraphRequest-organization`,
- data: { tenantFilter: currentTenant, Endpoint: "organization" },
- });
-
- const organizationRecord = organization.data?.Results?.[0];
-
- const dashboard = ApiGetCall({
- url: "/api/ListuserCounts",
- data: { tenantFilter: currentTenant },
- queryKey: `${currentTenant}-ListuserCounts`,
- });
-
- const sharepoint = ApiGetCall({
- url: "/api/ListSharepointQuota",
- queryKey: `${currentTenant}-ListSharepointQuota`,
- data: { tenantFilter: currentTenant },
- });
-
- const standards = ApiGetCall({
- url: "/api/ListStandardTemplates",
- queryKey: `${currentTenant}-ListStandardTemplates`,
- });
-
- const driftApi = ApiGetCall({
- url: "/api/listTenantDrift",
- data: {
- TenantFilter: currentTenant,
- },
- queryKey: `TenantDrift-${currentTenant}`,
- });
-
- const partners = ApiGetCall({
- url: "/api/ListGraphRequest",
- queryKey: `${currentTenant}-ListPartners`,
- data: {
- Endpoint: "policies/crossTenantAccessPolicy/partners",
- tenantFilter: currentTenant,
- ReverseTenantLookup: true,
- },
- });
-
- const currentTenantInfo = ApiGetCall({
- url: "/api/ListTenants",
- queryKey: `ListTenants`,
- });
-
- // Top bar data
- const tenantInfo = [
- { name: "Tenant Name", data: organizationRecord?.displayName },
- {
- name: "Tenant ID",
- data: (
- <>
- domain.isDefault === true)?.name
- }
- type="chip"
- />
-
- ),
- },
- {
- name: "AD Sync Enabled",
- data: getCippFormatting(organizationRecord?.onPremisesSyncEnabled, "dirsync"),
- },
- ];
-
- // Process drift data for chart - filter by current tenant and aggregate
- const processDriftDataForTenant = (driftData, currentTenant) => {
- if (!driftData) {
- return {
- alignedCount: 0,
- acceptedDeviationsCount: 0,
- currentDeviationsCount: 0,
- customerSpecificDeviations: 0,
- hasData: false,
- };
- }
-
- const rawDriftData = driftData || [];
- const tenantDriftData = Array.isArray(rawDriftData)
- ? rawDriftData.filter((item) => item.tenantFilter === currentTenant)
- : [];
-
- const hasData = tenantDriftData.length > 0;
-
- // Aggregate data across all standards for this tenant
- const aggregatedData = tenantDriftData.reduce(
- (acc, item) => {
- acc.acceptedDeviationsCount += item.acceptedDeviationsCount || 0;
- acc.currentDeviationsCount += item.currentDeviationsCount || 0;
- acc.alignedCount += item.alignedCount || 0;
- acc.customerSpecificDeviations += item.customerSpecificDeviationsCount || 0;
- return acc;
- },
- {
- acceptedDeviationsCount: 0,
- currentDeviationsCount: 0,
- alignedCount: 0,
- customerSpecificDeviations: 0,
- }
- );
-
- return { ...aggregatedData, hasData };
- };
-
- function getActionCountsForTenant(standardsData, currentTenant) {
- if (!standardsData) {
- return {
- remediateCount: 0,
- alertCount: 0,
- reportCount: 0,
- total: 0,
- };
- }
-
- const applicableTemplates = standardsData.filter((template) => {
- const tenantFilterArr = Array.isArray(template?.tenantFilter) ? template.tenantFilter : [];
- const excludedTenantsArr = Array.isArray(template?.excludedTenants)
- ? template.excludedTenants
- : [];
-
- const tenantInFilter =
- tenantFilterArr.length > 0 && tenantFilterArr.some((tf) => tf.value === currentTenant);
-
- const allTenantsTemplate =
- tenantFilterArr.some((tf) => tf.value === "AllTenants") &&
- (excludedTenantsArr.length === 0 ||
- !excludedTenantsArr.some((et) => et.value === currentTenant));
-
- return tenantInFilter || allTenantsTemplate;
- });
-
- // Combine standards from all applicable templates:
- let combinedStandards = {};
- for (const template of applicableTemplates) {
- for (const [standardKey, standardValue] of Object.entries(template.standards)) {
- combinedStandards[standardKey] = standardValue;
- }
- }
-
- // Count each action type:
- let remediateCount = 0;
- let alertCount = 0;
- let reportCount = 0;
-
- for (const [, standard] of Object.entries(combinedStandards)) {
- let actions = standard.action || [];
- if (!Array.isArray(actions)) {
- actions = [actions];
- }
- actions.forEach((actionObj) => {
- if (actionObj?.value === "Remediate") {
- remediateCount++;
- } else if (actionObj?.value === "Alert") {
- alertCount++;
- } else if (actionObj?.value === "Report") {
- reportCount++;
- }
- });
- }
-
- const total = Object.keys(combinedStandards).length;
-
- return { remediateCount, alertCount, reportCount, total };
- }
-
- const driftData = processDriftDataForTenant(driftApi.data, currentTenant);
- const { remediateCount, alertCount, reportCount, total } = getActionCountsForTenant(
- standards.data,
- currentTenant
- );
-
- const [PortalMenuItems, setPortalMenuItems] = useState([]);
- const [partnersVisible, setPartnersVisible] = useState(false);
-
- const formatStorageSize = (sizeInMB) => {
- if (sizeInMB >= 1024) {
- return `${(sizeInMB / 1024).toFixed(2)}GB`;
- }
- return `${sizeInMB}MB`;
- };
-
- // Function to filter portals based on user preferences
- const getFilteredPortals = () => {
- const defaultLinks = {
- M365_Portal: true,
- Exchange_Portal: true,
- Entra_Portal: true,
- Teams_Portal: true,
- Azure_Portal: true,
- Intune_Portal: true,
- SharePoint_Admin: true,
- Security_Portal: true,
- Compliance_Portal: true,
- Power_Platform_Portal: true,
- Power_BI_Portal: true,
- };
-
- let portalLinks;
- if (settings.UserSpecificSettings?.portalLinks) {
- portalLinks = { ...defaultLinks, ...settings.UserSpecificSettings.portalLinks };
- } else if (settings.portalLinks) {
- portalLinks = { ...defaultLinks, ...settings.portalLinks };
- } else {
- portalLinks = defaultLinks;
- }
-
- // Filter the portals based on user settings
- return Portals.filter((portal) => {
- const settingKey = portal.name;
- return settingKey ? portalLinks[settingKey] === true : true;
- });
- };
-
- useEffect(() => {
- if (currentTenantInfo.isSuccess) {
- const tenantLookup = currentTenantInfo.data?.find(
- (tenant) => tenant.defaultDomainName === currentTenant
- );
-
- // Get filtered portals based on user preferences
- const filteredPortals = getFilteredPortals();
-
- const menuItems = filteredPortals.map((portal) => ({
- label: portal.label,
- target: "_blank",
- // A portal with a `field` has a URL the backend resolved for us (SharePoint's host cannot be
- // derived from the tenant). Use it when it's there, otherwise fall back to the templated URL.
- link:
- portal.field && tenantLookup?.[portal.field]
- ? tenantLookup[portal.field]
- : portal.url.replace(portal.variable, tenantLookup?.[portal.variable]),
- icon: portal.icon,
- }));
- setPortalMenuItems(menuItems);
- }
- }, [
- currentTenantInfo.isSuccess,
- currentTenant,
- settings.portalLinks,
- settings.UserSpecificSettings,
- ]);
-
- return (
- <>
-
- Dashboard
-
-
-
-
-
-
-
-
- {/* TODO: Remove Card from inside CippUniversalSearch to avoid double border */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Converted Domain Names to Property List */}
-
- ({
- label: "",
- value: domain.name,
- }))}
- actionButton={
- organizationRecord?.verifiedDomains?.length > 3 && (
-
- )
- }
- />
-
-
-
- ({
- label: partner.TenantInfo?.displayName,
- value: partner.TenantInfo?.defaultDomainName,
- }))}
- actionButton={
- partners.data?.Results?.length > 3 && (
-
- )
- }
- />
-
-
-
-
- plan.capabilityStatus === "Enabled" &&
- ["exchange", "AADPremiumService", "WindowsDefenderATP"].includes(
- plan.service
- )
- )
- .reduce((uniqueServices, curr) => {
- const serviceLabel =
- curr.service === "exchange"
- ? "Exchange"
- : curr.service === "AADPremiumService"
- ? "AAD Premium"
- : curr.service === "Windows Defender"
- ? "Windows Defender"
- : curr.service;
-
- if (!uniqueServices.includes(serviceLabel)) {
- uniqueServices.push(serviceLabel);
- }
- return uniqueServices;
- }, [])
- .join(", "),
- },
- ]}
- />
-
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/dashboardv1.jsx b/src/pages/dashboardv1.jsx
new file mode 100644
index 000000000000..ca4ce30603ed
--- /dev/null
+++ b/src/pages/dashboardv1.jsx
@@ -0,0 +1,464 @@
+import Head from "next/head";
+import { useEffect, useState } from "react";
+import { Box, Container, Button, Card, CardContent } from "@mui/material";
+import { Grid } from "@mui/system";
+import { CippInfoBar } from "../components/CippCards/CippInfoBar";
+import { CippChartCard } from "../components/CippCards/CippChartCard";
+import { CippPropertyListCard } from "../components/CippCards/CippPropertyListCard";
+import { Layout as DashboardLayout } from "../layouts/index";
+import { useSettings } from "../hooks/use-settings";
+import { getCippFormatting } from "../utils/get-cipp-formatting";
+import Portals from "../data/portals";
+import { BulkActionsMenu } from "../components/bulk-actions-menu";
+import { CippUniversalSearch } from "../components/CippCards/CippUniversalSearch.jsx";
+import { ApiGetCall } from "../api/ApiCall.jsx";
+import { CippCopyToClipBoard } from "../components/CippComponents/CippCopyToClipboard.jsx";
+import { ExecutiveReportButton } from "../components/ExecutiveReportButton";
+
+const Page = () => {
+ const settings = useSettings();
+ const { currentTenant } = settings;
+ const [domainVisible, setDomainVisible] = useState(false);
+
+ const organization = ApiGetCall({
+ url: "/api/ListGraphRequest",
+ queryKey: `${currentTenant}-ListGraphRequest-organization`,
+ data: { tenantFilter: currentTenant, Endpoint: "organization" },
+ });
+
+ const organizationRecord = organization.data?.Results?.[0];
+
+ const dashboard = ApiGetCall({
+ url: "/api/ListuserCounts",
+ data: { tenantFilter: currentTenant },
+ queryKey: `${currentTenant}-ListuserCounts`,
+ });
+
+ const sharepoint = ApiGetCall({
+ url: "/api/ListSharepointQuota",
+ queryKey: `${currentTenant}-ListSharepointQuota`,
+ data: { tenantFilter: currentTenant },
+ });
+
+ const standards = ApiGetCall({
+ url: "/api/ListStandardTemplates",
+ queryKey: `${currentTenant}-ListStandardTemplates`,
+ });
+
+ const driftApi = ApiGetCall({
+ url: "/api/listTenantDrift",
+ data: {
+ TenantFilter: currentTenant,
+ },
+ queryKey: `TenantDrift-${currentTenant}`,
+ });
+
+ const partners = ApiGetCall({
+ url: "/api/ListGraphRequest",
+ queryKey: `${currentTenant}-ListPartners`,
+ data: {
+ Endpoint: "policies/crossTenantAccessPolicy/partners",
+ tenantFilter: currentTenant,
+ ReverseTenantLookup: true,
+ },
+ });
+
+ const currentTenantInfo = ApiGetCall({
+ url: "/api/ListTenants",
+ queryKey: `ListTenants`,
+ });
+
+ // Top bar data
+ const tenantInfo = [
+ { name: "Tenant Name", data: organizationRecord?.displayName },
+ {
+ name: "Tenant ID",
+ data: (
+ <>
+ domain.isDefault === true)?.name
+ }
+ type="chip"
+ />
+
+ ),
+ },
+ {
+ name: "AD Sync Enabled",
+ data: getCippFormatting(organizationRecord?.onPremisesSyncEnabled, "dirsync"),
+ },
+ ];
+
+ // Process drift data for chart - filter by current tenant and aggregate
+ const processDriftDataForTenant = (driftData, currentTenant) => {
+ if (!driftData) {
+ return {
+ alignedCount: 0,
+ acceptedDeviationsCount: 0,
+ currentDeviationsCount: 0,
+ customerSpecificDeviations: 0,
+ hasData: false,
+ };
+ }
+
+ const rawDriftData = driftData || [];
+ const tenantDriftData = Array.isArray(rawDriftData)
+ ? rawDriftData.filter((item) => item.tenantFilter === currentTenant)
+ : [];
+
+ const hasData = tenantDriftData.length > 0;
+
+ // Aggregate data across all standards for this tenant
+ const aggregatedData = tenantDriftData.reduce(
+ (acc, item) => {
+ acc.acceptedDeviationsCount += item.acceptedDeviationsCount || 0;
+ acc.currentDeviationsCount += item.currentDeviationsCount || 0;
+ acc.alignedCount += item.alignedCount || 0;
+ acc.customerSpecificDeviations += item.customerSpecificDeviationsCount || 0;
+ return acc;
+ },
+ {
+ acceptedDeviationsCount: 0,
+ currentDeviationsCount: 0,
+ alignedCount: 0,
+ customerSpecificDeviations: 0,
+ }
+ );
+
+ return { ...aggregatedData, hasData };
+ };
+
+ function getActionCountsForTenant(standardsData, currentTenant) {
+ if (!standardsData) {
+ return {
+ remediateCount: 0,
+ alertCount: 0,
+ reportCount: 0,
+ total: 0,
+ };
+ }
+
+ const applicableTemplates = standardsData.filter((template) => {
+ const tenantFilterArr = Array.isArray(template?.tenantFilter) ? template.tenantFilter : [];
+ const excludedTenantsArr = Array.isArray(template?.excludedTenants)
+ ? template.excludedTenants
+ : [];
+
+ const tenantInFilter =
+ tenantFilterArr.length > 0 && tenantFilterArr.some((tf) => tf.value === currentTenant);
+
+ const allTenantsTemplate =
+ tenantFilterArr.some((tf) => tf.value === "AllTenants") &&
+ (excludedTenantsArr.length === 0 ||
+ !excludedTenantsArr.some((et) => et.value === currentTenant));
+
+ return tenantInFilter || allTenantsTemplate;
+ });
+
+ // Combine standards from all applicable templates:
+ let combinedStandards = {};
+ for (const template of applicableTemplates) {
+ for (const [standardKey, standardValue] of Object.entries(template.standards)) {
+ combinedStandards[standardKey] = standardValue;
+ }
+ }
+
+ // Count each action type:
+ let remediateCount = 0;
+ let alertCount = 0;
+ let reportCount = 0;
+
+ for (const [, standard] of Object.entries(combinedStandards)) {
+ let actions = standard.action || [];
+ if (!Array.isArray(actions)) {
+ actions = [actions];
+ }
+ actions.forEach((actionObj) => {
+ if (actionObj?.value === "Remediate") {
+ remediateCount++;
+ } else if (actionObj?.value === "Alert") {
+ alertCount++;
+ } else if (actionObj?.value === "Report") {
+ reportCount++;
+ }
+ });
+ }
+
+ const total = Object.keys(combinedStandards).length;
+
+ return { remediateCount, alertCount, reportCount, total };
+ }
+
+ const driftData = processDriftDataForTenant(driftApi.data, currentTenant);
+ const { remediateCount, alertCount, reportCount, total } = getActionCountsForTenant(
+ standards.data,
+ currentTenant
+ );
+
+ const [PortalMenuItems, setPortalMenuItems] = useState([]);
+ const [partnersVisible, setPartnersVisible] = useState(false);
+
+ const formatStorageSize = (sizeInMB) => {
+ if (sizeInMB >= 1024) {
+ return `${(sizeInMB / 1024).toFixed(2)}GB`;
+ }
+ return `${sizeInMB}MB`;
+ };
+
+ // Function to filter portals based on user preferences
+ const getFilteredPortals = () => {
+ const defaultLinks = {
+ M365_Portal: true,
+ Exchange_Portal: true,
+ Entra_Portal: true,
+ Teams_Portal: true,
+ Azure_Portal: true,
+ Intune_Portal: true,
+ SharePoint_Admin: true,
+ Security_Portal: true,
+ Compliance_Portal: true,
+ Power_Platform_Portal: true,
+ Power_BI_Portal: true,
+ };
+
+ let portalLinks;
+ if (settings.UserSpecificSettings?.portalLinks) {
+ portalLinks = { ...defaultLinks, ...settings.UserSpecificSettings.portalLinks };
+ } else if (settings.portalLinks) {
+ portalLinks = { ...defaultLinks, ...settings.portalLinks };
+ } else {
+ portalLinks = defaultLinks;
+ }
+
+ // Filter the portals based on user settings
+ return Portals.filter((portal) => {
+ const settingKey = portal.name;
+ return settingKey ? portalLinks[settingKey] === true : true;
+ });
+ };
+
+ useEffect(() => {
+ if (currentTenantInfo.isSuccess) {
+ const tenantLookup = currentTenantInfo.data?.find(
+ (tenant) => tenant.defaultDomainName === currentTenant
+ );
+
+ // Get filtered portals based on user preferences
+ const filteredPortals = getFilteredPortals();
+
+ const menuItems = filteredPortals.map((portal) => ({
+ label: portal.label,
+ target: "_blank",
+ // A portal with a `field` has a URL the backend resolved for us (SharePoint's host cannot be
+ // derived from the tenant). Use it when it's there, otherwise fall back to the templated URL.
+ link:
+ portal.field && tenantLookup?.[portal.field]
+ ? tenantLookup[portal.field]
+ : portal.url.replace(portal.variable, tenantLookup?.[portal.variable]),
+ icon: portal.icon,
+ }));
+ setPortalMenuItems(menuItems);
+ }
+ }, [
+ currentTenantInfo.isSuccess,
+ currentTenant,
+ settings.portalLinks,
+ settings.UserSpecificSettings,
+ ]);
+
+ return (
+ <>
+
+ Dashboard
+
+
+
+
+
+
+
+
+ {/* TODO: Remove Card from inside CippUniversalSearch to avoid double border */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Converted Domain Names to Property List */}
+
+ ({
+ label: "",
+ value: domain.name,
+ }))}
+ actionButton={
+ organizationRecord?.verifiedDomains?.length > 3 && (
+
+ )
+ }
+ />
+
+
+
+ ({
+ label: partner.TenantInfo?.displayName,
+ value: partner.TenantInfo?.defaultDomainName,
+ }))}
+ actionButton={
+ partners.data?.Results?.length > 3 && (
+
+ )
+ }
+ />
+
+
+
+
+ plan.capabilityStatus === "Enabled" &&
+ ["exchange", "AADPremiumService", "WindowsDefenderATP"].includes(
+ plan.service
+ )
+ )
+ .reduce((uniqueServices, curr) => {
+ const serviceLabel =
+ curr.service === "exchange"
+ ? "Exchange"
+ : curr.service === "AADPremiumService"
+ ? "AAD Premium"
+ : curr.service === "Windows Defender"
+ ? "Windows Defender"
+ : curr.service;
+
+ if (!uniqueServices.includes(serviceLabel)) {
+ uniqueServices.push(serviceLabel);
+ }
+ return uniqueServices;
+ }, [])
+ .join(", "),
+ },
+ ]}
+ />
+
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/dashboardv2/custom/index.js b/src/pages/dashboardv2/custom/index.js
deleted file mode 100644
index a8b4d8ef09d8..000000000000
--- a/src/pages/dashboardv2/custom/index.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import { Container, Box, Alert } from '@mui/material'
-import { TabbedLayout } from '../../../layouts/TabbedLayout'
-import { Layout as DashboardLayout } from '../../../layouts/index.js'
-import tabOptions from '../tabOptions'
-import { useSettings } from '../../../hooks/use-settings'
-import { ApiGetCall } from '../../../api/ApiCall.jsx'
-import { CippDataTable } from '../../../components/CippTable/CippDataTable'
-import { CippTestDetailOffCanvas } from '../../../components/CippTestDetail/CippTestDetailOffCanvas'
-import { CippReportToolbar } from '../../../components/CippComponents/CippReportToolbar'
-import { CippHead } from '../../../components/CippComponents/CippHead.jsx'
-import { AllTenantsTestResults } from '../../../components/CippAllTenants/AllTenantsTestResults'
-import { useRouter } from 'next/router'
-
-const Page = () => {
- const settings = useSettings()
- const { currentTenant } = settings
- const router = useRouter()
- const isAllTenants = !currentTenant || currentTenant === 'AllTenants'
- const defaultReportId =
- settings.UserSpecificSettings?.defaultTestSuite?.value ||
- settings.defaultTestSuite?.value ||
- 'ztna'
- const selectedReport =
- router.isReady && !router.query.reportId
- ? defaultReportId
- : router.query.reportId || defaultReportId
-
- const testsApi = ApiGetCall({
- url: '/api/ListTests',
- data: { tenantFilter: currentTenant, reportId: selectedReport },
- queryKey: `${currentTenant}-ListTests-${selectedReport}`,
- waiting: !isAllTenants && !!currentTenant && !!selectedReport,
- })
-
- const reportsApi = ApiGetCall({
- url: '/api/ListTestReports',
- queryKey: 'ListTestReports',
- })
- const reportDescription = reportsApi.data?.find((r) => r.id === selectedReport)?.description
-
- const customTests = testsApi.data?.TestResults?.filter((test) => test.TestType === 'Custom') || []
-
- const offCanvas = {
- size: 'lg',
- children: (row) =>
-
- )
- }
-
- return (
-
-
-
- {reportDescription && (
-
- {reportDescription}
-
- )}
-
- )
-}
-
-Page.getLayout = (page) => (
-
- {page}
-
-)
-
-export default Page
diff --git a/src/pages/dashboardv2/custom/index.jsx b/src/pages/dashboardv2/custom/index.jsx
new file mode 100644
index 000000000000..b884bf9ffe50
--- /dev/null
+++ b/src/pages/dashboardv2/custom/index.jsx
@@ -0,0 +1,133 @@
+import { Container, Box, Alert } from '@mui/material'
+import { TabbedLayout } from '../../../layouts/TabbedLayout'
+import { Layout as DashboardLayout } from '../../../layouts/index'
+import tabOptions from '../tabOptions'
+import { useSettings } from '../../../hooks/use-settings'
+import { ApiGetCall } from '../../../api/ApiCall.jsx'
+import { CippDataTable } from '../../../components/CippTable/CippDataTable'
+import { CippTestDetailOffCanvas } from '../../../components/CippTestDetail/CippTestDetailOffCanvas'
+import { CippReportToolbar } from '../../../components/CippComponents/CippReportToolbar'
+import { CippHead } from '../../../components/CippComponents/CippHead.jsx'
+import { AllTenantsTestResults } from '../../../components/CippAllTenants/AllTenantsTestResults'
+import { useRouter } from 'next/router'
+
+const Page = () => {
+ const settings = useSettings()
+ const { currentTenant } = settings
+ const router = useRouter()
+ const isAllTenants = !currentTenant || currentTenant === 'AllTenants'
+ const defaultReportId =
+ settings.UserSpecificSettings?.defaultTestSuite?.value ||
+ settings.defaultTestSuite?.value ||
+ 'ztna'
+ const selectedReport =
+ router.isReady && !router.query.reportId
+ ? defaultReportId
+ : router.query.reportId || defaultReportId
+
+ const testsApi = ApiGetCall({
+ url: '/api/ListTests',
+ data: { tenantFilter: currentTenant, reportId: selectedReport },
+ queryKey: `${currentTenant}-ListTests-${selectedReport}`,
+ waiting: !isAllTenants && !!currentTenant && !!selectedReport,
+ })
+
+ const reportsApi = ApiGetCall({
+ url: '/api/ListTestReports',
+ queryKey: 'ListTestReports',
+ })
+ const reportDescription = reportsApi.data?.find((r) => r.id === selectedReport)?.description
+
+ const customTests = testsApi.data?.TestResults?.filter((test) => test.TestType === 'Custom') || []
+
+ const offCanvas = {
+ size: 'lg',
+ children: (row) =>
+
+ )
+ }
+
+ return (
+
+
+
+ {reportDescription && (
+
+ {reportDescription}
+
+ )}
+
+ )
+}
+
+Page.getLayout = (page) => (
+
+ {page}
+
+)
+
+export default Page
+
diff --git a/src/pages/dashboardv2/devices/index.js b/src/pages/dashboardv2/devices/index.js
deleted file mode 100644
index 54f9d68ad82e..000000000000
--- a/src/pages/dashboardv2/devices/index.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import React from 'react'
-import { Container, Box, Alert } from '@mui/material'
-import { TabbedLayout } from '../../../layouts/TabbedLayout'
-import { Layout as DashboardLayout } from '../../../layouts/index.js'
-import tabOptions from '../tabOptions'
-import { useSettings } from '../../../hooks/use-settings'
-import { ApiGetCall } from '../../../api/ApiCall.jsx'
-import { CippDataTable } from '../../../components/CippTable/CippDataTable'
-import { CippTestDetailOffCanvas } from '../../../components/CippTestDetail/CippTestDetailOffCanvas'
-import { CippReportToolbar } from '../../../components/CippComponents/CippReportToolbar'
-import { CippHead } from '../../../components/CippComponents/CippHead.jsx'
-import { AllTenantsTestResults } from '../../../components/CippAllTenants/AllTenantsTestResults'
-import { useRouter } from 'next/router'
-
-const Page = () => {
- const settings = useSettings()
- const { currentTenant } = settings
- const router = useRouter()
- const isAllTenants = !currentTenant || currentTenant === 'AllTenants'
- // Only use default if router is ready and reportId is still not present
- const defaultReportId =
- settings.UserSpecificSettings?.defaultTestSuite?.value ||
- settings.defaultTestSuite?.value ||
- 'ztna'
- const selectedReport =
- router.isReady && !router.query.reportId
- ? defaultReportId
- : router.query.reportId || defaultReportId
-
- const testsApi = ApiGetCall({
- url: '/api/ListTests',
- data: { tenantFilter: currentTenant, reportId: selectedReport },
- queryKey: `${currentTenant}-ListTests-${selectedReport}`,
- waiting: !isAllTenants && !!currentTenant && !!selectedReport,
- })
-
- const reportsApi = ApiGetCall({
- url: '/api/ListTestReports',
- queryKey: 'ListTestReports',
- })
- const reportDescription = reportsApi.data?.find((r) => r.id === selectedReport)?.description
-
- const DevicesTests =
- testsApi.data?.TestResults?.filter((test) => test.TestType === 'Devices') || []
-
- const offCanvas = {
- size: 'lg',
- children: (row) =>
-
- )
- }
-
- return (
-
-
-
- {reportDescription && (
-
- {reportDescription}
-
- )}
-
- )
-}
-
-Page.getLayout = (page) => (
-
- {page}
-
-)
-
-export default Page
diff --git a/src/pages/dashboardv2/devices/index.jsx b/src/pages/dashboardv2/devices/index.jsx
new file mode 100644
index 000000000000..2ea34ffd79ae
--- /dev/null
+++ b/src/pages/dashboardv2/devices/index.jsx
@@ -0,0 +1,136 @@
+import React from 'react'
+import { Container, Box, Alert } from '@mui/material'
+import { TabbedLayout } from '../../../layouts/TabbedLayout'
+import { Layout as DashboardLayout } from '../../../layouts/index'
+import tabOptions from '../tabOptions'
+import { useSettings } from '../../../hooks/use-settings'
+import { ApiGetCall } from '../../../api/ApiCall.jsx'
+import { CippDataTable } from '../../../components/CippTable/CippDataTable'
+import { CippTestDetailOffCanvas } from '../../../components/CippTestDetail/CippTestDetailOffCanvas'
+import { CippReportToolbar } from '../../../components/CippComponents/CippReportToolbar'
+import { CippHead } from '../../../components/CippComponents/CippHead.jsx'
+import { AllTenantsTestResults } from '../../../components/CippAllTenants/AllTenantsTestResults'
+import { useRouter } from 'next/router'
+
+const Page = () => {
+ const settings = useSettings()
+ const { currentTenant } = settings
+ const router = useRouter()
+ const isAllTenants = !currentTenant || currentTenant === 'AllTenants'
+ // Only use default if router is ready and reportId is still not present
+ const defaultReportId =
+ settings.UserSpecificSettings?.defaultTestSuite?.value ||
+ settings.defaultTestSuite?.value ||
+ 'ztna'
+ const selectedReport =
+ router.isReady && !router.query.reportId
+ ? defaultReportId
+ : router.query.reportId || defaultReportId
+
+ const testsApi = ApiGetCall({
+ url: '/api/ListTests',
+ data: { tenantFilter: currentTenant, reportId: selectedReport },
+ queryKey: `${currentTenant}-ListTests-${selectedReport}`,
+ waiting: !isAllTenants && !!currentTenant && !!selectedReport,
+ })
+
+ const reportsApi = ApiGetCall({
+ url: '/api/ListTestReports',
+ queryKey: 'ListTestReports',
+ })
+ const reportDescription = reportsApi.data?.find((r) => r.id === selectedReport)?.description
+
+ const DevicesTests =
+ testsApi.data?.TestResults?.filter((test) => test.TestType === 'Devices') || []
+
+ const offCanvas = {
+ size: 'lg',
+ children: (row) =>
+
+ )
+ }
+
+ return (
+
+
+
+ {reportDescription && (
+
+ {reportDescription}
+
+ )}
+
+ )
+}
+
+Page.getLayout = (page) => (
+
+ {page}
+
+)
+
+export default Page
+
diff --git a/src/pages/dashboardv2/identity/index.js b/src/pages/dashboardv2/identity/index.js
deleted file mode 100644
index ec46cf18f947..000000000000
--- a/src/pages/dashboardv2/identity/index.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import { Container, Box, Alert } from '@mui/material'
-import { TabbedLayout } from '../../../layouts/TabbedLayout'
-import { Layout as DashboardLayout } from '../../../layouts/index.js'
-import tabOptions from '../tabOptions'
-import { useSettings } from '../../../hooks/use-settings'
-import { ApiGetCall } from '../../../api/ApiCall.jsx'
-import { CippDataTable } from '../../../components/CippTable/CippDataTable'
-import { CippTestDetailOffCanvas } from '../../../components/CippTestDetail/CippTestDetailOffCanvas'
-import { CippReportToolbar } from '../../../components/CippComponents/CippReportToolbar'
-import { CippHead } from '../../../components/CippComponents/CippHead.jsx'
-import { AllTenantsTestResults } from '../../../components/CippAllTenants/AllTenantsTestResults'
-import { useRouter } from 'next/router'
-
-const Page = () => {
- const settings = useSettings()
- const { currentTenant } = settings
- const router = useRouter()
- const isAllTenants = !currentTenant || currentTenant === 'AllTenants'
- // Only use default if router is ready and reportId is still not present
- const defaultReportId =
- settings.UserSpecificSettings?.defaultTestSuite?.value ||
- settings.defaultTestSuite?.value ||
- 'ztna'
- const selectedReport =
- router.isReady && !router.query.reportId
- ? defaultReportId
- : router.query.reportId || defaultReportId
-
- const testsApi = ApiGetCall({
- url: '/api/ListTests',
- data: { tenantFilter: currentTenant, reportId: selectedReport },
- queryKey: `${currentTenant}-ListTests-${selectedReport}`,
- waiting: !isAllTenants && !!currentTenant && !!selectedReport,
- })
-
- const reportsApi = ApiGetCall({
- url: '/api/ListTestReports',
- queryKey: 'ListTestReports',
- })
- const reportDescription = reportsApi.data?.find((r) => r.id === selectedReport)?.description
-
- const identityTests =
- testsApi.data?.TestResults?.filter((test) => test.TestType === 'Identity') || []
-
- const offCanvas = {
- size: 'lg',
- children: (row) =>
-
- )
- }
-
- return (
-
-
-
- {reportDescription && (
-
- {reportDescription}
-
- )}
-
- )
-}
-
-Page.getLayout = (page) => (
-
- {page}
-
-)
-
-export default Page
diff --git a/src/pages/dashboardv2/identity/index.jsx b/src/pages/dashboardv2/identity/index.jsx
new file mode 100644
index 000000000000..8777a0f03d83
--- /dev/null
+++ b/src/pages/dashboardv2/identity/index.jsx
@@ -0,0 +1,135 @@
+import { Container, Box, Alert } from '@mui/material'
+import { TabbedLayout } from '../../../layouts/TabbedLayout'
+import { Layout as DashboardLayout } from '../../../layouts/index'
+import tabOptions from '../tabOptions'
+import { useSettings } from '../../../hooks/use-settings'
+import { ApiGetCall } from '../../../api/ApiCall.jsx'
+import { CippDataTable } from '../../../components/CippTable/CippDataTable'
+import { CippTestDetailOffCanvas } from '../../../components/CippTestDetail/CippTestDetailOffCanvas'
+import { CippReportToolbar } from '../../../components/CippComponents/CippReportToolbar'
+import { CippHead } from '../../../components/CippComponents/CippHead.jsx'
+import { AllTenantsTestResults } from '../../../components/CippAllTenants/AllTenantsTestResults'
+import { useRouter } from 'next/router'
+
+const Page = () => {
+ const settings = useSettings()
+ const { currentTenant } = settings
+ const router = useRouter()
+ const isAllTenants = !currentTenant || currentTenant === 'AllTenants'
+ // Only use default if router is ready and reportId is still not present
+ const defaultReportId =
+ settings.UserSpecificSettings?.defaultTestSuite?.value ||
+ settings.defaultTestSuite?.value ||
+ 'ztna'
+ const selectedReport =
+ router.isReady && !router.query.reportId
+ ? defaultReportId
+ : router.query.reportId || defaultReportId
+
+ const testsApi = ApiGetCall({
+ url: '/api/ListTests',
+ data: { tenantFilter: currentTenant, reportId: selectedReport },
+ queryKey: `${currentTenant}-ListTests-${selectedReport}`,
+ waiting: !isAllTenants && !!currentTenant && !!selectedReport,
+ })
+
+ const reportsApi = ApiGetCall({
+ url: '/api/ListTestReports',
+ queryKey: 'ListTestReports',
+ })
+ const reportDescription = reportsApi.data?.find((r) => r.id === selectedReport)?.description
+
+ const identityTests =
+ testsApi.data?.TestResults?.filter((test) => test.TestType === 'Identity') || []
+
+ const offCanvas = {
+ size: 'lg',
+ children: (row) =>
+
+ )
+ }
+
+ return (
+
+
+
+ {reportDescription && (
+
+ {reportDescription}
+
+ )}
+
+ )
+}
+
+Page.getLayout = (page) => (
+
+ {page}
+
+)
+
+export default Page
+
diff --git a/src/pages/dashboardv2/index.js b/src/pages/dashboardv2/index.js
deleted file mode 100644
index f34494503fb3..000000000000
--- a/src/pages/dashboardv2/index.js
+++ /dev/null
@@ -1,502 +0,0 @@
-import {
- Box,
- Container,
- Button,
- Divider,
- List,
- ListItemButton,
- ListSubheader,
- Menu,
- MenuItem,
- ListItemIcon,
- ListItemText,
- SvgIcon,
-} from '@mui/material'
-import Link from 'next/link'
-import { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-import { Grid, useMediaQuery } from '@mui/system'
-import { useSettings } from '../../hooks/use-settings'
-import { useIsMobileLayout } from '../../hooks/use-breakpoint'
-import { ApiGetCall } from '../../api/ApiCall.jsx'
-import { getFilteredPortals } from '../../utils/get-filtered-portals'
-import { getIconByName } from '../../utils/icon-registry'
-import { BulkActionsMenu } from '../../components/bulk-actions-menu.js'
-import { CippPageActionsFab } from '../../components/CippComponents/CippPageActionsFab'
-import { ExecutiveReportButton } from '../../components/ExecutiveReportButton.js'
-import { TabbedLayout } from '../../layouts/TabbedLayout'
-import { Layout as DashboardLayout } from '../../layouts/index.js'
-import tabOptions from './tabOptions'
-import { dashboardDemoData } from '../../data/dashboardv2-demo-data'
-import { SecureScoreCard } from '../../components/CippComponents/SecureScoreCard'
-import { MFACard } from '../../components/CippComponents/MFACard'
-import { AuthMethodCard } from '../../components/CippComponents/AuthMethodCard'
-import { LicenseCard } from '../../components/CippComponents/LicenseCard'
-import { TenantInfoCard } from '../../components/CippComponents/TenantInfoCard'
-import { TenantMetricsGrid } from '../../components/CippComponents/TenantMetricsGrid'
-import { AssessmentCard } from '../../components/CippComponents/AssessmentCard'
-import { AlertsOverviewCard } from '../../components/CippComponents/AlertsOverviewCard'
-import { CippReportToolbar } from '../../components/CippComponents/CippReportToolbar'
-import { Assessment as AssessmentIcon } from '@mui/icons-material'
-import ChevronDownIcon from '@heroicons/react/24/outline/ChevronDownIcon'
-import { CippHead } from '../../components/CippComponents/CippHead.jsx'
-import { AllTenantsDashboard } from '../../components/CippAllTenants/AllTenantsDashboard'
-
-const Page = () => {
- const settings = useSettings()
- const router = useRouter()
- const { currentTenant } = settings
- // The per-tenant cards below are all scoped to a single tenant's Graph data. Under AllTenants —
- // which is also the state on first login, before a tenant has been picked — swap in the
- // cross-tenant view rather than letting the layout render "Not supported".
- const isAllTenants = !currentTenant || currentTenant === 'AllTenants'
- const [portalMenuItems, setPortalMenuItems] = useState([])
- const isWide = useMediaQuery('(min-width:1513px)')
- // Below md the Portals/Reports button row gives way to a bottom-right FAB sheet, and
- // CippReportToolbar collapses to selector + kebab on its own.
- const isMobile = useIsMobileLayout()
- const [reportsMenuAnchor, setReportsMenuAnchor] = useState(null)
- // Get reportId from query params or default to the user's preferred suite (Preferences page)
- // Only use default if router is ready and reportId is still not present
- const defaultReportId =
- settings.UserSpecificSettings?.defaultTestSuite?.value ||
- settings.defaultTestSuite?.value ||
- 'ztna'
- const selectedReport =
- router.isReady && !router.query.reportId
- ? defaultReportId
- : router.query.reportId || defaultReportId
-
- // Fetch available reports (shared cache with CippReportToolbar)
- const reportsApi = ApiGetCall({
- url: '/api/ListTestReports',
- queryKey: 'ListTestReports',
- })
-
- const reports = reportsApi.data || []
-
- const organization = ApiGetCall({
- url: '/api/ListGraphRequest',
- queryKey: `${currentTenant}-ListGraphRequest-organization`,
- data: { tenantFilter: currentTenant, Endpoint: 'organization' },
- waiting: !isAllTenants,
- })
-
- const organizationRecord = organization.data?.Results?.[0]
-
- const testsApi = ApiGetCall({
- url: '/api/ListTests',
- data: { tenantFilter: currentTenant, reportId: selectedReport },
- queryKey: `${currentTenant}-ListTests-${selectedReport}`,
- waiting: !isAllTenants && !!currentTenant && !!selectedReport,
- })
-
- const currentTenantInfo = ApiGetCall({
- url: '/api/listTenants',
- data: { AllTenantSelector: true },
- queryKey: 'TenantSelector',
- refetchOnMount: false,
- refetchOnReconnect: false,
- keepPreviousData: true,
- })
-
- const reportData =
- testsApi.isSuccess && testsApi.data?.TenantCounts
- ? {
- ExecutedAt: testsApi.data?.LatestReportTimeStamp || null,
- TenantName: organizationRecord?.displayName || '',
- Domain: currentTenant || '',
- TestResultSummary: {
- IdentityPassed: testsApi.data.TestCounts?.Identity?.Passed || 0,
- IdentityFailed: testsApi.data.TestCounts?.Identity?.Failed || 0,
- IdentitySkipped: testsApi.data.TestCounts?.Identity?.Skipped || 0,
- IdentityInformational: testsApi.data.TestCounts?.Identity?.Informational || 0,
- IdentityNeedsAttention: testsApi.data.TestCounts?.Identity?.NeedsAttention || 0,
- IdentityTotal: testsApi.data.TestCounts?.Identity?.Total || 0,
- DevicesPassed: testsApi.data.TestCounts?.Devices?.Passed || 0,
- DevicesFailed: testsApi.data.TestCounts?.Devices?.Failed || 0,
- DevicesSkipped: testsApi.data.TestCounts?.Devices?.Skipped || 0,
- DevicesInformational: testsApi.data.TestCounts?.Devices?.Informational || 0,
- DevicesNeedsAttention: testsApi.data.TestCounts?.Devices?.NeedsAttention || 0,
- DevicesTotal: testsApi.data.TestCounts?.Devices?.Total || 0,
- CustomPassed: testsApi.data.TestCounts?.Custom?.Passed || 0,
- CustomFailed: testsApi.data.TestCounts?.Custom?.Failed || 0,
- CustomSkipped: testsApi.data.TestCounts?.Custom?.Skipped || 0,
- CustomInformational: testsApi.data.TestCounts?.Custom?.Informational || 0,
- CustomNeedsAttention: testsApi.data.TestCounts?.Custom?.NeedsAttention || 0,
- CustomTotal: testsApi.data.TestCounts?.Custom?.Total || 0,
- DataPassed: 0,
- DataTotal: 0,
- },
- SecureScore: testsApi.data.SecureScore || [],
- TenantInfo: {
- TenantOverview: {
- UserCount: testsApi.data.TenantCounts.Users || 0,
- GuestCount: testsApi.data.TenantCounts.Guests || 0,
- GroupCount: testsApi.data.TenantCounts.Groups || 0,
- ApplicationCount: testsApi.data.TenantCounts.ServicePrincipals || 0,
- DeviceCount: testsApi.data.TenantCounts.Devices || 0,
- ManagedDeviceCount: testsApi.data.TenantCounts.ManagedDevices || 0,
- },
- MFAState: testsApi.data.MFAState,
- OverviewCaDevicesAllUsers: dashboardDemoData.TenantInfo.OverviewCaDevicesAllUsers,
- OverviewAuthMethodsPrivilegedUsers:
- dashboardDemoData.TenantInfo.OverviewAuthMethodsPrivilegedUsers,
- DeviceOverview: dashboardDemoData.TenantInfo.DeviceOverview,
- },
- }
- : dashboardDemoData
-
- useEffect(() => {
- if (currentTenantInfo.isSuccess) {
- const tenantLookup = currentTenantInfo.data?.find(
- (tenant) => tenant.defaultDomainName === currentTenant
- )
-
- // Get filtered portals based on user preferences
- const filteredPortals = getFilteredPortals(settings)
-
- const menuItems = filteredPortals.map((portal) => ({
- label: portal.label,
- target: '_blank',
- // A portal with a `field` has a URL the backend resolved for us (SharePoint's host cannot be
- // derived from the tenant). Use it when it's there, otherwise fall back to the templated URL.
- link:
- portal.field && tenantLookup?.[portal.field]
- ? tenantLookup[portal.field]
- : portal.url.replace(portal.variable, tenantLookup?.[portal.variable]),
- icon: portal.icon,
- }))
- setPortalMenuItems(menuItems)
- }
- }, [
- currentTenantInfo.isSuccess,
- currentTenant,
- settings.portalLinks,
- settings.UserSpecificSettings,
- ])
-
- const formatNumber = (num) => {
- if (!num && num !== 0) return '0'
- if (num >= 1000) {
- return (num / 1000).toFixed(1) + 'K'
- }
- return num.toLocaleString()
- }
-
- if (isAllTenants) {
- // No top margin, matching CippTablePage: the layout's breadcrumb Divider already carries mb: 2.
- return (
-
-
- )
- }
-
- return (
- // Both branches sit under the same TabbedLayout tab bar; the per-tenant mt: 12 is legacy
- // desktop spacing kept for now. Mobile adds nothing — the breadcrumb rail no longer
- // renders on the dashboard, and the sibling views (identity/devices/custom) start their
- // toolbar straight after the layout's own 16px gap, so this view must too.
-
-
- {/* xs has a single item (the portals cell is desktop-only), so grid spacing would
- only pad the toolbar down away from the title. */}
-
- {!isMobile && (
-
-
-
-
- {isWide ? (
- <>
-
-
-
- }
- sx={{
- width: '100%',
- minWidth: 0,
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- fontWeight: 'bold',
- textTransform: 'none',
- borderRadius: 2,
- boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
- transition: 'all 0.2s ease-in-out',
- }}
- >
-
- Report Builder
-
-
-
-
- ) : (
- <>
-
-
-
-
-
- )}
-
-
- )}
-
-
-
-
- {/* Tenant Overview Section - 3 Column Layout */}
-
- {/* Column 1: Tenant Information */}
-
-
-
- {/* Column 2: Tenant Metrics - 2x3 Grid */}
-
-
-
- {/* Column 3: Assessment Results */}
-
- r.id === selectedReport)?.name}
- description={reports.find((r) => r.id === selectedReport)?.description}
- />
-
-
-
- {/* Alerts Section - Full Width */}
-
-
-
- {/* Identity Section - 2 Column Grid */}
-
-
- {/* Left Column */}
-
-
- {/* The fixed height exists to keep the two lg columns level. Below lg this is
- a single column, so it buys nothing and clips instead: the description wraps
- to more lines on a narrow card and the stats row falls off the bottom edge. */}
-
-
-
-
-
-
-
- {/* Right Column */}
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Mobile home of the Portals/Reports header row. keepMounted: ExecutiveReportButton's
- preview Dialog is internal state and must survive the sheet auto-closing under it
- (same trick as the desktop Reports Menu above). */}
- {isMobile && (
-
- {portalMenuItems.length > 0 && (
- <>
-
- )}
-
- )
-}
-
-// No allTenantsSupport={false} here: the page handles AllTenants itself (see isAllTenants above),
-// and the Identity / Devices / Custom tabs each render a cross-tenant view in that mode too.
-// Leaving the opt-out in place would make the layout render "Not supported" and never mount this page.
-Page.getLayout = (page) => (
-
- {page}
-
-)
-
-export default Page
diff --git a/src/pages/dashboardv2/index.jsx b/src/pages/dashboardv2/index.jsx
new file mode 100644
index 000000000000..094b22fb2965
--- /dev/null
+++ b/src/pages/dashboardv2/index.jsx
@@ -0,0 +1,510 @@
+import {
+ Box,
+ Container,
+ Button,
+ Divider,
+ List,
+ ListItemButton,
+ ListSubheader,
+ Menu,
+ MenuItem,
+ ListItemIcon,
+ ListItemText,
+ SvgIcon,
+} from '@mui/material'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import { Grid, useMediaQuery } from '@mui/system'
+import { useSettings } from '../../hooks/use-settings'
+import { useIsMobileLayout } from '../../hooks/use-breakpoint'
+import { ApiGetCall } from '../../api/ApiCall.jsx'
+import { getFilteredPortals } from '../../utils/get-filtered-portals'
+import { CippIcons, getIconByName } from '../../utils/icon-registry'
+import { BulkActionsMenu } from '../../components/bulk-actions-menu'
+import { CippPageActionsFab } from '../../components/CippComponents/CippPageActionsFab'
+import { ExecutiveReportButton } from '../../components/ExecutiveReportButton'
+import { TabbedLayout } from '../../layouts/TabbedLayout'
+import { Layout as DashboardLayout } from '../../layouts/index'
+import tabOptions from './tabOptions'
+import { dashboardDemoData } from '../../data/dashboardv2-demo-data'
+import { SecureScoreCard } from '../../components/CippComponents/SecureScoreCard'
+import { MFACard } from '../../components/CippComponents/MFACard'
+import { AuthMethodCard } from '../../components/CippComponents/AuthMethodCard'
+import { LicenseCard } from '../../components/CippComponents/LicenseCard'
+import { TenantInfoCard } from '../../components/CippComponents/TenantInfoCard'
+import { TenantMetricsGrid } from '../../components/CippComponents/TenantMetricsGrid'
+import { AssessmentCard } from '../../components/CippComponents/AssessmentCard'
+import { AlertsOverviewCard } from '../../components/CippComponents/AlertsOverviewCard'
+import { CippReportToolbar } from '../../components/CippComponents/CippReportToolbar'
+import { CippHead } from '../../components/CippComponents/CippHead.jsx'
+import { AllTenantsDashboard } from '../../components/CippAllTenants/AllTenantsDashboard'
+
+const Page = () => {
+ const settings = useSettings()
+ const router = useRouter()
+ const { currentTenant } = settings
+ // The per-tenant cards below are all scoped to a single tenant's Graph data. Under AllTenants —
+ // which is also the state on first login, before a tenant has been picked — swap in the
+ // cross-tenant view rather than letting the layout render "Not supported".
+ const isAllTenants = !currentTenant || currentTenant === 'AllTenants'
+ const [portalMenuItems, setPortalMenuItems] = useState([])
+ const isWide = useMediaQuery('(min-width:1513px)')
+ // Below md the Portals/Reports button row gives way to a bottom-right FAB sheet, and
+ // CippReportToolbar collapses to selector + kebab on its own.
+ const isMobile = useIsMobileLayout()
+ const [reportsMenuAnchor, setReportsMenuAnchor] = useState(null)
+ // Get reportId from query params or default to the user's preferred suite (Preferences page)
+ // Only use default if router is ready and reportId is still not present
+ const defaultReportId =
+ settings.UserSpecificSettings?.defaultTestSuite?.value ||
+ settings.defaultTestSuite?.value ||
+ 'ztna'
+ const selectedReport =
+ router.isReady && !router.query.reportId
+ ? defaultReportId
+ : router.query.reportId || defaultReportId
+
+ // Fetch available reports (shared cache with CippReportToolbar)
+ const reportsApi = ApiGetCall({
+ url: '/api/ListTestReports',
+ queryKey: 'ListTestReports',
+ })
+
+ const reports = reportsApi.data || []
+
+ const organization = ApiGetCall({
+ url: '/api/ListGraphRequest',
+ queryKey: `${currentTenant}-ListGraphRequest-organization`,
+ data: { tenantFilter: currentTenant, Endpoint: 'organization' },
+ waiting: !isAllTenants,
+ })
+
+ const organizationRecord = organization.data?.Results?.[0]
+
+ const testsApi = ApiGetCall({
+ url: '/api/ListTests',
+ data: { tenantFilter: currentTenant, reportId: selectedReport },
+ queryKey: `${currentTenant}-ListTests-${selectedReport}`,
+ waiting: !isAllTenants && !!currentTenant && !!selectedReport,
+ })
+
+ const currentTenantInfo = ApiGetCall({
+ url: '/api/listTenants',
+ data: { AllTenantSelector: true },
+ queryKey: 'TenantSelector',
+ refetchOnMount: false,
+ refetchOnReconnect: false,
+ keepPreviousData: true,
+ })
+
+ const reportData =
+ testsApi.isSuccess && testsApi.data?.TenantCounts
+ ? {
+ ExecutedAt: testsApi.data?.LatestReportTimeStamp || null,
+ TenantName: organizationRecord?.displayName || '',
+ Domain: currentTenant || '',
+ TestResultSummary: {
+ IdentityPassed: testsApi.data.TestCounts?.Identity?.Passed || 0,
+ IdentityFailed: testsApi.data.TestCounts?.Identity?.Failed || 0,
+ IdentitySkipped: testsApi.data.TestCounts?.Identity?.Skipped || 0,
+ IdentityInformational: testsApi.data.TestCounts?.Identity?.Informational || 0,
+ IdentityNeedsAttention: testsApi.data.TestCounts?.Identity?.NeedsAttention || 0,
+ IdentityTotal: testsApi.data.TestCounts?.Identity?.Total || 0,
+ DevicesPassed: testsApi.data.TestCounts?.Devices?.Passed || 0,
+ DevicesFailed: testsApi.data.TestCounts?.Devices?.Failed || 0,
+ DevicesSkipped: testsApi.data.TestCounts?.Devices?.Skipped || 0,
+ DevicesInformational: testsApi.data.TestCounts?.Devices?.Informational || 0,
+ DevicesNeedsAttention: testsApi.data.TestCounts?.Devices?.NeedsAttention || 0,
+ DevicesTotal: testsApi.data.TestCounts?.Devices?.Total || 0,
+ CustomPassed: testsApi.data.TestCounts?.Custom?.Passed || 0,
+ CustomFailed: testsApi.data.TestCounts?.Custom?.Failed || 0,
+ CustomSkipped: testsApi.data.TestCounts?.Custom?.Skipped || 0,
+ CustomInformational: testsApi.data.TestCounts?.Custom?.Informational || 0,
+ CustomNeedsAttention: testsApi.data.TestCounts?.Custom?.NeedsAttention || 0,
+ CustomTotal: testsApi.data.TestCounts?.Custom?.Total || 0,
+ DataPassed: 0,
+ DataTotal: 0,
+ },
+ SecureScore: testsApi.data.SecureScore || [],
+ TenantInfo: {
+ TenantOverview: {
+ UserCount: testsApi.data.TenantCounts.Users || 0,
+ GuestCount: testsApi.data.TenantCounts.Guests || 0,
+ GroupCount: testsApi.data.TenantCounts.Groups || 0,
+ ApplicationCount: testsApi.data.TenantCounts.ServicePrincipals || 0,
+ DeviceCount: testsApi.data.TenantCounts.Devices || 0,
+ ManagedDeviceCount: testsApi.data.TenantCounts.ManagedDevices || 0,
+ },
+ MFAState: testsApi.data.MFAState,
+ OverviewCaDevicesAllUsers: dashboardDemoData.TenantInfo.OverviewCaDevicesAllUsers,
+ OverviewAuthMethodsPrivilegedUsers:
+ dashboardDemoData.TenantInfo.OverviewAuthMethodsPrivilegedUsers,
+ DeviceOverview: dashboardDemoData.TenantInfo.DeviceOverview,
+ },
+ }
+ : dashboardDemoData
+
+ useEffect(() => {
+ if (currentTenantInfo.isSuccess) {
+ const tenantLookup = currentTenantInfo.data?.find(
+ (tenant) => tenant.defaultDomainName === currentTenant
+ )
+
+ // Get filtered portals based on user preferences
+ const filteredPortals = getFilteredPortals(settings)
+
+ const menuItems = filteredPortals.map((portal) => ({
+ label: portal.label,
+ target: '_blank',
+ // A portal with a `field` has a URL the backend resolved for us (SharePoint's host cannot be
+ // derived from the tenant). Use it when it's there, otherwise fall back to the templated URL.
+ link:
+ portal.field && tenantLookup?.[portal.field]
+ ? tenantLookup[portal.field]
+ : portal.url.replace(portal.variable, tenantLookup?.[portal.variable]),
+ icon: portal.icon,
+ }))
+ setPortalMenuItems(menuItems)
+ }
+ }, [
+ currentTenantInfo.isSuccess,
+ currentTenant,
+ settings.portalLinks,
+ settings.UserSpecificSettings,
+ ])
+
+ const formatNumber = (num) => {
+ if (!num && num !== 0) return '0'
+ if (num >= 1000) {
+ return (num / 1000).toFixed(1) + 'K'
+ }
+ return num.toLocaleString()
+ }
+
+ if (isAllTenants) {
+ // No top margin, matching CippTablePage: the layout's breadcrumb Divider already carries mb: 2.
+ // xs bottom margin clears the mobile page-actions FAB (~76px), matching CippMobileCardList's pb: 10.
+ return (
+
+
+ )
+ }
+
+ return (
+ // Both branches sit under the same TabbedLayout tab bar; the per-tenant mt: 12 is legacy
+ // desktop spacing kept for now. Mobile adds nothing — the breadcrumb rail no longer
+ // renders on the dashboard, and the sibling views (identity/devices/custom) start their
+ // toolbar straight after the layout's own 16px gap, so this view must too.
+ // mb xs clears the mobile page-actions FAB (~76px), matching CippMobileCardList's pb: 10.
+
+
+ {/* xs has a single item (the portals cell is desktop-only), so grid spacing would
+ only pad the toolbar down away from the title. */}
+
+ {!isMobile && (
+
+
+
+
+ {isWide ? (
+ <>
+
+
+
+ }
+ sx={{
+ width: '100%',
+ minWidth: 0,
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ fontWeight: 'bold',
+ textTransform: 'none',
+ borderRadius: 2,
+ boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+ transition: 'all 0.2s ease-in-out',
+ }}
+ >
+
+ Report Builder
+
+
+
+
+ ) : (
+ <>
+
+
+
+
+
+ )}
+
+
+ )}
+
+
+
+
+ {/* Tenant Overview Section - 3 Column Layout */}
+
+ {/* Column 1: Tenant Information */}
+
+
+
+ {/* Column 2: Tenant Metrics - 2x3 Grid */}
+
+
+
+ {/* Column 3: Assessment Results */}
+
+ r.id === selectedReport)?.name}
+ description={reports.find((r) => r.id === selectedReport)?.description}
+ />
+
+
+
+ {/* Alerts Section - Full Width */}
+
+
+
+ {/* Identity Section - 2 Column Grid */}
+
+
+ {/* Left Column */}
+
+
+ {/* The fixed height exists to keep the two lg columns level. Below lg this is
+ a single column, so it buys nothing and clips instead: the description wraps
+ to more lines on a narrow card and the stats row falls off the bottom edge. */}
+
+
+
+
+
+
+
+ {/* Right Column */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Mobile home of the Portals/Reports header row. keepMounted: ExecutiveReportButton's
+ preview Dialog is internal state and must survive the sheet auto-closing under it
+ (same trick as the desktop Reports Menu above). */}
+ {isMobile && (
+
+ {portalMenuItems.length > 0 && (
+ <>
+
+ )}
+
+ );
+}
+
+// No allTenantsSupport={false} here: the page handles AllTenants itself (see isAllTenants above),
+// and the Identity / Devices / Custom tabs each render a cross-tenant view in that mode too.
+// Leaving the opt-out in place would make the layout render "Not supported" and never mount this page.
+Page.getLayout = (page) => (
+
+ {page}
+
+)
+
+export default Page
diff --git a/src/pages/email/administration/contacts-template/add.jsx b/src/pages/email/administration/contacts-template/add.jsx
index f43bf99d7721..0e7202c7e924 100644
--- a/src/pages/email/administration/contacts-template/add.jsx
+++ b/src/pages/email/administration/contacts-template/add.jsx
@@ -1,5 +1,5 @@
import { useForm } from "react-hook-form";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
import CippFormPage from "../../../../components/CippFormPages/CippFormPage";
import ContactFormLayout from "../../../../components/CippFormPages/CippAddEditContact";
diff --git a/src/pages/email/administration/contacts-template/edit.jsx b/src/pages/email/administration/contacts-template/edit.jsx
index 33f40120a1c2..81bb6704e579 100644
--- a/src/pages/email/administration/contacts-template/edit.jsx
+++ b/src/pages/email/administration/contacts-template/edit.jsx
@@ -1,12 +1,13 @@
import { useEffect, useMemo, useCallback } from "react";
import { useForm } from "react-hook-form";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
import CippFormPage from "../../../../components/CippFormPages/CippFormPage";
import CippFormSkeleton from "../../../../components/CippFormPages/CippFormSkeleton";
import ContactFormLayout from "../../../../components/CippFormPages/CippAddEditContact";
import { ApiGetCall } from "../../../../api/ApiCall";
import countryList from "../../../../data/countryList.json";
import { useRouter } from "next/router";
+import { Alert } from "@mui/material";
const EditContactTemplate = () => {
const router = useRouter();
@@ -128,15 +129,21 @@ const EditContactTemplate = () => {
- {contactTemplateInfo.isLoading &&
+ No contact template selected. Open this page from the Contact Templates list to edit a template.
+
+ )}
+ {id && contactTemplateInfo.isLoading &&
diff --git a/src/pages/email/administration/contacts-template/index.jsx b/src/pages/email/administration/contacts-template/index.jsx
index 8d5fc6d69239..81bedc730257 100644
--- a/src/pages/email/administration/contacts-template/index.jsx
+++ b/src/pages/email/administration/contacts-template/index.jsx
@@ -1,10 +1,8 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry"
import { Button } from "@mui/material";
import Link from "next/link";
-import { RocketLaunch } from "@mui/icons-material";
import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { TrashIcon } from "@heroicons/react/24/outline";
-import { GitHub, Edit } from "@mui/icons-material";
import { ApiGetCall } from "../../../../api/ApiCall";
import { CippDeployContactTemplateDrawer } from "../../../../components/CippComponents/CippDeployContactTemplateDrawer";
@@ -22,7 +20,7 @@ const Page = () => {
label: "Save to GitHub",
type: "POST",
url: "/api/ExecCommunityRepo",
- icon:
- {contactInfo.isLoading &&
+ No contact selected. Open this page from the Contacts list to edit a contact.
+
+ )}
+ {id && contactInfo.isLoading &&
{/* Display Name */}
diff --git a/src/pages/email/administration/contacts/index.js b/src/pages/email/administration/contacts/index.js
deleted file mode 100644
index 08ddce216c8b..000000000000
--- a/src/pages/email/administration/contacts/index.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import { useMemo } from "react";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { CloudSync, Edit } from "@mui/icons-material";
-import TrashIcon from "@heroicons/react/24/outline/TrashIcon";
-import { CippAddContactDrawer } from "../../../../components/CippComponents/CippAddContactDrawer";
-import { CippDeployContactTemplateDrawer } from "../../../../components/CippComponents/CippDeployContactTemplateDrawer";
-
-const Page = () => {
- const pageTitle = "Contacts";
- const cardButtonPermissions = ["Exchange.Contact.ReadWrite"];
- const actions = useMemo(
- () => [
- {
- label: "Edit Contact",
- link: "/email/administration/contacts/edit?id=[Guid]",
- multiPost: false,
- postEntireRow: true,
- icon:
- {page} ;
-export default Page;
diff --git a/src/pages/email/administration/contacts/index.jsx b/src/pages/email/administration/contacts/index.jsx
new file mode 100644
index 000000000000..9e3d08916c3d
--- /dev/null
+++ b/src/pages/email/administration/contacts/index.jsx
@@ -0,0 +1,110 @@
+import { useMemo } from "react";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import { CippAddContactDrawer } from "../../../../components/CippComponents/CippAddContactDrawer";
+import { CippDeployContactTemplateDrawer } from "../../../../components/CippComponents/CippDeployContactTemplateDrawer";
+
+const Page = () => {
+ const pageTitle = "Contacts";
+ const cardButtonPermissions = ["Exchange.Contact.ReadWrite"];
+ const actions = useMemo(
+ () => [
+ {
+ label: "Edit Contact",
+ link: "/email/administration/contacts/edit?id=[Guid]",
+ pinned: true,
+ multiPost: false,
+ postEntireRow: true,
+ icon:
+ {page} ;
+export default Page;
diff --git a/src/pages/email/administration/deleted-mailboxes/index.js b/src/pages/email/administration/deleted-mailboxes/index.js
deleted file mode 100644
index 8b7841ddfedf..000000000000
--- a/src/pages/email/administration/deleted-mailboxes/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-
-const Page = () => {
- const pageTitle = "Deleted Mailboxes";
-
- const simpleColumns = ["displayName", "mail", "companyName", "onPremisesSyncEnabled"];
-
- return (
- {page} ;
-export default Page;
diff --git a/src/pages/email/administration/deleted-mailboxes/index.jsx b/src/pages/email/administration/deleted-mailboxes/index.jsx
new file mode 100644
index 000000000000..32c203b42cb5
--- /dev/null
+++ b/src/pages/email/administration/deleted-mailboxes/index.jsx
@@ -0,0 +1,19 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+
+const Page = () => {
+ const pageTitle = "Deleted Mailboxes";
+
+ const simpleColumns = ["displayName", "mail", "companyName", "onPremisesSyncEnabled"];
+
+ return (
+ {page} ;
+export default Page;
diff --git a/src/pages/email/administration/exchange-retention/policies/index.js b/src/pages/email/administration/exchange-retention/policies/index.js
deleted file mode 100644
index a66011d452aa..000000000000
--- a/src/pages/email/administration/exchange-retention/policies/index.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import { useMemo } from "react";
-import { Layout as DashboardLayout } from "../../../../../layouts/index";
-import { CippTablePage } from "../../../../../components/CippComponents/CippTablePage";
-import { Policy, Edit } from "@mui/icons-material";
-import { Button } from "@mui/material";
-import Link from "next/link";
-import TrashIcon from "@heroicons/react/24/outline/TrashIcon";
-import { HeaderedTabbedLayout } from "../../../../../layouts/HeaderedTabbedLayout";
-import tabOptions from "../tabOptions";
-import { useSettings } from "../../../../../hooks/use-settings";
-
-const Page = () => {
- const pageTitle = "Retention Policy Management";
- const tenant = useSettings().currentTenant;
-
- const actions = useMemo(
- () => [
- {
- label: "Edit Policy",
- link: "/email/administration/exchange-retention/policies/policy?name=[Name]",
- multiPost: false,
- postEntireRow: true,
- icon:
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/email/administration/exchange-retention/policies/index.jsx b/src/pages/email/administration/exchange-retention/policies/index.jsx
new file mode 100644
index 000000000000..a2e29e06b855
--- /dev/null
+++ b/src/pages/email/administration/exchange-retention/policies/index.jsx
@@ -0,0 +1,81 @@
+import { useMemo } from "react";
+import { CippIcons } from "../../../../../utils/icon-registry"
+import { Layout as DashboardLayout } from "../../../../../layouts/index";
+import { CippTablePage } from "../../../../../components/CippComponents/CippTablePage";
+import { Button } from "@mui/material";
+import Link from "next/link";
+import { HeaderedTabbedLayout } from "../../../../../layouts/HeaderedTabbedLayout";
+import tabOptions from "../tabOptions";
+import { useSettings } from "../../../../../hooks/use-settings";
+
+const Page = () => {
+ const pageTitle = "Retention Policy Management";
+ const tenant = useSettings().currentTenant;
+
+ const actions = useMemo(
+ () => [
+ {
+ label: "Edit Policy",
+ link: "/email/administration/exchange-retention/policies/policy?name=[Name]",
+ pinned: true,
+ multiPost: false,
+ postEntireRow: true,
+ icon:
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/email/administration/exchange-retention/tags/index.js b/src/pages/email/administration/exchange-retention/tags/index.js
deleted file mode 100644
index e48b3f9f86d2..000000000000
--- a/src/pages/email/administration/exchange-retention/tags/index.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import { useMemo } from "react";
-import { Layout as DashboardLayout } from "../../../../../layouts/index";
-import { CippTablePage } from "../../../../../components/CippComponents/CippTablePage";
-import { Sell, Edit } from "@mui/icons-material";
-import { Button } from "@mui/material";
-import Link from "next/link";
-import TrashIcon from "@heroicons/react/24/outline/TrashIcon";
-import { HeaderedTabbedLayout } from "../../../../../layouts/HeaderedTabbedLayout";
-import tabOptions from "../tabOptions";
-import { useSettings } from "../../../../../hooks/use-settings";
-
-const Page = () => {
- const pageTitle = "Retention Tag Management";
- const tenant = useSettings().currentTenant;
-
- const actions = useMemo(
- () => [
- {
- label: "Edit Tag",
- link: "/email/administration/exchange-retention/tags/tag?name=[Name]",
- multiPost: false,
- postEntireRow: true,
- icon:
-
- );
-};
-
-Page.getLayout = (page) => {page} ;
-
-export default Page;
diff --git a/src/pages/email/administration/exchange-retention/tags/index.jsx b/src/pages/email/administration/exchange-retention/tags/index.jsx
new file mode 100644
index 000000000000..77acb5506a8d
--- /dev/null
+++ b/src/pages/email/administration/exchange-retention/tags/index.jsx
@@ -0,0 +1,88 @@
+import { useMemo } from "react";
+import { CippIcons } from "../../../../../utils/icon-registry"
+import { Layout as DashboardLayout } from "../../../../../layouts/index";
+import { CippTablePage } from "../../../../../components/CippComponents/CippTablePage";
+import { Button } from "@mui/material";
+import Link from "next/link";
+import { HeaderedTabbedLayout } from "../../../../../layouts/HeaderedTabbedLayout";
+import tabOptions from "../tabOptions";
+import { useSettings } from "../../../../../hooks/use-settings";
+
+const Page = () => {
+ const pageTitle = "Retention Tag Management";
+ const tenant = useSettings().currentTenant;
+
+ const actions = useMemo(
+ () => [
+ {
+ label: "Edit Tag",
+ link: "/email/administration/exchange-retention/tags/tag?name=[Name]",
+ pinned: true,
+ multiPost: false,
+ postEntireRow: true,
+ icon:
+
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+
+export default Page;
diff --git a/src/pages/email/administration/exchange-retention/tags/tag.jsx b/src/pages/email/administration/exchange-retention/tags/tag.jsx
index 40d6291257a1..8cdde887556b 100644
--- a/src/pages/email/administration/exchange-retention/tags/tag.jsx
+++ b/src/pages/email/administration/exchange-retention/tags/tag.jsx
@@ -1,7 +1,7 @@
import { useForm } from "react-hook-form";
import { useEffect } from "react";
import { useRouter } from "next/router";
-import { Layout as DashboardLayout } from "../../../../../layouts/index.js";
+import { Layout as DashboardLayout } from "../../../../../layouts/index";
import CippFormPage from "../../../../../components/CippFormPages/CippFormPage";
import CippFormSkeleton from "../../../../../components/CippFormPages/CippFormSkeleton";
import { useSettings } from "../../../../../hooks/use-settings";
@@ -134,7 +134,7 @@ const RetentionTag = () => {
? values.RetentionAction
: values.RetentionAction.value;
}
- if (values.AgeLimitForRetention) {
+ if (values.AgeLimitForRetention != null) {
tagData.AgeLimitForRetention = parseInt(values.AgeLimitForRetention);
}
if (values.LocalizedComment) {
diff --git a/src/pages/email/administration/hve-accounts/index.js b/src/pages/email/administration/hve-accounts/index.js
deleted file mode 100644
index 3a786d57cdcf..000000000000
--- a/src/pages/email/administration/hve-accounts/index.js
+++ /dev/null
@@ -1,204 +0,0 @@
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
-import { CippHVEUserDrawer } from '../../../../components/CippComponents/CippHVEUserDrawer.jsx'
-import { useCippReportDB } from '../../../../components/CippComponents/CippReportDBControls'
-import { Stack } from '@mui/system'
-import { TrashIcon } from '@heroicons/react/24/outline'
-import {
- Edit,
- AlternateEmail,
- Receipt,
- RemoveCircleOutline,
- Reply,
-} from '@mui/icons-material'
-
-const Page = () => {
- const pageTitle = 'HVE Accounts'
-
- const reportDB = useCippReportDB({
- apiUrl: '/api/ListHVEAccounts',
- queryKey: 'ListHVEAccounts',
- cacheName: 'HVEAccounts',
- syncTitle: 'Sync HVE Accounts',
- allowToggle: true,
- defaultCached: true,
- })
-
- const actions = [
- {
- label: 'Edit Display Name',
- type: 'POST',
- url: '/api/ExecHVEUser',
- icon:
- {page}
-
-export default Page
diff --git a/src/pages/email/administration/hve-accounts/index.jsx b/src/pages/email/administration/hve-accounts/index.jsx
new file mode 100644
index 000000000000..7a0839a26c25
--- /dev/null
+++ b/src/pages/email/administration/hve-accounts/index.jsx
@@ -0,0 +1,199 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippIcons } from '../../../../utils/icon-registry'
+import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
+import { CippHVEUserDrawer } from '../../../../components/CippComponents/CippHVEUserDrawer.jsx'
+import { useCippReportDB } from '../../../../components/CippComponents/CippReportDBControls'
+import { Stack } from '@mui/system'
+
+const Page = () => {
+ const pageTitle = 'HVE Accounts'
+
+ const reportDB = useCippReportDB({
+ apiUrl: '/api/ListHVEAccounts',
+ queryKey: 'ListHVEAccounts',
+ cacheName: 'HVEAccounts',
+ syncTitle: 'Sync HVE Accounts',
+ allowToggle: true,
+ defaultCached: true,
+ })
+
+ const actions = [
+ {
+ label: 'Edit Display Name',
+ type: 'POST',
+ url: '/api/ExecHVEUser',
+ icon:
+ {page}
+
+export default Page
diff --git a/src/pages/email/administration/mailbox-rules/index.js b/src/pages/email/administration/mailbox-rules/index.js
deleted file mode 100644
index 82980484b16e..000000000000
--- a/src/pages/email/administration/mailbox-rules/index.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
-import { getCippTranslation } from '../../../../utils/get-cipp-translation'
-import { getCippFormatting } from '../../../../utils/get-cipp-formatting'
-import { CippPropertyListCard } from '../../../../components/CippCards/CippPropertyListCard'
-import { Block, PlayArrow, DeleteForever } from '@mui/icons-material'
-import { useCippReportDB } from '../../../../components/CippComponents/CippReportDBControls'
-
-const Page = () => {
- const pageTitle = 'Mailbox Rules'
-
- const reportDB = useCippReportDB({
- apiUrl: '/api/ListMailboxRules',
- queryKey: 'ListMailboxRules',
- cacheName: 'Mailboxes',
- syncTitle: 'Sync Mailbox Rules',
- syncData: { Types: 'Rules' },
- allowToggle: false,
- defaultCached: true,
- })
-
- const simpleColumns = [
- ...reportDB.cacheColumns.filter((c) => c === 'Tenant'),
- 'UserPrincipalName',
- 'Name',
- 'Priority',
- 'Enabled',
- 'From',
- ...reportDB.cacheColumns.filter((c) => c !== 'Tenant'),
- ]
-
- const actions = [
- {
- label: 'Enable Mailbox Rule',
- type: 'POST',
- icon: {page}
-export default Page
diff --git a/src/pages/email/administration/mailbox-rules/index.jsx b/src/pages/email/administration/mailbox-rules/index.jsx
new file mode 100644
index 000000000000..b9cf3d4abdf7
--- /dev/null
+++ b/src/pages/email/administration/mailbox-rules/index.jsx
@@ -0,0 +1,125 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
+import { getCippTranslation } from '../../../../utils/get-cipp-translation'
+import { getCippFormatting } from '../../../../utils/get-cipp-formatting'
+import { CippPropertyListCard } from '../../../../components/CippCards/CippPropertyListCard'
+import { CippIcons } from '../../../../utils/icon-registry'
+import { useCippReportDB } from '../../../../components/CippComponents/CippReportDBControls'
+
+const Page = () => {
+ const pageTitle = 'Mailbox Rules'
+
+ const reportDB = useCippReportDB({
+ apiUrl: '/api/ListMailboxRules',
+ queryKey: 'ListMailboxRules',
+ cacheName: 'Mailboxes',
+ syncTitle: 'Sync Mailbox Rules',
+ syncData: { Types: 'Rules' },
+ allowToggle: false,
+ defaultCached: true,
+ })
+
+ const simpleColumns = [
+ ...reportDB.cacheColumns.filter((c) => c === 'Tenant'),
+ 'UserPrincipalName',
+ 'Name',
+ 'Priority',
+ 'Enabled',
+ 'From',
+ ...reportDB.cacheColumns.filter((c) => c !== 'Tenant'),
+ ]
+
+ const actions = [
+ {
+ label: 'Enable Mailbox Rule',
+ type: 'POST',
+ icon: {page}
+export default Page
diff --git a/src/pages/email/administration/mailboxes/addshared.jsx b/src/pages/email/administration/mailboxes/addshared.jsx
index d3a9d63d7ba9..e8d9e4add681 100644
--- a/src/pages/email/administration/mailboxes/addshared.jsx
+++ b/src/pages/email/administration/mailboxes/addshared.jsx
@@ -1,7 +1,7 @@
import { Divider } from "@mui/material";
import { Grid } from "@mui/system";
import { useForm } from "react-hook-form";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
import CippFormPage from "../../../../components/CippFormPages/CippFormPage";
import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
import { useSettings } from "../../../../hooks/use-settings";
diff --git a/src/pages/email/administration/mailboxes/index.js b/src/pages/email/administration/mailboxes/index.js
deleted file mode 100644
index 23191895b4e5..000000000000
--- a/src/pages/email/administration/mailboxes/index.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
-import CippExchangeActions from '../../../../components/CippComponents/CippExchangeActions'
-import { CippSharedMailboxDrawer } from '../../../../components/CippComponents/CippSharedMailboxDrawer.jsx'
-import { useCippReportDB } from '../../../../components/CippComponents/CippReportDBControls'
-import {
- CippAnonymizedReportAlert,
- useReportAnonymized,
-} from '../../../../components/CippComponents/CippAnonymizedReportAlert'
-import { Stack } from '@mui/system'
-
-const Page = () => {
- const pageTitle = 'Mailboxes'
-
- const reportDB = useCippReportDB({
- apiUrl: '/api/ListMailboxes',
- queryKey: 'ListMailboxes',
- cacheName: 'Mailboxes',
- syncTitle: 'Sync Mailboxes',
- allowToggle: true,
- defaultCached: true,
- })
-
- // Anonymized report names break the usage merge in the Mailboxes cache sync, leaving
- // storageUsedInBytes at 0 for every mailbox (cached mode only — live mode has no usage data).
- const allZeroStorage = useReportAnonymized({
- url: reportDB.resolvedApiUrl,
- queryKey: reportDB.resolvedQueryKey,
- check: (rows) => rows.every((mailbox) => !Number(mailbox?.storageUsedInBytes)),
- })
-
- // Define off-canvas details
- const offCanvas = {
- extendedInfoFields: ['displayName', 'UPN', 'AdditionalEmailAddresses', 'recipientTypeDetails'],
- actions: CippExchangeActions(),
- }
-
- const filterList = [
- {
- filterName: 'View User Mailboxes',
- value: [{ id: 'recipientTypeDetails', value: 'UserMailbox' }],
- type: 'column',
- },
- {
- filterName: 'View Shared Mailboxes',
- value: [{ id: 'recipientTypeDetails', value: 'SharedMailbox' }],
- type: 'column',
- },
- {
- filterName: 'View Room Mailboxes',
- value: [{ id: 'recipientTypeDetails', value: 'RoomMailbox' }],
- type: 'column',
- },
- {
- filterName: 'View Equipment Mailboxes',
- value: [{ id: 'recipientTypeDetails', value: 'EquipmentMailbox' }],
- type: 'column',
- },
- {
- filterName: 'View Archive-Enabled Mailboxes',
- value: [{ id: 'ArchiveEnabled', value: true }],
- type: 'column',
- },
- {
- filterName: 'View Auto Expanding Archive Enabled',
- value: [{ id: 'AutoExpandingArchive', value: true }],
- type: 'column',
- },
- ]
-
- // Simplified columns for the table
- const simpleColumns = [
- ...reportDB.cacheColumns.filter((c) => c === 'Tenant'),
- 'displayName',
- 'recipientTypeDetails',
- 'UPN',
- 'primarySmtpAddress',
- 'AdditionalEmailAddresses',
- ...(reportDB.useReportDB ? ['storageUsedInBytes'] : []),
- 'ArchiveEnabled',
- ...(reportDB.useReportDB ? ['ArchiveSize'] : []),
- ...reportDB.cacheColumns.filter((c) => c !== 'Tenant'),
- ]
-
- return (
- <>
-
- All mailboxes report 0 storage used, which usually means Microsoft 365 report
- anonymization is enabled for this tenant.
-
- }
- cardButton={
-
-
- }
- dataSourceControls={reportDB.controls}
- />
- {reportDB.syncDialog}
-
- )
-}
-
-Page.getLayout = (page) => {page}
-
-export default Page
diff --git a/src/pages/email/administration/mailboxes/index.jsx b/src/pages/email/administration/mailboxes/index.jsx
new file mode 100644
index 000000000000..ec4a01316423
--- /dev/null
+++ b/src/pages/email/administration/mailboxes/index.jsx
@@ -0,0 +1,122 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
+import CippExchangeActions from '../../../../components/CippComponents/CippExchangeActions'
+import { CippSharedMailboxDrawer } from '../../../../components/CippComponents/CippSharedMailboxDrawer.jsx'
+import { useCippReportDB } from '../../../../components/CippComponents/CippReportDBControls'
+import {
+ CippAnonymizedReportAlert,
+ useReportAnonymized,
+} from '../../../../components/CippComponents/CippAnonymizedReportAlert'
+import { Stack } from '@mui/system'
+
+const Page = () => {
+ const pageTitle = 'Mailboxes'
+
+ const reportDB = useCippReportDB({
+ apiUrl: '/api/ListMailboxes',
+ queryKey: 'ListMailboxes',
+ cacheName: 'Mailboxes',
+ syncTitle: 'Sync Mailboxes',
+ allowToggle: true,
+ defaultCached: true,
+ serverPagination: true,
+ })
+
+ // Anonymized report names break the usage merge in the Mailboxes cache sync, leaving
+ // storageUsedInBytes at 0 for every mailbox (cached mode only — live mode has no usage data).
+ const allZeroStorage = useReportAnonymized({
+ url: reportDB.resolvedApiUrl,
+ queryKey: reportDB.resolvedQueryKey,
+ check: (rows) => rows.every((mailbox) => !Number(mailbox?.storageUsedInBytes)),
+ })
+
+ // Define off-canvas details
+ const offCanvas = {
+ extendedInfoFields: ['displayName', 'UPN', 'AdditionalEmailAddresses', 'recipientTypeDetails'],
+ actions: CippExchangeActions(),
+ }
+
+ const filterList = [
+ {
+ filterName: 'View User Mailboxes',
+ value: [{ id: 'recipientTypeDetails', value: 'UserMailbox' }],
+ type: 'column',
+ },
+ {
+ filterName: 'View Shared Mailboxes',
+ value: [{ id: 'recipientTypeDetails', value: 'SharedMailbox' }],
+ type: 'column',
+ },
+ {
+ filterName: 'View Room Mailboxes',
+ value: [{ id: 'recipientTypeDetails', value: 'RoomMailbox' }],
+ type: 'column',
+ },
+ {
+ filterName: 'View Equipment Mailboxes',
+ value: [{ id: 'recipientTypeDetails', value: 'EquipmentMailbox' }],
+ type: 'column',
+ },
+ {
+ filterName: 'View Archive-Enabled Mailboxes',
+ value: [{ id: 'ArchiveEnabled', value: true }],
+ type: 'column',
+ },
+ {
+ filterName: 'View Auto Expanding Archive Enabled',
+ value: [{ id: 'AutoExpandingArchive', value: true }],
+ type: 'column',
+ },
+ ]
+
+ // Simplified columns for the table
+ const simpleColumns = [
+ ...reportDB.cacheColumns.filter((c) => c === 'Tenant'),
+ 'displayName',
+ 'recipientTypeDetails',
+ 'UPN',
+ 'primarySmtpAddress',
+ 'AdditionalEmailAddresses',
+ ...(reportDB.useReportDB ? ['storageUsedInBytes'] : []),
+ 'ArchiveEnabled',
+ ...(reportDB.useReportDB ? ['ArchiveSize'] : []),
+ ...reportDB.cacheColumns.filter((c) => c !== 'Tenant'),
+ ]
+
+ return (
+ <>
+
+ All mailboxes report 0 storage used, which usually means Microsoft 365 report
+ anonymization is enabled for this tenant.
+
+ }
+ cardButton={
+
+
+ }
+ dataSourceControls={reportDB.controls}
+ />
+ {reportDB.syncDialog}
+
+ );
+}
+
+Page.getLayout = (page) => {page}
+
+export default Page
diff --git a/src/pages/email/administration/quarantine/files.js b/src/pages/email/administration/quarantine/files.js
deleted file mode 100644
index 7d17fadc36d7..000000000000
--- a/src/pages/email/administration/quarantine/files.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { TabbedLayout } from '../../../../layouts/TabbedLayout.jsx'
-import { CippQuarantineTable } from '../../../../components/CippComponents/CippQuarantineTable.jsx'
-import tabOptions from './tabOptions.json'
-
-const Page = () =>
- {page}
-
-)
-
-export default Page
diff --git a/src/pages/email/administration/quarantine/files.jsx b/src/pages/email/administration/quarantine/files.jsx
new file mode 100644
index 000000000000..e2bd1943bd75
--- /dev/null
+++ b/src/pages/email/administration/quarantine/files.jsx
@@ -0,0 +1,14 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { TabbedLayout } from '../../../../layouts/TabbedLayout.jsx'
+import { CippQuarantineTable } from '../../../../components/CippComponents/CippQuarantineTable.jsx'
+import tabOptions from './tabOptions.json'
+
+const Page = () =>
+ {page}
+
+)
+
+export default Page
diff --git a/src/pages/email/administration/quarantine/index.js b/src/pages/email/administration/quarantine/index.js
deleted file mode 100644
index 693f2434fecd..000000000000
--- a/src/pages/email/administration/quarantine/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { TabbedLayout } from '../../../../layouts/TabbedLayout.jsx'
-import { CippQuarantineTable } from '../../../../components/CippComponents/CippQuarantineTable.jsx'
-import tabOptions from './tabOptions.json'
-
-const Page = () =>
- {page}
-
-)
-
-export default Page
diff --git a/src/pages/email/administration/quarantine/index.jsx b/src/pages/email/administration/quarantine/index.jsx
new file mode 100644
index 000000000000..5a329c5f7822
--- /dev/null
+++ b/src/pages/email/administration/quarantine/index.jsx
@@ -0,0 +1,14 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { TabbedLayout } from '../../../../layouts/TabbedLayout.jsx'
+import { CippQuarantineTable } from '../../../../components/CippComponents/CippQuarantineTable.jsx'
+import tabOptions from './tabOptions.json'
+
+const Page = () =>
+ {page}
+
+)
+
+export default Page
diff --git a/src/pages/email/administration/quarantine/tabOptions.json b/src/pages/email/administration/quarantine/tabOptions.json
index b431bab37be2..39974264e7e8 100644
--- a/src/pages/email/administration/quarantine/tabOptions.json
+++ b/src/pages/email/administration/quarantine/tabOptions.json
@@ -13,5 +13,10 @@
"label": "Teams Messages",
"path": "/email/administration/quarantine/teams",
"icon": "Groups"
+ },
+ {
+ "label": "User Reported",
+ "path": "/email/administration/quarantine/user-reported",
+ "icon": "Flag"
}
]
diff --git a/src/pages/email/administration/quarantine/teams.js b/src/pages/email/administration/quarantine/teams.js
deleted file mode 100644
index 4bbe6f3eda3a..000000000000
--- a/src/pages/email/administration/quarantine/teams.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { TabbedLayout } from '../../../../layouts/TabbedLayout.jsx'
-import { CippQuarantineTable } from '../../../../components/CippComponents/CippQuarantineTable.jsx'
-import tabOptions from './tabOptions.json'
-
-const Page = () =>
- {page}
-
-)
-
-export default Page
diff --git a/src/pages/email/administration/quarantine/teams.jsx b/src/pages/email/administration/quarantine/teams.jsx
new file mode 100644
index 000000000000..f9a56791cdb5
--- /dev/null
+++ b/src/pages/email/administration/quarantine/teams.jsx
@@ -0,0 +1,14 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { TabbedLayout } from '../../../../layouts/TabbedLayout.jsx'
+import { CippQuarantineTable } from '../../../../components/CippComponents/CippQuarantineTable.jsx'
+import tabOptions from './tabOptions.json'
+
+const Page = () =>
+ {page}
+
+)
+
+export default Page
diff --git a/src/pages/email/administration/quarantine/user-reported.jsx b/src/pages/email/administration/quarantine/user-reported.jsx
new file mode 100644
index 000000000000..6be586ae7d86
--- /dev/null
+++ b/src/pages/email/administration/quarantine/user-reported.jsx
@@ -0,0 +1,14 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { TabbedLayout } from '../../../../layouts/TabbedLayout.jsx'
+import { CippUserReportedMessagesTable } from '../../../../components/CippComponents/CippUserReportedMessagesTable.jsx'
+import tabOptions from './tabOptions.json'
+
+const Page = () =>
+ {page}
+
+)
+
+export default Page
diff --git a/src/pages/email/administration/restricted-users/index.js b/src/pages/email/administration/restricted-users/index.js
deleted file mode 100644
index 8adf4ecdef57..000000000000
--- a/src/pages/email/administration/restricted-users/index.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { Alert, Link, Typography, List, ListItem, ListItemText } from "@mui/material";
-import { Block as BlockIcon } from "@mui/icons-material";
-
-const Page = () => {
- const pageTitle = "Restricted Users";
-
- const actions = [
- {
- label: "Unblock User",
- type: "POST",
- icon:
-
-
- Users in this list have been restricted from sending email due to exceeding outbound
- spam limits.
-
-
-
- This typically indicates a compromised account.{" "}
-
- Before unblocking, ensure you have properly secured the account.
-
-
-
- Recommended actions include:
-
-
- {page} ;
-
-export default Page;
diff --git a/src/pages/email/administration/restricted-users/index.jsx b/src/pages/email/administration/restricted-users/index.jsx
new file mode 100644
index 000000000000..2f6b0d03a097
--- /dev/null
+++ b/src/pages/email/administration/restricted-users/index.jsx
@@ -0,0 +1,96 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import { CippIcons } from "../../../../utils/icon-registry";
+import { Alert, Link, Typography, List, ListItem, ListItemText } from "@mui/material";
+
+const Page = () => {
+ const pageTitle = "Restricted Users";
+
+ const actions = [
+ {
+ label: "Unblock User",
+ type: "POST",
+ icon:
+
+
+ Users in this list have been restricted from sending email due to exceeding outbound
+ spam limits.
+
+
+
+ This typically indicates a compromised account.{" "}
+
+ Before unblocking, ensure you have properly secured the account.
+
+
+
+ Recommended actions include:
+
+
+ {page} ;
+
+export default Page;
diff --git a/src/pages/email/administration/tenant-allow-block-list-templates/index.js b/src/pages/email/administration/tenant-allow-block-list-templates/index.js
deleted file mode 100644
index 4e945b486c4d..000000000000
--- a/src/pages/email/administration/tenant-allow-block-list-templates/index.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useState } from 'react'
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
-import { Delete, Edit } from '@mui/icons-material'
-import CippJsonView from '../../../../components/CippFormPages/CippJSONView'
-import { CippTenantAllowBlockListTemplateDrawer } from '../../../../components/CippComponents/CippTenantAllowBlockListTemplateDrawer.jsx'
-
-const Page = () => {
- const pageTitle = 'Tenant Allow/Block List Templates'
- const [editDrawerVisible, setEditDrawerVisible] = useState(false)
- const [editData, setEditData] = useState(null)
-
- const actions = [
- {
- label: 'Edit Template',
- noConfirm: true,
- customFunction: (row) => {
- setEditData(row)
- setEditDrawerVisible(true)
- },
- icon: {
- setEditDrawerVisible(visible)
- if (!visible) setEditData(null)
- }}
- />
-
- )
-}
-
-Page.getLayout = (page) => {page}
-export default Page
diff --git a/src/pages/email/administration/tenant-allow-block-list-templates/index.jsx b/src/pages/email/administration/tenant-allow-block-list-templates/index.jsx
new file mode 100644
index 000000000000..f4f586c3f596
--- /dev/null
+++ b/src/pages/email/administration/tenant-allow-block-list-templates/index.jsx
@@ -0,0 +1,76 @@
+import { useState } from 'react'
+import { CippIcons } from '../../../../utils/icon-registry'
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
+import CippJsonView from '../../../../components/CippFormPages/CippJSONView'
+import { CippTenantAllowBlockListTemplateDrawer } from '../../../../components/CippComponents/CippTenantAllowBlockListTemplateDrawer.jsx'
+
+const Page = () => {
+ const pageTitle = 'Tenant Allow/Block List Templates'
+ const [editDrawerVisible, setEditDrawerVisible] = useState(false)
+ const [editData, setEditData] = useState(null)
+
+ const actions = [
+ {
+ label: 'Edit Template',
+ noConfirm: true,
+ customFunction: (row) => {
+ setEditData(row)
+ setEditDrawerVisible(true)
+ },
+ icon: {
+ setEditDrawerVisible(visible)
+ if (!visible) setEditData(null)
+ }}
+ />
+
+ )
+}
+
+Page.getLayout = (page) => {page}
+export default Page
diff --git a/src/pages/email/administration/tenant-allow-block-lists/index.js b/src/pages/email/administration/tenant-allow-block-lists/index.js
deleted file mode 100644
index 6a51ac4fbc75..000000000000
--- a/src/pages/email/administration/tenant-allow-block-lists/index.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
-import { Delete } from '@mui/icons-material'
-import { CippAddTenantAllowBlockListDrawer } from '../../../../components/CippComponents/CippAddTenantAllowBlockListDrawer.jsx'
-import { useCippReportDB } from '../../../../components/CippComponents/CippReportDBControls'
-import { Stack } from '@mui/system'
-
-const Page = () => {
- const pageTitle = 'Tenant Allow/Block Lists'
- const cardButtonPermissions = ['Exchange.SpamFilter.ReadWrite']
-
- const reportDB = useCippReportDB({
- apiUrl: '/api/ListTenantAllowBlockList',
- queryKey: 'ListTenantAllowBlockList',
- cacheName: 'ExoTenantAllowBlockList',
- syncTitle: 'Sync Tenant Allow/Block Lists',
- allowToggle: true,
- // Live by default: this is a management page, and a stale list right after an add or
- // remove reads as the action having failed.
- defaultCached: false,
- allowAllTenantSync: true,
- })
-
- const actions = [
- {
- label: 'Remove',
- type: 'POST',
- url: '/api/RemoveTenantAllowBlockList',
- data: {
- Entries: 'Value',
- ListType: 'ListType',
- },
- // Every row carries Tenant, which CippApiDialog uses as the tenantFilter in AllTenants mode.
- confirmText: 'Are you sure you want to delete this entry?',
- color: 'danger',
- icon:
- {page}
-
-export default Page
diff --git a/src/pages/email/administration/tenant-allow-block-lists/index.jsx b/src/pages/email/administration/tenant-allow-block-lists/index.jsx
new file mode 100644
index 000000000000..901c58d3ef4b
--- /dev/null
+++ b/src/pages/email/administration/tenant-allow-block-lists/index.jsx
@@ -0,0 +1,77 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippIcons } from '../../../../utils/icon-registry'
+import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
+import { CippAddTenantAllowBlockListDrawer } from '../../../../components/CippComponents/CippAddTenantAllowBlockListDrawer.jsx'
+import { useCippReportDB } from '../../../../components/CippComponents/CippReportDBControls'
+import { Stack } from '@mui/system'
+
+const Page = () => {
+ const pageTitle = 'Tenant Allow/Block Lists'
+ const cardButtonPermissions = ['Exchange.SpamFilter.ReadWrite']
+
+ const reportDB = useCippReportDB({
+ apiUrl: '/api/ListTenantAllowBlockList',
+ queryKey: 'ListTenantAllowBlockList',
+ cacheName: 'ExoTenantAllowBlockList',
+ syncTitle: 'Sync Tenant Allow/Block Lists',
+ allowToggle: true,
+ // Live by default: this is a management page, and a stale list right after an add or
+ // remove reads as the action having failed.
+ defaultCached: false,
+ allowAllTenantSync: true,
+ })
+
+ const actions = [
+ {
+ label: 'Remove',
+ type: 'POST',
+ url: '/api/RemoveTenantAllowBlockList',
+ data: {
+ Entries: 'Value',
+ ListType: 'ListType',
+ },
+ // Every row carries Tenant, which CippApiDialog uses as the tenantFilter in AllTenants mode.
+ confirmText: 'Are you sure you want to delete this entry?',
+ color: 'danger',
+ icon:
+ {page}
+
+export default Page
diff --git a/src/pages/email/reports/SharedMailboxEnabledAccount/index.js b/src/pages/email/reports/SharedMailboxEnabledAccount/index.js
deleted file mode 100644
index 79c81d12995e..000000000000
--- a/src/pages/email/reports/SharedMailboxEnabledAccount/index.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { Block } from "@mui/icons-material";
-import { useCippReportDB } from "../../../../components/CippComponents/CippReportDBControls";
-
-const Page = () => {
- const reportDB = useCippReportDB({
- apiUrl: "/api/ListSharedMailboxAccountEnabled",
- queryKey: "ListSharedMailboxAccountEnabled",
- cacheName: "Mailboxes",
- syncTitle: "Sync Shared Mailbox Cache",
- allowToggle: true,
- defaultCached: false,
- });
-
- const simpleColumns = [
- ...reportDB.cacheColumns.filter((c) => c === "Tenant"),
- "UserPrincipalName",
- "displayName",
- "accountEnabled",
- "assignedLicenses",
- "onPremisesSyncEnabled",
- ...reportDB.cacheColumns.filter((c) => c !== "Tenant"),
- ];
-
- return (
- <>
- {page} ;
-
-export default Page;
diff --git a/src/pages/email/reports/SharedMailboxEnabledAccount/index.jsx b/src/pages/email/reports/SharedMailboxEnabledAccount/index.jsx
new file mode 100644
index 000000000000..52d38fa95b43
--- /dev/null
+++ b/src/pages/email/reports/SharedMailboxEnabledAccount/index.jsx
@@ -0,0 +1,69 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import { useCippReportDB } from "../../../../components/CippComponents/CippReportDBControls";
+
+const Page = () => {
+ const reportDB = useCippReportDB({
+ apiUrl: "/api/ListSharedMailboxAccountEnabled",
+ queryKey: "ListSharedMailboxAccountEnabled",
+ cacheName: "Mailboxes",
+ syncTitle: "Sync Shared Mailbox Cache",
+ allowToggle: true,
+ defaultCached: false,
+ });
+
+ const simpleColumns = [
+ ...reportDB.cacheColumns.filter((c) => c === "Tenant"),
+ "UserPrincipalName",
+ "displayName",
+ "accountEnabled",
+ "assignedLicenses",
+ "onPremisesSyncEnabled",
+ ...reportDB.cacheColumns.filter((c) => c !== "Tenant"),
+ ];
+
+ return (
+ <>
+ {page} ;
+
+export default Page;
+
diff --git a/src/pages/email/reports/activesync-devices/index.js b/src/pages/email/reports/activesync-devices/index.js
deleted file mode 100644
index 4ddd6306cd99..000000000000
--- a/src/pages/email/reports/activesync-devices/index.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
-import { Block, CheckCircle } from '@mui/icons-material'
-import { TrashIcon } from '@heroicons/react/24/outline'
-
-const Page = () => {
- const actions = [
- {
- label: 'Allow Device',
- type: 'GET',
- icon: {page}
-
-export default Page
diff --git a/src/pages/email/reports/activesync-devices/index.jsx b/src/pages/email/reports/activesync-devices/index.jsx
new file mode 100644
index 000000000000..df0a749b9074
--- /dev/null
+++ b/src/pages/email/reports/activesync-devices/index.jsx
@@ -0,0 +1,104 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippIcons } from '../../../../utils/icon-registry'
+import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
+
+const Page = () => {
+ const actions = [
+ {
+ label: 'Allow Device',
+ type: 'POST',
+ icon: {page}
+
+export default Page
+
diff --git a/src/pages/email/reports/antiphishing-filters/index.js b/src/pages/email/reports/antiphishing-filters/index.js
deleted file mode 100644
index d23dea441539..000000000000
--- a/src/pages/email/reports/antiphishing-filters/index.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { Block, Check } from "@mui/icons-material";
-
-const Page = () => {
- const pageTitle = "List of Anti-Phishing Filters";
-
- // Actions to perform (Enable/Disable/Delete Rules) - Delete Rule is commented for review
- const actions = [
- {
- label: "Enable Rule",
- type: "POST",
- icon: {page} ;
-
-export default Page;
diff --git a/src/pages/email/reports/antiphishing-filters/index.jsx b/src/pages/email/reports/antiphishing-filters/index.jsx
new file mode 100644
index 000000000000..cbbea1a73db8
--- /dev/null
+++ b/src/pages/email/reports/antiphishing-filters/index.jsx
@@ -0,0 +1,103 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+
+const Page = () => {
+ const pageTitle = "List of Anti-Phishing Filters";
+
+ // Actions to perform (Enable/Disable/Delete Rules) - Delete Rule is commented for review
+ const actions = [
+ {
+ label: "Enable Rule",
+ type: "POST",
+ icon: {page} ;
+
+export default Page;
diff --git a/src/pages/email/reports/calendar-permissions/index.js b/src/pages/email/reports/calendar-permissions/index.js
deleted file mode 100644
index 1482b80e4136..000000000000
--- a/src/pages/email/reports/calendar-permissions/index.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
-import { useState } from 'react'
-import { Tooltip, Chip } from '@mui/material'
-import { Stack } from '@mui/system'
-import { Person, CalendarMonth } from '@mui/icons-material'
-import { useCippReportDB } from '../../../../components/CippComponents/CippReportDBControls'
-
-const Page = () => {
- const [byUser, setByUser] = useState(true)
-
- const reportDB = useCippReportDB({
- apiUrl: '/api/ListCalendarPermissions',
- queryKey: 'calendar-permissions',
- cacheName: 'Mailboxes',
- syncTitle: 'Sync Calendar Permissions Cache',
- syncData: { Types: 'CalendarPermissions' },
- allowToggle: false,
- defaultCached: true,
- cacheColumns: ['MailboxCacheTimestamp', 'PermissionCacheTimestamp'],
- })
-
- const columns = byUser
- ? [
- ...reportDB.cacheColumns.filter((c) => c === 'Tenant'),
- 'User',
- 'UserMailboxType',
- 'Permissions',
- ...reportDB.cacheColumns.filter((c) => c !== 'Tenant'),
- ]
- : [
- ...reportDB.cacheColumns.filter((c) => c === 'Tenant'),
- 'CalendarUPN',
- 'CalendarDisplayName',
- 'CalendarType',
- 'Permissions',
- ...reportDB.cacheColumns.filter((c) => c !== 'Tenant'),
- ]
-
- const pageActions = (
-
-
-
-
- )
-
- return (
- <>
- {page}
-
-export default Page
diff --git a/src/pages/email/reports/calendar-permissions/index.jsx b/src/pages/email/reports/calendar-permissions/index.jsx
new file mode 100644
index 000000000000..9f0597fb84a8
--- /dev/null
+++ b/src/pages/email/reports/calendar-permissions/index.jsx
@@ -0,0 +1,84 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippIcons } from '../../../../utils/icon-registry'
+import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
+import { useState } from 'react'
+import { Tooltip, Chip } from '@mui/material'
+import { Stack } from '@mui/system'
+import { useCippReportDB } from '../../../../components/CippComponents/CippReportDBControls'
+
+const Page = () => {
+ const [byUser, setByUser] = useState(true)
+
+ const reportDB = useCippReportDB({
+ apiUrl: '/api/ListCalendarPermissions',
+ queryKey: 'calendar-permissions',
+ cacheName: 'Mailboxes',
+ syncTitle: 'Sync Calendar Permissions Cache',
+ syncData: { Types: 'CalendarPermissions' },
+ allowToggle: false,
+ defaultCached: true,
+ cacheColumns: ['MailboxCacheTimestamp', 'PermissionCacheTimestamp'],
+ })
+
+ const columns = byUser
+ ? [
+ ...reportDB.cacheColumns.filter((c) => c === 'Tenant'),
+ 'User',
+ 'UserMailboxType',
+ 'Permissions',
+ ...reportDB.cacheColumns.filter((c) => c !== 'Tenant'),
+ ]
+ : [
+ ...reportDB.cacheColumns.filter((c) => c === 'Tenant'),
+ 'CalendarUPN',
+ 'CalendarDisplayName',
+ 'CalendarType',
+ 'Permissions',
+ ...reportDB.cacheColumns.filter((c) => c !== 'Tenant'),
+ ]
+
+ const pageActions = (
+
+
+
+
+ )
+
+ return (
+ <>
+ {page}
+
+export default Page
diff --git a/src/pages/email/reports/global-address-list/index.js b/src/pages/email/reports/global-address-list/index.js
deleted file mode 100644
index adbe3ae6b86d..000000000000
--- a/src/pages/email/reports/global-address-list/index.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { Visibility, VisibilityOff } from "@mui/icons-material";
-
-const Page = () => {
- const actions = [
- {
- label: "Unhide from Global Address List",
- type: "POST",
- url: "/api/ExecHideFromGAL",
- icon: {page} ;
-
-export default Page;
diff --git a/src/pages/email/reports/global-address-list/index.jsx b/src/pages/email/reports/global-address-list/index.jsx
new file mode 100644
index 000000000000..f8471ec5b5fc
--- /dev/null
+++ b/src/pages/email/reports/global-address-list/index.jsx
@@ -0,0 +1,86 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+
+const Page = () => {
+ const actions = [
+ {
+ label: "Unhide from Global Address List",
+ type: "POST",
+ url: "/api/ExecHideFromGAL",
+ icon: {page} ;
+
+export default Page;
diff --git a/src/pages/email/reports/mail-flow-statistics/index.jsx b/src/pages/email/reports/mail-flow-statistics/index.jsx
new file mode 100644
index 000000000000..f5febb3cf552
--- /dev/null
+++ b/src/pages/email/reports/mail-flow-statistics/index.jsx
@@ -0,0 +1,317 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippIcons } from '../../../../utils/icon-registry'
+import {
+ Box,
+ Button,
+ ButtonGroup,
+ Card,
+ CardContent,
+ CardHeader,
+ Divider,
+ Skeleton,
+ Stack,
+} from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+import { Grid } from '@mui/system'
+import { useMemo, useState } from 'react'
+import { SvgIcon } from '@mui/material'
+import { Chart } from '../../../../components/chart'
+import { CippChartCard } from '../../../../components/CippCards/CippChartCard'
+import { CippInfoBar } from '../../../../components/CippCards/CippInfoBar'
+import { CippDataTable } from '../../../../components/CippTable/CippDataTable'
+import { ApiGetCall } from '../../../../api/ApiCall'
+import { useSettings } from '../../../../hooks/use-settings'
+import { MailFlowReportButton } from '../../../../components/CippPdf/MailFlowReportButton'
+
+const dayOptions = [7, 14, 30, 90]
+
+// Get-MailFlowStatusReport event types, in stack order
+const eventTypes = [
+ { key: 'GoodMail', label: 'Good mail' },
+ { key: 'TransportRules', label: 'Transport rules' },
+ { key: 'SpamDetections', label: 'Spam' },
+ { key: 'EdgeBlockSpam', label: 'Edge blocked spam' },
+ { key: 'EmailPhish', label: 'Phish' },
+ { key: 'EmailMalware', label: 'Malware' },
+]
+
+const Page = () => {
+ const theme = useTheme()
+ const tenantFilter = useSettings().currentTenant
+ const [days, setDays] = useState(14)
+
+ const flowReport = ApiGetCall({
+ url: '/api/ListMailFlowReports',
+ data: {
+ tenantFilter: tenantFilter,
+ reportType: 'MailFlowStatus',
+ days: days,
+ },
+ queryKey: `MailFlowStatus-${tenantFilter}-${days}`,
+ waiting: !!tenantFilter,
+ })
+
+ const topSenders = ApiGetCall({
+ url: '/api/ListMailFlowReports',
+ data: {
+ tenantFilter: tenantFilter,
+ reportType: 'TrafficSummary',
+ category: 'TopMailSender',
+ days: days,
+ },
+ queryKey: `MailFlowTopSenders-${tenantFilter}-${days}`,
+ waiting: !!tenantFilter,
+ })
+
+ const topSpamRecipients = ApiGetCall({
+ url: '/api/ListMailFlowReports',
+ data: {
+ tenantFilter: tenantFilter,
+ reportType: 'TrafficSummary',
+ category: 'TopSpamRecipient',
+ days: days,
+ },
+ queryKey: `MailFlowTopSpam-${tenantFilter}-${days}`,
+ waiting: !!tenantFilter,
+ })
+
+ const flowRows = useMemo(
+ () => flowReport.data?.Results ?? [],
+ [flowReport.data]
+ )
+
+ const { chartLabels, chartSeries, dailyTotals, totals, directionSeries } = useMemo(() => {
+ const dates = [...new Set(flowRows.map((r) => r.Date))].sort()
+ const byDateAndType = {}
+ const typeTotals = {}
+ const dirTotals = { Inbound: 0, Outbound: 0, IntraOrg: 0 }
+ for (const row of flowRows) {
+ const count = Number(row.Count) || 0
+ byDateAndType[`${row.Date}|${row.EventType}`] =
+ (byDateAndType[`${row.Date}|${row.EventType}`] ?? 0) + count
+ typeTotals[row.EventType] = (typeTotals[row.EventType] ?? 0) + count
+ if (dirTotals[row.Direction] !== undefined)
+ dirTotals[row.Direction] += count
+ }
+ return {
+ chartLabels: dates.map((d) =>
+ new Date(d).toLocaleDateString(undefined, {
+ month: 'short',
+ day: 'numeric',
+ })
+ ),
+ chartSeries: eventTypes.map((t) => ({
+ name: t.label,
+ data: dates.map((d) => byDateAndType[`${d}|${t.key}`] ?? 0),
+ })),
+ dailyTotals: dates.map((d) =>
+ eventTypes.reduce((row, t) => ({ ...row, [t.key]: byDateAndType[`${d}|${t.key}`] ?? 0 }), {
+ date: d,
+ })
+ ),
+ totals: typeTotals,
+ directionSeries: dirTotals,
+ }
+ }, [flowRows])
+
+ const totalMail = Object.values(totals).reduce((a, b) => a + b, 0)
+ const goodMailPct = totalMail
+ ? Math.round(((totals.GoodMail ?? 0) / totalMail) * 1000) / 10
+ : 0
+
+ const mailFlowData = useMemo(
+ () => ({
+ days,
+ totals,
+ directionTotals: directionSeries,
+ daily: dailyTotals,
+ topSenders: topSenders.data?.Results ?? [],
+ topSpamRecipients: topSpamRecipients.data?.Results ?? [],
+ }),
+ [
+ days,
+ totals,
+ directionSeries,
+ dailyTotals,
+ topSenders.data,
+ topSpamRecipients.data,
+ ]
+ )
+
+ const infoBarData = [
+ {
+ icon: (
+
+
+ ),
+ name: `Total mail - ${days} days`,
+ data: flowReport.isFetching ? '...' : totalMail.toLocaleString(),
+ },
+ {
+ icon: (
+
+
+ ),
+ name: 'Good mail',
+ data: flowReport.isFetching ? '...' : `${goodMailPct}%`,
+ color: 'success.main',
+ },
+ {
+ icon: (
+
+
+ ),
+ name: 'Phish caught',
+ data: flowReport.isFetching
+ ? '...'
+ : (totals.EmailPhish ?? 0).toLocaleString(),
+ color: 'warning.main',
+ },
+ {
+ icon: (
+
+
+ ),
+ name: 'Malware blocked',
+ data: flowReport.isFetching
+ ? '...'
+ : (totals.EmailMalware ?? 0).toLocaleString(),
+ color: 'error.main',
+ },
+ ]
+
+ const stackedChartOptions = {
+ chart: {
+ background: 'transparent',
+ stacked: true,
+ toolbar: { show: false },
+ },
+ colors: [
+ theme.palette.success.main,
+ theme.palette.info.main,
+ theme.palette.warning.main,
+ theme.palette.warning.dark,
+ theme.palette.secondary.main,
+ theme.palette.error.main,
+ ],
+ dataLabels: { enabled: false },
+ // ApexCharts' theme.mode leaves the grid at its #e0e0e0 default, which draws near-white
+ // rules on a dark card; the theme's divider is correct in both modes.
+ grid: { borderColor: theme.palette.divider },
+ xaxis: {
+ categories: chartLabels,
+ labels: { show: true, rotate: 0, style: { fontSize: '12px' } },
+ axisBorder: { color: theme.palette.divider },
+ axisTicks: { color: theme.palette.divider },
+ tickPlacement: 'on',
+ },
+ legend: { show: true, position: 'bottom' },
+ plotOptions: { bar: { columnWidth: '60%' } },
+ stroke: { width: 1, colors: [theme.palette.background.paper] },
+ theme: { mode: theme.palette.mode },
+ tooltip: { fillSeriesColor: false },
+ }
+
+ return (
+
+ {/* KPI tiles take the full width on phones; the period selector and export drop to their own row. */}
+
+
+
+
+
+ {dayOptions.map((d) => (
+
+ ))}
+
+
+
+
+
+
+
+ {flowReport.isFetching ? (
+
+
+
+
+
+
+ topSenders.refetch()}
+ />
+
+
+ topSpamRecipients.refetch()}
+ />
+
+
+
+ );
+}
+
+Page.getLayout = (page) => (
+ {page}
+)
+export default Page
diff --git a/src/pages/email/reports/mailbox-activity/index.js b/src/pages/email/reports/mailbox-activity/index.js
deleted file mode 100644
index 970cbe2095ed..000000000000
--- a/src/pages/email/reports/mailbox-activity/index.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import { useState } from "react";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import {
- Button,
- Accordion,
- AccordionSummary,
- AccordionDetails,
- Typography,
- SvgIcon,
- Stack,
-} from "@mui/material";
-import { Grid } from "@mui/system";
-import { ExpandMore, Sort } from "@mui/icons-material";
-import { FunnelIcon, XMarkIcon } from "@heroicons/react/24/outline";
-import { useForm } from "react-hook-form";
-import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
-import {
- CippAnonymizedReportAlert,
- useReportAnonymized,
-} from "../../../../components/CippComponents/CippAnonymizedReportAlert";
-
-const Page = () => {
- const formControl = useForm({
- defaultValues: {
- period: { value: "D30", label: "30 days" },
- },
- });
-
- const [expanded, setExpanded] = useState(false);
- const [selectedPeriod, setSelectedPeriod] = useState("D30");
- const [selectedPeriodLabel, setSelectedPeriodLabel] = useState("30 days");
-
- const periodOptions = [
- { value: "D7", label: "7 days" },
- { value: "D30", label: "30 days" },
- { value: "D90", label: "90 days" },
- { value: "D180", label: "180 days" },
- ];
-
- const onSubmit = (data) => {
- const periodValue =
- typeof data.period === "object" && data.period?.value ? data.period.value : data.period;
- const periodLabel =
- typeof data.period === "object" && data.period?.label ? data.period.label : data.period;
-
- setSelectedPeriod(periodValue);
- setSelectedPeriodLabel(periodLabel);
- setExpanded(false);
- };
-
- const clearFilters = () => {
- formControl.reset({
- period: { value: "D30", label: "30 days" },
- });
- setSelectedPeriod("D30");
- setSelectedPeriodLabel("30 days");
- setExpanded(false);
- };
-
- const anonymized = useReportAnonymized({
- url: "/api/ListGraphRequest",
- data: {
- Endpoint: `reports/getEmailActivityUserDetail(period='${selectedPeriod}')`,
- $format: "application/json",
- Sort: "userPrincipalName",
- },
- queryKey: `MailboxActivity-${selectedPeriod}`,
- dataKey: "Results",
- fields: ["userPrincipalName", "displayName"],
- });
-
- const tableFilter = (
- setExpanded(!expanded)}>
-
-
-
-
- Report Period
-
- (Period: {selectedPeriodLabel})
-
-
-
-
-
-
-
-
- );
-
- return (
-
- {page} ;
-
-export default Page;
diff --git a/src/pages/email/reports/mailbox-activity/index.jsx b/src/pages/email/reports/mailbox-activity/index.jsx
new file mode 100644
index 000000000000..8b81d70ad89d
--- /dev/null
+++ b/src/pages/email/reports/mailbox-activity/index.jsx
@@ -0,0 +1,176 @@
+import { useState } from "react";
+import { CippIcons } from "../../../../utils/icon-registry";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import {
+ Button,
+ Accordion,
+ AccordionSummary,
+ AccordionDetails,
+ Typography,
+ SvgIcon,
+ Stack,
+} from "@mui/material";
+import { Grid } from "@mui/system";
+import { useForm } from "react-hook-form";
+import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
+import {
+ CippAnonymizedReportAlert,
+ useReportAnonymized,
+} from "../../../../components/CippComponents/CippAnonymizedReportAlert";
+
+const Page = () => {
+ const formControl = useForm({
+ defaultValues: {
+ period: { value: "D30", label: "30 days" },
+ },
+ });
+
+ const [expanded, setExpanded] = useState(false);
+ const [selectedPeriod, setSelectedPeriod] = useState("D30");
+ const [selectedPeriodLabel, setSelectedPeriodLabel] = useState("30 days");
+
+ const periodOptions = [
+ { value: "D7", label: "7 days" },
+ { value: "D30", label: "30 days" },
+ { value: "D90", label: "90 days" },
+ { value: "D180", label: "180 days" },
+ ];
+
+ const onSubmit = (data) => {
+ const periodValue =
+ typeof data.period === "object" && data.period?.value ? data.period.value : data.period;
+ const periodLabel =
+ typeof data.period === "object" && data.period?.label ? data.period.label : data.period;
+
+ setSelectedPeriod(periodValue);
+ setSelectedPeriodLabel(periodLabel);
+ setExpanded(false);
+ };
+
+ const clearFilters = () => {
+ formControl.reset({
+ period: { value: "D30", label: "30 days" },
+ });
+ setSelectedPeriod("D30");
+ setSelectedPeriodLabel("30 days");
+ setExpanded(false);
+ };
+
+ const anonymized = useReportAnonymized({
+ url: "/api/ListGraphRequest",
+ data: {
+ Endpoint: `reports/getEmailActivityUserDetail(period='${selectedPeriod}')`,
+ $format: "application/json",
+ Sort: "userPrincipalName",
+ },
+ queryKey: `MailboxActivity-${selectedPeriod}`,
+ dataKey: "Results",
+ fields: ["userPrincipalName", "displayName"],
+ });
+
+ const tableFilter = (
+ setExpanded(!expanded)}>
+
+
+
+
+ Report Period
+
+ (Period: {selectedPeriodLabel})
+
+
+
+
+
+
+
+
+ );
+
+ return (
+
+ {page} ;
+
+export default Page;
diff --git a/src/pages/email/reports/mailbox-cas-settings/index.js b/src/pages/email/reports/mailbox-cas-settings/index.js
deleted file mode 100644
index 5ae9d75cc3d8..000000000000
--- a/src/pages/email/reports/mailbox-cas-settings/index.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
-import { useSettings } from '../../../../hooks/use-settings.js'
-import { Tune } from '@mui/icons-material'
-
-// CAS protocols that can be toggled, keyed by their Set-CASMailbox parameter.
-// Most flags follow "*Enabled" (true = on). The inverted "*Disabled" flag
-// (SMTP client auth) is the opposite: true = off.
-const casProtocols = {
- ECPEnabled: 'ECP (Exchange Control Panel)',
- EWSEnabled: 'EWS (Exchange Web Services)',
- IMAPEnabled: 'IMAP',
- MAPIEnabled: 'MAPI',
- OWAEnabled: 'OWA (Outlook on the Web)',
- POPEnabled: 'POP',
- ActiveSyncEnabled: 'ActiveSync',
- SmtpClientAuthenticationDisabled: 'SMTP Client Authentication',
-}
-
-const Page = () => {
- const tenantFilter = useSettings().currentTenant
-
- // A single action lets the operator pick which protocols to enable or disable.
- // Each selected protocol becomes a Set-CASMailbox flag, accounting for the inverted
- // "*Disabled" parameter, and one request is sent per selected mailbox.
- const actions = [
- {
- label: 'Set Client Access Protocols',
- type: 'POST',
- icon: {page}
-
-export default Page
diff --git a/src/pages/email/reports/mailbox-cas-settings/index.jsx b/src/pages/email/reports/mailbox-cas-settings/index.jsx
new file mode 100644
index 000000000000..f399554cbc02
--- /dev/null
+++ b/src/pages/email/reports/mailbox-cas-settings/index.jsx
@@ -0,0 +1,102 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippIcons } from '../../../../utils/icon-registry'
+import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
+import { useSettings } from '../../../../hooks/use-settings.js'
+
+// CAS protocols that can be toggled, keyed by their Set-CASMailbox parameter.
+// Most flags follow "*Enabled" (true = on). The inverted "*Disabled" flag
+// (SMTP client auth) is the opposite: true = off.
+const casProtocols = {
+ ECPEnabled: 'ECP (Exchange Control Panel)',
+ EWSEnabled: 'EWS (Exchange Web Services)',
+ IMAPEnabled: 'IMAP',
+ MAPIEnabled: 'MAPI',
+ OWAEnabled: 'OWA (Outlook on the Web)',
+ POPEnabled: 'POP',
+ ActiveSyncEnabled: 'ActiveSync',
+ SmtpClientAuthenticationDisabled: 'SMTP Client Authentication',
+}
+
+const Page = () => {
+ const tenantFilter = useSettings().currentTenant
+
+ // A single action lets the operator pick which protocols to enable or disable.
+ // Each selected protocol becomes a Set-CASMailbox flag, accounting for the inverted
+ // "*Disabled" parameter, and one request is sent per selected mailbox.
+ const actions = [
+ {
+ label: 'Set Client Access Protocols',
+ type: 'POST',
+ icon: {page}
+
+export default Page
diff --git a/src/pages/email/reports/mailbox-forwarding/index.js b/src/pages/email/reports/mailbox-forwarding/index.js
deleted file mode 100644
index 8fbf2ee7aae6..000000000000
--- a/src/pages/email/reports/mailbox-forwarding/index.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { useCippReportDB } from "../../../../components/CippComponents/CippReportDBControls";
-
-const Page = () => {
- const reportDB = useCippReportDB({
- apiUrl: "/api/ListMailboxForwarding",
- queryKey: "mailbox-forwarding",
- cacheName: "Mailboxes",
- syncTitle: "Sync Mailbox Cache",
- allowToggle: false,
- defaultCached: true,
- });
-
- const columns = [
- ...reportDB.cacheColumns.filter((c) => c === "Tenant"),
- "UPN",
- "DisplayName",
- "RecipientTypeDetails",
- "ForwardingType",
- "ForwardTo",
- "DeliverToMailboxAndForward",
- ...reportDB.cacheColumns.filter((c) => c !== "Tenant"),
- ];
-
- const filters = [
- {
- filterName: "External Forwarding",
- value: [{ id: "ForwardingType", value: "External" }],
- type: "column",
- },
- {
- filterName: "Internal Forwarding",
- value: [{ id: "ForwardingType", value: "Internal" }],
- type: "column",
- },
- ];
-
- return (
- <>
- {page} ;
-
-export default Page;
diff --git a/src/pages/email/reports/mailbox-forwarding/index.jsx b/src/pages/email/reports/mailbox-forwarding/index.jsx
new file mode 100644
index 000000000000..baa092ff7748
--- /dev/null
+++ b/src/pages/email/reports/mailbox-forwarding/index.jsx
@@ -0,0 +1,58 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import { useCippReportDB } from "../../../../components/CippComponents/CippReportDBControls";
+
+const Page = () => {
+ const reportDB = useCippReportDB({
+ apiUrl: "/api/ListMailboxForwarding",
+ queryKey: "mailbox-forwarding",
+ cacheName: "Mailboxes",
+ syncTitle: "Sync Mailbox Cache",
+ allowToggle: false,
+ defaultCached: true,
+ });
+
+ const columns = [
+ ...reportDB.cacheColumns.filter((c) => c === "Tenant"),
+ "UPN",
+ "DisplayName",
+ "RecipientTypeDetails",
+ "ForwardingType",
+ "ForwardTo",
+ "DeliverToMailboxAndForward",
+ ...reportDB.cacheColumns.filter((c) => c !== "Tenant"),
+ ];
+
+ const filters = [
+ {
+ filterName: "External Forwarding",
+ value: [{ id: "ForwardingType", value: "External" }],
+ type: "column",
+ },
+ {
+ filterName: "Internal Forwarding",
+ value: [{ id: "ForwardingType", value: "Internal" }],
+ type: "column",
+ },
+ ];
+
+ return (
+ <>
+ {page} ;
+
+export default Page;
diff --git a/src/pages/email/reports/mailbox-permissions/index.js b/src/pages/email/reports/mailbox-permissions/index.js
deleted file mode 100644
index bd05a2005ab7..000000000000
--- a/src/pages/email/reports/mailbox-permissions/index.js
+++ /dev/null
@@ -1,208 +0,0 @@
-import { Layout as DashboardLayout } from '../../../../layouts/index.js'
-import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
-import { useState } from 'react'
-import { Tooltip, Chip } from '@mui/material'
-import { Stack } from '@mui/system'
-import { Person, Inbox, Delete } from '@mui/icons-material'
-import { useCippReportDB } from '../../../../components/CippComponents/CippReportDBControls'
-
-const Page = () => {
- const [byUser, setByUser] = useState(true)
-
- const reportDB = useCippReportDB({
- apiUrl: '/api/ListMailboxPermissions',
- queryKey: 'mailbox-permissions',
- cacheName: 'Mailboxes',
- syncTitle: 'Sync Mailbox Permissions Cache',
- syncData: { Types: 'Permissions' },
- allowToggle: false,
- defaultCached: true,
- cacheColumns: ['MailboxCacheTimestamp', 'PermissionCacheTimestamp'],
- })
-
- // Refetch both views after a removal — the endpoint now syncs the cached report
- const relatedQueryKeys = [
- `${reportDB.resolvedQueryKey}-true`,
- `${reportDB.resolvedQueryKey}-false`,
- ]
-
- const byMailboxActions = [
- {
- label: 'Bulk Remove Mailbox Permissions',
- type: 'POST',
- url: '/api/ExecModifyMBPerms',
- icon:
-
-
-
- )
-
- return (
- <>
- {page}
-
-export default Page
diff --git a/src/pages/email/reports/mailbox-permissions/index.jsx b/src/pages/email/reports/mailbox-permissions/index.jsx
new file mode 100644
index 000000000000..809e59518dd7
--- /dev/null
+++ b/src/pages/email/reports/mailbox-permissions/index.jsx
@@ -0,0 +1,210 @@
+import { Layout as DashboardLayout } from '../../../../layouts/index'
+import { CippIcons } from '../../../../utils/icon-registry'
+import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
+import { useState } from 'react'
+import { Tooltip, Chip } from '@mui/material'
+import { Stack } from '@mui/system'
+import { useCippReportDB } from '../../../../components/CippComponents/CippReportDBControls'
+
+const Page = () => {
+ const [byUser, setByUser] = useState(true)
+
+ const reportDB = useCippReportDB({
+ apiUrl: '/api/ListMailboxPermissions',
+ queryKey: 'mailbox-permissions',
+ cacheName: 'Mailboxes',
+ syncTitle: 'Sync Mailbox Permissions Cache',
+ syncData: { Types: 'Permissions' },
+ allowToggle: false,
+ defaultCached: true,
+ cacheColumns: ['MailboxCacheTimestamp', 'PermissionCacheTimestamp'],
+ })
+
+ // Refetch both views after a removal — the endpoint now syncs the cached report
+ const relatedQueryKeys = [
+ `${reportDB.resolvedQueryKey}-true`,
+ `${reportDB.resolvedQueryKey}-false`,
+ ]
+
+ const byMailboxActions = [
+ {
+ label: 'Bulk Remove Mailbox Permissions',
+ type: 'POST',
+ url: '/api/ExecModifyMBPerms',
+ icon:
+
+
+
+ )
+
+ return (
+ <>
+ {page}
+
+export default Page
diff --git a/src/pages/email/reports/mailbox-statistics/index.js b/src/pages/email/reports/mailbox-statistics/index.js
deleted file mode 100644
index 44fa34b06c5e..000000000000
--- a/src/pages/email/reports/mailbox-statistics/index.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import {
- CippAnonymizedReportAlert,
- useReportAnonymized,
-} from "../../../../components/CippComponents/CippAnonymizedReportAlert";
-import { useSettings } from "../../../../hooks/use-settings";
-
-const Page = () => {
- const tenant = useSettings().currentTenant;
- const apiData = {
- Endpoint: "reports/getMailboxUsageDetail(period='D7')",
- $format: "application/json",
- };
- const queryKey = `MailboxStatistics-${tenant}`;
-
- const anonymized = useReportAnonymized({
- url: "/api/ListGraphRequest",
- data: apiData,
- queryKey: queryKey,
- dataKey: "Results",
- fields: ["userPrincipalName", "displayName"],
- });
-
- return (
- {page} ;
-
-export default Page;
diff --git a/src/pages/email/reports/mailbox-statistics/index.jsx b/src/pages/email/reports/mailbox-statistics/index.jsx
new file mode 100644
index 000000000000..44a0e65600e7
--- /dev/null
+++ b/src/pages/email/reports/mailbox-statistics/index.jsx
@@ -0,0 +1,55 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import {
+ CippAnonymizedReportAlert,
+ useReportAnonymized,
+} from "../../../../components/CippComponents/CippAnonymizedReportAlert";
+import { useSettings } from "../../../../hooks/use-settings";
+
+const Page = () => {
+ const tenant = useSettings().currentTenant;
+ const apiData = {
+ Endpoint: "reports/getMailboxUsageDetail(period='D7')",
+ $format: "application/json",
+ };
+ const queryKey = `MailboxStatistics-${tenant}`;
+
+ const anonymized = useReportAnonymized({
+ url: "/api/ListGraphRequest",
+ data: apiData,
+ queryKey: queryKey,
+ dataKey: "Results",
+ fields: ["userPrincipalName", "displayName"],
+ });
+
+ return (
+ {page} ;
+
+export default Page;
diff --git a/src/pages/email/reports/malware-filters/index.js b/src/pages/email/reports/malware-filters/index.js
deleted file mode 100644
index b049cef12444..000000000000
--- a/src/pages/email/reports/malware-filters/index.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { Block, Check } from "@mui/icons-material";
-
-const Page = () => {
- return (
- {page} ;
-
-export default Page;
diff --git a/src/pages/email/reports/malware-filters/index.jsx b/src/pages/email/reports/malware-filters/index.jsx
new file mode 100644
index 000000000000..de7e5f620c4d
--- /dev/null
+++ b/src/pages/email/reports/malware-filters/index.jsx
@@ -0,0 +1,95 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+
+const Page = () => {
+ return (
+ {page} ;
+
+export default Page;
+
diff --git a/src/pages/email/reports/safeattachments-filters/index.js b/src/pages/email/reports/safeattachments-filters/index.js
deleted file mode 100644
index b8212f38cc74..000000000000
--- a/src/pages/email/reports/safeattachments-filters/index.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { Block, Check } from "@mui/icons-material";
-
-const Page = () => {
- const pageTitle = "List of Safe Attachment Filters";
- const apiUrl = "/api/ListSafeAttachmentsFilters";
-
- // Actions converted from legacy code:
- const actions = [
- {
- label: "Enable Rule",
- type: "POST",
- icon: {page} ;
-
-export default Page;
diff --git a/src/pages/email/reports/safeattachments-filters/index.jsx b/src/pages/email/reports/safeattachments-filters/index.jsx
new file mode 100644
index 000000000000..f47b0695ca30
--- /dev/null
+++ b/src/pages/email/reports/safeattachments-filters/index.jsx
@@ -0,0 +1,93 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+
+const Page = () => {
+ const pageTitle = "List of Safe Attachment Filters";
+ const apiUrl = "/api/ListSafeAttachmentsFilters";
+
+ // Actions converted from legacy code:
+ const actions = [
+ {
+ label: "Enable Rule",
+ type: "POST",
+ icon: {page} ;
+
+export default Page;
diff --git a/src/pages/email/resources/management/equipment/edit.jsx b/src/pages/email/resources/management/equipment/edit.jsx
index 1e6cd1f2a5e6..b43417d18c60 100644
--- a/src/pages/email/resources/management/equipment/edit.jsx
+++ b/src/pages/email/resources/management/equipment/edit.jsx
@@ -1,8 +1,8 @@
import React, { useEffect } from "react";
-import { Divider, Typography } from "@mui/material";
+import { Alert, Divider, Typography } from "@mui/material";
import { Grid } from "@mui/system";
import { useForm } from "react-hook-form";
-import { Layout as DashboardLayout } from "../../../../../layouts/index.js";
+import { Layout as DashboardLayout } from "../../../../../layouts/index";
import CippFormPage from "../../../../../components/CippFormPages/CippFormPage";
import CippFormComponent from "../../../../../components/CippComponents/CippFormComponent";
import CippFormSkeleton from "../../../../../components/CippFormPages/CippFormSkeleton";
@@ -113,7 +113,9 @@ const EditEquipmentMailbox = () => {
({
@@ -152,6 +154,11 @@ const EditEquipmentMailbox = () => {
workingHoursTimeZone: values.workingHoursTimeZone?.value || values.workingHoursTimeZone,
})}
>
+ {!equipmentId && (
+
+ No equipment mailbox selected. Open this page from the Equipment Mailboxes list.
+
+ )}
{equipmentInfo.isLoading && (
diff --git a/src/pages/email/resources/management/equipment/index.js b/src/pages/email/resources/management/equipment/index.js
deleted file mode 100644
index 5f5e4c40ab58..000000000000
--- a/src/pages/email/resources/management/equipment/index.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../../layouts/index.js";
-import { CippTablePage } from "../../../../../components/CippComponents/CippTablePage.jsx";
-import { Edit, Block, LockOpen, Key } from "@mui/icons-material";
-import { TrashIcon } from "@heroicons/react/24/outline";
-import { CippAddEquipmentDrawer } from "../../../../../components/CippComponents/CippAddEquipmentDrawer";
-
-const Page = () => {
- const pageTitle = "Equipment";
- const cardButtonPermissions = ["Exchange.Equipment.ReadWrite"];
-
- const actions = [
- {
- label: "Edit Equipment",
- link: `/email/resources/management/equipment/edit?equipmentId=[ExternalDirectoryObjectId]`,
- icon: {page} ;
-
-export default Page;
diff --git a/src/pages/email/resources/management/equipment/index.jsx b/src/pages/email/resources/management/equipment/index.jsx
new file mode 100644
index 000000000000..0d358b29f1d1
--- /dev/null
+++ b/src/pages/email/resources/management/equipment/index.jsx
@@ -0,0 +1,79 @@
+import { Layout as DashboardLayout } from "../../../../../layouts/index";
+import { CippIcons } from "../../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../../components/CippComponents/CippTablePage.jsx";
+import { CippAddEquipmentDrawer } from "../../../../../components/CippComponents/CippAddEquipmentDrawer";
+
+const Page = () => {
+ const pageTitle = "Equipment";
+ const cardButtonPermissions = ["Exchange.Equipment.ReadWrite"];
+
+ const actions = [
+ {
+ label: "Edit Equipment",
+ link: `/email/resources/management/equipment/edit?equipmentId=[ExternalDirectoryObjectId]`,
+ pinned: true,
+ icon: {page} ;
+
+export default Page;
diff --git a/src/pages/email/resources/management/list-rooms/edit.jsx b/src/pages/email/resources/management/list-rooms/edit.jsx
index 859536d6dda7..d3ab95da13d0 100644
--- a/src/pages/email/resources/management/list-rooms/edit.jsx
+++ b/src/pages/email/resources/management/list-rooms/edit.jsx
@@ -1,9 +1,9 @@
import { useEffect } from "react";
+import { CippIcons } from "../../../../../utils/icon-registry";
import { Alert, Box, Divider, IconButton, Tooltip, Typography } from "@mui/material";
-import { Sync } from "@mui/icons-material";
import { Grid } from "@mui/system";
import { useForm, useWatch } from "react-hook-form";
-import { Layout as DashboardLayout } from "../../../../../layouts/index.js";
+import { Layout as DashboardLayout } from "../../../../../layouts/index";
import CippFormPage from "../../../../../components/CippFormPages/CippFormPage";
import CippFormComponent from "../../../../../components/CippComponents/CippFormComponent";
import CippFormSkeleton from "../../../../../components/CippFormPages/CippFormSkeleton";
@@ -174,7 +174,9 @@ const EditRoomMailbox = () => {
({
@@ -232,6 +234,11 @@ const EditRoomMailbox = () => {
WorkingHoursTimeZone: values.WorkingHoursTimeZone?.value || values.WorkingHoursTimeZone,
})}
>
+ {!roomId && (
+
+ No room mailbox selected. Open this page from the Room Mailboxes list.
+
+ )}
{roomInfo.isFetching && (
Basic Information
roomInfo.refetch()}>
-
@@ -280,9 +287,7 @@ const EditRoomMailbox = () => {
label="Room Capacity"
name="capacity"
formControl={formControl}
- InputProps={{
- inputProps: { min: 0 },
- }}
+ slotProps={{ htmlInput: { min: 0 } }}
/>
@@ -295,9 +300,7 @@ const EditRoomMailbox = () => {
min: { value: 1, message: "Minimum duration is 1 minute" },
max: { value: 1440, message: "Maximum duration is 1440 minutes (24 hours)" },
}}
- InputProps={{
- inputProps: { min: 1, max: 1440 },
- }}
+ slotProps={{ htmlInput: { min: 1, max: 1440 } }}
fullWidth
/>
@@ -311,9 +314,7 @@ const EditRoomMailbox = () => {
min: { value: 0, message: "Minimum is 0 days" },
max: { value: 1080, message: "Maximum is 1080 days (3 years)" },
}}
- InputProps={{
- inputProps: { min: 0, max: 1080 },
- }}
+ slotProps={{ htmlInput: { min: 0, max: 1080 } }}
fullWidth
/>
diff --git a/src/pages/email/resources/management/list-rooms/index.js b/src/pages/email/resources/management/list-rooms/index.js
deleted file mode 100644
index 5348f25ce5dc..000000000000
--- a/src/pages/email/resources/management/list-rooms/index.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../../layouts/index.js";
-import { CippTablePage } from "../../../../../components/CippComponents/CippTablePage.jsx";
-import { Edit, Block, LockOpen, Key } from "@mui/icons-material";
-import { TrashIcon } from "@heroicons/react/24/outline";
-import { CippAddRoomDrawer } from "../../../../../components/CippComponents/CippAddRoomDrawer";
-
-const Page = () => {
- const pageTitle = "Rooms";
- const cardButtonPermissions = ["Exchange.Room.ReadWrite"];
-
- const actions = [
- {
- label: "Edit Room",
- link: `/email/resources/management/list-rooms/edit?roomId=[id]`,
- icon: {page} ;
-
-export default Page;
diff --git a/src/pages/email/resources/management/list-rooms/index.jsx b/src/pages/email/resources/management/list-rooms/index.jsx
new file mode 100644
index 000000000000..2f261f135833
--- /dev/null
+++ b/src/pages/email/resources/management/list-rooms/index.jsx
@@ -0,0 +1,80 @@
+import { Layout as DashboardLayout } from "../../../../../layouts/index";
+import { CippIcons } from "../../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../../components/CippComponents/CippTablePage.jsx";
+import { CippAddRoomDrawer } from "../../../../../components/CippComponents/CippAddRoomDrawer";
+
+const Page = () => {
+ const pageTitle = "Rooms";
+ const cardButtonPermissions = ["Exchange.Room.ReadWrite"];
+
+ const actions = [
+ {
+ label: "Edit Room",
+ link: `/email/resources/management/list-rooms/edit?roomId=[id]`,
+ pinned: true,
+ icon: {page} ;
+
+export default Page;
diff --git a/src/pages/email/resources/management/room-lists/edit.jsx b/src/pages/email/resources/management/room-lists/edit.jsx
index 92dfd8a317d3..eec41ce6d963 100644
--- a/src/pages/email/resources/management/room-lists/edit.jsx
+++ b/src/pages/email/resources/management/room-lists/edit.jsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
import { Box, Button, Divider, Typography } from "@mui/material";
import { Grid } from "@mui/system";
import { useForm } from "react-hook-form";
-import { Layout as DashboardLayout } from "../../../../../layouts/index.js";
+import { Layout as DashboardLayout } from "../../../../../layouts/index";
import CippFormPage from "../../../../../components/CippFormPages/CippFormPage";
import CippFormComponent from "../../../../../components/CippComponents/CippFormComponent";
import { CippFormUserSelector } from "../../../../../components/CippComponents/CippFormUserSelector";
@@ -95,9 +95,13 @@ const EditRoomList = () => {
{
- const pageTitle = "Room Lists";
- const apiUrl = "/api/ListRoomLists";
- const cardButtonPermissions = ["Exchange.Room.ReadWrite"];
-
- const actions = [
- {
- label: "Edit Room List",
- link: "/email/resources/management/room-lists/edit?groupId=[PrimarySmtpAddress]",
- multiPost: false,
- icon:
- {page} ;
-
-export default Page;
diff --git a/src/pages/email/resources/management/room-lists/index.jsx b/src/pages/email/resources/management/room-lists/index.jsx
new file mode 100644
index 000000000000..d7dacf8679fb
--- /dev/null
+++ b/src/pages/email/resources/management/room-lists/index.jsx
@@ -0,0 +1,69 @@
+import { Layout as DashboardLayout } from "../../../../../layouts/index";
+import { CippIcons } from "../../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../../components/CippComponents/CippTablePage.jsx";
+import { CippAddRoomListDrawer } from "../../../../../components/CippComponents/CippAddRoomListDrawer";
+
+const Page = () => {
+ const pageTitle = "Room Lists";
+ const apiUrl = "/api/ListRoomLists";
+ const cardButtonPermissions = ["Exchange.Room.ReadWrite"];
+
+ const actions = [
+ {
+ label: "Edit Room List",
+ link: "/email/resources/management/room-lists/edit?groupId=[PrimarySmtpAddress]",
+ pinned: true,
+ multiPost: false,
+ icon:
+ {page} ;
+
+export default Page;
diff --git a/src/pages/email/spamfilter/list-connectionfilter-templates/index.js b/src/pages/email/spamfilter/list-connectionfilter-templates/index.js
deleted file mode 100644
index ff908fa0bb14..000000000000
--- a/src/pages/email/spamfilter/list-connectionfilter-templates/index.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { TrashIcon } from "@heroicons/react/24/outline";
-import { GitHub } from "@mui/icons-material";
-import { ApiGetCall } from "../../../../api/ApiCall";
-
-const Page = () => {
- const pageTitle = "Connection filter Templates";
- const integrations = ApiGetCall({
- url: "/api/ListExtensionsConfig",
- queryKey: "Integrations",
- refetchOnMount: false,
- refetchOnReconnect: false,
- });
- const actions = [
- {
- label: "Save to GitHub",
- type: "POST",
- url: "/api/ExecCommunityRepo",
- icon: {page} ;
-export default Page;
diff --git a/src/pages/email/spamfilter/list-connectionfilter-templates/index.jsx b/src/pages/email/spamfilter/list-connectionfilter-templates/index.jsx
new file mode 100644
index 000000000000..0d1e9ff09771
--- /dev/null
+++ b/src/pages/email/spamfilter/list-connectionfilter-templates/index.jsx
@@ -0,0 +1,103 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import { ApiGetCall } from "../../../../api/ApiCall";
+
+const Page = () => {
+ const pageTitle = "Connection filter Templates";
+ const integrations = ApiGetCall({
+ url: "/api/ListExtensionsConfig",
+ queryKey: "Integrations",
+ refetchOnMount: false,
+ refetchOnReconnect: false,
+ });
+ const actions = [
+ {
+ label: "Save to GitHub",
+ type: "POST",
+ url: "/api/ExecCommunityRepo",
+ icon: {page} ;
+export default Page;
diff --git a/src/pages/email/spamfilter/list-connectionfilter/add.jsx b/src/pages/email/spamfilter/list-connectionfilter/add.jsx
index 77a9dabfa170..5ee1a2e15ba7 100644
--- a/src/pages/email/spamfilter/list-connectionfilter/add.jsx
+++ b/src/pages/email/spamfilter/list-connectionfilter/add.jsx
@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
import { Divider } from "@mui/material";
import { Grid } from "@mui/system";
import { useForm, useWatch } from "react-hook-form";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
import CippFormPage from "../../../../components/CippFormPages/CippFormPage";
import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
import { CippFormTenantSelector } from "../../../../components/CippComponents/CippFormTenantSelector";
@@ -29,7 +29,7 @@ const AddPolicy = () => {
diff --git a/src/pages/email/spamfilter/list-connectionfilter/index.js b/src/pages/email/spamfilter/list-connectionfilter/index.js
deleted file mode 100644
index 027dea277e30..000000000000
--- a/src/pages/email/spamfilter/list-connectionfilter/index.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import { Button } from "@mui/material";
-import { Book, AddModerator } from "@mui/icons-material";
-import Link from "next/link";
-
-const Page = () => {
- const pageTitle = "Connection Filters";
-
- const actions = [
- {
- label: "Create template based on filter",
- type: "POST",
- url: "/api/AddConnectionfilterTemplate",
- dataFunction: (data) => {
- return { ...data };
- },
- icon:
- }
- >
- Deploy ConnectionFilter
-
-
- }
- />
- );
-};
-
-Page.getLayout = (page) => {page} ;
-export default Page;
diff --git a/src/pages/email/spamfilter/list-connectionfilter/index.jsx b/src/pages/email/spamfilter/list-connectionfilter/index.jsx
new file mode 100644
index 000000000000..9255ae457339
--- /dev/null
+++ b/src/pages/email/spamfilter/list-connectionfilter/index.jsx
@@ -0,0 +1,62 @@
+import { Layout as DashboardLayout } from "../../../../layouts/index";
+import { CippIcons } from "../../../../utils/icon-registry"
+import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
+import { Button } from "@mui/material";
+import Link from "next/link";
+
+const Page = () => {
+ const pageTitle = "Connection Filters";
+
+ const actions = [
+ {
+ label: "Create template based on filter",
+ type: "POST",
+ url: "/api/AddConnectionfilterTemplate",
+ dataFunction: (data) => {
+ return { ...data };
+ },
+ icon:
+ }
+ >
+ Deploy ConnectionFilter
+
+
+ }
+ />
+ );
+};
+
+Page.getLayout = (page) => {page} ;
+export default Page;
diff --git a/src/pages/email/spamfilter/list-quarantine-policies/add.jsx b/src/pages/email/spamfilter/list-quarantine-policies/add.jsx
index 8c734f465db5..a5a065ecf912 100644
--- a/src/pages/email/spamfilter/list-quarantine-policies/add.jsx
+++ b/src/pages/email/spamfilter/list-quarantine-policies/add.jsx
@@ -2,7 +2,7 @@ import { useEffect } from "react";
import { Divider } from "@mui/material";
import { Grid } from "@mui/system";
import { useForm, useWatch } from "react-hook-form";
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
+import { Layout as DashboardLayout } from "../../../../layouts/index";
import CippFormPage from "../../../../components/CippFormPages/CippFormPage";
import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
import { CippFormTenantSelector } from "../../../../components/CippComponents/CippFormTenantSelector";
diff --git a/src/pages/email/spamfilter/list-quarantine-policies/index.js b/src/pages/email/spamfilter/list-quarantine-policies/index.js
deleted file mode 100644
index bbcb4a9d386a..000000000000
--- a/src/pages/email/spamfilter/list-quarantine-policies/index.js
+++ /dev/null
@@ -1,418 +0,0 @@
-import { Layout as DashboardLayout } from "../../../../layouts/index.js";
-import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
-import CippButtonCard from "../../../../components/CippCards/CippButtonCard";
-import { CippInfoBar } from "../../../../components/CippCards/CippInfoBar";
-import { CippApiDialog } from "../../../../components/CippComponents/CippApiDialog.jsx";
-import { Alert, Typography, Stack, Tooltip, IconButton, SvgIcon, Button } from "@mui/material";
-import { Grid } from "@mui/system";
-import Link from "next/link";
-import {
- AccessTime,
- CorporateFare,
- AlternateEmail,
- Language,
- Sync,
- RocketLaunch,
- Edit,
- Delete,
-} from "@mui/icons-material";
-import { useSettings } from "../../../../hooks/use-settings";
-import { useDialog } from "../../../../hooks/use-dialog";
-import { ApiGetCall } from "../../../../api/ApiCall";
-
-const Page = () => {
- const pageTitle = "Quarantine Policies";
- const { currentTenant } = useSettings();
-
- const createDialog = useDialog();
-
- // Use ApiGetCall directly as a hook
- const GlobalQuarantinePolicy = ApiGetCall({
- url: "/api/ListQuarantinePolicy",
- data: { tenantFilter: currentTenant, type: "GlobalQuarantinePolicy" },
- queryKey: `GlobalQuarantinePolicy-${currentTenant}`,
- });
-
- // Get the policy data regardless of array or object
- const globalQuarantineData = Array.isArray(GlobalQuarantinePolicy.data)
- ? GlobalQuarantinePolicy.data[0]
- : GlobalQuarantinePolicy.data;
-
- const hasGlobalQuarantinePolicyData = !!globalQuarantineData;
-
- if (hasGlobalQuarantinePolicyData) {
- globalQuarantineData.EndUserSpamNotificationFrequency =
- globalQuarantineData?.EndUserSpamNotificationFrequency === "P1D"
- ? "Daily"
- : globalQuarantineData?.EndUserSpamNotificationFrequency === "P7D"
- ? "Weekly"
- : globalQuarantineData?.EndUserSpamNotificationFrequency === "PT4H"
- ? "4 hours"
- : globalQuarantineData?.EndUserSpamNotificationFrequency;
- }
-
- const multiLanguagePropertyItems = hasGlobalQuarantinePolicyData
- ? Array.isArray(globalQuarantineData?.MultiLanguageSetting) &&
- globalQuarantineData.MultiLanguageSetting.length > 0
- ? globalQuarantineData.MultiLanguageSetting.map((language, idx) => ({
- language:
- language == "Default" ? "English_USA" : language == "English" ? "English_GB" : language,
- senderDisplayName:
- globalQuarantineData.MultiLanguageSenderName[idx] &&
- globalQuarantineData.MultiLanguageSenderName[idx].trim() !== ""
- ? globalQuarantineData.MultiLanguageSenderName[idx]
- : "None",
- subject:
- globalQuarantineData.EsnCustomSubject[idx] &&
- globalQuarantineData.EsnCustomSubject[idx].trim() !== ""
- ? globalQuarantineData.EsnCustomSubject[idx]
- : "None",
- disclaimer:
- globalQuarantineData.MultiLanguageCustomDisclaimer[idx] &&
- globalQuarantineData.MultiLanguageCustomDisclaimer[idx].trim() !== ""
- ? globalQuarantineData.MultiLanguageCustomDisclaimer[idx]
- : "None",
- }))
- : [
- {
- language: "None",
- senderDisplayName: "None",
- subject: "None",
- disclaimer: "None",
- },
- ]
- : [];
-
- const buttonCardActions = [
- <>
- }>
- Edit Settings
-
-
-
- {
- GlobalQuarantinePolicy.refetch();
- }}
- >
-
-
-
-
-
- ,
- ];
-
- // Actions to perform (Edit,Delete Policy)
- const actions = [
- {
- label: "Edit Policy",
- type: "POST",
- url: "/api/EditQuarantinePolicy?type=QuarantinePolicy",
- setDefaultValues: true,
- fields: [
- {
- type: "textField",
- name: "Name",
- label: "Policy Name",
- disabled: true,
- },
- {
- type: "autoComplete",
- name: "ReleaseActionPreference",
- label: "Select release action preference",
- multiple: false,
- creatable: false,
- options: [
- { label: "Release", value: "Release" },
- { label: "Request Release", value: "RequestRelease" },
- ],
- },
- {
- type: "switch",
- name: "Delete",
- label: "Delete",
- },
- {
- type: "switch",
- name: "Preview",
- label: "Preview",
- },
- {
- type: "switch",
- name: "BlockSender",
- label: "Block Sender",
- },
- {
- type: "switch",
- name: "AllowSender",
- label: "Allow Sender",
- },
- {
- type: "switch",
- name: "QuarantineNotification",
- label: "Quarantine Notification",
- },
- {
- type: "switch",
- name: "IncludeMessagesFromBlockedSenderAddress",
- label: "Include Messages From Blocked Sender Address",
- },
- ],
- data: { Identity: "Guid", Action: "!Edit" },
- confirmText: "Update Quarantine Policy '[Name]'? Policy Name cannot be changed.",
- multiPost: false,
- icon: Are you sure you want to delete this policy?
-
- Note: This will delete the Quarantine policy, even if it is currently
- in use.
-
- Removing the Admin and User Access it applies to emails. -
-
- Confirm the Quarantine is not applied in any of the following policies:
-
-
- ),
- condition: (row) => row.Guid != "00000000-0000-0000-0000-000000000000",
- },
- ];
-
- // Off-canvas structure: displays extended details and includes actions (Enable/Disable Rule)
- const offCanvas = {
- extendedInfoFields: [
- "Id", // Policy Name/Id
- "Name", // Policy Name
- "EndUserQuarantinePermissions",
- "Guid",
- "Builtin",
- "WhenCreated", // Creation Date
- "WhenChanged", // Last Modified Date
- ],
- actions: actions,
- };
-
- const filterList = [
- {
- filterName: "Custom Policies",
- value: [{ id: "Builtin", value: "No" }],
- type: "column",
- },
- {
- filterName: "Built-in Policies",
- value: [{ id: "Builtin", value: "Yes" }],
- type: "column",
- },
- ];
-
- const customLanguageOffcanvas =
- multiLanguagePropertyItems && multiLanguagePropertyItems.length > 0
- ? {
- offcanvas: {
- title: "Custom Language Settings",
- propertyItems: multiLanguagePropertyItems.map((item, idx) => ({
- label: "",
- value: (
-
-
- }
- cardSx={{ mb: 2 }}
- >
-
-
-
-
- {`Step ${steps.indexOf(step) ? steps.indexOf(step) + 1 : 1}`}
-
-
- {step.description}
-
-
-
- ))}
-
-
- );
-};
-
-WizardSteps.propTypes = {
- activeStep: PropTypes.number,
- orientation: PropTypes.oneOf(["vertical", "horizontal"]),
- steps: PropTypes.array,
-};
diff --git a/src/components/CippWizard/wizard-steps.jsx b/src/components/CippWizard/wizard-steps.jsx
new file mode 100644
index 000000000000..e4c077ba2e17
--- /dev/null
+++ b/src/components/CippWizard/wizard-steps.jsx
@@ -0,0 +1,187 @@
+import PropTypes from "prop-types";
+import { CippIcons } from "../../utils/icon-registry";
+import { useIsMobileLayout } from "../../hooks/use-breakpoint";
+import { CippWizardProgressHeader } from "./CippWizardProgressHeader";
+import {
+ Box,
+ Step,
+ StepConnector,
+ stepConnectorClasses,
+ StepLabel,
+ Stepper,
+ SvgIcon,
+ Typography,
+ CircularProgress,
+} from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { ClearIcon } from "@mui/x-date-pickers";
+
+const WizardStepConnector = styled(StepConnector)(({ theme }) => ({
+ [`&.${stepConnectorClasses.vertical}`]: {
+ marginLeft: 16,
+ },
+ [`&.${stepConnectorClasses.vertical} > .${stepConnectorClasses.line}`]: {
+ borderColor:
+ theme.palette.mode === "dark" ? theme.palette.neutral[800] : theme.palette.neutral[200],
+ borderLeftWidth: 2,
+ },
+ [`&.${stepConnectorClasses.horizontal} > .${stepConnectorClasses.line}`]: {
+ borderColor:
+ theme.palette.mode === "dark" ? theme.palette.neutral[800] : theme.palette.neutral[200],
+ borderTopWidth: 2,
+ },
+}));
+
+const WizardStepIcon = (props) => {
+ const { active, completed, error, loading } = props;
+
+ if (loading) {
+ return (
+
+
+
+
+ {`Step ${steps.indexOf(step) ? steps.indexOf(step) + 1 : 1}`}
+
+
+ {step.description}
+
+
+
+ ))}
+
+
+ );
+};
+
+WizardSteps.propTypes = {
+ activeStep: PropTypes.number,
+ orientation: PropTypes.oneOf(["vertical", "horizontal"]),
+ steps: PropTypes.array,
+};
diff --git a/src/components/ExecutiveReportButton.js b/src/components/ExecutiveReportButton.js
deleted file mode 100644
index 77dd0813fcc4..000000000000
--- a/src/components/ExecutiveReportButton.js
+++ /dev/null
@@ -1,2055 +0,0 @@
-import { useState, useMemo } from 'react'
-import {
- Button,
- Tooltip,
- Dialog,
- DialogTitle,
- DialogContent,
- DialogActions,
- Box,
- Typography,
- Switch,
- Paper,
- Stack,
- IconButton,
- MenuItem,
- ListItemIcon,
- ListItemText,
- TextField,
-} from '@mui/material'
-import { PictureAsPdf, Download, Close, Settings } from '@mui/icons-material'
-import { CippAutoComplete } from './CippComponents/CippAutocomplete'
-import { CippOffCanvas } from './CippComponents/CippOffCanvas'
-import { Document, Page, Text, View, Image } from '@react-pdf/renderer'
-import { CippPdfPreview } from './CippPdf/CippPdfPreview'
-import { useSettings } from '../hooks/use-settings'
-import { useSecureScore } from '../hooks/use-securescore'
-import { ApiGetCall } from '../api/ApiCall'
-import { ShadowAIReportPages } from './ShadowAIReportButton'
-import { DEFAULT_BRANDING_OPTION } from './ReportBuilder/reportSettings'
-import { useReportVariables } from './CippPdf/useReportVariables'
-import { useBrandingSettings } from './CippPdf/useBrandingSettings'
-import { isCloudPcDevice } from '../utils/is-cloud-pc-device'
-import {
- Bold,
- BulletList,
- ContentPage,
- DataTable,
- DonutChart,
- HeroPage,
- InfoBox,
- Paragraph,
- ReportDocument,
- REPORT_SERIES_SEMANTIC,
- Section,
- StatRow,
- StatusText,
- TrendChart,
-} from './CippPdf'
-
-// Conditional access policy states, as Graph spells them and as a reader should read them.
-const CA_STATE_LABELS = {
- enabled: 'Enabled',
- enabledForReportingButNotEnforced: 'Report Only',
- disabled: 'Disabled',
-}
-const CA_STATE_TONES = {
- enabled: 'pass',
- enabledForReportingButNotEnforced: 'warn',
- disabled: 'fail',
-}
-const CA_CONTROL_LABELS = { mfa: 'MFA', block: 'Block', compliantDevice: 'Compliant Device' }
-
-const caControlsText = (policy) => {
- const controls = Object.entries(CA_CONTROL_LABELS)
- .filter(([control]) => policy.builtInControls?.includes(control))
- .map(([, label]) => label)
- return controls.length > 0 ? controls.join(', ') : 'Custom'
-}
-
-// The generated standards catalogue, loaded once. Three separate `require` calls inside render
-// paths used to reload it per deviation row.
-let standardsCatalog = null
-try {
- standardsCatalog = require('../data/standards.json')
-} catch (error) {
- standardsCatalog = null
-}
-
-// PRODUCTION-GRADE PDF SYSTEM WITH CONDITIONAL RENDERING
-// Exported so the report can be rendered to a real PDF in tests. A report that only throws once
-// the renderer walks it is the failure mode a stubbed test cannot see.
-export const ExecutiveReportDocument = ({
- tenantName,
- userStats,
- brandingSettings,
- variables,
- secureScoreData,
- licensingData,
- deviceData,
- conditionalAccessData,
- standardsCompareData,
- driftComplianceData,
- standardTemplatesData,
- shadowAIData,
- sectionConfig = {
- executiveSummary: true,
- securityStandards: true,
- driftCompliance: false,
- secureScore: true,
- licenseManagement: true,
- deviceManagement: true,
- conditionalAccess: true,
- infographics: true,
- shadowAI: false,
- },
-}) => {
- const currentDate = new Date().toLocaleDateString('en-US', {
- year: 'numeric',
- month: 'long',
- day: 'numeric',
- })
-
- // Both arrive as an array on the happy path and as an error object or `undefined` when their
- // endpoint failed. The page-level guards below check that, but these run unconditionally, so
- // they have to check it too.
- const caPolicies = Array.isArray(conditionalAccessData) ? conditionalAccessData : []
- const devices = Array.isArray(deviceData) ? deviceData : []
-
- const caEnabledCount = caPolicies.filter((policy) => policy.state === 'enabled').length
- const caReportOnlyCount = caPolicies.filter(
- (policy) => policy.state === 'enabledForReportingButNotEnforced'
- ).length
-
- // Secure score history, oldest first, in the shape the shared trend chart takes. The API returns
- // newest first, which would draw the trend backwards.
- const scoreTrendData = [...(secureScoreData?.secureScore?.data?.Results ?? [])]
- .reverse()
- .map((point) => ({
- label: new Date(point.createdDateTime).toLocaleDateString('en-US', {
- month: 'short',
- day: 'numeric',
- }),
- value: point.currentScore,
- }))
-
- // PROCESS REAL STANDARDS DATA
- const processStandardsData = (apiData, standardTemplates) => {
- const standardsData = standardsCatalog
-
- if (!apiData || !Array.isArray(apiData) || apiData.length === 0) {
- return []
- }
-
- // Build a lookup map from template configurations
- // Format: { "GUID": "Display Name" }
- const templateDisplayNameMap = {}
-
- if (standardTemplates && Array.isArray(standardTemplates)) {
- standardTemplates.forEach((template) => {
- if (template.standards) {
- // Process IntuneTemplate arrays
- if (Array.isArray(template.standards.IntuneTemplate)) {
- template.standards.IntuneTemplate.forEach((templateItem) => {
- if (templateItem?.TemplateList?.value && templateItem?.TemplateList?.label) {
- templateDisplayNameMap[templateItem.TemplateList.value.toLowerCase()] =
- templateItem.TemplateList.label
- }
- // Handle TemplateList-Tags expansion
- const tagTemplates =
- templateItem?.['TemplateList-Tags']?.addedFields?.templates ||
- templateItem?.['TemplateList-Tags']?.rawData?.templates
- if (tagTemplates && Array.isArray(tagTemplates)) {
- tagTemplates.forEach((expandedTemplate) => {
- if (
- expandedTemplate?.GUID &&
- (expandedTemplate?.displayName || expandedTemplate?.name)
- ) {
- templateDisplayNameMap[expandedTemplate.GUID.toLowerCase()] =
- expandedTemplate.displayName || expandedTemplate.name
- }
- })
- }
- })
- }
- // Process ConditionalAccessTemplate arrays
- if (Array.isArray(template.standards.ConditionalAccessTemplate)) {
- template.standards.ConditionalAccessTemplate.forEach((templateItem) => {
- if (templateItem?.TemplateList?.value && templateItem?.TemplateList?.label) {
- templateDisplayNameMap[templateItem.TemplateList.value.toLowerCase()] =
- templateItem.TemplateList.label
- }
- // Handle TemplateList-Tags expansion
- const tagTemplates =
- templateItem?.['TemplateList-Tags']?.addedFields?.templates ||
- templateItem?.['TemplateList-Tags']?.rawData?.templates
- if (tagTemplates && Array.isArray(tagTemplates)) {
- tagTemplates.forEach((expandedTemplate) => {
- if (
- expandedTemplate?.GUID &&
- (expandedTemplate?.displayName || expandedTemplate?.name)
- ) {
- templateDisplayNameMap[expandedTemplate.GUID.toLowerCase()] =
- expandedTemplate.displayName || expandedTemplate.name
- }
- })
- }
- })
- }
- }
- })
- }
-
- const processedStandards = []
- const tenantData = apiData[0] // Get the first tenant's data
-
- // Process each standard from the API response
- Object.keys(tenantData).forEach((key) => {
- if (key.startsWith('standards.') && key !== 'tenantFilter') {
- const standardKey = key
- const standardValue = tenantData[key]
- const standardDef = standardsData?.find((std) => std.name === standardKey)
-
- if (standardDef) {
- // Determine compliance status using the same logic as applied-standards.js
- let status = 'Review'
- let isCompliant = false
-
- // FIRST: Check if CurrentValue and ExpectedValue exist and match
- if (
- standardValue?.CurrentValue !== undefined &&
- standardValue?.ExpectedValue !== undefined
- ) {
- const sortedCurrent =
- typeof standardValue.CurrentValue === 'object' && standardValue.CurrentValue !== null
- ? Object.keys(standardValue.CurrentValue)
- .sort()
- .reduce((obj, key) => {
- obj[key] = standardValue.CurrentValue[key]
- return obj
- }, {})
- : standardValue.CurrentValue
- const sortedExpected =
- typeof standardValue.ExpectedValue === 'object' &&
- standardValue.ExpectedValue !== null
- ? Object.keys(standardValue.ExpectedValue)
- .sort()
- .reduce((obj, key) => {
- obj[key] = standardValue.ExpectedValue[key]
- return obj
- }, {})
- : standardValue.ExpectedValue
- isCompliant = JSON.stringify(sortedCurrent) === JSON.stringify(sortedExpected)
- }
- // SECOND: Check if Value is explicitly true
- else if (standardValue?.Value === true) {
- isCompliant = true
- }
-
- status = isCompliant ? 'Compliant' : 'Review'
-
- // Get tags for display - fix the tags access
- const tags =
- standardDef.tag && Array.isArray(standardDef.tag) && standardDef.tag.length > 0
- ? standardDef.tag.slice(0, 2).join(', ') // Show first 2 tags
- : 'No tags'
- processedStandards.push({
- name: standardDef.label,
- description:
- standardDef.executiveText || standardDef.helpText || 'No description available',
- status: status,
- tags: tags,
- })
- } else {
- // If no definition found, still add it with basic info
- let status = 'Review'
- let isCompliant = false
-
- // FIRST: Check if CurrentValue and ExpectedValue exist and match
- if (
- standardValue?.CurrentValue !== undefined &&
- standardValue?.ExpectedValue !== undefined
- ) {
- const sortedCurrent =
- typeof standardValue.CurrentValue === 'object' && standardValue.CurrentValue !== null
- ? Object.keys(standardValue.CurrentValue)
- .sort()
- .reduce((obj, key) => {
- obj[key] = standardValue.CurrentValue[key]
- return obj
- }, {})
- : standardValue.CurrentValue
- const sortedExpected =
- typeof standardValue.ExpectedValue === 'object' &&
- standardValue.ExpectedValue !== null
- ? Object.keys(standardValue.ExpectedValue)
- .sort()
- .reduce((obj, key) => {
- obj[key] = standardValue.ExpectedValue[key]
- return obj
- }, {})
- : standardValue.ExpectedValue
- isCompliant = JSON.stringify(sortedCurrent) === JSON.stringify(sortedExpected)
- }
- // SECOND: Check if Value is explicitly true
- else if (standardValue?.Value === true) {
- isCompliant = true
- }
-
- status = isCompliant ? 'Compliant' : 'Review'
-
- // Create a proper name from the key - handle template types specially
- let displayName = ''
-
- // Check if this is an IntuneTemplate or ConditionalAccessTemplate
- const intuneTemplateMatch = standardKey.match(/^standards\.IntuneTemplate\.([0-9a-f-]+)/i)
- const caTemplateMatch = standardKey.match(
- /^standards\.ConditionalAccessTemplate\.([0-9a-f-]+)/i
- )
-
- if (intuneTemplateMatch) {
- // IntuneTemplate - look up display name from template configurations
- const guid = intuneTemplateMatch[1]
- const lookupName = templateDisplayNameMap[guid.toLowerCase()]
- displayName = lookupName || `Intune Template - ${guid.substring(0, 8)}`
- } else if (caTemplateMatch) {
- // ConditionalAccessTemplate - look up display name from template configurations
- const guid = caTemplateMatch[1]
- const lookupName = templateDisplayNameMap[guid.toLowerCase()]
- displayName = lookupName || `CA Template - ${guid.substring(0, 8)}`
- } else {
- // Regular standard - use basic name formatting
- displayName = standardKey
- .replace('standards.', '')
- .replace(/([A-Z])/g, ' $1') // Add space before capital letters
- .replace(/^./, (str) => str.toUpperCase()) // Capitalize first letter
- .trim()
- }
-
- processedStandards.push({
- name: displayName,
- description: 'Security standard implementation',
- status: status,
- tags: 'No tags',
- })
- }
- }
- })
-
- return processedStandards
- }
-
- // PROCESS DRIFT COMPLIANCE DATA
- const processDriftComplianceData = (driftData, standardsCompareData) => {
- if (!driftData || !Array.isArray(driftData) || driftData.length === 0) {
- return {
- acceptedDeviationsCount: 0,
- currentDeviationsCount: 0,
- deniedDeviationsCount: 0,
- customerSpecificDeviationsCount: 0,
- alignedCount: 0,
- acceptedDeviations: [],
- currentDeviations: [],
- deniedDeviations: [],
- customerSpecificDeviations: [],
- appliedStandards: [],
- }
- }
-
- const standardsData = standardsCatalog
-
- // Helper function to get pretty name from standards.json (same as manage-drift)
- const getStandardPrettyName = (standardName) => {
- if (!standardName) return 'Unknown Standard'
- const standard = standardsData?.find((s) => s.name === standardName)
- if (standard && standard.label) {
- return standard.label
- }
- return null
- }
-
- // Helper function to process deviations with pretty names
- const processDeviations = (deviations) => {
- return (deviations || []).map((deviation) => ({
- ...deviation,
- prettyName:
- deviation.standardDisplayName ||
- getStandardPrettyName(deviation.standardName) ||
- deviation.standardName ||
- 'Unknown Standard',
- }))
- }
-
- // Aggregate data across all standards for this tenant
- const aggregatedData = driftData.reduce(
- (acc, item) => {
- acc.acceptedDeviationsCount += item.acceptedDeviationsCount || 0
- acc.currentDeviationsCount += item.currentDeviationsCount || 0
- acc.alignedCount += item.alignedCount || 0
- acc.customerSpecificDeviationsCount += item.customerSpecificDeviationsCount || 0
- acc.deniedDeviationsCount += item.deniedDeviationsCount || 0
-
- // Collect deviations with pretty names
- if (item.currentDeviations && Array.isArray(item.currentDeviations)) {
- acc.currentDeviations.push(
- ...processDeviations(item.currentDeviations.filter((dev) => dev !== null))
- )
- }
- if (item.acceptedDeviations && Array.isArray(item.acceptedDeviations)) {
- acc.acceptedDeviations.push(
- ...processDeviations(item.acceptedDeviations.filter((dev) => dev !== null))
- )
- }
- if (item.customerSpecificDeviations && Array.isArray(item.customerSpecificDeviations)) {
- acc.customerSpecificDeviations.push(
- ...processDeviations(item.customerSpecificDeviations.filter((dev) => dev !== null))
- )
- }
- if (item.deniedDeviations && Array.isArray(item.deniedDeviations)) {
- acc.deniedDeviations.push(
- ...processDeviations(item.deniedDeviations.filter((dev) => dev !== null))
- )
- }
-
- return acc
- },
- {
- acceptedDeviationsCount: 0,
- currentDeviationsCount: 0,
- alignedCount: 0,
- customerSpecificDeviationsCount: 0,
- deniedDeviationsCount: 0,
- currentDeviations: [],
- acceptedDeviations: [],
- customerSpecificDeviations: [],
- deniedDeviations: [],
- appliedStandards: [],
- }
- )
-
- // Get complete list of applied standards from standards comparison data (like policies-deployed)
- if (
- standardsData &&
- standardsCompareData &&
- Array.isArray(standardsCompareData) &&
- standardsCompareData.length > 0
- ) {
- const tenantData = standardsCompareData[0]
- const appliedStandards = []
-
- // Process each standard from the API response
- Object.keys(tenantData).forEach((key) => {
- if (key.startsWith('standards.') && key !== 'tenantFilter') {
- const standardKey = key
- const standardDef = standardsData.find((std) => std.name === standardKey)
-
- if (standardDef) {
- appliedStandards.push({
- name: standardDef.label || standardKey,
- executiveDescription:
- standardDef.executiveText || standardDef.helpText || 'No description available',
- category: standardDef.cat || 'General',
- })
- }
- }
- })
-
- aggregatedData.appliedStandards = appliedStandards
- }
-
- return aggregatedData
- }
-
- let securityControls = processStandardsData(standardsCompareData, standardTemplatesData)
- let driftComplianceInfo = processDriftComplianceData(driftComplianceData, standardsCompareData)
-
- // Compliance grade -> the shared status vocabulary.
- const badgeTone = (status) => {
- switch (status) {
- case 'Compliant':
- return 'pass'
- case 'Partial':
- return 'warn'
- case 'Review':
- case 'Review Required':
- return 'fail'
- default:
- return null
- }
- }
-
- // The four deviation buckets flattened into one set of table rows. They were four copies of the
- // same twenty lines, each re-requiring standards.json inside its own map.
- const deviationRows = [
- {
- list: driftComplianceInfo?.currentDeviations,
- take: 5,
- status: 'Current',
- tone: 'fail',
- fallback: 'Policy deviation detected',
- },
- {
- list: driftComplianceInfo?.acceptedDeviations,
- take: 3,
- status: 'Accepted',
- tone: 'pass',
- fallback: 'Accepted policy deviation',
- },
- {
- list: driftComplianceInfo?.customerSpecificDeviations,
- take: 3,
- status: 'Client Specific',
- tone: 'warn',
- fallback: 'Customer-specific policy configuration',
- },
- {
- list: driftComplianceInfo?.deniedDeviations,
- take: 2,
- status: 'Denied',
- tone: 'fail',
- fallback: 'Denied policy deviation',
- },
- ].flatMap((bucket) =>
- (bucket.list ?? []).slice(0, bucket.take).map((deviation) => {
- const standardDef = standardsCatalog?.find((std) => std.name === deviation.standardName)
- return {
- policy: deviation.prettyName || 'Unknown Policy',
- description: standardDef?.executiveText || standardDef?.helpText || bucket.fallback,
- status: bucket.status,
- tone: bucket.tone,
- }
- })
- )
-
- // Compliance state arrives under either casing depending on which endpoint fed the report.
- const isCompliant = (device) =>
- (device.complianceState || device.ComplianceState || '').toLowerCase() === 'compliant'
- const compliantDevices = devices.filter(isCompliant)
-
- // Applied standards grouped under their category heading.
- const appliedStandardsByCategory = Object.entries(
- (driftComplianceInfo?.appliedStandards ?? []).reduce((groups, standard) => {
- const category = standard.category || 'General'
- ;(groups[category] ??= []).push(standard)
- return groups
- }, {})
- )
-
- return (
-
-
+
-
- );
-};
-
-Page.getLayout = (page) => {pageTitle}
-This is a placeholder page for the dashboard section.
-
+
+ );
+};
+
+Page.getLayout = (page) => {pageTitle}
+This is a placeholder page for the dashboard section.
+-
- {/* Pairs with the trigger above: the identity is either beside the avatar or here. */}
- {mdDown && (
-
-
+ {/* Pairs with the trigger above: the identity is either beside the avatar or here. */}
+ {mdDown && (
+
-
-
-
+
,
- documentation: ,
+ documentation: |. Supported operators:
- where Level == "ERR" — exact level
- -
where Level in ("ERR", "CRT") — multiple
- levels
- -
where Level != "DBG" — exclude level
- -
where Message contains "text" — search
- -
where Message !contains "text" — exclude
- -
where Message matches regex "err|fail" — regex
- -
where Timestamp > ago(1h) — relative time (s/m/h/d/w)
- -
where Timestamp between (ago(2h) .. ago(1h)) — range
- -
take 500 — limit results
- -
sort by Timestamp desc — newest first
- -
search all files — include rotated logs
- |. Supported operators:
+ where Level == "ERR" — exact level
+ +
where Level in ("ERR", "CRT") — multiple
+ levels
+ +
where Level != "DBG" — exclude level
+ +
where Message contains "text" — search
+ +
where Message !contains "text" — exclude
+ +
where Message matches regex "err|fail" — regex
+ +
where Timestamp > ago(1h) — relative time (s/m/h/d/w)
+ +
where Timestamp between (ago(2h) .. ago(1h)) — range
+ +
take 500 — limit results
+ +
sort by Timestamp desc — newest first
+ +
search all files — include rotated logs
+ -
-
- Leave empty for no limit on JIT admin account duration (default behavior) -
- - The duration is calculated from the start date to the expiration date of the JIT - admin - -
- - If a technician attempts to exceed this limit, the backend will reject the - request with an error message - -
- This setting applies globally to all tenants and all JIT admin creations -
-
+
- Leave empty for no limit on JIT admin account duration (default behavior) +
- + The duration is calculated from the start date to the expiration date of the JIT + admin + +
- + If a technician attempts to exceed this limit, the backend will reject the + request with an error message + +
- This setting applies globally to all tenants and all JIT admin creations +
-
-
- Directory extensions must have unique names. -
- There is a limit of 100 extension values per resource instance -
- - - Considerations for using directory extensions - - -
-
+
- Directory extensions must have unique names. +
- There is a limit of 100 extension values per resource instance +
- + + Considerations for using directory extensions + + +
-
-
- Schema extensions can only be Deprecated once they are set to Available. -
- Properties cannot be deleted once they are created. -
- - There is a limit of 100 extension values per resource instance (directory objects - only) - -
- There is a limit of 5 total schema extensions. -
-
+
- Schema extensions can only be Deprecated once they are set to Available. +
- Properties cannot be deleted once they are created. +
- + There is a limit of 100 extension values per resource instance (directory objects + only) + +
- There is a limit of 5 total schema extensions. +
Loading...
;
- }
-
- return (
- <>
-
-
-
-
-
- ({
- value: report.id,
- label: report.name,
- }))}
- isFetching={reportsApi.isFetching}
- />
- ),
- },
- {
- label: "Added Attributes when creating a new user",
- value: (
-
-
-
-
- !["anonymous", "authenticated"].includes(role))
- .map((role) => ({
- label: "",
- value: getCippFormatting(role, "role"),
- }))}
- showDivider={false}
- />
-
- ({
- label: portal.label,
- value: (
-
-
-
-
- Loading...
;
+ }
+
+ return (
+ <>
+
+
+
+
+
+ ({
+ value: report.id,
+ label: report.name,
+ }))}
+ isFetching={reportsApi.isFetching}
+ />
+ ),
+ },
+ {
+ label: "Added Attributes when creating a new user",
+ value: (
+
+
+
+
+ !["anonymous", "authenticated"].includes(role))
+ .map((role) => ({
+ label: "",
+ value: getCippFormatting(role, "role"),
+ }))}
+ showDivider={false}
+ />
+
+ ({
+ label: portal.label,
+ value: (
+
+
+
+
+
- Password Configuration
-
-
-
-
- How Logs are Stored
-
-
- CIPP writes all log entries to an Azure Table Storage table called{" "}
-
-
-
- CippLogs. Each row is partitioned by date using the format{" "}
- YYYYMMDD as the PartitionKey, with a unique GUID as the{" "}
- RowKey.
- eq for a single day or ge /{" "}
- le for a date range.{" "}
- The date partition is in UTC time, so you may need to use a date
- range to account for timezone differences.
-
-
- Available Columns
-
-
-
-
-
- -
-
-
-
PartitionKey— Date in YYYYMMDD format -
- -
-
RowKey— Unique log entry ID (GUID) -
- -
-
Timestamp— When the entry was written -
- -
-
Tenant— Tenant domain name -
- -
-
Username— User who triggered the action -
- -
-
API— API endpoint or function name -
- -
-
Message— Log message text -
- -
-
Severity— Log level (Info, Warning, Error, Debug) -
- -
-
LogData— Additional JSON data (if any) -
- -
-
TenantID— Tenant GUID (when available) -
- -
-
IP— Source IP address (when available) -
-
-
- Example $filter Queries
-
-
- Append
- {filterExamples.map((ex) => (
-
-
- &$filter= to your SAS URL to filter results. Use{" "}
- eq, ne, gt, lt,{" "}
- ge, le, and combine with and /{" "}
- or.
-
-
- {ex.label}
-
-
- {ex.note}
-
- )}
-
- ))}
-
-
- {ex.note && (
- $filter={ex.filter}
-
-
- Azure Tables Documentation
-
-
-
-
- -
-
-
-
- Querying Tables and Entities - - {" — "}filter syntax, operators, and supported data types -
- -
-
- Query Timeout and Pagination - - {" — "}handling continuation tokens for large result sets -
-
+
+ How Logs are Stored
+
+
+ CIPP writes all log entries to an Azure Table Storage table called{" "}
+
+
+
+ CippLogs. Each row is partitioned by date using the format{" "}
+ YYYYMMDD as the PartitionKey, with a unique GUID as the{" "}
+ RowKey.
+ eq for a single day or ge /{" "}
+ le for a date range.{" "}
+ The date partition is in UTC time, so you may need to use a date
+ range to account for timezone differences.
+
+
+ Available Columns
+
+
+
+
+
+ -
+
-
+
PartitionKey— Date in YYYYMMDD format +
+ -
+
RowKey— Unique log entry ID (GUID) +
+ -
+
Timestamp— When the entry was written +
+ -
+
Tenant— Tenant domain name +
+ -
+
Username— User who triggered the action +
+ -
+
API— API endpoint or function name +
+ -
+
Message— Log message text +
+ -
+
Severity— Log level (Info, Warning, Error, Debug) +
+ -
+
LogData— Additional JSON data (if any) +
+ -
+
TenantID— Tenant GUID (when available) +
+ -
+
IP— Source IP address (when available) +
+
+
+ Example $filter Queries
+
+
+ Append
+ {filterExamples.map((ex) => (
+
+
+ &$filter= to your SAS URL to filter results. Use{" "}
+ eq, ne, gt, lt,{" "}
+ ge, le, and combine with and /{" "}
+ or.
+
+
+ {ex.label}
+
+
+ {ex.note}
+
+ )}
+
+ ))}
+
+
+ {ex.note && (
+ $filter={ex.filter}
+
+
+ Azure Tables Documentation
+
+
+
+
+ -
+
-
+
+ Querying Tables and Entities + + {" — "}filter syntax, operators, and supported data types +
+ -
+
+ Query Timeout and Pagination + + {" — "}handling continuation tokens for large result sets +
+
-
- );
-};
-
-Page.getLayout = (page) => {pageTitle}
-This is a placeholder page for the statistics section.
-
+
+ );
+};
+
+Page.getLayout = (page) => {pageTitle}
+This is a placeholder page for the statistics section.
+-
- Portals
-
- }
- >
- {portalMenuItems.map((item, index) => (
-
-
- Reports
-
- }
- >
-
-
+ Portals
+
+ }
+ >
+ {portalMenuItems.map((item, index) => (
+
-
+ Reports
+
+ }
+ >
+
-
-
-
+
- Removing the Admin and User Access it applies to emails. -
-
-
- Anti-phishing -
- Anti-spam -
- Anti-malware -
- Safe Attachments -
+ Removing the Admin and User Access it applies to emails. +
-
+
- Anti-phishing +
- Anti-spam +
- Anti-malware +
- Safe Attachments +
-
- );
-};
-
-Page.getLayout = (page) => {pageTitle}
-This is a placeholder page for the mail test section.
-
+
+ );
+};
+
+Page.getLayout = (page) => {pageTitle}
+This is a placeholder page for the mail test section.
+
-
- );
-};
-
-Page.getLayout = (page) => {pageTitle}
-This is a placeholder page for the mailbox restore wizard section.
-
+
+ );
+};
+
+Page.getLayout = (page) => {pageTitle}
+This is a placeholder page for the mailbox restore wizard section.
+| ${escapeHtml(cell)} | ` - }) - tableHtml += '
|---|
| ${escapeHtml(cell)} | ` - }) - tableHtml += '
${line.slice(4)}
`) - } else if (line.startsWith('## ')) { - htmlParts.push(`${line.slice(3)}
`) - } else if (line.startsWith('# ')) { - htmlParts.push(`${line.slice(2)}
`) - } else if (line.trim().match(/^[-*+]\s/)) { - htmlParts.push(`${line}
`) - } - i++ - } - - return htmlParts - .join('') - .replace(/(- ${match}
$1')
- .replace(/\[(.*?)\]\((.*?)\)/g, '$1')
-}
-
-/* ── Table row/column controls ─────────────────────────────
- * mui-tiptap's TableMenuControls renders a fixed set with no way to leave buttons out, so
- * the subset the PDF can actually reproduce is composed here. Merge/split cells and the
- * header toggles are deliberately absent: the PDF lays every row out on one fixed column
- * grid, which a merged cell has no place in, and it decides a table has a heading from its
- * first row being header cells — so toggling that off would cost the table its header bar
- * and its repeat across page breaks.
- */
-const TABLE_ACTIONS = [
- { label: 'Insert column before', Icon: InsertColumnLeft, command: 'addColumnBefore' },
- { label: 'Insert column after', Icon: InsertColumnRight, command: 'addColumnAfter' },
- { label: 'Delete column', Icon: DeleteColumn, command: 'deleteColumn' },
- null,
- { label: 'Insert row above', Icon: InsertRowTop, command: 'addRowBefore' },
- { label: 'Insert row below', Icon: InsertRowBottom, command: 'addRowAfter' },
- { label: 'Delete row', Icon: DeleteRow, command: 'deleteRow' },
- null,
- { label: 'Delete table', Icon: GridOff, command: 'deleteTable' },
-]
-
-const TableControls = ({ editor }) => {
- if (!editor) return null
- return (
- <>
- {TABLE_ACTIONS.map((action, index) =>
- action ? (
- Enter your content here...
', - static: false, - }, - ]) - addBlockForm.reset({ - blockType: null, - testSuite: null, - selectedTest: [], - dbCacheType: null, - dbFormat: null, - }) - } else if (type.value === 'test') { - const tests = addBlockForm.getValues('selectedTest') - const testArray = Array.isArray(tests) ? tests : tests ? [tests] : [] - if (testArray.length === 0) return - setBlocks((prev) => [ - ...prev, - ...testArray.map((test, i) => ({ - id: `block-${Date.now()}-${i}`, - type: 'test', - testId: test.value, - testCategory: test.category, - title: test.name || test.label, - content: getTestContent(test.value), - status: getTestStatus(test.value), - static: false, - })), - ]) - addBlockForm.reset({ - blockType: null, - testSuite: null, - selectedTest: [], - dbCacheType: null, - dbFormat: null, - }) - } else if (type.value === 'database') { - const dbType = addBlockForm.getValues('dbCacheType') - const dbFormat = addBlockForm.getValues('dbFormat') - if (!dbType?.value || !dbFormat?.value) return - const friendlyName = dbType.label || dbType.value - setBlocks((prev) => [ - ...prev, - { - id: `block-${Date.now()}`, - type: 'database', - dbType: dbType.value, - format: dbFormat.value, - title: friendlyName, - content: '', - data: null, - allHeaders: [], - selectedHeaders: [], - static: false, - }, - ]) - addBlockForm.reset({ - blockType: null, - testSuite: null, - selectedTest: [], - dbCacheType: null, - dbFormat: null, - }) - } - } - - // One click after picking a suite adds every test in it, instead of selecting them one by one. - const handleAddAllSuiteTests = () => { - if (!watchTestSuite?.value || filteredTestOptions.length === 0) return - setBlocks((prev) => [ - ...prev, - ...filteredTestOptions.map((test, i) => ({ - id: `block-${Date.now()}-${i}`, - type: 'test', - testId: test.value, - testCategory: test.category, - title: test.name || test.label, - content: getTestContent(test.value), - status: getTestStatus(test.value), - static: false, - })), - ]) - addBlockForm.reset({ - blockType: null, - testSuite: null, - selectedTest: [], - dbCacheType: null, - dbFormat: null, - }) - } - - const handleRemoveBlock = (index) => setBlocks((prev) => prev.filter((_, i) => i !== index)) - - const handleMoveBlockUp = (index) => { - if (index === 0) return - setBlocks((prev) => { - const next = [...prev] - ;[next[index - 1], next[index]] = [next[index], next[index - 1]] - return next - }) - } - - const handleMoveBlockDown = (index) => { - setBlocks((prev) => { - if (index >= prev.length - 1) return prev - const next = [...prev] - ;[next[index], next[index + 1]] = [next[index + 1], next[index]] - return next - }) - } - - const handleUpdateBlock = (index, b) => - setBlocks((prev) => prev.map((x, i) => (i === index ? b : x))) - - const handleRevertBlock = (index) => - setBlocks((prev) => - prev.map((b, i) => { - if (i !== index || b.type !== 'test') return b - return { - ...b, - content: getTestContent(b.testId), - status: getTestStatus(b.testId), - static: false, - } - }) - ) - - /* ── Template operations ── */ - const handleSaveTemplate = () => { - const name = saveForm.getValues('templateName') - if (!name?.trim()) return - saveTemplateCall.mutate({ - url: '/api/ExecReportBuilderTemplate?tenantFilter=' + currentTenant, - data: { - Action: 'save', - GUID: templateGUID || undefined, - Name: name, - Blocks: blocks.map(serialiseBlock), - Settings: reportSettings, - }, - }) - } - - const handleScheduleReport = () => { - const values = scheduleForm.getValues() - const name = saveForm.getValues('templateName') || 'Custom Report' - scheduleCall.mutate({ - url: '/api/AddScheduledItem', - data: { - TenantFilter: currentTenant, - Name: values.scheduleName || `Report Builder - ${name}`, - command: { - label: 'Generate Report Builder PDF', - value: 'Push-ExecGenerateReportBuilderReport', - }, - parameters: { - TemplateName: name, - TenantFilter: currentTenant, - IncludeRawAttachments: - settingsForm.getValues('includeRawAttachments') && hasDatabaseBlocks ? 'true' : 'false', - Blocks: JSON.stringify(blocks.map(serialiseBlock)), - Settings: JSON.stringify(reportSettings), - }, - ScheduledTime: Math.floor(Date.now() / 1000), - Recurrence: values.recurrence || { value: '0', label: 'Once' }, - postExecution: values.postExecution || [], - taskType: { value: 'scheduled', label: 'Scheduled' }, - }, - }) - } - - const handleDownload = () => { - import('@react-pdf/renderer').then(({ pdf }) => { - const { - ReportBuilderDocument, - } = require('../../../../components/ReportBuilder/ReportBuilderPDF') - const doc = ( -| ${escapeHtml(cell)} | ` + }) + tableHtml += '
|---|
| ${escapeHtml(cell)} | ` + }) + tableHtml += '
${line.slice(4)}
`) + } else if (line.startsWith('## ')) { + htmlParts.push(`${line.slice(3)}
`) + } else if (line.startsWith('# ')) { + htmlParts.push(`${line.slice(2)}
`) + } else if (line.trim().match(/^[-*+]\s/)) { + htmlParts.push(`${line}
`) + } + i++ + } + + return htmlParts + .join('') + .replace(/(- ${match}
$1')
+ .replace(/\[(.*?)\]\((.*?)\)/g, '$1');
+}
+
+/* ── Table row/column controls ─────────────────────────────
+ * mui-tiptap's TableMenuControls renders a fixed set with no way to leave buttons out, so
+ * the subset the PDF can actually reproduce is composed here. Merge/split cells and the
+ * header toggles are deliberately absent: the PDF lays every row out on one fixed column
+ * grid, which a merged cell has no place in, and it decides a table has a heading from its
+ * first row being header cells — so toggling that off would cost the table its header bar
+ * and its repeat across page breaks.
+ */
+const TABLE_ACTIONS = [
+ { label: 'Insert column before', Icon: InsertColumnLeft, command: 'addColumnBefore' },
+ { label: 'Insert column after', Icon: InsertColumnRight, command: 'addColumnAfter' },
+ { label: 'Delete column', Icon: DeleteColumn, command: 'deleteColumn' },
+ null,
+ { label: 'Insert row above', Icon: InsertRowTop, command: 'addRowBefore' },
+ { label: 'Insert row below', Icon: InsertRowBottom, command: 'addRowAfter' },
+ { label: 'Delete Row', Icon: DeleteRow, command: 'deleteRow' },
+ null,
+ { label: 'Delete table', Icon: CippIcons.GridOff, command: 'deleteTable' },
+]
+
+const TableControls = ({ editor }) => {
+ if (!editor) return null
+ return (
+ <>
+ {TABLE_ACTIONS.map((action, index) =>
+ action ? (
+ Enter your content here...
', + static: false, + }, + ]) + addBlockForm.reset({ + blockType: null, + testSuite: null, + selectedTest: [], + dbCacheType: null, + dbFormat: null, + }) + } else if (type.value === 'test') { + const tests = addBlockForm.getValues('selectedTest') + const testArray = Array.isArray(tests) ? tests : tests ? [tests] : [] + if (testArray.length === 0) return + setBlocks((prev) => [ + ...prev, + ...testArray.map((test, i) => ({ + id: `block-${Date.now()}-${i}`, + type: 'test', + testId: test.value, + testCategory: test.category, + title: test.name || test.label, + content: getTestContent(test.value), + status: getTestStatus(test.value), + static: false, + })), + ]) + addBlockForm.reset({ + blockType: null, + testSuite: null, + selectedTest: [], + dbCacheType: null, + dbFormat: null, + }) + } else if (type.value === 'database') { + const dbType = addBlockForm.getValues('dbCacheType') + const dbFormat = addBlockForm.getValues('dbFormat') + if (!dbType?.value || !dbFormat?.value) return + const friendlyName = dbType.label || dbType.value + setBlocks((prev) => [ + ...prev, + { + id: `block-${Date.now()}`, + type: 'database', + dbType: dbType.value, + format: dbFormat.value, + title: friendlyName, + content: '', + data: null, + allHeaders: [], + selectedHeaders: [], + static: false, + }, + ]) + addBlockForm.reset({ + blockType: null, + testSuite: null, + selectedTest: [], + dbCacheType: null, + dbFormat: null, + }) + } + } + + // One click after picking a suite adds every test in it, instead of selecting them one by one. + const handleAddAllSuiteTests = () => { + if (!watchTestSuite?.value || filteredTestOptions.length === 0) return + setBlocks((prev) => [ + ...prev, + ...filteredTestOptions.map((test, i) => ({ + id: `block-${Date.now()}-${i}`, + type: 'test', + testId: test.value, + testCategory: test.category, + title: test.name || test.label, + content: getTestContent(test.value), + status: getTestStatus(test.value), + static: false, + })), + ]) + addBlockForm.reset({ + blockType: null, + testSuite: null, + selectedTest: [], + dbCacheType: null, + dbFormat: null, + }) + } + + const handleRemoveBlock = (index) => setBlocks((prev) => prev.filter((_, i) => i !== index)) + + const handleMoveBlockUp = (index) => { + if (index === 0) return + setBlocks((prev) => { + const next = [...prev] + ;[next[index - 1], next[index]] = [next[index], next[index - 1]] + return next + }) + } + + const handleMoveBlockDown = (index) => { + setBlocks((prev) => { + if (index >= prev.length - 1) return prev + const next = [...prev] + ;[next[index], next[index + 1]] = [next[index + 1], next[index]] + return next + }) + } + + const handleUpdateBlock = (index, b) => + setBlocks((prev) => prev.map((x, i) => (i === index ? b : x))) + + const handleRevertBlock = (index) => + setBlocks((prev) => + prev.map((b, i) => { + if (i !== index || b.type !== 'test') return b + return { + ...b, + content: getTestContent(b.testId), + status: getTestStatus(b.testId), + static: false, + } + }) + ) + + /* ── Template operations ── */ + const handleSaveTemplate = () => { + const name = saveForm.getValues('templateName') + if (!name?.trim()) return + saveTemplateCall.mutate({ + url: '/api/ExecReportBuilderTemplate?tenantFilter=' + currentTenant, + data: { + Action: 'save', + GUID: templateGUID || undefined, + Name: name, + Blocks: blocks.map(serialiseBlock), + Settings: reportSettings, + }, + }) + } + + const handleScheduleReport = () => { + const values = scheduleForm.getValues() + const name = saveForm.getValues('templateName') || 'Custom Report' + const parameters = { + TemplateName: name, + TenantFilter: currentTenant, + IncludeRawAttachments: + settingsForm.getValues('includeRawAttachments') && hasDatabaseBlocks ? 'true' : 'false', + } + if (linkScheduleToTemplate) { + // No Blocks/Settings: the executor loads both from the template at run time. + parameters.TemplateGUID = templateGUID + } else { + parameters.Blocks = JSON.stringify(blocks.map(serialiseBlock)) + parameters.Settings = JSON.stringify(reportSettings) + } + scheduleCall.mutate({ + url: '/api/AddScheduledItem', + data: { + TenantFilter: currentTenant, + Name: values.scheduleName || `Report Builder - ${name}`, + command: { + label: 'Generate Report Builder PDF', + value: 'Push-ExecGenerateReportBuilderReport', + }, + parameters, + ScheduledTime: Math.floor(Date.now() / 1000), + Recurrence: values.recurrence || { value: '0', label: 'Once' }, + postExecution: values.postExecution || [], + taskType: { value: 'scheduled', label: 'Scheduled' }, + }, + }) + } + + const handleDownload = () => { + import('@react-pdf/renderer').then(({ pdf }) => { + const { + ReportBuilderDocument, + } = require('../../../../components/ReportBuilder/ReportBuilderPDF') + const doc = ( +Report ID is required
- }
-
- return (
- Report ID is required
+ }
+
+ return (
+
- {viewOptions.map((option) => {
- const isCurrent = option.value === view;
-
- return (
-
- handleViewChange(option.value)}
- >
- {option.icon}
-
-
- );
- })}
-
-
-
-
- -
-
-
-
-
- {transactions.map((transaction, index) => {
- const hasDivider = transactions.length > index + 1;
-
- return (
-
-
-
-
-
- {content}
-
-
-
- Customers
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Home
-
-
- Customers
-
-
- Pending
-
-
-
-
-
- Natalie Rusell
-
-
-
-
-
-
-
- {item.label}
-
- {item.value}
-
-
-
-
- {subjectName}
-
- {' '}
- {message}
-
-
- {ago} ago
-
-
-
-
- onViewChange?.(value)}
- value={view}
- variant="scrollable"
- >
- {viewOptions.map((option) => (
-
-
-
- {hasSelection && (
-
-
-
-
- Invoice to
-
-
- Acme LTD GB54423345
-
- 340 Lemon St. #5554 -
- Spring Valley, California -
- United States -
-
- - 340 Lemon St. #5554 -
- Spring Valley, California -
- United States -
- 3845 Salty Street -
- Salt Lake City -
- United States -
-
- Invoice Date
-
-
- {issueDate}
-
-
-
-
- Due Date
-
-
- {dueDate}
-
-
-
-
- onViewChange?.(value)}
- value={view}
- variant="scrollable"
- >
- {viewOptions.map((option) => (
-
-
-
- {hasSelection && (
-
-
-
-
-
-
-
- onViewChange?.(value)}
- value={view}
- variant="scrollable"
- >
- {viewOptions.map((option) => (
-
-
-
- {hasSelection && (
- {
- if (value) {
- onModeChange?.(value);
- }
- }}
- size="small"
- sx={{
- border: (theme) => `1px solid ${theme.palette.divider}`,
- p: 0.5,
- order: 2,
- [`& .${toggleButtonClasses.root}`]: {
- border: 0,
- '&:not(:first-of-type)': {
- borderRadius: 1
- },
- '&:first-of-type': {
- borderRadius: 1,
- mr: 0.5
- }
- }
- }}
- value={mode}
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {option.label}
-
-
- {option.description}
-
-
-
-
- Welcome!
-
-
- Lets setup your RMM or something something something?
-
-
-
- 2/5
-
-
-
-
- 
- -
- {notifications.map((notification, index) => {
- const hasDivider = notifications.length > index + 1;
-
-
- return (
-
-
- {label}
-
-
- {value}
-
-
- -
- {reviews.map((review, index) => {
- const hasDivider = reviews.length > index + 1;
- const percentage = ((100 * review.totalReviews) / totalReviews).toFixed(2);
-
- return (
-
-
-
-
- Total views
-
-
- 27k
-
-
- {chartSeries.map((item, index) => (
-
-
- {labels[index]}
-
-
- ))}
-
-
-
-
-
-
- Return rate
-
-
- 1.5%
-
-
- {chartSeries.map((item, index) => (
-
-
- {labels[index]}
-
-
- ))}
-
-
-
-
-
-
-
- onViewChange?.(value)}
- value={view}
- variant="scrollable"
- >
- {viewOptions.map((option) => (
-
-
-
- {hasSelection && (
-
-
-
-
- {item.name}
-
- {item.data}
-
-
+ {/* MUI's Drawer invokes onClose with a reason for backdrop clicks and Escape;
+ these stand in for those dismissal paths (the X button passes no reason) */}
+
+
+
{children}
{footer}
@@ -200,5 +205,50 @@ describe('CippAddUserDrawer - create another user without a page refresh (issue
primDomain: { value: 'testdomain.com' },
})
// two full form fills through userEvent.type
- }, 15000)
+ }, 30000)
+})
+
+describe('CippAddUserDrawer - backdrop click must not wipe typed input (issue #390)', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ postState = { isPending: false, isSuccess: false, isError: false }
+ mutateSpy = vi.fn()
+ mockApis()
+ })
+
+ it('ignores backdrop and Escape dismissals; the X and Close buttons still close and reset', async () => {
+ const user = userEvent.setup()
+ renderWithProviders(ValueEq Content
+ Legacy ValueEq Content
+ Hidden ValueEq Content
+ Internal reply
', + ExternalMessage: 'External reply
', + CreateOOFEvent: true, + OOFEventSubject: 'Away', + AutoDeclineFutureRequestsWhenOOF: false, + DeclineEventsForScheduledOOF: false, + DeclineMeetingMessage: '', + } + }) + + it('prefills the form from ListOoO for a single user and submits those values', async () => { + const user = userEvent.setup() + renderOooDialog() + + // The prefill lands a tick after mount (deferred past the dialog's form reset) + await waitFor(() => { + expect(screen.getByRole('combobox')).toHaveValue('Scheduled') + }) + + await user.click(screen.getByRole('button', { name: 'Confirm' })) + + await waitFor(() => { + expect(apiState.mutate).toHaveBeenCalledTimes(1) + }) + const payload = apiState.mutate.mock.calls[0][0] + expect(payload.url).toBe('/api/ExecSetOoO') + expect(payload.data.userId).toBe('john@contoso.com') + expect(payload.data.tenantFilter).toBe('contoso.com') + expect(payload.data.AutoReplyState).toMatchObject({ value: 'Scheduled' }) + expect(payload.data.InternalMessage).toBe('Internal reply
') + expect(payload.data.ExternalMessage).toBe('External reply
') + expect(payload.data.StartTime).toBe(new Date('2026-09-01T08:00:00Z').getTime() / 1000) + expect(payload.data.EndTime).toBe(new Date('2026-09-15T17:00:00Z').getTime() / 1000) + expect(payload.data.CreateOOFEvent).toBe(true) + expect(payload.data.OOFEventSubject).toBe('Away') + }) + + it('requests ListOoO for the selected user and tenant', async () => { + renderOooDialog() + + await waitFor(() => { + const call = apiState.getCalls.find((c) => c?.url === '/api/ListOoO') + expect(call).toBeTruthy() + expect(call.waiting).toBe(true) + expect(call.data).toMatchObject({ UserId: 'john@contoso.com' }) + }) + }) + + it('does not prefill when multiple users are selected', async () => { + renderOooDialog([row, { ...row, id: 'user-2', userPrincipalName: 'jane@contoso.com' }]) + + await waitFor(() => { + expect(screen.getByRole('combobox')).toBeInTheDocument() + }) + // The lookup is parked (waiting: false) and the form stays blank + const call = apiState.getCalls.find((c) => c?.url === '/api/ListOoO') + expect(call.waiting).toBe(false) + expect(screen.getByRole('combobox')).toHaveValue('') + }) +}) diff --git a/tests/components/CippComponents/CippUserReportedMessagesTable.test.jsx b/tests/components/CippComponents/CippUserReportedMessagesTable.test.jsx new file mode 100644 index 000000000000..45e84b8168ac --- /dev/null +++ b/tests/components/CippComponents/CippUserReportedMessagesTable.test.jsx @@ -0,0 +1,135 @@ +import React from 'react' +import { act, screen } from '@testing-library/react' +import { renderWithProviders, settingsWith } from '../../test-utils' +import { api, apiCallMock, getResult, postResult } from '../../mocks/api-call' +import { CippUserReportedMessagesTable } from '../../../src/components/CippComponents/CippUserReportedMessagesTable' + +const tableProps = vi.hoisted(() => ({ current: null })) +vi.mock('../../../src/api/ApiCall', async () => + (await import('../../mocks/api-call')).apiCallMock() +) +vi.mock('../../../src/components/CippComponents/CippTablePage.jsx', () => ({ + CippTablePage: (props) => { + tableProps.current = props + return + }, +})) + +const reportedRow = { + InternetMessageId: 'Out until Monday
') + }) +}) diff --git a/tests/components/ExecutiveReportButton.test.jsx b/tests/components/ExecutiveReportButton.test.jsx index cf86374b85bc..ddcf98921290 100644 --- a/tests/components/ExecutiveReportButton.test.jsx +++ b/tests/components/ExecutiveReportButton.test.jsx @@ -1,6 +1,7 @@ import React from 'react' import { screen, within } from '@testing-library/react' import userEvent from '@testing-library/user-event' +import { MenuList } from '@mui/material' import { renderWithProviders } from '../test-utils' import { ExecutiveReportButton } from '../../src/components/ExecutiveReportButton' @@ -91,7 +92,13 @@ describe('ExecutiveReportButton', () => { it('renders the menuItem variant and opens the dialog from it', async () => { const onClick = vi.fn() - renderWithProviders(