diff --git a/apps/publisher-dashboard/src/lib/components/account/index.ts b/apps/publisher-dashboard/src/lib/components/account/index.ts index c10a41a..8d5b145 100644 --- a/apps/publisher-dashboard/src/lib/components/account/index.ts +++ b/apps/publisher-dashboard/src/lib/components/account/index.ts @@ -1,7 +1,6 @@ export { default as AccountNav } from "./account-nav.svelte"; export { default as AddPasskeyDialog } from "./add-passkey-dialog.svelte"; export { default as ChangePasswordDialog } from "./change-password-dialog.svelte"; -export { default as ConfirmDialog } from "./confirm-dialog.svelte"; export { default as DeleteAccountDialog } from "./delete-account-dialog.svelte"; export { default as PasskeyList } from "./passkey-list.svelte"; export { default as RenamePasskeyDialog } from "./rename-passkey-dialog.svelte"; diff --git a/apps/publisher-dashboard/src/lib/components/account/passkey-list.svelte b/apps/publisher-dashboard/src/lib/components/account/passkey-list.svelte index 672e9e4..9bd6fdc 100644 --- a/apps/publisher-dashboard/src/lib/components/account/passkey-list.svelte +++ b/apps/publisher-dashboard/src/lib/components/account/passkey-list.svelte @@ -5,7 +5,7 @@ import { useQueryClient } from "@tanstack/svelte-query"; import { toast } from "svelte-sonner"; import { api } from "$lib/api/client"; import { Button } from "$lib/components/ui/button"; -import ConfirmDialog from "./confirm-dialog.svelte"; +import { ConfirmDialog } from "$lib/components/ui/confirm-dialog"; import RenamePasskeyDialog from "./rename-passkey-dialog.svelte"; interface Passkey { diff --git a/apps/publisher-dashboard/src/lib/components/dashboard/tabs/ad-unit-table.svelte b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/ad-unit-table.svelte index 136eae7..24ac6f0 100644 --- a/apps/publisher-dashboard/src/lib/components/dashboard/tabs/ad-unit-table.svelte +++ b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/ad-unit-table.svelte @@ -1,7 +1,11 @@ - - - - - Ad unit - Revenue - -
- % of revenue - - - -
- - Impressions - % of impr. - - - - {#each tableData as row, i (row.id)} - - -
- {i + 1} -
- - - {row.name} - - {row.revenue} - -
-
-
-
- {row.revPercent.toFixed(2)}% -
- - {row.impressions} - {row.impPercent.toFixed(2)}% - - {/each} - - + + {#snippet labelCell({ row })} + {(row as AdUnitRow).name} + {/snippet} + diff --git a/apps/publisher-dashboard/src/lib/components/dashboard/tabs/country-table.svelte b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/country-table.svelte index c45ce41..e2e212b 100644 --- a/apps/publisher-dashboard/src/lib/components/dashboard/tabs/country-table.svelte +++ b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/country-table.svelte @@ -1,7 +1,12 @@ - - - - - Country - Revenue - % of revenue - Impressions - % of impr. - - - - {#each tableData as row, i (row.id)} - - -
- {i + 1} -
- - -
- {row.code} - {row.name} -
- - {row.revenue} - -
-
-
-
- {row.revPercent.toFixed(2)}% -
- - {row.impressions} - {row.impPercent.toFixed(2)}% - - {/each} - - + + {#snippet labelCell({ row })} + {@const countryRow = row as CountryRow} +
+ {countryRow.code} + {countryRow.name} +
+ {/snippet} + diff --git a/apps/publisher-dashboard/src/lib/components/dashboard/tabs/domain-table.svelte b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/domain-table.svelte index 2881d6a..05af626 100644 --- a/apps/publisher-dashboard/src/lib/components/dashboard/tabs/domain-table.svelte +++ b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/domain-table.svelte @@ -1,7 +1,11 @@ - - - - - Domain - Revenue - % of revenue - Impressions - % of impr. - - - - {#each tableData as row, i (row.id)} - - -
- {i + 1} -
- - - {row.name} - - {row.revenue} - -
-
-
-
- {row.revPercent.toFixed(2)}% -
- - {row.impressions} - {row.impPercent.toFixed(2)}% - - {/each} - - + + {#snippet labelCell({ row })} + {(row as DomainRow).name} + {/snippet} + diff --git a/apps/publisher-dashboard/src/lib/components/dashboard/tabs/index.ts b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/index.ts index 85e7ce5..97e317e 100644 --- a/apps/publisher-dashboard/src/lib/components/dashboard/tabs/index.ts +++ b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/index.ts @@ -2,4 +2,5 @@ export { default as AdUnitTable } from "./ad-unit-table.svelte"; export { default as CountryTable } from "./country-table.svelte"; export { default as DomainTable } from "./domain-table.svelte"; export { default as KeyValueTable } from "./key-value-table.svelte"; +export { default as MetricsTable, type MetricsRow } from "./metrics-table.svelte"; export { default as SourceTable } from "./source-table.svelte"; diff --git a/apps/publisher-dashboard/src/lib/components/dashboard/tabs/key-value-table.svelte b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/key-value-table.svelte index 54a164f..ec478dc 100644 --- a/apps/publisher-dashboard/src/lib/components/dashboard/tabs/key-value-table.svelte +++ b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/key-value-table.svelte @@ -1,7 +1,17 @@ + + + + + + {labelHeader} + Revenue + +
+ % of revenue + {#if showSortIcon} + + + + {/if} +
+ + Impressions + % of impr. + + + + {#each data as row, i (row.id)} + + +
+ {i + 1} +
+ + + {@render labelCell({ row, index: i })} + + {row.revenue} + +
+
+
+
+ {row.revPercent.toFixed(2)}% +
+ + {row.impressions} + {row.impPercent.toFixed(2)}% + + {/each} + + diff --git a/apps/publisher-dashboard/src/lib/components/dashboard/tabs/source-table.svelte b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/source-table.svelte index cbac1f2..9412e82 100644 --- a/apps/publisher-dashboard/src/lib/components/dashboard/tabs/source-table.svelte +++ b/apps/publisher-dashboard/src/lib/components/dashboard/tabs/source-table.svelte @@ -1,7 +1,11 @@ - - - - - Source - Revenue - % of revenue - Impressions - % of impr. - - - - {#each tableData as row, i (row.id)} - - -
- {i + 1} -
- - - {row.name} - - {row.revenue} - -
-
-
-
- {row.revPercent.toFixed(2)}% -
- - {row.impressions} - {row.impPercent.toFixed(2)}% - - {/each} - - + + {#snippet labelCell({ row })} + {(row as SourceRow).name} + {/snippet} + diff --git a/apps/publisher-dashboard/src/lib/components/org/confirm-dialog.svelte b/apps/publisher-dashboard/src/lib/components/org/confirm-dialog.svelte deleted file mode 100644 index d935f00..0000000 --- a/apps/publisher-dashboard/src/lib/components/org/confirm-dialog.svelte +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - - - - Close - - - -
- - {title} - - - {description} - -
- - -
- - -
- - - diff --git a/apps/publisher-dashboard/src/lib/components/org/index.ts b/apps/publisher-dashboard/src/lib/components/org/index.ts index 003e996..9b52f03 100644 --- a/apps/publisher-dashboard/src/lib/components/org/index.ts +++ b/apps/publisher-dashboard/src/lib/components/org/index.ts @@ -1,3 +1,2 @@ -export { default as ConfirmDialog } from "./confirm-dialog.svelte"; export { default as OrgAvatar } from "./org-avatar.svelte"; export { default as RoleBadge } from "./role-badge.svelte"; diff --git a/apps/publisher-dashboard/src/lib/components/account/confirm-dialog.svelte b/apps/publisher-dashboard/src/lib/components/ui/confirm-dialog/confirm-dialog.svelte similarity index 94% rename from apps/publisher-dashboard/src/lib/components/account/confirm-dialog.svelte rename to apps/publisher-dashboard/src/lib/components/ui/confirm-dialog/confirm-dialog.svelte index 6f97257..ddca478 100644 --- a/apps/publisher-dashboard/src/lib/components/account/confirm-dialog.svelte +++ b/apps/publisher-dashboard/src/lib/components/ui/confirm-dialog/confirm-dialog.svelte @@ -28,7 +28,7 @@ let { onConfirm, }: Props = $props(); -async function handleConfirm() { +async function handleConfirm(): Promise { await onConfirm(); } @@ -54,8 +54,8 @@ async function handleConfirm() { {confirmText} @@ -77,7 +77,7 @@ async function handleConfirm() { {cancelText} {confirmText} diff --git a/apps/publisher-dashboard/src/lib/components/ui/confirm-dialog/index.ts b/apps/publisher-dashboard/src/lib/components/ui/confirm-dialog/index.ts new file mode 100644 index 0000000..bd45f8b --- /dev/null +++ b/apps/publisher-dashboard/src/lib/components/ui/confirm-dialog/index.ts @@ -0,0 +1 @@ +export { default as ConfirmDialog } from "./confirm-dialog.svelte"; diff --git a/apps/publisher-dashboard/src/routes/account/api-tokens/+page.svelte b/apps/publisher-dashboard/src/routes/account/api-tokens/+page.svelte index 6b6b98b..1bac4b9 100644 --- a/apps/publisher-dashboard/src/routes/account/api-tokens/+page.svelte +++ b/apps/publisher-dashboard/src/routes/account/api-tokens/+page.svelte @@ -14,7 +14,7 @@ import { toast } from "svelte-sonner"; import { goto } from "$app/navigation"; import { resolve } from "$app/paths"; import { api } from "$lib/api/client"; -import { ConfirmDialog } from "$lib/components/account"; +import { ConfirmDialog } from "$lib/components/ui/confirm-dialog"; import { Alert, AlertDescription } from "$lib/components/ui/alert"; import { Badge } from "$lib/components/ui/badge"; import { Button } from "$lib/components/ui/button"; diff --git a/apps/publisher-dashboard/src/routes/account/devices/+page.svelte b/apps/publisher-dashboard/src/routes/account/devices/+page.svelte index 3d7b56a..3ac0550 100644 --- a/apps/publisher-dashboard/src/routes/account/devices/+page.svelte +++ b/apps/publisher-dashboard/src/routes/account/devices/+page.svelte @@ -12,7 +12,7 @@ import { formatRelativeTime } from "@reviq/common"; import { createQuery, useQueryClient } from "@tanstack/svelte-query"; import { toast } from "svelte-sonner"; import { api } from "$lib/api/client"; -import { ConfirmDialog } from "$lib/components/account"; +import { ConfirmDialog } from "$lib/components/ui/confirm-dialog"; import { Alert, AlertDescription } from "$lib/components/ui/alert"; import { Badge } from "$lib/components/ui/badge"; import { Button } from "$lib/components/ui/button"; diff --git a/apps/publisher-dashboard/src/routes/account/sessions/+page.svelte b/apps/publisher-dashboard/src/routes/account/sessions/+page.svelte index 1e6c759..fafa9da 100644 --- a/apps/publisher-dashboard/src/routes/account/sessions/+page.svelte +++ b/apps/publisher-dashboard/src/routes/account/sessions/+page.svelte @@ -15,7 +15,7 @@ import { createQuery, useQueryClient } from "@tanstack/svelte-query"; import { toast } from "svelte-sonner"; import { UAParser } from "ua-parser-js"; import { api } from "$lib/api/client"; -import { ConfirmDialog } from "$lib/components/account"; +import { ConfirmDialog } from "$lib/components/ui/confirm-dialog"; import { Alert, AlertDescription } from "$lib/components/ui/alert"; import { Badge } from "$lib/components/ui/badge"; import { Button } from "$lib/components/ui/button"; diff --git a/apps/publisher-dashboard/src/routes/admin/orgs/+page.svelte b/apps/publisher-dashboard/src/routes/admin/orgs/+page.svelte index 3088e54..d7c5ccd 100644 --- a/apps/publisher-dashboard/src/routes/admin/orgs/+page.svelte +++ b/apps/publisher-dashboard/src/routes/admin/orgs/+page.svelte @@ -6,7 +6,7 @@ import { toast } from "svelte-sonner"; import { resolve } from "$app/paths"; import { api } from "$lib/api/client.js"; import { AdminLayout } from "$lib/components/layout"; -import ConfirmDialog from "$lib/components/org/confirm-dialog.svelte"; +import { ConfirmDialog } from "$lib/components/ui/confirm-dialog"; import { Button } from "$lib/components/ui/button/index.js"; import { Card, @@ -238,8 +238,7 @@ async function executeConfirmAction() { title={confirmDialogTitle} description={confirmDialogDescription} variant="destructive" - confirmLabel="Delete" + confirmText="Delete" loading={isConfirmLoading} - onconfirm={executeConfirmAction} - oncancel={() => confirmDialogOpen = false} + onConfirm={executeConfirmAction} /> diff --git a/apps/publisher-dashboard/src/routes/admin/orgs/[slug]/+page.svelte b/apps/publisher-dashboard/src/routes/admin/orgs/[slug]/+page.svelte index f5e90a8..276ce93 100644 --- a/apps/publisher-dashboard/src/routes/admin/orgs/[slug]/+page.svelte +++ b/apps/publisher-dashboard/src/routes/admin/orgs/[slug]/+page.svelte @@ -16,7 +16,8 @@ import { resolve } from "$app/paths"; import { page } from "$app/state"; import { api } from "$lib/api/client"; import { AdminLayout } from "$lib/components/layout"; -import { ConfirmDialog, OrgAvatar } from "$lib/components/org"; +import { OrgAvatar } from "$lib/components/org"; +import { ConfirmDialog } from "$lib/components/ui/confirm-dialog"; import { Alert, AlertDescription } from "$lib/components/ui/alert"; import { Button } from "$lib/components/ui/button"; import { @@ -82,7 +83,7 @@ let confirmDialogOpen = $state(false); let confirmDialogTitle = $state(""); let confirmDialogDescription = $state(""); let confirmDialogVariant = $state<"default" | "destructive">("destructive"); -let confirmDialogConfirmLabel = $state("Confirm"); +let confirmDialogConfirmText = $state("Confirm"); let isConfirmLoading = $state(false); let pendingAction: (() => Promise) | null = $state(null); @@ -158,7 +159,7 @@ function handleRemoveSite(domain: string) { confirmDialogTitle = "Remove Site"; confirmDialogDescription = `Are you sure you want to remove "${domain}" from this organization? This action cannot be undone.`; confirmDialogVariant = "destructive"; - confirmDialogConfirmLabel = "Remove Site"; + confirmDialogConfirmText = "Remove Site"; pendingAction = async () => { try { await api.admin.orgs.removeSite({ slug: slug ?? "", domain }); @@ -180,7 +181,7 @@ function handleDelete() { confirmDialogTitle = "Delete Organization"; confirmDialogDescription = `Are you sure you want to delete "${displayName}"? This action cannot be undone. All members, invitations, and sites will be permanently deleted.`; confirmDialogVariant = "destructive"; - confirmDialogConfirmLabel = "Delete Organization"; + confirmDialogConfirmText = "Delete Organization"; pendingAction = async () => { try { await api.admin.orgs.delete({ slug: slug ?? "" }); @@ -452,11 +453,7 @@ async function executeConfirmAction() { title={confirmDialogTitle} description={confirmDialogDescription} variant={confirmDialogVariant} - confirmLabel={confirmDialogConfirmLabel} + confirmText={confirmDialogConfirmText} loading={isConfirmLoading} - onconfirm={executeConfirmAction} - oncancel={() => { - confirmDialogOpen = false; - pendingAction = null; - }} + onConfirm={executeConfirmAction} /> diff --git a/apps/publisher-dashboard/src/routes/dashboard/[slug]/members/+page.svelte b/apps/publisher-dashboard/src/routes/dashboard/[slug]/members/+page.svelte index 9f37b3f..944e335 100644 --- a/apps/publisher-dashboard/src/routes/dashboard/[slug]/members/+page.svelte +++ b/apps/publisher-dashboard/src/routes/dashboard/[slug]/members/+page.svelte @@ -12,7 +12,8 @@ import { getContext } from "svelte"; import { toast } from "svelte-sonner"; import { api } from "$lib/api/client"; import { DashboardLayout } from "$lib/components/layout"; -import { ConfirmDialog, RoleBadge } from "$lib/components/org"; +import { RoleBadge } from "$lib/components/org"; +import { ConfirmDialog } from "$lib/components/ui/confirm-dialog"; import { Button } from "$lib/components/ui/button"; import { Card, @@ -464,6 +465,5 @@ const availableInviteRoles = $derived.by(() => { description={confirmDialogDescription} variant={confirmDialogVariant} loading={isConfirmLoading} - onconfirm={executeConfirmAction} - oncancel={() => confirmDialogOpen = false} + onConfirm={executeConfirmAction} /> diff --git a/apps/publisher-dashboard/src/routes/dashboard/[slug]/settings/+page.svelte b/apps/publisher-dashboard/src/routes/dashboard/[slug]/settings/+page.svelte index 7fc20db..7b6678c 100644 --- a/apps/publisher-dashboard/src/routes/dashboard/[slug]/settings/+page.svelte +++ b/apps/publisher-dashboard/src/routes/dashboard/[slug]/settings/+page.svelte @@ -14,7 +14,7 @@ import { goto } from "$app/navigation"; import { resolve } from "$app/paths"; import { api } from "$lib/api/client"; import { SettingsLayout } from "$lib/components/layout"; -import { ConfirmDialog } from "$lib/components/org"; +import { ConfirmDialog } from "$lib/components/ui/confirm-dialog"; import { Alert, AlertDescription } from "$lib/components/ui/alert"; import { Button } from "$lib/components/ui/button"; import { @@ -82,7 +82,7 @@ let confirmDialogOpen = $state(false); let confirmDialogTitle = $state(""); let confirmDialogDescription = $state(""); let confirmDialogVariant = $state<"default" | "destructive">("destructive"); -let confirmDialogConfirmLabel = $state("Confirm"); +let confirmDialogConfirmText = $state("Confirm"); let confirmAction = $state<() => Promise>(() => Promise.resolve()); let isConfirmLoading = $state(false); @@ -119,7 +119,7 @@ function handleLeave() { confirmDialogDescription = "Are you sure you want to leave this organization? You will lose access to all resources and will need to be re-invited to rejoin."; confirmDialogVariant = "destructive"; - confirmDialogConfirmLabel = "Leave Organization"; + confirmDialogConfirmText = "Leave Organization"; confirmAction = async () => { try { await api.orgs.leave({ slug }); @@ -142,7 +142,7 @@ function handleDelete() { confirmDialogTitle = "Delete Organization"; confirmDialogDescription = `Are you sure you want to delete "${displayName}"? This action cannot be undone. All members, invitations, and sites will be permanently deleted.`; confirmDialogVariant = "destructive"; - confirmDialogConfirmLabel = "Delete Organization"; + confirmDialogConfirmText = "Delete Organization"; confirmAction = async () => { try { await api.orgs.delete({ slug }); @@ -306,8 +306,7 @@ async function executeConfirmAction() { title={confirmDialogTitle} description={confirmDialogDescription} variant={confirmDialogVariant} - confirmLabel={confirmDialogConfirmLabel} + confirmText={confirmDialogConfirmText} loading={isConfirmLoading} - onconfirm={executeConfirmAction} - oncancel={() => confirmDialogOpen = false} + onConfirm={executeConfirmAction} /> diff --git a/apps/publisher-dashboard/src/routes/dashboard/[slug]/settings/members/+page.svelte b/apps/publisher-dashboard/src/routes/dashboard/[slug]/settings/members/+page.svelte index 2064b2c..888638e 100644 --- a/apps/publisher-dashboard/src/routes/dashboard/[slug]/settings/members/+page.svelte +++ b/apps/publisher-dashboard/src/routes/dashboard/[slug]/settings/members/+page.svelte @@ -12,7 +12,8 @@ import { getContext } from "svelte"; import { toast } from "svelte-sonner"; import { api } from "$lib/api/client"; import { SettingsLayout } from "$lib/components/layout"; -import { ConfirmDialog, RoleBadge } from "$lib/components/org"; +import { RoleBadge } from "$lib/components/org"; +import { ConfirmDialog } from "$lib/components/ui/confirm-dialog"; import { Button } from "$lib/components/ui/button"; import { Card, @@ -464,6 +465,5 @@ const availableInviteRoles = $derived.by(() => { description={confirmDialogDescription} variant={confirmDialogVariant} loading={isConfirmLoading} - onconfirm={executeConfirmAction} - oncancel={() => confirmDialogOpen = false} + onConfirm={executeConfirmAction} />