@saasicat/ui-vue 0.19.0 → 0.22.0

package/src/pages-standard/PilotsPage.vue

@@ -1,60 +1,51 @@
 <template>
-    <div class="sa-pilots">
-        <header class="sa-page-head">
-            <div>
-                <h1 class="sa-page-head__title">{{ msg.title }}</h1>
-                <p class="sa-page-head__sub">
-                    {{ formatMessage(msg.subtitleCount, { count: rows.length }) }}
-                </p>
-            </div>
-            <div class="sa-page-head__actions">
+    <AdminPage class="sa-pilots">
+        <AdminHero
+            :title="msg.title"
+            :subtitle="formatMessage(msg.subtitleCount, { count: rows.length })"
+        >
+            <template #actions>
                 <slot name="head-actions">
-                    <q-btn
+                    <button
                         v-if="enableCreate"
-                        unelevated
-                        color="primary"
-                        icon="add"
-                        :label="resolvedCreateLabel"
+                        class="sa-btn sa-btn--primary"
+                        type="button"
                         @click="showCreate = true"
-                    />
+                    >
+                        <q-icon name="add" size="16px" />
+                        <span>{{ resolvedCreateLabel }}</span>
+                    </button>
                 </slot>
-            </div>
-        </header>
-
-        <div class="sa-stats">
-            <button
-                v-for="tile in statTiles"
-                :key="tile.id"
-                class="sa-stat"
-                :class="[
-                    tile.tone ? `sa-stat--${tile.tone}` : null,
-                    filter === tile.id ? 'sa-stat--active' : null,
-                ]"
-                @click="filter = tile.id"
-            >
-                <span class="sa-stat__num">{{ tile.count }}</span>
-                <span class="sa-stat__label">{{ tile.label }}</span>
-                <span v-if="tile.hint" class="sa-stat__hint">{{ tile.hint }}</span>
-            </button>
-        </div>
-
-        <q-banner v-if="reviewSoon.length" class="bg-amber-2 text-grey-9 q-mb-md" rounded>
-            <template #avatar><q-icon name="event" color="amber-9" /></template>
-            {{ formatMessage(msg.list.reviewSoonBanner, { count: reviewSoon.length }) }}
-        </q-banner>
-
-        <div class="sa-pilots__card">
-            <q-table
-                flat
-                :rows="filteredRows"
-                :columns="effectiveColumns"
-                row-key="id"
-                :pagination="{ rowsPerPage: 0 }"
-                :loading="loading"
-                hide-pagination
-            >
-                <template #body-cell-actions="{ row }">
-                    <q-td>
+            </template>
+        </AdminHero>
+
+        <AdminBody>
+            <AdminStatistics :label="msg.title">
+                <AdminKpi
+                    v-for="tile in statTiles"
+                    :key="tile.id"
+                    :label="tile.label"
+                    :value="tile.count"
+                    :sub="tile.hint"
+                    :tone="tile.tone"
+                    :selected="filter === tile.id"
+                    :action="() => (filter = tile.id)"
+                />
+            </AdminStatistics>
+
+            <q-banner v-if="reviewSoon.length" class="bg-amber-2 text-grey-9 q-mb-md" rounded>
+                <template #avatar><q-icon name="event" color="amber-9" /></template>
+                {{ formatMessage(msg.list.reviewSoonBanner, { count: reviewSoon.length }) }}
+            </q-banner>
+
+            <AdminSection class="sa-pilots__card">
+                <AdminTable
+                    :rows="filteredRows"
+                    :columns="effectiveColumns"
+                    :loading="loading"
+                    storage-key="pilots"
+                >
+                    <template #row-actions="{ row }">
                         <slot name="row-actions" :row="row">
                             <q-btn
                                 v-for="action in visibleActions(row)"
@@ -67,10 +58,10 @@
                                 @click="action.handler(row)"
                             />
                         </slot>
-                    </q-td>
-                </template>
-            </q-table>
-        </div>
+                    </template>
+                </AdminTable>
+            </AdminSection>
+        </AdminBody>
 
         <PilotCreateDialog
             v-if="enableCreate && submitCreate"
@@ -98,22 +89,30 @@
 
         <MfaPromptDialog
             v-if="needsMfaDialog"
-            :model-value="showMfa"
-            :description="mfaDescription"
-            :error="mfaError"
+            :model-value="mfa.show.value"
+            :description="mfa.description.value"
+            :error="mfa.error.value"
             :setup-hint="mfaSetupHint"
-            @update:model-value="onMfaDialogVisibility"
-            @confirm="onMfaConfirm"
+            @update:model-value="mfa.onVisibility"
+            @confirm="mfa.onConfirm"
         />
-    </div>
+    </AdminPage>
 </template>
 
 <script setup lang="ts">
