@kahitsan/ksui 0.45.0 → 0.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.45.0",
+  "version": "0.46.0",
   "description": "ksui is a standalone set of SolidJS UI components for KahitSan/Hilinga and any SolidJS app. Published to the public npm registry and consumed as a normal dependency. Ships source under a `solid` export condition so the consumer's vite-plugin-solid compiles it with only solid-js externalized; it depends on nothing but solid-js + lucide-solid and injects its own CSS.",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/composite/TransactionForm.datetime.test.tsx

@@ -0,0 +1,130 @@
+// The date field is a date-only picker by default; supplying `setTime` turns it
+// into one native date-and-time input.
+import { describe, expect, it, vi } from "vitest";
+import { render, fireEvent } from "@solidjs/testing-library";
+import TransactionForm, { type TransactionFormProps } from "./TransactionForm";
+
+function baseProps(overrides: Partial<TransactionFormProps> = {}): TransactionFormProps {
+  const noop = vi.fn();
+  return {
+    error: "",
+    saving: false,
+    category: "expense",
+    setCategory: noop,
+    subcategory: "",
+    setSubcategory: noop,
+    sourceAccount: "",
+    setSourceAccount: noop,
+    destAccount: "",
+    setDestAccount: noop,
+    amount: "",
+    setAmount: noop,
+    description: "",
+    setDescription: noop,
+    notes: "",
+    setNotes: noop,
+    date: "2026-09-10",
+    setDate: noop,
+    isPrivate: false,
+    setIsPrivate: noop,
+    sharedWith: [],
+    setSharedWith: noop,
+    sharedRoleCodes: [],
+    setSharedRoleCodes: noop,
+    backdateReason: "",
+    setBackdateReason: noop,
+    payee: "",
+    setPayee: noop,
+    payeeId: null,
+    setPayeeId: noop,
+    refNumber: "",
+    setRefNumber: noop,
+    taxType: "vat_inclusive",
+    setTaxType: noop,
+    hasEwt: false,
+    setHasEwt: noop,
+    ewtRate: "",
+    setEwtRate: noop,
+    payableKind: "",
+    setPayableKind: noop,
+    dueDate: "",
+    setDueDate: noop,
+    chequeNumber: "",
+    setChequeNumber: noop,
+    pdcStatus: "",
+    setPdcStatus: noop,
+    transferFeeEnabled: false,
+    setTransferFeeEnabled: noop,
+    transferFeeAmount: "",
+    setTransferFeeAmount: noop,
+    allowTransferFee: false,
+    pendingFiles: [],
+    setPendingFiles: noop,
+    accounts: [],
+    orgMembers: [],
+    shareableRoles: [],
+    isAdmin: true,
+    canShare: false,
+    isBackdated: false,
+    saleItems: [],
+    setSaleItems: noop,
+    saleClient: null,
+    setSaleClient: noop,
+    saleVoucher: null,
+    setSaleVoucher: noop,
+    saleManualDiscount: "",
+    setSaleManualDiscount: noop,
+    onSubmit: noop,
+    submitLabel: "Save",
+    ...overrides,
+  };
+}
+
+describe("TransactionForm date and time", () => {
+  it("keeps the date-only picker when no time setter is supplied", () => {
+    const { queryByTestId, getByText } = render(() => <TransactionForm {...baseProps()} />);
+    expect(queryByTestId("transactions-form-datetime")).toBeNull();
+    expect(getByText("Date *")).toBeTruthy();
+  });
+
+  it("shows one date-and-time input holding both values", () => {
+    const { getByTestId, getByText } = render(() => (
+      <TransactionForm {...baseProps({ time: "09:30:15", setTime: vi.fn() })} />
+    ));
+    const input = getByTestId("transactions-form-datetime") as HTMLInputElement;
+    expect(input.type).toBe("datetime-local");
+    expect(input.value).toBe("2026-09-10T09:30");
+    expect(getByText("Date & time *")).toBeTruthy();
+  });
+
+  it("splits an edit into the date and the time", () => {
+    const setDate = vi.fn();
+    const setTime = vi.fn();
+    const { getByTestId } = render(() => (
+      <TransactionForm {...baseProps({ time: "09:30", setDate, setTime })} />
+    ));
+    const input = getByTestId("transactions-form-datetime") as HTMLInputElement;
+    fireEvent.input(input, { target: { value: "2026-09-11T18:45" } });
+    expect(setDate).toHaveBeenCalledWith("2026-09-11");
+    expect(setTime).toHaveBeenCalledWith("18:45");
+  });
+
+  it("ignores a cleared value instead of wiping the date", () => {
+    const setDate = vi.fn();
+    const setTime = vi.fn();
+    const { getByTestId } = render(() => (
+      <TransactionForm {...baseProps({ time: "09:30", setDate, setTime })} />
+    ));
+    fireEvent.input(getByTestId("transactions-form-datetime"), { target: { value: "" } });
+    expect(setDate).not.toHaveBeenCalled();
+    expect(setTime).not.toHaveBeenCalled();
+  });
+
+  it("locks the field and says why for non-admins", () => {
+    const { getByTestId, getByText } = render(() => (
+      <TransactionForm {...baseProps({ time: "09:30", setTime: vi.fn(), isAdmin: false })} />
+    ));
+    expect((getByTestId("transactions-form-datetime") as HTMLInputElement).disabled).toBe(true);
+    expect(getByText("Only admins can change the date and time")).toBeTruthy();
+  });
+});

