@kahitsan/ksui 0.31.0 → 0.32.0

package/src/components/composite/TransferAccountsPicker.tsx

@@ -0,0 +1,291 @@
+import { Show, type JSX } from "solid-js";
+import ArrowRightLeft from "lucide-solid/icons/arrow-right-left";
+import Plus from "lucide-solid/icons/plus";
+import AccountAvatar from "../base/AccountAvatar";
+import FormField from "../base/FormField";
+import AccountRadioPicker from "./AccountRadioPicker";
+import type { TransactionAccount } from "./TransactionForm";
+import { formatPHP } from "../../utils/formatPHP";
+
+export interface TransferAccountsPickerProps {
+  accounts: TransactionAccount[];
+  sourceAccount: string;
+  setSourceAccount: (v: string) => void;
+  destAccount: string;
+  setDestAccount: (v: string) => void;
+  sourceLabel: string;
+  destLabel: string;
+  amount: string;
+  feeAmount: string;
+  feeEnabled: boolean;
+}
+
+interface AccountTileProps {
+  role: "from" | "to";
+  account: TransactionAccount | undefined;
+  emptyHint: string;
+  delta: number;
+  onEditRequest: () => void;
+  tileTestId: string;
+  clipClass: string;
+}
+
+function AccountTile(p: AccountTileProps): JSX.Element {
+  const isFilled = () => !!p.account;
+  const isFrom = () => p.role === "from";
+  return (
+    <button
+      type="button"
+      data-testid={p.tileTestId}
+      onClick={p.onEditRequest}
+      class={`group flex flex-1 min-w-0 items-center gap-3 border px-4 py-3 text-left transition-colors cursor-pointer ${p.clipClass}`}
+      classList={{
+        "border-blue-500/40 bg-blue-500/5 hover:bg-blue-500/10":
+          isFilled() && isFrom(),
+        "border-amber-500/40 bg-amber-500/5 hover:bg-amber-500/10":
+          isFilled() && !isFrom(),
+        "border-dashed border-zinc-700 bg-zinc-900/40 hover:border-amber-500/50 hover:bg-zinc-900/60":
+          !isFilled(),
+      }}
+      aria-label={
+        isFilled()
+          ? `${isFrom() ? "Source" : "Destination"}: ${p.account!.name} — tap to change`
+          : `Select ${isFrom() ? "source" : "destination"} account`
+      }
+    >
+      <Show
+        when={p.account}
+        keyed
+        fallback={
+          <span class="flex h-8 w-8 items-center justify-center text-zinc-500">
+            <Plus size={18} />
+          </span>
+        }
+      >
+        {(a) => (
+          <AccountAvatar
+            account={a}
+            size={28}
+            iconClass={isFrom() ? "text-blue-300" : "text-amber-300"}
+          />
+        )}
+      </Show>
+      <div class="flex min-w-0 flex-col">
+        <span
+          class="text-[10px] font-semibold uppercase tracking-widest"
+          classList={{
+            "text-blue-300": isFilled() && isFrom(),
+            "text-amber-300": isFilled() && !isFrom(),
+            "text-zinc-500": !isFilled(),
+          }}
+        >
+          {isFrom() ? "From" : "To"}
+        </span>
+        <Show
+          when={p.account}
+          keyed
+          fallback={
+            <span class="text-sm text-zinc-500">{p.emptyHint}</span>
+          }
+        >
+          {(a) => (
+            <>
+              <span class="truncate text-sm font-semibold text-zinc-100">
+                {a.name}
+              </span>
+              <Show when={a.balance != null}>
+                <span class="flex items-baseline gap-1 text-[11px] tabular-nums text-zinc-400">
+                  <span class="truncate">{formatPHP(a.balance!)}</span>
+                  <Show when={p.delta !== 0}>
+                    <span
+                      class="whitespace-nowrap font-semibold"
+                      classList={{
+                        "text-red-400": p.delta < 0,
+                        "text-emerald-400": p.delta > 0,
+                      }}
+                      data-testid={`transactions-form-transfer-delta-${p.role}`}
+                    >
+                      ({p.delta > 0 ? "+" : ""}
+                      {formatPHP(p.delta)})
+                    </span>
+                  </Show>
+                </span>
+              </Show>
+            </>
+          )}
+        </Show>
+      </div>
+    </button>
+  );
+}
+
+export default function TransferAccountsPicker(
+  props: TransferAccountsPickerProps
+) {
+  const sourceMeta = () =>
+    props.accounts.find((a) => a.id.toString() === props.sourceAccount);
+  const destMeta = () =>
+    props.accounts.find((a) => a.id.toString() === props.destAccount);
+
+  const swap = () => {
+    const s = props.sourceAccount;
+    const d = props.destAccount;
+    props.setSourceAccount(d);
+    props.setDestAccount(s);
+  };
+
+  const bothFilled = () => !!props.sourceAccount && !!props.destAccount;
+
+  const amountNum = () => {
+    const n = parseFloat(props.amount);
+    return Number.isFinite(n) && n > 0 ? n : 0;
+  };
+  const feeNum = () => {
+    if (!props.feeEnabled) return 0;
+    const n = parseFloat(props.feeAmount);
+    return Number.isFinite(n) && n > 0 ? n : 0;
+  };
+  const sourceDelta = () => -(amountNum() + feeNum());
+  const destDelta = () => amountNum();
+
+  return (
+    <div class="space-y-3">
+      <div class="flex items-stretch gap-2 max-sm:flex-col sm:flex-row">
+        <AccountTile
+          role="from"
+          account={sourceMeta()}
+          emptyHint="Select source"
+          delta={sourceDelta()}
+          onEditRequest={() => props.setSourceAccount("")}
+          tileTestId="transactions-form-transfer-tile-from"
+          clipClass="ks-hud-clip-top-right-bottom-left"
+        />
+
+        <Show
+          when={!bothFilled()}
+          fallback={
+            <button
+              type="button"
+              data-testid="transactions-form-transfer-swap"
+              onClick={swap}
+              class="flex h-9 w-9 shrink-0 items-center justify-center self-center border border-zinc-700 bg-zinc-900 text-zinc-300 transition-colors hover:border-amber-500/60 hover:text-amber-300 cursor-pointer ks-hud-clip-button max-sm:rotate-90"
+              aria-label="Swap source and destination"
+              title="Swap source and destination"
+            >
+              <ArrowRightLeft size={14} />
+            </button>
+          }
+        >
+          <div
+            class="shrink-0 self-center max-sm:py-1 sm:px-1"
+            aria-hidden="true"
+          >
+            <svg
+              viewBox="0 0 56 14"
+              class="max-sm:hidden sm:block h-3.5 w-14"
+            >
+              <defs>
+                <linearGradient
+                  id="fin-flow-h"
+                  gradientUnits="userSpaceOnUse"
+                  x1="0"
+                  y1="7"
+                  x2="56"
+                  y2="7"
+                >
+                  <stop offset="0" stop-color="#3b82f6" />
+                  <stop offset="1" stop-color="#f59e0b" />
+                </linearGradient>
+              </defs>
+              <line
+                x1="0"
+                y1="7"
+                x2="44"
+                y2="7"
+                stroke="url(#fin-flow-h)"
+                stroke-width="2"
+                class="fin-flow-dash"
+              />
+              <path d="M44 1 L56 7 L44 13 Z" fill="#f59e0b" />
+            </svg>
+            <svg
+              viewBox="0 0 14 40"
+              class="max-sm:block sm:hidden h-10 w-3.5"
+            >
+              <defs>
+                <linearGradient
+                  id="fin-flow-v"
+                  gradientUnits="userSpaceOnUse"
+                  x1="7"
+                  y1="0"
+                  x2="7"
+                  y2="40"
+                >
+                  <stop offset="0" stop-color="#3b82f6" />
+                  <stop offset="1" stop-color="#f59e0b" />
+                </linearGradient>
+              </defs>
+              <line
+                x1="7"
+                y1="0"
+                x2="7"
+                y2="30"
+                stroke="url(#fin-flow-v)"
+                stroke-width="2"
+                class="fin-flow-dash"
+              />
+              <path d="M1 30 L13 30 L7 40 Z" fill="#f59e0b" />
+            </svg>
+          </div>
+        </Show>
+
+        <AccountTile
+          role="to"
+          account={destMeta()}
+          emptyHint={
+            props.sourceAccount ? "Select destination" : "Destination"
+          }
+          delta={destDelta()}
+          onEditRequest={() => props.setDestAccount("")}
+          tileTestId="transactions-form-transfer-tile-to"
+          clipClass="ks-hud-clip-top-left-bottom-right"
+        />
+      </div>
+
+      <Show when={!props.sourceAccount}>
+        <div
+          class="animate-[fin-slide-fade-down_0.28s_ease-out]"
+          data-testid="transactions-form-transfer-source-picker"
+        >
+          <FormField label={props.sourceLabel}>
+            <AccountRadioPicker
+              accounts={props.accounts}
+              ariaLabel={props.sourceLabel}
+              value={props.sourceAccount}
+              onChange={props.setSourceAccount}
+              excludeId={props.destAccount}
+              autoDefault={false}
+            />
+          </FormField>
+        </div>
+      </Show>
+      <Show when={props.sourceAccount && !props.destAccount}>
+        <div
+          class="animate-[fin-slide-fade-down_0.28s_ease-out]"
+          data-testid="transactions-form-transfer-dest-picker"
+        >
+          <FormField label={props.destLabel}>
+            <AccountRadioPicker
+              accounts={props.accounts}
+              ariaLabel={props.destLabel}
+              value={props.destAccount}
+              onChange={props.setDestAccount}
+              excludeId={props.sourceAccount}
+              autoDefault={false}
+            />
+          </FormField>
+        </div>
+      </Show>
+    </div>
+  );
+}