+import AdminTable from '../components/admin-page/AdminTable.vue';
 import { computed, onMounted, ref } from 'vue';
+import { useMfaPrompt } from '../vue/use-mfa-prompt.js';
 import { useQuasar } from 'quasar';
 import { formatMessage } from '../client/i18n/format.js';
 import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import { useSuperAdminNotify } from '../quasar/notify.js';
+import AdminBody from '../components/admin-page/AdminBody.vue';
+import AdminHero from '../components/admin-page/AdminHero.vue';
+import AdminSection from '../components/admin-page/AdminSection.vue';
+import AdminKpi from '../components/admin-page/AdminKpi.vue';
+import AdminPage from '../components/admin-page/AdminPage.vue';
+import AdminStatistics from '../components/admin-page/AdminStatistics.vue';
 import PilotCreateDialog from '../components/dialogs/PilotCreateDialog.vue';
 import PilotEditDialog from '../components/dialogs/PilotEditDialog.vue';
 import MfaPromptDialog from '../components/MfaPromptDialog.vue';
@@ -219,38 +218,11 @@ const showEdit = ref(false);
 const editRow = ref<PilotRow | null>(null);
 const bakedPlanOptions = ref<PilotPlanOption[]>([]);
 
-// MFA dialog state for per-flow MFA (extend/revoke). Promise-resolver pattern
-// analogous to use-platform-tenant-actions.ts: `onExtendClick`/`onRevokeClick`
-// calls `runWithMfa(...)`, which opens the dialog and waits for `onMfaConfirm`
-// (or cancellation via `update:modelValue=false`).
-const showMfa = ref(false);
-const mfaError = ref('');
-const mfaDescription = ref('');
-let pendingMfaResolve: ((code: string | null) => void) | null = null;
+// Per-flow MFA for extend/revoke: `runWithMfa` awaits `mfa.prompt`, which
+// resolves with the code or with null when the user closes the dialog.
+const mfa = useMfaPrompt();
 const needsMfaDialog = computed(() => props.requireMfaForExtend || props.requireMfaForRevoke);
 
-function promptMfa(description: string): Promise<string | null> {
-    return new Promise((resolve) => {
-        mfaDescription.value = description;
-        mfaError.value = '';
-        showMfa.value = true;
-        pendingMfaResolve = (code) => {
-            pendingMfaResolve = null;
-            resolve(code);
-        };
-    });
-}
-
-function onMfaConfirm(code: string): void {
-    pendingMfaResolve?.(code);
-}
-
-function onMfaDialogVisibility(open: boolean): void {
-    showMfa.value = open;
-    if (!open && pendingMfaResolve) {
-        pendingMfaResolve(null);
-    }
-}
 // Consumers can set `createPlanOptions` instead of `loadPlanOptions`
 // (e.g. apps with a hard-coded plan list).
 const effectiveCreatePlanOptions = computed<readonly (string | PilotPlanOption)[]>(() => {
@@ -388,14 +360,6 @@ const mergedActions = computed<readonly PilotRowAction[]>(() => [
 
 const effectiveColumns = computed(() => {
     const cols = [...baseColumns.value];
-    if (mergedActions.value.length > 0) {
-        cols.push({
-            name: 'actions',
-            label: '',
-            field: ((r: PilotRow) => r.id) as never,
-            align: 'right' as 'left',
-        });
-    }
     return cols;
 });
 
@@ -498,21 +462,21 @@ async function runAction(
     // MFA loop: as long as the server returns 401, keep the dialog open and
     // wait again for a code. Cancelling (resolver === null) ends it.
     while (true) {
-        const code = await promptMfa(actionLabel);
+        const code = await mfa.prompt(actionLabel);
         if (code === null) return;
         try {
             await invoke(code);
-            showMfa.value = false;
+            mfa.show.value = false;
             notify('positive', successMessage);
             await reload();
             return;
         } catch (err) {
             const status = (err as { response?: { status?: number } })?.response?.status;
             if (status === 401) {
-                mfaError.value = msg.value.mfa.invalidOrNotSetUp;
+                mfa.error.value = msg.value.mfa.invalidOrNotSetUp;
                 continue;
             }
-            showMfa.value = false;
+            mfa.show.value = false;
             notify('negative', errMsg(err));
             return;
         }
@@ -574,16 +538,4 @@ function formatDate(iso: string | null | undefined): string | null {
 }
 </script>
 
-<style scoped>
-.sa-pilots {
-    min-height: calc(100vh - 56px);
-    background: var(--sa-bg-app, #f1f5f9);
-    padding: 20px 28px 28px;
-}
-.sa-pilots__card {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 12px;
-    overflow: hidden;
-}
-</style>
+<style scoped></style>