feat(mail): build out the Mail Admin Dashboard

frontend/src/apps/mail/components/AppSidebar.vue

@@ -107,18 +107,30 @@ import QuotaBar from '@/apps/mail/components/QuotaBar.vue'
 import type { MailboxData } from '@/apps/mail/types'
 
 import BookUser from '~icons/lucide/book-user'
+import Clock from '~icons/lucide/clock'
 import ContactRound from '~icons/lucide/contact-round'
 import Crown from '~icons/lucide/crown'
 import Ellipsis from '~icons/lucide/ellipsis'
+import Flag from '~icons/lucide/flag'
 import Globe from '~icons/lucide/globe'
+import KeyRound from '~icons/lucide/key-round'
+import Lock from '~icons/lucide/lock'
 import LogOut from '~icons/lucide/log-out'
 import Mailbox from '~icons/lucide/mailbox'
 import Mails from '~icons/lucide/mails'
+import Megaphone from '~icons/lucide/megaphone'
 import Plus from '~icons/lucide/plus'
+import Radar from '~icons/lucide/radar'
+import ScrollText from '~icons/lucide/scroll-text'
 import Settings from '~icons/lucide/settings'
+import Shield from '~icons/lucide/shield'
+import ShieldCheck from '~icons/lucide/shield-check'
+import Signature from '~icons/lucide/signature'
 import Star from '~icons/lucide/star'
 import Trash2 from '~icons/lucide/trash-2'
 import Users from '~icons/lucide/users'
+import UsersRound from '~icons/lucide/users-round'
+import Wrench from '~icons/lucide/wrench'
 
 const route = useRoute()
 const router = useRouter()