package/src/components/composite/TransactionForm.tsx

@@ -231,6 +231,11 @@ export interface TransactionFormProps {
   setNotes: (v: string) => void;
   date: string;
   setDate: (v: string) => void;
+  /** Wall-clock time of day for the transaction, `HH:MM` or `HH:MM:SS`.
+   *  Supplying `setTime` switches the date field to a single native
+   *  date-and-time input; leave both out to keep the date-only picker. */
+  time?: string;
+  setTime?: (v: string) => void;
   isPrivate: boolean;
   setIsPrivate: (v: boolean) => void;
   sharedWith: string[];
@@ -329,6 +334,10 @@ export default function TransactionForm(props: TransactionFormProps) {
 `,
   );
   const compact = () => props.layout === "compact";
+  const withTime = () => typeof props.setTime === "function";
+  // datetime-local wants exactly YYYY-MM-DDTHH:MM; a missing date reads as empty.
+  const dateTimeValue = () =>
+    props.date ? `${props.date}T${(props.time || "00:00").slice(0, 5)}` : "";
   const catConfig = () =>
     CATEGORY_FORM[props.category] || CATEGORY_FORM.expense;
   const [dragging, setDragging] = createSignal(false);
@@ -639,15 +648,48 @@ export default function TransactionForm(props: TransactionFormProps) {
           </Show>
 
           <div class={compact() ? "ks-transaction-compact-date" : undefined}>
-          <FormField label={compact() ? "TRANSACTION DATE" : "Date *"}>
-            <DatePicker
-              value={props.date}
-              onChange={(d: string | null) => d && props.setDate(d)}
-              disabled={!props.isAdmin}
-            />
+          <FormField
+            label={
+              withTime()
+                ? compact()
+                  ? "TRANSACTION DATE & TIME"
+                  : "Date & time *"
+                : compact()
+                ? "TRANSACTION DATE"
+                : "Date *"
+            }
+          >
+            <Show
+              when={withTime()}
+              fallback={
+                <DatePicker
+                  value={props.date}
+                  onChange={(d: string | null) => d && props.setDate(d)}
+                  disabled={!props.isAdmin}
+                />
+              }
+            >
+              <input
+                type="datetime-local"
+                data-testid="transactions-form-datetime"
+                aria-label="Transaction date and time"
+                value={dateTimeValue()}
+                disabled={!props.isAdmin}
+                required
+                onInput={(e) => {
+                  const v = e.currentTarget.value;
+                  if (!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(v)) return;
+                  props.setDate(v.slice(0, 10));
+                  props.setTime?.(v.slice(11, 16));
+                }}
+                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)] disabled:opacity-60"
+              />
+            </Show>
             <Show when={!props.isAdmin}>
               <p class="text-[10px] text-[var(--ks-fg-subtle,#71717a)] mt-0.5">
-                Only admins can change the date
+                {withTime()
+                  ? "Only admins can change the date and time"
+                  : "Only admins can change the date"}
               </p>
             </Show>
           </FormField>