@kahitsan/ksui 0.3.0

package/src/index.ts

@@ -0,0 +1,62 @@
+// @kahitsan/ksui — shared SolidJS UI components for KahitSan/Hilinga plugins.
+//
+// These were copied byte-for-byte across plugins (counter, transactions, ...);
+// this package is the single canonical copy, PUBLISHED to GitHub Packages and
+// consumed as a normal dependency from `node_modules`: a plugin `npm install`s
+// the published version.
+// The package ships its source under a `solid` export condition (see
+// package.json), so the consumer's vite-plugin-solid compiles these components
+// while solid-js and `@kserp/host-ui` stay EXTERNALIZED to the host runtime
+// globals — the plugin IIFE bundles them identically to a local copy: no runtime
+// change, single Solid instance, host UI kit reused. The `@kserp/host-ui` ambient
+// type contract ships alongside (host-ui.d.ts, the `./host-ui` export).
+
+export { default as MentionTextarea } from "./components/MentionTextarea";
+export type { MentionTextareaProps } from "./components/MentionTextarea";
+
+export { default as MarkdownNotes } from "./components/MarkdownNotes";
+export type { MarkdownNotesProps } from "./components/MarkdownNotes";
+
+export { default as ClientPicker } from "./components/ClientPicker";
+export type { ClientOption } from "./components/ClientPicker";
+
+export { default as VoucherPicker, calculateDiscount } from "./components/VoucherPicker";
+export type { VoucherOption } from "./components/VoucherPicker";
+
+export { default as CameraCapture } from "./components/CameraCapture";
+
+export { default as AddAttachmentTile } from "./components/AddAttachmentTile";
+
+export { default as PaymentAccountPicker } from "./components/PaymentAccountPicker";
+export type { PaymentAccountOption } from "./components/PaymentAccountPicker";
+
+// The canonical account + attachment widget set: AccountAvatar (logo / type-icon
+// glyph / initial-on-color fallback, with its initials + color + SVG helpers)
+// plus the account icon / logo / tone / accounts-index helpers and the
+// ExistingAttachmentTile that completes the attachment trio next to
+// AddAttachmentTile + CameraCapture. Plugins import these instead of keeping
+// their own local copies.
+export {
+  default as AccountAvatar,
+  getInitials,
+  getAvatarColor,
+  buildInitialsSvg,
+} from "./components/AccountAvatar";
+export type { AvatarAccount } from "./components/AccountAvatar";
+
+export {
+  getAccountIcon,
+  getAccountTone,
+  ACCOUNT_ICON_SLUGS,
+  ACCOUNT_ICON_LABELS,
+} from "./lib/account-icons";
+export type { IconComponent, AccountIconSlug } from "./lib/account-icons";
+
+export { buildLogoSrc } from "./lib/account-logo-url";
+
+export { attachmentUrl, isResolvableAttachment } from "./lib/attachments";
+
+export { default as ExistingAttachmentTile } from "./components/ExistingAttachmentTile";
+export type { ExistingAttachment } from "./components/ExistingAttachmentTile";
+
+export { useAccountsIndex, resolveAccount, resolveAccountName } from "./lib/accounts-index";

package/src/lib/account-icons.ts