package/src/components/composite/TransferFeeChip.tsx

@@ -0,0 +1,34 @@
+import X from "lucide-solid/icons/x";
+
+export interface TransferFeeChipProps {
+  enabled: boolean;
+  onToggle: () => void;
+}
+
+export default function TransferFeeChip(props: TransferFeeChipProps) {
+  return (
+    <button
+      type="button"
+      data-testid="transactions-form-transfer-fee-toggle"
+      onClick={props.onToggle}
+      class="flex items-center gap-1.5 self-center rounded-md border px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wider transition-colors cursor-pointer"
+      classList={{
+        "border-blue-500/50 bg-blue-500/15 text-blue-300 hover:bg-blue-500/25":
+          props.enabled,
+        "border-zinc-700 bg-zinc-950/60 text-zinc-400 hover:border-blue-500/40 hover:text-blue-300":
+          !props.enabled,
+      }}
+      aria-pressed={props.enabled}
+      aria-label={props.enabled ? "Remove transfer fee" : "Add transfer fee"}
+    >
+      <span>Fees</span>
+      <span
+        class="inline-flex items-center justify-center"
+        classList={{ hidden: !props.enabled }}
+        aria-hidden="true"
+      >
+        <X size={11} />
+      </span>
+    </button>
+  );
+}

