@kahitsan/ksui 0.32.0 → 0.34.0

package/src/components/composite/TransactionForm.tsx

@@ -24,11 +24,11 @@ import ArrowDownLeft from "lucide-solid/icons/arrow-down-left";
 import ArrowUpRight from "lucide-solid/icons/arrow-up-right";
 import ArrowRightLeft from "lucide-solid/icons/arrow-right-left";
 
-import AccountRadioPicker from "./AccountRadioPicker";
 import FormAdvancedSection from "./FormAdvancedSection";
 import SalesBodyEditor, { type SalesLine } from "./SalesBodyEditor";
 import TransferFeeChip from "./TransferFeeChip";
-import TransferAccountsPicker from "./TransferAccountsPicker";
+import TransactionAccountFields from "./TransactionAccountFields";
+import TransactionPayableFields from "./TransactionPayableFields";
 import ComboBox from "./ComboBox";
 import type { ClientOption, PayeeOption, PayeeKind } from "./picker-types";
 import VoucherPicker, { type VoucherOption } from "./VoucherPicker";
@@ -43,7 +43,6 @@ import ExistingAttachmentTile, {
 import FormField from "../base/FormField";
 import DatePicker from "../base/DatePicker";
 import Button from "../base/Button";
-import SegmentedFilter from "../base/SegmentedFilter";
 import {
   type PendingFile,
   createPendingFile,
@@ -137,35 +136,27 @@ const TONE_CLASSES: Record<
   { bg: string; text: string; border: string }
 > = {
   emerald: {
-    bg: "bg-emerald-500/10",
-    text: "text-emerald-400",
-    border: "border-emerald-500/30",
+    bg: "bg-[color-mix(in_srgb,var(--ks-success,#10b981)_10%,transparent)]",
+    text: "text-[var(--ks-success-fg,#34d399)]",
+    border: "border-[color-mix(in_srgb,var(--ks-success,#10b981)_30%,transparent)]",
+  },
+  red: {
+    bg: "bg-[color-mix(in_srgb,var(--ks-danger,#ef4444)_10%,transparent)]",
+    text: "text-[var(--ks-danger-fg,#f87171)]",
+    border: "border-[color-mix(in_srgb,var(--ks-danger,#ef4444)_30%,transparent)]",
+  },
+  blue: {
+    bg: "bg-[color-mix(in_srgb,var(--ks-info,#38bdf8)_10%,transparent)]",
+    text: "text-[var(--ks-info,#38bdf8)]",
+    border: "border-[color-mix(in_srgb,var(--ks-info,#38bdf8)_30%,transparent)]",
   },
-  red: { bg: "bg-red-500/10", text: "text-red-400", border: "border-red-500/30" },
-  blue: { bg: "bg-blue-500/10", text: "text-blue-400", border: "border-blue-500/30" },
   amber: {
-    bg: "bg-amber-500/10",
-    text: "text-amber-400",
-    border: "border-amber-500/30",
+    bg: "bg-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_10%,transparent)]",
+    text: "text-[var(--ks-accent,#fbbf24)]",
+    border: "border-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_30%,transparent)]",
   },
 };
 
-const PAYABLE_KIND_OPTIONS: { id: string; label: string }[] = [
-  { id: "subscription", label: "Subscription" },
-  { id: "utility", label: "Utility" },
-  { id: "rent", label: "Rent / Lease" },
-  { id: "loan", label: "Loan" },
-  { id: "tax", label: "Tax" },
-  { id: "other", label: "Other" },
-];
-
-const PDC_OPTIONS: { id: string; label: string; dot: string }[] = [
-  { id: "issued", label: "PDC issued", dot: "bg-amber-400" },
-  { id: "presented", label: "PDC presented", dot: "bg-blue-400" },
-  { id: "cleared", label: "PDC cleared", dot: "bg-emerald-400" },
-  { id: "bounced", label: "PDC bounced", dot: "bg-red-400" },
-];
-
 const CATEGORY_FORM: Record<
   string,
   {
@@ -438,12 +429,12 @@ export default function TransactionForm(props: TransactionFormProps) {
       onPaste={handlePaste}
     >
       <Show when={dragging()}>
-        <div class="absolute inset-0 z-30 border-2 border-dashed border-amber-400/60 bg-amber-500/10 backdrop-blur-sm flex flex-col items-center justify-center pointer-events-none">
-          <Upload size={32} class="text-amber-400 mb-2" />
-          <span class="text-sm text-amber-400 font-medium">
+        <div class="absolute inset-0 z-30 border-2 border-dashed border-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_60%,transparent)] bg-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_10%,transparent)] backdrop-blur-sm flex flex-col items-center justify-center pointer-events-none">
+          <Upload size={32} class="text-[var(--ks-accent,#fbbf24)] mb-2" />
+          <span class="text-sm text-[var(--ks-accent,#fbbf24)] font-medium">
             Drop files to attach
           </span>
-          <span class="text-[10px] text-amber-400/60 mt-1">Images or PDFs</span>
+          <span class="text-[10px] text-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_60%,transparent)] mt-1">Images or PDFs</span>
         </div>
       </Show>
 
@@ -467,7 +458,7 @@ export default function TransactionForm(props: TransactionFormProps) {
         <div class="flex-1 overflow-x-hidden overflow-y-auto px-5 sm:px-6 py-5 space-y-4">
           <Show when={props.error}>
             <div
-              class="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-400"
+              class="rounded-lg border border-[color-mix(in_srgb,var(--ks-danger,#ef4444)_30%,transparent)] bg-[color-mix(in_srgb,var(--ks-danger,#ef4444)_10%,transparent)] px-3 py-2 text-sm text-[var(--ks-danger-fg,#f87171)]"
               data-testid="transactions-form-error"
             >
               {props.error}
@@ -476,7 +467,7 @@ export default function TransactionForm(props: TransactionFormProps) {
 
           <Show when={!props.simpleMode}>
             <div>
-              <div class="text-[10px] uppercase tracking-widest text-zinc-500 font-semibold mb-2">
+              <div class="text-[10px] uppercase tracking-widest text-[var(--ks-fg-subtle,#71717a)] font-semibold mb-2">
                 Type
               </div>
               <div
@@ -509,7 +500,7 @@ export default function TransactionForm(props: TransactionFormProps) {
                         classList={{
                           [`${tc.bg} ${tc.border} ${tc.text}`]:
                             props.category === cat,
-                          "border-zinc-800 bg-transparent text-zinc-500 hover:border-zinc-700 hover:text-zinc-200":
+                          "border-[var(--ks-border,rgba(39,39,42,0.5))] bg-transparent text-[var(--ks-fg-subtle,#71717a)] hover:border-[var(--ks-input-border,#3f3f46)] hover:text-[var(--ks-fg,#ffffff)]":
                             props.category !== cat,
                         }}
                       >
@@ -520,7 +511,7 @@ export default function TransactionForm(props: TransactionFormProps) {
                   }}
                 </For>
               </div>
-              <p class="text-[11px] text-zinc-500 mt-2">{catConfig().hint}</p>
+              <p class="text-[11px] text-[var(--ks-fg-subtle,#71717a)] mt-2">{catConfig().hint}</p>
             </div>
           </Show>
 
@@ -541,8 +532,8 @@ export default function TransactionForm(props: TransactionFormProps) {
             when={!(props.category === "sale" && props.saleItems.length > 0)}
           >
             <FormField label="Amount *">
-              <div class="flex items-stretch gap-2 px-4 py-3 border bg-zinc-900/60 border-zinc-800/60 ks-hud-clip-button focus-within:border-amber-500/50 transition-colors">
-                <span class="self-center text-3xl font-bold text-zinc-500 tabular-nums">
+              <div class="flex items-stretch gap-2 px-4 py-3 border bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_60%,transparent)] border-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] ks-hud-clip-button focus-within:border-[color-mix(in_srgb,var(--ks-focus-ring,#c9a961)_50%,transparent)] transition-colors">
+                <span class="self-center text-3xl font-bold text-[var(--ks-fg-subtle,#71717a)] tabular-nums">
                   ₱
                 </span>
                 <input
@@ -552,7 +543,7 @@ export default function TransactionForm(props: TransactionFormProps) {
                   data-testid="transactions-form-amount"
                   value={props.amount}
                   onInput={(e) => props.setAmount(e.currentTarget.value)}
-                  class="min-w-0 flex-1 bg-transparent text-2xl sm:text-3xl font-bold tabular-nums text-zinc-100 placeholder-zinc-700 focus:outline-none"
+                  class="min-w-0 flex-1 bg-transparent text-2xl sm:text-3xl font-bold tabular-nums text-[var(--ks-fg,#ffffff)] placeholder-[var(--ks-input-border,#3f3f46)] focus:outline-none"
                   placeholder="0.00"
                   required
                 />
@@ -582,8 +573,8 @@ export default function TransactionForm(props: TransactionFormProps) {
                 data-testid="transactions-form-transfer-fee-field"
               >
                 <FormField label="Transfer fee *">
-                  <div class="flex items-center gap-2 px-3 py-2 border bg-zinc-950/50 border-blue-500/30 ks-hud-clip-button focus-within:border-blue-500/60 transition-colors">
-                    <span class="text-lg font-bold text-zinc-500 tabular-nums">
+                  <div class="flex items-center gap-2 px-3 py-2 border bg-[color-mix(in_srgb,var(--ks-bg,#0a0a0a)_50%,transparent)] border-[color-mix(in_srgb,var(--ks-info,#38bdf8)_30%,transparent)] ks-hud-clip-button focus-within:border-[color-mix(in_srgb,var(--ks-info,#38bdf8)_60%,transparent)] transition-colors">
+                    <span class="text-lg font-bold text-[var(--ks-fg-subtle,#71717a)] tabular-nums">
                       ₱
                     </span>
                     <input
@@ -595,11 +586,11 @@ export default function TransactionForm(props: TransactionFormProps) {
                       onInput={(e) =>
                         props.setTransferFeeAmount(e.currentTarget.value)
                       }
-                      class="min-w-0 flex-1 bg-transparent text-lg font-semibold tabular-nums text-zinc-100 placeholder-zinc-700 focus:outline-none"
+                      class="min-w-0 flex-1 bg-transparent text-lg font-semibold tabular-nums text-[var(--ks-fg,#ffffff)] placeholder-[var(--ks-input-border,#3f3f46)] focus:outline-none"
                       placeholder="0.00"
                     />
                   </div>
-                  <p class="mt-1 text-[10px] text-zinc-600">
+                  <p class="mt-1 text-[10px] text-[var(--ks-fg-subtle,#71717a)]">
                     Saved as a separate expense from the source account.
                   </p>
                 </FormField>
@@ -614,14 +605,14 @@ export default function TransactionForm(props: TransactionFormProps) {
               disabled={!props.isAdmin}
             />
             <Show when={!props.isAdmin}>
-              <p class="text-[10px] text-zinc-600 mt-0.5">
+              <p class="text-[10px] text-[var(--ks-fg-subtle,#71717a)] mt-0.5">
                 Only admins can change the date
               </p>
             </Show>
           </FormField>
 
           <Show when={props.isBackdated}>
-            <div class="rounded-lg border border-amber-500/20 bg-amber-500/5 px-3 py-2">
+            <div class="rounded-lg border border-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_20%,transparent)] bg-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_5%,transparent)] px-3 py-2">
               <FormField label="Backdate Reason *">
                 <input
                   type="text"
@@ -630,7 +621,7 @@ export default function TransactionForm(props: TransactionFormProps) {
                   onInput={(e) =>
                     props.setBackdateReason(e.currentTarget.value)
                   }
-                  class="w-full rounded-lg border border-amber-500/30 bg-zinc-800/50 px-3 py-2 text-sm text-zinc-200 focus:border-amber-500/50 focus:outline-none"
+                  class="w-full rounded-lg border border-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_30%,transparent)] bg-[var(--ks-border,rgba(39,39,42,0.5))] px-3 py-2 text-sm text-[var(--ks-fg,#ffffff)] focus:border-[color-mix(in_srgb,var(--ks-focus-ring,#c9a961)_50%,transparent)] focus:outline-none"
                   placeholder="Why are you backdating this transaction?"
                   required
                 />
@@ -644,7 +635,7 @@ export default function TransactionForm(props: TransactionFormProps) {
               data-testid="transactions-form-description"
               value={props.description}
               onInput={(e) => props.setDescription(e.currentTarget.value)}
-              class="w-full bg-zinc-900/60 border border-zinc-800/60 px-3 py-3 text-sm text-zinc-200 ks-hud-clip-button focus:outline-none focus:border-amber-500/50"
+              class="w-full bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_60%,transparent)] border border-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] px-3 py-3 text-sm text-[var(--ks-fg,#ffffff)] ks-hud-clip-button focus:outline-none focus:border-[color-mix(in_srgb,var(--ks-focus-ring,#c9a961)_50%,transparent)]"
               placeholder={catConfig().descPlaceholder}
               required
             />
@@ -687,7 +678,7 @@ export default function TransactionForm(props: TransactionFormProps) {
                   type="text"
                   value={props.refNumber}
                   onInput={(e) => props.setRefNumber(e.currentTarget.value)}
-                  class="w-full bg-zinc-900/60 border border-zinc-800/60 px-3 py-3 text-sm text-zinc-200 ks-hud-clip-button focus:outline-none focus:border-amber-500/50"
+                  class="w-full bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_60%,transparent)] border border-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] px-3 py-3 text-sm text-[var(--ks-fg,#ffffff)] ks-hud-clip-button focus:outline-none focus:border-[color-mix(in_srgb,var(--ks-focus-ring,#c9a961)_50%,transparent)]"
                   placeholder="OR#, SI#, or ref number"
                 />
               </FormField>
@@ -699,7 +690,7 @@ export default function TransactionForm(props: TransactionFormProps) {
                 type="text"
                 value={props.refNumber}
                 onInput={(e) => props.setRefNumber(e.currentTarget.value)}
-                class="w-full bg-zinc-900/60 border border-zinc-800/60 px-3 py-3 text-sm text-zinc-200 ks-hud-clip-button focus:outline-none focus:border-amber-500/50"
+                class="w-full bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_60%,transparent)] border border-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] px-3 py-3 text-sm text-[var(--ks-fg,#ffffff)] ks-hud-clip-button focus:outline-none focus:border-[color-mix(in_srgb,var(--ks-focus-ring,#c9a961)_50%,transparent)]"
                 placeholder="Reference number (optional)"
               />
             </FormField>
@@ -713,7 +704,7 @@ export default function TransactionForm(props: TransactionFormProps) {
                   <select
                     disabled
                     data-testid="subcategory-select-loading"
-                    class="w-full bg-zinc-900/60 border border-zinc-800/60 px-3 py-3 text-sm text-zinc-500 ks-hud-clip-button focus:outline-none"
+                    class="w-full bg-[color-mix(in_srgb,var(--ks-input-bg,#18181b)_60%,transparent)] border border-[var(--ks-border,rgba(39,39,42,0.5))] px-3 py-3 text-sm text-[var(--ks-fg-subtle,#71717a)] ks-hud-clip-button focus:outline-none"
                   >
                     <option>Loading…</option>
                   </select>
@@ -745,128 +736,51 @@ export default function TransactionForm(props: TransactionFormProps) {
                   }
                   placeholder="— Uncategorised —"
                   searchPlaceholder="Search categories…"
-                  triggerClass="w-full bg-zinc-900/60 border border-zinc-800/60 px-3 py-3 text-sm text-zinc-200 ks-hud-clip-button cursor-pointer focus:outline-none focus:border-amber-500/50 flex items-center justify-between gap-2"
+                  triggerClass="w-full bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_60%,transparent)] border border-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] px-3 py-3 text-sm text-[var(--ks-fg,#ffffff)] ks-hud-clip-button cursor-pointer focus:outline-none focus:border-[color-mix(in_srgb,var(--ks-focus-ring,#c9a961)_50%,transparent)] flex items-center justify-between gap-2"
                   triggerLabelClass="truncate text-left flex-1 min-w-0"
                 />
               </Show>
-              <p class="text-[10px] text-zinc-600 mt-0.5">
+              <p class="text-[10px] text-[var(--ks-fg-subtle,#71717a)] mt-0.5">
                 Optional. Used for tax-prep classification.
               </p>
             </FormField>
           </Show>
 
           <Show when={props.category === "payable"}>
-            <div class="rounded-lg border border-amber-500/20 bg-amber-500/5 p-3 space-y-3">
-              <div class="flex items-center gap-2 text-[10px] uppercase tracking-widest text-amber-400 font-semibold">
-                <CalendarDays size={12} />
-                <span>Payable details</span>
-              </div>
-              <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                <FormField label="Kind *">
-                  <select
-                    value={props.payableKind}
-                    onChange={(e) =>
-                      props.setPayableKind(e.currentTarget.value)
-                    }
-                    class="w-full bg-zinc-900/60 border border-zinc-800/60 px-3 py-3 text-sm text-zinc-200 ks-hud-clip-button cursor-pointer focus:outline-none focus:border-amber-500/50"
-                  >
-                    <For each={PAYABLE_KIND_OPTIONS}>
-                      {(opt) => <option value={opt.id}>{opt.label}</option>}
-                    </For>
-                  </select>
-                </FormField>
-                <FormField label="Due date">
-                  <DatePicker
-                    value={props.dueDate}
-                    onChange={(d: string | null) => props.setDueDate(d || "")}
-                  />
-                  <p class="text-[10px] text-zinc-600 mt-0.5">
-                    When payment is owed. Past-due payables show in the Payables
-                    tab.
-                  </p>
-                </FormField>
-              </div>
-              <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                <FormField label="Cheque number">
-                  <input
-                    type="text"
-                    value={props.chequeNumber}
-                    onInput={(e) =>
-                      props.setChequeNumber(e.currentTarget.value)
-                    }
-                    class="w-full bg-zinc-900/60 border border-zinc-800/60 px-3 py-3 text-sm text-zinc-200 ks-hud-clip-button focus:outline-none focus:border-amber-500/50"
-                    placeholder="e.g. 0004429-007"
-                  />
-                  <p class="text-[10px] text-zinc-600 mt-0.5">
-                    For post-dated cheques (PDC). Leave blank for direct
-                    payments.
-                  </p>
-                </FormField>
-                <Show when={props.chequeNumber.trim()}>
-                  <FormField label="PDC status">
-                    <SegmentedFilter
-                      options={PDC_OPTIONS.map((opt) => ({
-                        value: opt.id,
-                        label: opt.label.replace("PDC ", ""),
-                      }))}
-                      value={props.pdcStatus}
-                      onChange={props.setPdcStatus}
-                    />
-                  </FormField>
-                </Show>
-              </div>
-            </div>
-          </Show>
-
-          <Show
-            when={catConfig().showSecondAccount}
-            fallback={
-              <FormField label={catConfig().accountLabel}>
-                <AccountRadioPicker
-                  accounts={props.accounts}
-                  ariaLabel={catConfig().accountLabel}
-                  value={
-                    props.category === "sale"
-                      ? props.destAccount
-                      : props.sourceAccount
-                  }
-                  onChange={(v) => {
-                    if (props.category === "sale") {
-                      props.setDestAccount(v);
-                      props.setSourceAccount("");
-                    } else {
-                      props.setSourceAccount(v);
-                      props.setDestAccount("");
-                    }
-                  }}
-                />
-                <Show when={catConfig().accountHint}>
-                  <p class="text-[10px] text-zinc-600 mt-0.5">
-                    {catConfig().accountHint}
-                  </p>
-                </Show>
-              </FormField>
-            }
-          >
-            <TransferAccountsPicker
-              accounts={props.accounts}
-              sourceAccount={props.sourceAccount}
-              setSourceAccount={props.setSourceAccount}
-              destAccount={props.destAccount}
-              setDestAccount={props.setDestAccount}
-              sourceLabel={catConfig().accountLabel}
-              destLabel={catConfig().secondAccountLabel!}
-              amount={props.amount}
-              feeAmount={props.transferFeeAmount}
-              feeEnabled={props.transferFeeEnabled && props.allowTransferFee}
+            <TransactionPayableFields
+              payableKind={props.payableKind}
+              setPayableKind={props.setPayableKind}
+              dueDate={props.dueDate}
+              setDueDate={props.setDueDate}
+              chequeNumber={props.chequeNumber}
+              setChequeNumber={props.setChequeNumber}
+              pdcStatus={props.pdcStatus}
+              setPdcStatus={props.setPdcStatus}
             />
           </Show>
 
+          <TransactionAccountFields
+            category={props.category}
+            accounts={props.accounts}
+            accountLabel={catConfig().accountLabel}
+            accountHint={catConfig().accountHint}
+            showSecondAccount={catConfig().showSecondAccount}
+            secondAccountLabel={catConfig().secondAccountLabel}
+            sourceAccount={props.sourceAccount}
+            setSourceAccount={props.setSourceAccount}
+            destAccount={props.destAccount}
+            setDestAccount={props.setDestAccount}
+            amount={props.amount}
+            transferFeeAmount={props.transferFeeAmount}
+            transferFeeEnabled={props.transferFeeEnabled}
+            allowTransferFee={props.allowTransferFee}
+          />
+
           <FormField label="Notes">
             <MentionTextarea
               value={props.notes}
               setValue={props.setNotes}
-              class="w-full bg-zinc-900/60 border border-zinc-800/60 px-3 py-2 text-sm text-zinc-200 ks-hud-clip-button focus:outline-none focus:border-amber-500/50 resize-none"
+              class="w-full bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_60%,transparent)] border border-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] px-3 py-2 text-sm text-[var(--ks-fg,#ffffff)] ks-hud-clip-button focus:outline-none focus:border-[color-mix(in_srgb,var(--ks-focus-ring,#c9a961)_50%,transparent)] resize-none"
               rows={2}
               placeholder="Optional notes... (type @ to mention a client)"
               ariaLabel="Notes"
@@ -874,7 +788,7 @@ export default function TransactionForm(props: TransactionFormProps) {
           </FormField>
 
           <div>
-            <div class="flex items-center gap-1 mb-2 text-xs text-zinc-500">
+            <div class="flex items-center gap-1 mb-2 text-xs text-[var(--ks-fg-subtle,#71717a)]">
               <Paperclip size={12} /> Attachments
               <Show
                 when={
@@ -883,7 +797,7 @@ export default function TransactionForm(props: TransactionFormProps) {
                   0
                 }
               >
-                <span class="text-zinc-600">
+                <span class="text-[var(--ks-fg-subtle,#71717a)]">
                   (
                   {(props.existingAttachments?.length ?? 0) +
                     props.pendingFiles.length}
@@ -908,7 +822,7 @@ export default function TransactionForm(props: TransactionFormProps) {
                     <Show
                       when={pf.previewUrl}
                       fallback={
-                        <div class="flex w-24 h-24 flex-col items-center justify-center gap-1 rounded-lg border border-zinc-700 bg-zinc-800/50 px-2 text-xs text-zinc-300">
+                        <div class="flex w-24 h-24 flex-col items-center justify-center gap-1 rounded-lg border border-[var(--ks-input-border,#3f3f46)] bg-[var(--ks-border,rgba(39,39,42,0.5))] px-2 text-xs text-[var(--ks-fg-muted,#a1a1aa)]">
                           <FileIcon size={20} />
                           <span class="truncate max-w-full text-[10px]">
                             {pf.file.name}
@@ -916,7 +830,7 @@ export default function TransactionForm(props: TransactionFormProps) {
                         </div>
                       }
                     >
-                      <div class="block rounded-lg border border-zinc-700 overflow-hidden">
+                      <div class="block rounded-lg border border-[var(--ks-input-border,#3f3f46)] overflow-hidden">
                         <img
                           src={pf.previewUrl!}
                           alt={pf.file.name}
@@ -932,7 +846,7 @@ export default function TransactionForm(props: TransactionFormProps) {
                           props.pendingFiles.filter((f) => f.id !== pf.id)
                         );
                       }}
-                      class="absolute -top-2 -right-2 flex w-7 h-7 items-center justify-center rounded-full bg-red-600/90 border border-red-400/60 text-white cursor-pointer hover:bg-red-500 active:bg-red-700 shadow-lg"
+                      class="absolute -top-2 -right-2 flex w-7 h-7 items-center justify-center rounded-full bg-[color-mix(in_srgb,var(--ks-danger,#ef4444)_90%,transparent)] border border-[color-mix(in_srgb,var(--ks-danger-fg,#f87171)_60%,transparent)] text-[var(--ks-fg,#ffffff)] cursor-pointer hover:bg-[var(--ks-danger,#ef4444)] active:bg-[var(--ks-danger,#ef4444)] shadow-lg"
                       aria-label={`Remove ${pf.file.name}`}
                     >
                       <X size={12} />
@@ -965,7 +879,7 @@ export default function TransactionForm(props: TransactionFormProps) {
             />
 
             <Show when={props.pendingFiles.length === 0}>
-              <p class="text-[10px] text-zinc-600 mt-1">
+              <p class="text-[10px] text-[var(--ks-fg-subtle,#71717a)] mt-1">
                 Drop files here or paste from clipboard.
               </p>
             </Show>
@@ -978,7 +892,7 @@ export default function TransactionForm(props: TransactionFormProps) {
                 onClick={() =>
                   setViewMode(viewMode() === "default" ? "advanced" : "default")
                 }
-                class="text-xs text-zinc-500 hover:text-amber-400 px-3 py-1.5 transition-colors cursor-pointer"
+                class="text-xs text-[var(--ks-fg-subtle,#71717a)] hover:text-[var(--ks-accent,#fbbf24)] px-3 py-1.5 transition-colors cursor-pointer"
               >
                 {viewMode() === "default"
                   ? "Show advanced fields"
@@ -1010,16 +924,16 @@ export default function TransactionForm(props: TransactionFormProps) {
           </Show>
         </div>
 
-        <div class="px-5 sm:px-6 py-4 border-t border-zinc-800/60 bg-zinc-950 flex flex-col-reverse sm:flex-row sm:items-center sm:justify-between gap-3 shrink-0">
-          <div class="text-xs text-zinc-500">
-            <span class="text-zinc-600">Will record as </span>
+        <div class="px-5 sm:px-6 py-4 border-t border-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] bg-[var(--ks-bg,#0a0a0a)] flex flex-col-reverse sm:flex-row sm:items-center sm:justify-between gap-3 shrink-0">
+          <div class="text-xs text-[var(--ks-fg-subtle,#71717a)]">
+            <span class="text-[var(--ks-fg-subtle,#71717a)]">Will record as </span>
             <span
               class="font-bold"
               classList={{
-                "text-emerald-400": props.category === "sale",
-                "text-red-400": props.category === "expense",
-                "text-amber-400": props.category === "payable",
-                "text-blue-400": props.category === "business",
+                "text-[var(--ks-success-fg,#34d399)]": props.category === "sale",
+                "text-[var(--ks-danger-fg,#f87171)]": props.category === "expense",
+                "text-[var(--ks-accent,#fbbf24)]": props.category === "payable",
+                "text-[var(--ks-info,#38bdf8)]": props.category === "business",
               }}
             >
               {(CATEGORY_FORM[props.category] || CATEGORY_FORM.expense).label}

package/src/components/composite/TransactionPayableFields.tsx

@@ -0,0 +1,97 @@
+import { For, Show } from "solid-js";
+import CalendarDays from "lucide-solid/icons/calendar-days";
+import FormField from "../base/FormField";
+import DatePicker from "../base/DatePicker";
+import SegmentedFilter from "../base/SegmentedFilter";
+
+const PAYABLE_KIND_OPTIONS: { id: string; label: string }[] = [
+  { id: "subscription", label: "Subscription" },
+  { id: "utility", label: "Utility" },
+  { id: "rent", label: "Rent / Lease" },
+  { id: "loan", label: "Loan" },
+  { id: "tax", label: "Tax" },
+  { id: "other", label: "Other" },
+];
+
+const PDC_OPTIONS: { id: string; label: string; dot: string }[] = [
+  { id: "issued", label: "PDC issued", dot: "bg-[var(--ks-accent,#fbbf24)]" },
+  { id: "presented", label: "PDC presented", dot: "bg-[var(--ks-info,#38bdf8)]" },
+  { id: "cleared", label: "PDC cleared", dot: "bg-[var(--ks-success-fg,#34d399)]" },
+  { id: "bounced", label: "PDC bounced", dot: "bg-[var(--ks-danger-fg,#f87171)]" },
+];
+
+export interface TransactionPayableFieldsProps {
+  payableKind: string;
+  setPayableKind: (v: string) => void;
+  dueDate: string;
+  setDueDate: (v: string) => void;
+  chequeNumber: string;
+  setChequeNumber: (v: string) => void;
+  pdcStatus: string;
+  setPdcStatus: (v: string) => void;
+}
+
+/**
+ * The "payable" category's extra fields, split out of TransactionForm to keep
+ * that file under the file-size budget. Kind/due-date/cheque/PDC-status only
+ * ever apply to the payable category, so this stays a pure sub-form.
+ */
+export default function TransactionPayableFields(props: TransactionPayableFieldsProps) {
+  return (
+    <div class="rounded-lg border border-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_20%,transparent)] bg-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_5%,transparent)] p-3 space-y-3">
+      <div class="flex items-center gap-2 text-[10px] uppercase tracking-widest text-[var(--ks-accent,#fbbf24)] font-semibold">
+        <CalendarDays size={12} />
+        <span>Payable details</span>
+      </div>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        <FormField label="Kind *">
+          <select
+            value={props.payableKind}
+            onChange={(e) => props.setPayableKind(e.currentTarget.value)}
+            class="w-full bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_60%,transparent)] border border-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] px-3 py-3 text-sm text-[var(--ks-fg,#ffffff)] ks-hud-clip-button cursor-pointer focus:outline-none focus:border-[color-mix(in_srgb,var(--ks-focus-ring,#c9a961)_50%,transparent)]"
+          >
+            <For each={PAYABLE_KIND_OPTIONS}>
+              {(opt) => <option value={opt.id}>{opt.label}</option>}
+            </For>
+          </select>
+        </FormField>
+        <FormField label="Due date">
+          <DatePicker
+            value={props.dueDate}
+            onChange={(d: string | null) => props.setDueDate(d || "")}
+          />
+          <p class="text-[10px] text-[var(--ks-fg-subtle,#71717a)] mt-0.5">
+            When payment is owed. Past-due payables show in the Payables tab.
+          </p>
+        </FormField>
+      </div>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        <FormField label="Cheque number">
+          <input
+            type="text"
+            value={props.chequeNumber}
+            onInput={(e) => props.setChequeNumber(e.currentTarget.value)}
+            class="w-full bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_60%,transparent)] border border-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] px-3 py-3 text-sm text-[var(--ks-fg,#ffffff)] ks-hud-clip-button focus:outline-none focus:border-[color-mix(in_srgb,var(--ks-focus-ring,#c9a961)_50%,transparent)]"
+            placeholder="e.g. 0004429-007"
+          />
+          <p class="text-[10px] text-[var(--ks-fg-subtle,#71717a)] mt-0.5">
+            For post-dated cheques (PDC). Leave blank for direct payments.
+          </p>
+        </FormField>
+        <Show when={props.chequeNumber.trim()}>
+          <FormField label="PDC status">
+            <SegmentedFilter
+              options={PDC_OPTIONS.map((opt) => ({
+                value: opt.id,
+                label: opt.label.replace("PDC ", ""),
+              }))}
+              value={props.pdcStatus}
+              onChange={props.setPdcStatus}
+              ariaLabel="PDC status"
+            />
+          </FormField>
+        </Show>
+      </div>
+    </div>
+  );
+}