@@ -0,0 +1,106 @@
+// Source: KahitSan/kserp src/lib/account-icons.ts (vendored into the plugin remote).
+// Maps an account-icon slug → lucide glyph, with a type-based fallback for
+// accounts that have no custom icon yet. Used by AccountAvatar.
+
+import Banknote from "lucide-solid/icons/banknote";
+import Landmark from "lucide-solid/icons/landmark";
+import Building from "lucide-solid/icons/building";
+import CreditCard from "lucide-solid/icons/credit-card";
+import Smartphone from "lucide-solid/icons/smartphone";
+import Wallet from "lucide-solid/icons/wallet";
+import Coins from "lucide-solid/icons/coins";
+import PiggyBank from "lucide-solid/icons/piggy-bank";
+import DollarSign from "lucide-solid/icons/dollar-sign";
+import Receipt from "lucide-solid/icons/receipt";
+import type { Component, JSX } from "solid-js";
+
+export type IconComponent = Component<JSX.SvgSVGAttributes<SVGSVGElement> & { size?: number }>;
+
+export const ACCOUNT_ICON_SLUGS = [
+  "banknote",
+  "landmark",
+  "building",
+  "credit-card",
+  "smartphone",
+  "wallet",
+  "coins",
+  "piggy-bank",
+  "dollar-sign",
+  "receipt",
+] as const;
+
+export type AccountIconSlug = (typeof ACCOUNT_ICON_SLUGS)[number];
+
+const ICON_BY_SLUG: Record<AccountIconSlug, IconComponent> = {
+  banknote: Banknote,
+  landmark: Landmark,
+  building: Building,
+  "credit-card": CreditCard,
+  smartphone: Smartphone,
+  wallet: Wallet,
+  coins: Coins,
+  "piggy-bank": PiggyBank,
+  "dollar-sign": DollarSign,
+  receipt: Receipt,
+};
+
+const DEFAULT_BY_TYPE: Record<string, IconComponent> = {
+  bank: Banknote,
+  e_wallet: Smartphone,
+  cash: Wallet,
+  capital: PiggyBank,
+};
+
+// Pretty labels for the icon picker (financial-accounts create/edit modal).
+export const ACCOUNT_ICON_LABELS: Record<AccountIconSlug, string> = {
+  banknote: "Banknote",
+  landmark: "Landmark",
+  building: "Building",
+  "credit-card": "Credit card",
+  smartphone: "Smartphone",
+  wallet: "Wallet",
+  coins: "Coins",
+  "piggy-bank": "Piggy bank",
+  "dollar-sign": "Dollar sign",
+  receipt: "Receipt",
+};
+
+// Returns the lucide icon to render for an account, preferring the account's
+// own icon slug and falling back to the type-based default.
+export function getAccountIcon(account: { icon?: string | null; type: string }): IconComponent {
+  if (account.icon && (ACCOUNT_ICON_SLUGS as readonly string[]).includes(account.icon)) {
+    return ICON_BY_SLUG[account.icon as AccountIconSlug];
+  }
+  return DEFAULT_BY_TYPE[account.type] ?? Banknote;
+}
+
+const DEFAULT_TONE_BY_TYPE: Record<string, { text: string; bg: string; border: string }> = {
+  bank: { text: "text-blue-400", bg: "bg-blue-500/10", border: "border-blue-400/40" },
+  e_wallet: { text: "text-amber-400", bg: "bg-amber-500/10", border: "border-amber-400/40" },
+  cash: { text: "text-emerald-400", bg: "bg-emerald-500/10", border: "border-emerald-400/40" },
+  capital: { text: "text-amber-400", bg: "bg-amber-500/10", border: "border-amber-400/40" },
+};
+
+const FALLBACK_TONE = {
+  text: "text-zinc-300",
+  bg: "bg-zinc-700/30",
+  border: "border-zinc-700/60",
+};
+
+// Per-type accent tone for an account chip, or the account's own custom color.
+export function getAccountTone(account: { color?: string | null; type: string }): {
+  class?: string;
+  style?: JSX.CSSProperties;
+} {
+  if (account.color) {
+    return {
+      style: {
+        color: account.color,
+        "background-color": `${account.color}1a`,
+        "border-color": `${account.color}66`,
+      },
+    };
+  }
+  const tone = DEFAULT_TONE_BY_TYPE[account.type] ?? FALLBACK_TONE;
+  return { class: `${tone.text} ${tone.bg} ${tone.border}` };
+}

package/src/lib/account-logo-url.ts

@@ -0,0 +1,12 @@
+// Source: KahitSan/kserp src/lib/account-logo-url.ts (vendored into the plugin remote).
+//
+// Build the <img src> for a financial account logo. Logos are object-storage
+// only now: s3_link is the public URL and the sole reference (the legacy
+// logo_path column + kernel /assets/ fallback are gone).
+
+export function buildLogoSrc(s3Link: string | null | undefined): string {
+  // The value flows straight into <img src>, so only an http(s) URL is allowed
+  // through — a stored javascript:/data:/vbscript: scheme would be stored XSS.
+  if (s3Link && /^https?:/i.test(s3Link)) return s3Link;
+  return "";
+}

package/src/lib/accounts-index.tsx