@@ -252,6 +264,42 @@ const menuItems = computed(() => [
 
 const dashboardItems = [
 	{
+		label: __('Directory'),
+		items: [
+			{
+				label: __('Members'),
+				icon: Users,
+				to: { name: 'mail-members' },
+				activeFor: ['mail-members', 'mail-invites', 'mail-member'],
+			},
+			{
+				label: __('Groups'),
+				icon: UsersRound,
+				to: { name: 'mail-groups' },
+				activeFor: ['mail-groups', 'mail-group'],
+			},
+			{
+				label: __('Mailing Lists'),
+				icon: Megaphone,
+				to: { name: 'mail-mailing-lists' },
+				activeFor: ['mail-mailing-lists', 'mail-mailing-list'],
+			},
+			{
+				label: __('Roles'),
+				icon: Shield,
+				to: { name: 'mail-roles' },
+				activeFor: ['mail-roles', 'mail-role'],
+			},
+			{
+				label: __('OAuth Clients'),
+				icon: KeyRound,
+				to: { name: 'mail-oauth-clients' },
+				activeFor: ['mail-oauth-clients', 'mail-oauth-client'],
+			},
+		],
+	},
+	{
+		label: __('Domains'),
 		items: [
 			{
 				label: __('Domains'),
@@ -260,10 +308,89 @@ const dashboardItems = [
 				activeFor: ['mail-domains', 'mail-domain'],
 			},
 			{
-				label: __('Members'),
-				icon: Users,
-				to: { name: 'mail-members' },
-				activeFor: ['mail-members', 'mail-invites', 'mail-member'],
+				label: __('DKIM Signatures'),
+				icon: Signature,
+				to: { name: 'mail-dkim-signatures' },
+				activeFor: ['mail-dkim-signatures', 'mail-dkim-signature'],
+			},
+		],
+	},
+	{
+		label: __('Emails'),
+		items: [
+			{
+				label: __('Queued'),
+				icon: Clock,
+				to: { name: 'mail-queued-messages' },
+				activeFor: ['mail-queued-messages', 'mail-queued-message'],
+			},
+			{
+				label: __('Delivery Test'),
+				icon: Radar,
+				to: { name: 'mail-delivery-test' },
+				activeFor: ['mail-delivery-test'],
+			},
+		],
+	},
+	{
+		label: __('Inbound Reports'),
+		items: [
+			{
+				label: __('DMARC'),
+				icon: ShieldCheck,
+				to: { name: 'mail-reports-dmarc-inbound' },
+				activeFor: ['mail-reports-dmarc-inbound'],
+			},
+			{
+				label: __('TLS'),
+				icon: Lock,
+				to: { name: 'mail-reports-tls-inbound' },
+				activeFor: ['mail-reports-tls-inbound'],
+			},
+			{
+				label: __('ARF'),
+				icon: Flag,
+				to: { name: 'mail-reports-arf-inbound' },
+				activeFor: ['mail-reports-arf-inbound'],
+			},
+		],
+	},
+	{
+		label: __('Outbound Reports'),
+		items: [
+			{
+				label: __('DMARC'),
+				icon: ShieldCheck,
+				to: { name: 'mail-reports-dmarc-outbound' },
+				activeFor: ['mail-reports-dmarc-outbound'],
+			},
+			{
+				label: __('TLS'),
+				icon: Lock,
+				to: { name: 'mail-reports-tls-outbound' },
+				activeFor: ['mail-reports-tls-outbound'],
+			},
+		],
+	},
+	{
+		label: __('Observability'),
+		items: [
+			{
+				label: __('Logs'),
+				icon: ScrollText,
+				to: { name: 'mail-logs' },
+				activeFor: ['mail-logs', 'mail-log'],
+			},
+		],
+	},
+	{
+		label: __('Actions'),
+		items: [
+			{
+				label: __('Actions'),
+				icon: Wrench,
+				to: { name: 'mail-actions' },
+				activeFor: ['mail-actions'],
 			},
 		],
 	},

frontend/src/apps/mail/components/DashboardPager.vue

@@ -0,0 +1,37 @@
+<template>
+	<div v-if="total > 0" class="text-ink-gray-5 flex items-center justify-between px-1 py-2 text-sm">
+		<span>{{ rangeLabel }}</span>
+		<div class="flex items-center gap-2">
+			<Button variant="ghost" :disabled="page <= 1" @click="emit('update:page', page - 1)">
+				<template #icon><FeatherIcon name="chevron-left" class="h-4 w-4" /></template>
+			</Button>
+			<span>{{ page }} / {{ totalPages }}</span>
+			<Button variant="ghost" :disabled="!canGoNext" @click="emit('update:page', page + 1)">
+				<template #icon><FeatherIcon name="chevron-right" class="h-4 w-4" /></template>
+			</Button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Button, FeatherIcon } from 'frappe-ui'
+
+// `hasNextPage` overrides the count-derived limit, for listings whose total cannot be trusted to
+// bound the pages (the log store reports how many entries it retains, ignoring any search).
+const {
+	page,
+	pageLength,
+	total,
+	hasNextPage = undefined,
+} = defineProps<{ page: number; pageLength: number; total: number; hasNextPage?: boolean }>()
+const emit = defineEmits<{ 'update:page': [value: number] }>()
+
+const totalPages = computed(() => Math.max(1, Math.ceil(total / pageLength)))
+const canGoNext = computed(() => (hasNextPage === undefined ? page < totalPages.value : hasNextPage))
+const rangeLabel = computed(() => {
+	const start = (page - 1) * pageLength + 1
+	const end = Math.min(page * pageLength, total)
+	return __('{0}–{1} of {2}').replace('{0}', String(start)).replace('{1}', String(end)).replace('{2}', String(total))
+})
+</script>

frontend/src/apps/mail/components/Modals/AddGroupEmailModal.vue

@@ -0,0 +1,75 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title: __('Add Email Address'),
+			actions: [
+				{ label: __('Add'), variant: 'solid', disabled: !(username && domain), onClick: addEmail.submit },
+			],
+		}"
+	>
+		<template #body-content>
+			<div class="space-y-4">
+				<div class="flex items-center justify-between">
+					<FormControl v-model="username" :label="__('Username')" placeholder="team" class="w-full" />
+					<FeatherIcon class="text-ink-gray-3 mx-2.5 mb-1.5 mt-auto h-4 w-4" name="at-sign" />
+					<FormControl
+						v-model="domain"
+						type="combobox"
+						:label="__('Domain')"
+						placeholder="yourdomain.com"
+						class="w-full"
+						:options="domains.data"
+						:open-on-click="true"
+					/>
+				</div>
+				<FormControl
+					v-model="description"
+					:label="__('Description')"
+					:placeholder="__('Used as the display name for this address')"
+				/>
+				<ErrorMessage :message="addEmail.error?.messages?.[0] || addEmail.error?.message" />
+			</div>
+		</template>
+	</Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Dialog, ErrorMessage, FeatherIcon, FormControl, createResource } from 'frappe-ui'
+
+import { raiseToast } from '@/apps/mail/utils'
+
+const show = defineModel<boolean>()
+const { groupId } = defineProps<{ groupId: string }>()
+const emit = defineEmits(['reload'])
+
+const username = ref('')
+const domain = ref('')
+const description = ref('')
+
+const domains = createResource({ url: 'suite.mail.api.admin.get_enabled_domains', auto: true })
+
+watch(show, () => {
+	if (show.value) {
+		username.value = ''
+		domain.value = ''
+		description.value = ''
+		addEmail.reset()
+	}
+})
+
+const addEmail = createResource({
+	url: 'suite.mail.api.admin.add_group_email',
+	makeParams: () => ({
+		group_id: groupId,
+		email: `${username.value}@${domain.value}`,
+		description: description.value?.trim() || undefined,
+	}),
+	onSuccess: () => {
+		show.value = false
+		emit('reload')
+		raiseToast(__('Email address added.'))
+	},
+})
+</script>

frontend/src/apps/mail/components/Modals/AddGroupMembersModal.vue

@@ -0,0 +1,58 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title: __('Add Members'),
+			actions: [
+				{ label: __('Add'), variant: 'solid', disabled: !accountIds.length, onClick: addMembers.submit },
+			],
+		}"
+	>
+		<template #body-content>
+			<div class="space-y-1.5">
+				<label class="text-ink-gray-5 block text-xs">{{ __('Accounts') }}</label>
+				<MultiSelect v-model="accountIds" :options="options" />
+				<ErrorMessage :message="addMembers.error?.messages?.[0] || addMembers.error?.message" />
+			</div>
+		</template>
+	</Dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { Dialog, ErrorMessage, MultiSelect, createResource } from 'frappe-ui'
+
+import { raiseToast } from '@/apps/mail/utils'
+
+const show = defineModel<boolean>()
+const { groupId, currentIds } = defineProps<{ groupId: string; currentIds: string[] }>()
+const emit = defineEmits(['reload'])
+
+const accountIds = ref<string[]>([])
+
+const accounts = createResource({ url: 'suite.mail.api.admin.get_accounts', auto: true })
+
+// Exclude accounts already in the group.
+const options = computed(() =>
+	(accounts.data || [])
+		.filter((a: { id: string }) => !currentIds.includes(a.id))
+		.map((a: { id: string; email: string }) => ({ label: a.email, value: a.id })),
+)
+
+watch(show, () => {
+	if (show.value) {
+		accountIds.value = []
+		addMembers.reset()
+	}
+})
+
+const addMembers = createResource({
+	url: 'suite.mail.api.admin.add_group_members',
+	makeParams: () => ({ group_id: groupId, account_ids: accountIds.value }),
+	onSuccess: () => {
+		show.value = false
+		emit('reload')
+		raiseToast(__('Members added.'))
+	},
+})
+</script>