feat(dashboard,accounts): reconcile, debts box, per-currency charts, validated series palette

src/lib/components/accounts/AccountsIndex.svelte

@@ -68,14 +68,19 @@
   }
 
   const COLUMNS: Record<Key, Column> = {
-    active: { key: "active", label: "Is active?" },
+    active: { key: "active", label: "Is active?", wide: true },
     activity: { key: "activity", label: "Last activity", wide: true },
     balance: { key: "balance", label: "Current balance", num: true },
-    difference: { key: "difference", label: "Balance difference", num: true },
-    direction: { key: "direction", label: "Liability in/out" },
-    due: { key: "due", label: "Amount due", num: true },
+    difference: {
+      key: "difference",
+      label: "Balance difference",
+      num: true,
+      wide: true,
+    },
+    direction: { key: "direction", label: "Liability in/out", wide: true },
+    due: { key: "due", label: "Amount due", num: true, wide: true },
     interest: { key: "interest", label: "Interest (period)", wide: true },
-    liability: { key: "liability", label: "Type of liability" },
+    liability: { key: "liability", label: "Type of liability", wide: true },
     name: { key: "name", label: "Name" },
     number: { key: "number", label: "Account number", wide: true },
     role: { key: "role", label: "Role", wide: true },
@@ -163,7 +168,14 @@
   );
   const otherCount = $derived(others.data?.meta.pagination?.total ?? 0);
 
-  const columns = $derived(LAYOUT[type].map((k) => COLUMNS[k]));
+  const numbered = $derived(
+    (accounts.data ?? []).some((item) => formatIban(item.attributes))
+  );
+  const columns = $derived(
+    LAYOUT[type]
+      .filter((k) => k !== "number" || numbered)
+      .map((k) => COLUMNS[k])
+  );
   const sortParam = $derived(page.url.searchParams.get("sort") ?? "");
   const sortKey = $derived(sortParam.replace("-", "") as Key | "");
   const descending = $derived(sortParam.startsWith("-"));
@@ -447,7 +459,9 @@
           : "Nothing archived"}
       </p>
       {#if active}
-        <a class="text-brand underline" href={createHref}
+        <a
+          class="text-brand dark:text-(--ff-series-1) underline"
+          href={createHref}
           >Create a new {TYPE_ONE[type]}</a
         >
       {/if}
@@ -456,7 +470,7 @@
     <ContextMenu>
       <ContextMenuTrigger class="block overflow-x-auto" {oncontextmenu}>
         <table
-          class="w-full min-w-[720px] border-collapse text-[13px] transition-opacity {accounts.isPlaceholderData
+          class="w-full md:min-w-[720px] border-collapse text-[13px] transition-opacity {accounts.isPlaceholderData
             ? "opacity-60"
             : ""}"
         >
@@ -518,7 +532,7 @@
                     >
                       {#if col.key === "name"}
                         <a
-                          class="block max-w-[22rem] truncate text-brand hover:underline"
+                          class="block max-w-[22rem] truncate text-brand dark:text-(--ff-series-1) hover:underline"
                           href={showUrl(item.id)}
                           title={a.name}
                           >{a.name}</a
@@ -668,7 +682,9 @@
     </ContextMenu>
   {/if}
   {#snippet footer()}
-    <a class="text-brand hover:underline" href={createHref}
+    <a
+      class="text-brand dark:text-(--ff-series-1) hover:underline"
+      href={createHref}
       >Create a new {TYPE_ONE[type]}</a
     >
     {#if failure}