@@ -0,0 +1,105 @@
+// Source: KahitSan/kserp src/lib/accounts-index.tsx (promoted into the SDK).
+//
+// Session-scoped index of financial accounts keyed by id. The list rows, the
+// detail payments list, etc. surface accounts by name only (server denormalises
+// source/destination names and drops icon/color/logo_path). This index lets any
+// render site resolve an id → AvatarAccount synchronously so AccountAvatar can
+// show the right glyph/logo.
+//
+// The monolith mounts a Provider in the app shell and shares one resource via
+// context. The plugin remote has no such provider, so this version owns a
+// module-level resource created on first use and re-keyed on the active org id
+// (read from the host's useActiveWorkspace()). Because plugin-ui ships as source
+// compiled into each plugin's IIFE, the module-level singleton stays per-plugin.
+// Degrades gracefully: when the financial-accounts plugin isn't deployed the
+// fetch 404s/fails and the index stays empty — resolveAccount() then falls back
+// to the type-default glyph.
+
+import { createResource, type Resource } from "solid-js";
+import { useActiveWorkspace } from "@kserp/host-ui";
+import type { AvatarAccount } from "../components/AccountAvatar";
+
+interface IndexShape {
+  byId: Map<number | string, AvatarAccount>;
+  // Display names keyed by id. The server denormalises source/destination
+  // names on most reads but the payment-leg history only carries
+  // financial_account_id, so callers resolve the name from here instead of
+  // showing the bare "Account #N" placeholder.
+  nameById: Map<number | string, string>;
+}
+
+async function fetchAccountsIndex(wsId: number | null): Promise<IndexShape> {
+  const byId = new Map<number | string, AvatarAccount>();
+  const nameById = new Map<number | string, string>();
+  if (wsId == null) return { byId, nameById };
+
+  const [activeResult, archivedResult] = await Promise.all([
+    fetch("/api/financial-accounts?status=active&limit=500", { credentials: "include" })
+      .then(async (r) => (r.ok ? ((await r.json()).data ?? []) : []))
+      .catch(() => []) as Promise<Array<AvatarAccount>>,
+    fetch("/api/financial-accounts?status=archived&limit=500", { credentials: "include" })
+      .then(async (r) => (r.ok ? ((await r.json()).data ?? []) : []))
+      .catch(() => []) as Promise<Array<AvatarAccount>>,
+  ]);
+
+  for (const a of activeResult) {
+    byId.set(a.id, {
+      id: a.id,
+      type: a.type,
+      icon: a.icon ?? null,
+      color: a.color ?? null,
+      s3_link: a.s3_link ?? null,
+    });
+    if (a.name) nameById.set(a.id, a.name);
+  }
+  for (const a of archivedResult) {
+    if (!byId.has(a.id)) {
+      byId.set(a.id, {
+        id: a.id,
+        type: a.type,
+        icon: a.icon ?? null,
+        color: a.color ?? null,
+        s3_link: a.s3_link ?? null,
+      });
+    }
+    if (a.name && !nameById.has(a.id)) nameById.set(a.id, a.name);
+  }
+  return { byId, nameById };
+}
+
+// Module-level singletons so a page with N rows fires one fetch per org, not
+// 2*N. Created on first useAccountsIndex() call.
+let sharedResource: Resource<IndexShape> | undefined;
+
+export function useAccountsIndex(): Resource<IndexShape> {
+  if (!sharedResource) {
+    const { activeWorkspace } = useActiveWorkspace();
+    const [data] = createResource(() => activeWorkspace()?.ws_id ?? null, fetchAccountsIndex);
+    sharedResource = data;
+  }
+  return sharedResource;
+}
+
+// Build an AvatarAccount for the given id, falling back to a generic
+// placeholder when the id is missing from the index (deleted/archived edge
+// case, or the index hasn't loaded yet). Always returns something renderable.
+export function resolveAccount(
+  index: IndexShape | undefined,
+  id: number | string | null | undefined,
+): AvatarAccount | null {
+  if (id == null) return null;
+  const hit = index?.byId.get(id);
+  if (hit) return hit;
+  return { id, type: "external", icon: null, color: null, s3_link: null };
+}
+
+// Resolve an account id → its display name. Returns null when the id is
+// missing or the index hasn't loaded yet, so callers can fall back to a
+// server-supplied name or the bare "Account #N" placeholder.
+export function resolveAccountName(
+  index: IndexShape | undefined,
+  id: number | string | null | undefined,
+): string | null {
+  if (id == null) return null;
+  return index?.nameById.get(id) ?? null;
+}

package/src/lib/attachments.ts

@@ -0,0 +1,20 @@
+// Attachment URL resolver for plugin remotes.
+//
+// Attachments are object-storage only: the upload route stores the public S3
+// URL in s3_link, which is the sole reference — the legacy on-disk file_path
+// column and the kernel /assets/ fallback are gone.
+
+export function attachmentUrl(s3Link: string | null | undefined): string {
+  // The value flows straight into <a href> / <img src>, so only an http(s) URL
+  // is allowed through — a stored javascript:/data:/vbscript: scheme would be
+  // stored XSS. Every attachment has a valid https s3_link; anything else
+  // yields an empty src and the render site shows an "unavailable" placeholder.
+  if (s3Link && /^https?:/i.test(s3Link)) return s3Link;
+  return "";
+}
+
+// Whether an attachment can actually be fetched — true only for a safe http(s)
+// s3_link. Render sites show an "unavailable" placeholder otherwise.
+export function isResolvableAttachment(s3Link: string | null | undefined): boolean {
+  return !!s3Link && /^https?:/i.test(s3Link);
+}