Update table column types and adjust payment layouts

The changes include typing updates for table columns and layout improvements
for payment history and methods pages, with better handling of payment error
states and responsive column widths.

Author: TorstenDittmann

package.json

@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@267da11",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",

pnpm-lock.yaml

@@ -60,7 +60,8 @@ export type TableRootProp = {
     selectedAll: boolean;
     selectedNone: boolean;
     selectedSome: boolean;
-    columns: Record<PinkColumn['id'], PinkColumn>;
+    columns: Array<Column> | number;
+    columnsMap: Record<Column['id'], Column>;
     toggle: (id: string) => void;
     toggleAll: () => void;
     addAvailableId: (id: string) => void;

src/lib/helpers/types.ts

@@ -61,6 +61,8 @@
     $: if (offset !== null) {
         request();
     }
+
+    $: hasPaymentError = invoiceList?.invoices.some((invoice) => invoice?.lastError);
 </script>
 
 <CardGrid>
@@ -71,8 +73,8 @@
             <Table.Root
                 let:root
                 columns={[
-                    { id: 'dueDate' },
-                    { id: 'status', width: { min: 200 } },
+                    { id: 'dueDate', width: { min: 120 } },
+                    { id: 'status', width: { min: hasPaymentError ? 200 : 100 } },
                     { id: 'amount', width: { min: 120 } },
                     { id: 'action', width: 40 }
                 ]}>
@@ -162,10 +164,10 @@
                 {/each}
             </Table.Root>
             {#if invoiceList.total > limit}
-                <div class="u-flex u-main-space-between">
+                <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
                     <p class="text">Total results: {invoiceList.total}</p>
                     <PaginationInline {limit} bind:offset total={invoiceList.total} hidePages />
-                </div>
+                </Layout.Stack>
             {/if}
         {:else}
             <Card.Base>

src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte

@@ -115,16 +115,16 @@
             <Table.Root
                 let:root
                 columns={[
-                    { id: 'cc', width: 140 },
+                    { id: 'cc', width: { min: 155 } },
                     { id: 'name', width: { min: 140 } },
-                    { id: 'expiry', width: 100 },
-                    { id: 'status', width: 110, hide: !hasPaymentError },
+                    { id: 'expiry', width: { min: 75 } },
+                    { id: 'status', width: { min: 110 }, hide: !hasPaymentError },
                     { id: 'actions', width: 40 }
                 ]}>
                 <svelte:fragment slot="header" let:root>
                     <Table.Header.Cell column="cc" {root}>Credit card</Table.Header.Cell>
                     <Table.Header.Cell column="name" {root}>Name</Table.Header.Cell>
-                    <Table.Header.Cell column="expiry" {root}>Expiration date</Table.Header.Cell>
+                    <Table.Header.Cell column="expiry" {root}>Expiration</Table.Header.Cell>
                     <Table.Header.Cell column="status" {root} />
                     <Table.Header.Cell column="actions" {root} />
                 </svelte:fragment>