package/src/index.ts

@@ -109,6 +109,35 @@ export {
 export { default as PaymentAccountPicker } from "./components/composite/PaymentAccountPicker";
 export type { PaymentAccountOption } from "./components/composite/PaymentAccountPicker";
 
+// AccountRadioPicker: a static grid/radiogroup of account buttons fed by an
+// already-fetched accounts prop (vs. PaymentAccountPicker's self-fetching
+// dropdown) -- the payment-source picker used inside TransactionForm.
+export { default as AccountRadioPicker } from "./components/composite/AccountRadioPicker";
+export type { AccountRadioPickerProps } from "./components/composite/AccountRadioPicker";
+
+// TransactionForm: the full transaction create/edit form (category picker,
+// SalesBodyEditor, amount/date/payee/attachments, advanced tax/EWT/sharing
+// fields). `simpleMode` hides the Type picker + advanced toggle for a caller
+// that locks `category` to one value. Lifted verbatim from kplugin_finance so
+// any plugin recording a transaction against the shared /api/transactions
+// endpoint can reuse the same form instead of forking it.
+export { default as TransactionForm } from "./components/composite/TransactionForm";
+export type {
+  TransactionFormProps,
+  TransactionAccount,
+  TransactionOrgMember,
+  TransactionShareableRole,
+  TransactionAttachment,
+} from "./components/composite/TransactionForm";
+export { default as FormAdvancedSection } from "./components/composite/FormAdvancedSection";
+export type { FormAdvancedSectionProps } from "./components/composite/FormAdvancedSection";
+export { default as SalesBodyEditor } from "./components/composite/SalesBodyEditor";
+export type { SalesLine, SalesBodyEditorProps } from "./components/composite/SalesBodyEditor";
+export { default as TransferFeeChip } from "./components/composite/TransferFeeChip";
+export type { TransferFeeChipProps } from "./components/composite/TransferFeeChip";
+export { default as TransferAccountsPicker } from "./components/composite/TransferAccountsPicker";
+export type { TransferAccountsPickerProps } from "./components/composite/TransferAccountsPicker";
+
 // LiveTimer wraps ProgressBar with timer state and elapsed-time display.
 export { default as LiveTimer, type LiveTimerProps } from "./components/composite/LiveTimer";