@frigear-nu/payments 0.0.10 → 0.1.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@frigear-nu/payments",
   "configKey": "payments",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -38,8 +38,7 @@ const module$1 = defineNuxtModule({
     nuxt.options.runtimeConfig.payments = {
       checkoutExpiresInMinutes: options.settings?.checkoutExpiresInMinutes ?? 30
     };
-    await registerDatabaseTable(nuxt, {
-      name: "payments",
+    registerDatabaseTable(nuxt, {
       resolver,
       schema: (dialect) => `./runtime/server/db/schema.${dialect}`
     });
@@ -88,7 +87,14 @@ const module$1 = defineNuxtModule({
     if (hasNuxtModule("@frigear-nu/admin") && hasNuxtModule("@frigear-nu/widget")) {
       const { extendWidgets } = await import('@frigear-nu/widget/utils');
       extendWidgets(nuxt, "admin.dashboard.top", { id: "payments-revenue-stat", component: resolver.resolve("./runtime/app/widgets/RevenueStat.vue"), order: 30 });
-      extendWidgets(nuxt, "admin.dashboard.side", { id: "payments-recent", component: resolver.resolve("./runtime/app/widgets/RecentTransactions.vue"), order: 20 });
+      extendWidgets(nuxt, "admin.dashboard.side", {
+        id: "payments-recent",
+        component: resolver.resolve("./runtime/app/widgets/RecentTransactions.vue"),
+        order: 20,
+        props: {
+          tabId: "payments"
+        }
+      });
     }
     addServerImportsDir(resolver.resolve("./runtime/server/utils"));
     inlineModuleRuntime(nuxt, resolver);

package/dist/runtime/app/tabs/Payments.vue

@@ -1,23 +1,15 @@
 <script setup>
-import { formatMoney as formatMinorAmount } from "@frigear-nu/ui/money";
 defineOptions({ name: "UsersAdminPayments" });
 const props = defineProps({
   user: { type: Object, required: true }
 });
 const t = useModuleT("payments.admin");
 const status = useModuleT("payments.status");
+const format = useFormat();
 const { data: payments, status: fetchStatus } = useLazyFetch(
   () => `/api/admin/users/${props.user.id}/payments`,
   { key: () => `admin-payments-${props.user.id}` }
 );
-const statusColors = {
-  paid: "success",
-  pending: "warning",
-  failed: "error",
-  expired: "neutral",
-  refunded: "neutral",
-  partially_refunded: "warning"
-};
 const statusLabel = (value) => status(value, value);
 const columns = computed(() => [
   { accessorKey: "createdAt", header: t("date", "Date") },
@@ -27,48 +19,50 @@ const columns = computed(() => [
   { accessorKey: "refundedAmount", header: t("refunded", "Refunded") },
   { accessorKey: "referenceType", header: t("reference", "Reference") }
 ]);
-const date = (value) => value ? new Date(value).toLocaleString() : "\u2013";
 </script>
 
 <template>
-  <AdminSection
-    :title="t('title', 'Payments')"
-  >
-    <template #flush>
-      <UTable
-        :data="payments ?? []"
-        :columns="columns"
-        :loading="fetchStatus === 'pending'"
-      >
-        <template #createdAt-cell="{ row }">
-          <span class="whitespace-nowrap">{{ date(row.original.paidAt ?? row.original.createdAt) }}</span>
-        </template>
-        <template #description-cell="{ row }">
-          {{ row.original.description ?? t("defaultDescription", "Payment") }}
-        </template>
-        <template #amount-cell="{ row }">
-          <span class="whitespace-nowrap">{{ formatMinorAmount(row.original.amount, row.original.currency) }}</span>
-        </template>
-        <template #status-cell="{ row }">
-          <UBadge
-            variant="subtle"
-            :color="statusColors[row.original.status] ?? 'neutral'"
-            :label="statusLabel(row.original.status)"
-          />
-        </template>
-        <template #refundedAmount-cell="{ row }">
-          <span class="whitespace-nowrap">{{ row.original.refundedAmount ? formatMinorAmount(row.original.refundedAmount, row.original.currency) : "\u2013" }}</span>
-        </template>
-        <template #referenceType-cell="{ row }">
-          <span class="text-muted">{{ row.original.referenceType ? `${row.original.referenceType} ${row.original.referenceId ?? ""}`.trim() : "\u2013" }}</span>
-        </template>
-        <template #empty>
-          <AdminEmpty
-            icon="i-lucide-credit-card"
-            :title="t('empty', 'No payments yet.')"
-          />
-        </template>
-      </UTable>
+  <TableCard>
+    <template #header>
+      <h2 class="text-highlighted text-sm font-semibold">
+        {{ t("title", "Payments") }}
+      </h2>
     </template>
-  </AdminSection>
+    <UTable
+      :data="payments ?? []"
+      :columns="columns"
+      :loading="fetchStatus === 'pending'"
+      :ui="tableUi({ tr: '' })"
+    >
+      <template #createdAt-cell="{ row }">
+        <span class="whitespace-nowrap">{{ format.dateTime(row.original.paidAt ?? row.original.createdAt) || "\u2013" }}</span>
+      </template>
+      <template #description-cell="{ row }">
+        {{ row.original.description ?? t("defaultDescription", "Payment") }}
+      </template>
+      <template #amount-cell="{ row }">
+        <span class="whitespace-nowrap">{{ format.money(row.original.amount, row.original.currency) }}</span>
+      </template>
+      <template #status-cell="{ row }">
+        <UBadge
+          variant="subtle"
+          :color="statusColor(row.original.status, { partially_refunded: 'warning' })"
+          :label="statusLabel(row.original.status)"
+        />
+      </template>
+      <template #refundedAmount-cell="{ row }">
+        <span class="whitespace-nowrap">{{ row.original.refundedAmount ? format.money(row.original.refundedAmount, row.original.currency) : "\u2013" }}</span>
+      </template>
+      <template #referenceType-cell="{ row }">
+        <span class="text-muted">{{ row.original.referenceType ? `${row.original.referenceType} ${row.original.referenceId ?? ""}`.trim() : "\u2013" }}</span>
+      </template>
+      <template #empty>
+        <UEmpty
+          icon="i-lucide-credit-card"
+          variant="naked"
+          :title="t('empty', 'No payments yet')"
+        />
+      </template>
+    </UTable>
+  </TableCard>
 </template>

package/dist/runtime/app/widgets/AdminLastPayment.vue

@@ -1,33 +1,45 @@
 <script setup>
-import { formatMoney as formatMinorAmount } from "@frigear-nu/ui/money";
 defineOptions({ name: "UsersAdminLastPayment" });
 const props = defineProps({
   user: { type: Object, required: true }
 });
 const t = useModuleT("payments.admin");
 const status = useModuleT("payments.status");
+const format = useFormat();
 const { data: payments, status: fetchStatus } = useLazyFetch(
   () => `/api/admin/users/${props.user.id}/payments`,
   { key: () => `admin-last-payment-${props.user.id}`, query: { limit: 1 } }
 );
 const last = computed(() => payments.value?.[0]);
-const date = (value) => value ? new Date(value).toLocaleDateString() : "\u2013";
+const facts = computed(() => last.value ? [
+  { key: "amount", label: t("amount", "Amount"), value: format.money(last.value.amount, last.value.currency) },
+  { key: "status", label: t("statusColumn", "Status") },
+  { key: "date", label: t("date", "Date"), value: format.date(last.value.paidAt ?? last.value.createdAt) }
+] : []);
 </script>
 
 <template>
-  <AdminStatCard
-    :label="t('lastPayment', 'Last payment')"
-    :empty="t('empty', 'No payments yet.')"
+  <SectionCard
+    :title="t('lastPayment', 'Last payment')"
     :loading="fetchStatus === 'pending' && !payments"
   >
-    <template v-if="last">
-      <span class="text-highlighted font-medium">{{ formatMinorAmount(last.amount, last.currency) }}</span>
-      <UBadge
-        variant="subtle"
-        :color="last.status === 'paid' ? 'success' : 'neutral'"
-        :label="status(last.status, last.status)"
-      />
-      <span class="text-muted">{{ date(last.paidAt ?? last.createdAt) }}</span>
-    </template>
-  </AdminStatCard>
+    <DescriptionList
+      v-if="last"
+      :items="facts"
+    >
+      <template #status>
+        <UBadge
+          variant="subtle"
+          :color="statusColor(last.status, { partially_refunded: 'warning' })"
+          :label="status(last.status, last.status)"
+        />
+      </template>
+    </DescriptionList>
+    <UEmpty
+      v-else
+      icon="i-lucide-credit-card"
+      variant="naked"
+      :title="t('empty', 'No payments yet')"
+    />
+  </SectionCard>
 </template>

package/dist/runtime/app/widgets/RecentTransactions.d.vue.ts

@@ -1,3 +1,6 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Props = {
+    tabId?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/widgets/RecentTransactions.vue

@@ -1,21 +1,26 @@
 <script setup>
-import { formatMoney } from "@frigear-nu/ui/money";
 defineOptions({ name: "PaymentsRecentTransactions" });
+const props = defineProps({
+  tabId: { type: String, required: false, default: "payments" }
+});
 const t = useModuleT("payments.admin");
 const status = useModuleT("payments.status");
+const format = useFormat();
+const { localize } = useLocaleLink();
 const usersPage = useRuntimeConfig().public.users?.pages?.admin;
+const usersPath = usersPage ? localize(usersPage.replace(/\/+$/, "")) : void 0;
 const { data, status: fetchStatus } = useLazyFetch("/api/payments/admin/recent", { key: "admin-payments-recent" });
-const date = (value) => value ? new Date(value).toLocaleDateString() : "\u2013";
-const color = (value) => value === "paid" ? "success" : value === "failed" ? "error" : "neutral";
-const userTo = (id) => usersPage ? `${usersPage.replace(/\/+$/, "")}/${id}` : void 0;
+const userTo = (id) => usersPath ? { path: `${usersPath}/${id}`, query: { tab: props.tabId } } : void 0;
 </script>
 
 <template>
-  <AdminListCard
+  <ListCard
     :title="t('recent', 'Recent transactions')"
     :loading="fetchStatus === 'pending' && !data"
     :is-empty="!data?.items.length"
-    :empty="t('empty', 'No payments yet.')"
+    :empty="t('empty', 'No payments yet')"
+    :to="usersPath"
+    :to-label="t('viewUsers', 'View users')"
   >
     <li
       v-for="payment in data?.items"
@@ -35,20 +40,20 @@ const userTo = (id) => usersPage ? `${usersPage.replace(/\/+$/, "")}/${id}` : vo
           class="text-highlighted block truncate font-medium"
         >{{ payment.userName ?? payment.description ?? t("defaultDescription", "Payment") }}</span>
         <p class="text-muted truncate text-xs">
-          {{ date(payment.paidAt ?? payment.createdAt) }}<template v-if="payment.description && payment.userName">
+          {{ format.date(payment.paidAt ?? payment.createdAt) }}<template v-if="payment.description && payment.userName">
             · {{ payment.description }}
           </template>
         </p>
       </div>
       <div class="flex shrink-0 flex-col items-end gap-1">
-        <span class="text-highlighted font-medium">{{ formatMoney(payment.amount, payment.currency) }}</span>
+        <span class="text-highlighted font-medium">{{ format.money(payment.amount, payment.currency) }}</span>
         <UBadge
           size="sm"
           variant="subtle"
-          :color="color(payment.status)"
+          :color="statusColor(payment.status, { partially_refunded: 'warning' })"
           :label="status(payment.status, payment.status)"
         />
       </div>
     </li>
-  </AdminListCard>
+  </ListCard>
 </template>

package/dist/runtime/app/widgets/RecentTransactions.vue.d.ts

@@ -1,3 +1,6 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Props = {
+    tabId?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/widgets/RevenueStat.vue

@@ -1,21 +1,18 @@
 <script setup>
-import { formatMoney } from "@frigear-nu/ui/money";
 defineOptions({ name: "PaymentsRevenueStat" });
 const t = useModuleT("payments.admin");
+const format = useFormat();
 const { data, status } = useLazyFetch("/api/payments/admin/recent", { key: "admin-payments-recent" });
 const main = computed(() => data.value?.revenue[0]);
 </script>
 
 <template>
-  <AdminStatCard
+  <StatCard
     :label="t('revenue', 'Revenue, 30 days')"
     icon="i-lucide-circle-dollar-sign"
+    :value="main ? format.money(main.amount, main.currency) : void 0"
+    :hint="main ? t('transactions', '{count} transactions', { count: main.count }) : void 0"
     :loading="status === 'pending' && !data"
-    :empty="t('noRevenue', 'No payments yet.')"
-  >
-    <template v-if="main">
-      <span>{{ formatMoney(main.amount, main.currency) }}</span>
-      <span class="text-muted text-sm font-normal">{{ t("transactions", "{count} transactions").replace("{count}", String(main.count)) }}</span>
-    </template>
-  </AdminStatCard>
+    :empty="t('noRevenue', 'No payments yet')"
+  />
 </template>

package/dist/runtime/i18n/lang/da.json

@@ -13,7 +13,7 @@
       "tab": "Betalinger",
       "title": "Betalinger",
       "lastPayment": "Seneste betaling",
-      "empty": "Ingen betalinger endnu.",
+      "empty": "Ingen betalinger endnu",
       "date": "Dato",
       "description": "Beskrivelse",
       "amount": "Beløb",
@@ -22,9 +22,10 @@
       "reference": "Reference",
       "defaultDescription": "Betaling",
       "revenue": "Omsætning, 30 dage",
-      "noRevenue": "Ingen betalinger endnu.",
+      "noRevenue": "Ingen betalinger endnu",
       "transactions": "{count} transaktioner",
-      "recent": "Seneste transaktioner"
+      "recent": "Seneste transaktioner",
+      "viewUsers": "Se brugere"
     }
   }
 }

package/dist/runtime/i18n/lang/en.json

@@ -13,7 +13,7 @@
       "tab": "Payments",
       "title": "Payments",
       "lastPayment": "Last payment",
-      "empty": "No payments yet.",
+      "empty": "No payments yet",
       "date": "Date",
       "description": "Description",
       "amount": "Amount",
@@ -22,9 +22,10 @@
       "reference": "Reference",
       "defaultDescription": "Payment",
       "revenue": "Revenue, 30 days",
-      "noRevenue": "No payments yet.",
+      "noRevenue": "No payments yet",
       "transactions": "{count} transactions",
-      "recent": "Recent transactions"
+      "recent": "Recent transactions",
+      "viewUsers": "View users"
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frigear-nu/payments",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "description": "One-time payments (Stripe Checkout, refunds and payment lifecycle hooks) for the frigear ecosystem, built on @frigear-nu/stripe.",
   "homepage": "https://docs.frigear.dev/modules/payments",
   "repository": {
@@ -30,14 +30,14 @@
     "playground"
   ],
   "dependencies": {
-    "@frigear-nu/auth": "0.0.5",
-    "@frigear-nu/mcp": "0.0.5",
-    "@frigear-nu/module-kit": "1.0.1",
-    "@frigear-nu/stripe": "0.0.10",
-    "@frigear-nu/ui": "0.0.9",
-    "@frigear-nu/users": "1.0.11",
+    "@frigear-nu/auth": "0.1.0",
+    "@frigear-nu/mcp": "0.1.0",
+    "@frigear-nu/module-kit": "1.1.0",
+    "@frigear-nu/stripe": "0.1.0",
+    "@frigear-nu/ui": "0.1.0",
+    "@frigear-nu/users": "1.1.0",
     "@libsql/client": "^0.18.0",
-    "@nuxt/kit": "^4.6.0",
+    "@nuxt/kit": "^4.6.1",
     "drizzle-kit": "^0.31.11",
     "drizzle-orm": "^0.45.3",
     "h3": "^1.15.11",
@@ -46,8 +46,8 @@
     "zod": "^4.6.5"
   },
   "peerDependencies": {
-    "@frigear-nu/widget": "0.0.4",
-    "@nuxt/ui": "^4.10.0",
+    "@frigear-nu/widget": "0.1.0",
+    "@nuxt/ui": "^4.11.2",
     "@nuxthub/core": "^0.10.8"
   },
   "peerDependenciesMeta": {
@@ -59,20 +59,20 @@
     }
   },
   "devDependencies": {
-    "@frigear-nu/widget": "0.0.4",
+    "@frigear-nu/widget": "0.1.0",
     "@nuxt/devtools": "^3.4.2",
     "@nuxt/eslint-config": "^1.17.0",
     "@nuxt/module-builder": "^1.0.3",
-    "@nuxt/schema": "^4.6.0",
+    "@nuxt/schema": "^4.6.1",
     "@nuxt/test-utils": "^4.3.2",
-    "@nuxt/ui": "^4.11.0",
+    "@nuxt/ui": "^4.11.2",
     "@nuxthub/core": "^0.10.8",
-    "@types/node": "latest",
+    "@types/node": "^26.6.5",
     "changelogen": "^0.6.2",
-    "eslint": "^10.10.0",
+    "eslint": "^10.12.0",
     "nuxt": "^4.6.1",
     "typescript": "^6.0.3",
-    "vitest": "^5.0.1",
+    "vitest": "^5.0.2",
     "vue-tsc": "^3.3.11"
   },
   "scripts": {