@ram_28/kf-ai-sdk 2.0.19 → 2.0.20-beta.1

package/docs/examples/fields/complex-fields.md

@@ -1,248 +0,0 @@
-# Complex Fields
-
-> Complete form demonstrating selection, reference, and attachment fields with async options loading and pre-built UI components: Select, Reference, User, File, and Image.
-
-```tsx
-import { useState, useMemo } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { useBDOForm } from "@ram_28/kf-ai-sdk/form";
-import type { UseBDOFormReturnType } from "@ram_28/kf-ai-sdk/form/types";
-import type { UserFieldType } from "@ram_28/kf-ai-sdk/types";
-import { AdminFieldTest } from "@/bdo/admin/FieldTest";
-import type { FieldTestSupplierRefType } from "@/bdo/entities/field-test";
-import {
-  Field,
-  FieldContent,
-  FieldLabel,
-  FieldError,
-} from "@/components/ui/field";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { ReferenceSelect } from "@/components/ui/reference-select";
-import { FileUpload } from "@/components/ui/file-upload";
-import { ImageUpload } from "@/components/ui/image-upload";
-import { FilePreview } from "@/components/ui/file-preview";
-import { ImageThumbnail } from "@/components/ui/image-thumbnail";
-
-export default function ComplexFieldsForm({ recordId }: { recordId?: string }) {
-  const fieldTest = useMemo(() => new AdminFieldTest(), []);
-
-  const {
-    watch,
-    setValue,
-    handleSubmit,
-    errors,
-    item,
-    isLoading,
-    isSubmitting,
-  }: UseBDOFormReturnType<AdminFieldTest> = useBDOForm({
-    bdo: fieldTest,
-    recordId,
-  });
-
-  // Dropdown open state for lazy-loading
-  const [userDropdownOpen, setUserDropdownOpen] = useState(false);
-
-  // ─── Async Options ─────────────────────────────────────────
-
-  // User field options — lazy-load when dropdown opens
-  const { data: users = [], isFetching: isUsersLoading } = useQuery<
-    UserFieldType[]
-  >({
-    queryKey: ["fieldtest-user-options", item._id],
-    queryFn: () => fieldTest.AssignedUser.fetchOptions(item._id!),
-    enabled: userDropdownOpen && !!item._id,
-    staleTime: Infinity,
-  });
-
-  if (isLoading) return <p>Loading...</p>;
-
-  return (
-    <form onSubmit={handleSubmit((data) => console.log("Saved", data._id))}>
-      {/* ───────────────────────────────────────────────── */}
-      {/* SelectField — static options from Constraint.Enum */}
-      {/* watch() + setValue(), NOT register()              */}
-      {/* ───────────────────────────────────────────────── */}
-      <Field>
-        <FieldLabel>
-          {fieldTest.Status.label} {fieldTest.Status.required && <span>*</span>}
-        </FieldLabel>
-        <FieldContent>
-          <Select
-            value={watch(fieldTest.Status.id) ?? ""}
-            onValueChange={(value) => setValue(fieldTest.Status.id, value)}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder="Select status" />
-            </SelectTrigger>
-            <SelectContent>
-              {fieldTest.Status.options.map((opt) => (
-                <SelectItem key={opt.value} value={opt.value}>
-                  {opt.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </FieldContent>
-        {errors.Status && <FieldError>{errors.Status.message}</FieldError>}
-      </Field>
-
-      {/* ───────────────────────────────────────────────── */}
-      {/* ReferenceField — pre-built <ReferenceSelect>     */}
-      {/* Abstracts fetchOptions + dropdown UI              */}
-      {/* ───────────────────────────────────────────────── */}
-      <Field>
-        <FieldLabel>{fieldTest.SupplierRef.label}</FieldLabel>
-        <FieldContent>
-          <ReferenceSelect
-            bdoField={fieldTest.SupplierRef}
-            instanceId={item._id}
-            value={watch(fieldTest.SupplierRef.id)}
-            onChange={(supplier) =>
-              setValue(
-                fieldTest.SupplierRef.id,
-                supplier as FieldTestSupplierRefType,
-              )
-            }
-          />
-        </FieldContent>
-        {errors.SupplierRef && <FieldError>{errors.SupplierRef.message}</FieldError>}
-      </Field>
-
-      {/* ───────────────────────────────────────────────── */}
-      {/* UserField — fetchOptions() + manual dropdown     */}
-      {/* Value shape: { _id: string; _name: string }      */}
-      {/* ───────────────────────────────────────────────── */}
-      <Field>
-        <FieldLabel>{fieldTest.AssignedUser.label}</FieldLabel>
-        <FieldContent>
-          <Select
-            value={watch(fieldTest.AssignedUser.id)?._id ?? ""}
-            onValueChange={(value) => {
-              const user = users.find((u) => u._id === value);
-              if (user) setValue(fieldTest.AssignedUser.id, user);
-            }}
-            open={userDropdownOpen}
-            onOpenChange={setUserDropdownOpen}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder="Select user">
-                {watch(fieldTest.AssignedUser.id)?._name ?? "Select user"}
-              </SelectValue>
-            </SelectTrigger>
-            <SelectContent>
-              {isUsersLoading ? (
-                <div className="py-4 text-center text-sm text-gray-500">
-                  Loading...
-                </div>
-              ) : users.length > 0 ? (
-                users.map((user) => (
-                  <SelectItem key={user._id} value={user._id}>
-                    {user._name}
-                  </SelectItem>
-                ))
-              ) : (
-                <div className="py-4 text-center text-sm text-gray-500">
-                  No users available
-                </div>
-              )}
-            </SelectContent>
-          </Select>
-        </FieldContent>
-        {errors.AssignedUser && <FieldError>{errors.AssignedUser.message}</FieldError>}
-      </Field>
-
-      {/* ───────────────────────────────────────────────── */}
-      {/* FileField — <FileUpload> for edit mode           */}
-      {/* Runtime methods (upload, delete) on item accessor */}
-      {/* ───────────────────────────────────────────────── */}
-      <Field>
-        <FieldLabel>{fieldTest.Documents.label}</FieldLabel>
-        <FieldContent>
-          <FileUpload
-            field={fieldTest.Documents}
-            value={watch(fieldTest.Documents.id)}
-            boId={fieldTest.meta._id}
-            instanceId={item._id}
-            fieldId={fieldTest.Documents.id}
-          />
-        </FieldContent>
-      </Field>
-
-      {/* ───────────────────────────────────────────────── */}
-      {/* ImageField — <ImageUpload> for edit mode         */}
-      {/* Single image, nullable                           */}
-      {/* ───────────────────────────────────────────────── */}
-      <Field>
-        <FieldLabel>{fieldTest.Thumbnail.label}</FieldLabel>
-        <FieldContent>
-          <ImageUpload
-            field={fieldTest.Thumbnail}
-            value={watch(fieldTest.Thumbnail.id)}
-            boId={fieldTest.meta._id}
-            instanceId={item._id}
-            fieldId={fieldTest.Thumbnail.id}
-          />
-        </FieldContent>
-      </Field>
-
-      <button type="submit" disabled={isSubmitting}>
-        {isSubmitting ? "Saving..." : "Save"}
-      </button>
-    </form>
-  );
-}
-```
-
-## Read-Only Display
-
-For tables and detail pages, use `<FilePreview>` and `<ImageThumbnail>`:
-
-```tsx
-import { FilePreview } from "@/components/ui/file-preview";
-import { ImageThumbnail } from "@/components/ui/image-thumbnail";
-
-// In a table row or detail page
-function RecordRow({ record }: { record: ItemType<...> }) {
-  return (
-    <div>
-      {/* File preview — clickable thumbnails for images, file icons for others */}
-      <FilePreview
-        boId={fieldTest.meta._id}
-        instanceId={record._id}
-        fieldId="Documents"
-        value={record.Documents.get()}
-      />
-
-      {/* Image thumbnail — proxy URL with view_type=thumbnail */}
-      <ImageThumbnail
-        boId={fieldTest.meta._id}
-        instanceId={record._id}
-        fieldId="Thumbnail"
-        value={record.Thumbnail.get()}
-      />
-    </div>
-  );
-}
-```
-
-## Key Patterns
-
-- **All complex fields use `watch()` + `setValue()`** — never `register()`. Select, Reference, User, File, and Image fields use custom components that don't fire native change events.
-
-- **`fetchOptions()` lazy-loaded with `useQuery`** — Gate with `enabled: dropdownOpen && !!item._id` to avoid fetching until the dropdown opens. Use `staleTime: Infinity` to cache options.
-
-- **ReferenceField stores the full object** — Not just an ID. The value is `{ _id, SupplierName, Email, ... }`. The `setValue()` call must pass the complete object.
-
-- **File/Image runtime methods are on `item.Field`** — The `upload()`, `getDownloadUrl()`, `deleteAttachment()` methods live on the `item` accessor (created by the `Item` proxy), not on the BDO field class. The `<FileUpload>` and `<ImageUpload>` components handle this internally.
-
-- **`<ReferenceSelect>` abstracts the full pattern** — Handles `fetchOptions()`, dropdown UI, search, and option display. Pass `bdoField`, `instanceId`, `value`, and `onChange`.
-
-- **`<FileUpload>` / `<ImageUpload>` handle the upload lifecycle** — File selection, upload to storage, progress indication, preview, and delete. They need `boId`, `instanceId`, and `fieldId` for API calls.
-
-- **`<FilePreview>` / `<ImageThumbnail>` for read-only display** — Use in tables, detail pages, or any context where files should be viewable but not editable. They construct proxy URLs for same-origin access.

package/docs/examples/fields/primitive-fields.md

@@ -1,217 +0,0 @@
-# Primitive Fields
-
-> Complete form demonstrating all primitive field types with the correct form binding pattern for each: String, Number, Boolean, Date, DateTime, and Text.
-
-```tsx
-import { useMemo } from "react";
-import { useBDOForm } from "@ram_28/kf-ai-sdk/form";
-import type { UseBDOFormReturnType } from "@ram_28/kf-ai-sdk/form/types";
-import { AdminFieldTest } from "@/bdo/admin/FieldTest";
-import {
-  Field,
-  FieldContent,
-  FieldLabel,
-  FieldError,
-} from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
-import { Checkbox } from "@/components/ui/checkbox";
-
-export default function PrimitiveFieldsForm({ recordId }: { recordId?: string }) {
-  const fieldTest = useMemo(() => new AdminFieldTest(), []);
-
-  const {
-    register,
-    handleSubmit,
-    errors,
-    watch,
-    setValue,
-    isLoading,
-    isSubmitting,
-  }: UseBDOFormReturnType<AdminFieldTest> = useBDOForm({
-    bdo: fieldTest,
-    recordId,
-  });
-
-  if (isLoading) return <p>Loading...</p>;
-
-  return (
-    <form onSubmit={handleSubmit((data) => console.log("Saved", data._id))}>
-      {/* ───────────────────────────────────────────────── */}
-      {/* StringField — register() for native text inputs  */}
-      {/* ───────────────────────────────────────────────── */}
-      <Field>
-        <FieldLabel>
-          {fieldTest.Name.label} {fieldTest.Name.required && <span>*</span>}
-        </FieldLabel>
-        <FieldContent>
-          <Input
-            {...register(fieldTest.Name.id)}
-            maxLength={fieldTest.Name.length}
-            placeholder="Enter name"
-          />
-          {fieldTest.Name.length && (
-            <span className="text-xs text-gray-500">
-              Max {fieldTest.Name.length} characters
-            </span>
-          )}
-        </FieldContent>
-        {errors.Name && <FieldError>{errors.Name.message}</FieldError>}
-      </Field>
-
-      {/* ───────────────────────────────────────────────── */}
-      {/* NumberField — register() with type="number"      */}
-      {/* Derive step from fractionPart                    */}
-      {/* ───────────────────────────────────────────────── */}
-      <Field>
-        <FieldLabel>
-          {fieldTest.Amount.label} {fieldTest.Amount.required && <span>*</span>}
-        </FieldLabel>
-        <FieldContent>
-          <Input
-            type="number"
-            step={
-              fieldTest.Amount.fractionPart
-                ? `0.${"0".repeat(fieldTest.Amount.fractionPart - 1)}1`
-                : "1"
-            }
-            {...register(fieldTest.Amount.id)}
-            placeholder="0.00"
-          />
-          <span className="text-xs text-gray-500">
-            IntegerPart: {fieldTest.Amount.integerPart}, FractionPart: {fieldTest.Amount.fractionPart ?? "none"}
-          </span>
-        </FieldContent>
-        {errors.Amount && <FieldError>{errors.Amount.message}</FieldError>}
-      </Field>
-
-      {/* Integer-only number (no fractionPart → step="1") */}
-      <Field>
-        <FieldLabel>{fieldTest.Quantity.label}</FieldLabel>
-        <FieldContent>
-          <Input
-            type="number"
-            step="1"
-            {...register(fieldTest.Quantity.id)}
-            placeholder="0"
-          />
-        </FieldContent>
-        {errors.Quantity && <FieldError>{errors.Quantity.message}</FieldError>}
-      </Field>
-
-      {/* ───────────────────────────────────────────────── */}
-      {/* BooleanField — watch() + setValue(), NOT register */}
-      {/* Checkbox doesn't fire native change events       */}
-      {/* ───────────────────────────────────────────────── */}
-      <Field>
-        <div className="flex items-center gap-3">
-          <Checkbox
-            id={fieldTest.IsEnabled.id}
-            checked={watch(fieldTest.IsEnabled.id) ?? false}
-            onCheckedChange={(checked) =>
-              setValue(fieldTest.IsEnabled.id, checked === true)
-            }
-          />
-          <FieldLabel htmlFor={fieldTest.IsEnabled.id}>
-            {fieldTest.IsEnabled.label}
-          </FieldLabel>
-        </div>
-      </Field>
-
-      {/* ───────────────────────────────────────────────── */}
-      {/* DateField — register() with type="date"          */}
-      {/* Strict YYYY-MM-DD — never default to ""          */}
-      {/* ───────────────────────────────────────────────── */}
-      <Field>
-        <FieldLabel>
-          {fieldTest.StartDate.label} {fieldTest.StartDate.required && <span>*</span>}
-        </FieldLabel>
-        <FieldContent>
-          <Input type="date" {...register(fieldTest.StartDate.id)} />
-        </FieldContent>
-        {errors.StartDate && <FieldError>{errors.StartDate.message}</FieldError>}
-      </Field>
-
-      {/* ───────────────────────────────────────────────── */}
-      {/* DateTimeField — register() with datetime-local   */}
-      {/* Add step for Millisecond precision               */}
-      {/* ───────────────────────────────────────────────── */}
-      <Field>
-        <FieldLabel>{fieldTest.CreatedOn.label}</FieldLabel>
-        <FieldContent>
-          <Input
-            type="datetime-local"
-            step={fieldTest.CreatedOn.precision === "Millisecond" ? "0.001" : undefined}
-            {...register(fieldTest.CreatedOn.id)}
-          />
-          <span className="text-xs text-gray-500">
-            Precision: {fieldTest.CreatedOn.precision}
-          </span>
-        </FieldContent>
-        {errors.CreatedOn && <FieldError>{errors.CreatedOn.message}</FieldError>}
-      </Field>
-
-      {/* ───────────────────────────────────────────────── */}
-      {/* TextField — register() with <textarea>           */}
-      {/* Conditional rendering based on format            */}
-      {/* ───────────────────────────────────────────────── */}
-      <Field>
-        <FieldLabel>{fieldTest.Description.label}</FieldLabel>
-        <FieldContent>
-          <textarea
-            {...register(fieldTest.Description.id)}
-            rows={4}
-            placeholder="Enter plain text description"
-            className="flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
-          />
-          <span className="text-xs text-gray-500">
-            Format: {fieldTest.Description.format}
-          </span>
-        </FieldContent>
-        {errors.Description && <FieldError>{errors.Description.message}</FieldError>}
-      </Field>
-
-      {/* Markdown text field — use a markdown editor */}
-      <Field>
-        <FieldLabel>{fieldTest.RichContent.label}</FieldLabel>
-        <FieldContent>
-          {fieldTest.RichContent.format === "Markdown" ? (
-            <textarea
-              {...register(fieldTest.RichContent.id)}
-              rows={6}
-              placeholder="Enter markdown content..."
-              className="flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-mono"
-            />
-          ) : (
-            <textarea
-              {...register(fieldTest.RichContent.id)}
-              rows={4}
-              className="flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
-            />
-          )}
-          <span className="text-xs text-gray-500">
-            Format: {fieldTest.RichContent.format}
-          </span>
-        </FieldContent>
-        {errors.RichContent && <FieldError>{errors.RichContent.message}</FieldError>}
-      </Field>
-
-      <button type="submit" disabled={isSubmitting}>
-        {isSubmitting ? "Saving..." : "Save"}
-      </button>
-    </form>
-  );
-}
-```
-
-## Key Patterns
-
-- **`register()` works for** String, Number, Date, DateTime, Text — native HTML inputs that fire change events
-- **`watch()` + `setValue()` needed for** Boolean — Checkbox components don't fire native change events, so `register()` won't pick up value changes
-- **Constraint-derived getters**:
-  - `field.length` — max characters (StringField)
-  - `field.integerPart` / `field.fractionPart` — numeric precision (NumberField)
-  - `field.precision` — `"Second"` or `"Millisecond"` (DateTimeField)
-  - `field.format` — `"Plain"` or `"Markdown"` (TextField)
-- **Never default Date/DateTime to empty string** — Use `undefined` for unset dates. Empty strings (`""`) fail DateField validation (`YYYY-MM-DD` regex) and produce confusing errors
-- **Derive `step` from `fractionPart`** — `fractionPart: 2` → `step="0.01"`, no `fractionPart` → `step="1"` (integer only)
-- **Conditional rendering for TextField** — Check `field.format` to switch between `<textarea>` and a markdown editor

package/docs/examples/workflow/approve-leave-request.md

@@ -1,76 +0,0 @@
-# Approve Leave Request
-
-> Manager reviews readonly employee data and approves/rejects using `useActivityForm`.
-
-```tsx
-import { useMemo } from "react";
-import { useActivityForm } from "@ram_28/kf-ai-sdk/workflow";
-import type { UseActivityFormReturn } from "@ram_28/kf-ai-sdk/workflow";
-import { ManagerApprovalActivity } from "@/workflow/leave";
-
-export default function ApprovalForm({ instanceId, onClose }: { instanceId: string; onClose: () => void }) {
-  const activity = useMemo(() => new ManagerApprovalActivity(), []);
-
-  const { register, handleSubmit, errors, isLoading, isSubmitting, watch, setValue }: UseActivityFormReturn<ManagerApprovalActivity> =
-    useActivityForm(activity, { activity_instance_id: instanceId, mode: "onBlur" });
-
-  if (isLoading) return <p>Loading...</p>;
-
-  return (
-    <div>
-      {/* Readonly context fields — auto-disabled by register() */}
-      <div>
-        <label>{activity.EmployeeName.label}</label>
-        <input {...register(activity.EmployeeName.id)} className="bg-gray-100" />
-      </div>
-      <div>
-        <label>{activity.StartDate.label}</label>
-        <input type="date" {...register(activity.StartDate.id)} className="bg-gray-100" />
-      </div>
-      <div>
-        <label>{activity.EndDate.label}</label>
-        <input type="date" {...register(activity.EndDate.id)} className="bg-gray-100" />
-      </div>
-      <div>
-        <label>{activity.LeaveDays.label}</label>
-        <input type="number" {...register(activity.LeaveDays.id)} className="bg-gray-100" />
-      </div>
-
-      <hr />
-
-      {/* Editable manager decision fields */}
-      <div>
-        <input
-          type="checkbox"
-          checked={watch(activity.ManagerApproved.id) ?? false}
-          onChange={(e) => setValue(activity.ManagerApproved.id, e.target.checked)}
-        />
-        <label>
-          {activity.ManagerApproved.label}
-          {activity.ManagerApproved.required && <span> *</span>}
-        </label>
-        {errors.ManagerApproved && <p>{errors.ManagerApproved.message}</p>}
-      </div>
-
-      <div>
-        <label>{activity.ManagerReason.label}</label>
-        <textarea {...register(activity.ManagerReason.id)} rows={3} placeholder="Reason for approval or rejection..." />
-        {errors.ManagerReason && <p>{errors.ManagerReason.message}</p>}
-      </div>
-
-      <button onClick={onClose}>Cancel</button>
-      <button disabled={isSubmitting} onClick={handleSubmit(() => onClose(), console.error)}>
-        {watch(activity.ManagerApproved.id) ? "Approve" : "Reject"} & Submit
-      </button>
-    </div>
-  );
-}
-```
-
-## Key Patterns
-
-- **Readonly context fields** -- fields from the prior employee activity have `ReadOnly: true` and are auto-disabled by `register()`
-- **Editable decision fields** -- `ManagerApproved` and `ManagerReason` are the only editable fields
-- **Checkbox with `watch()` + `setValue()`** -- booleans use `e.target.checked`, not `e.target.value`
-- **Dynamic submit label** -- `watch(activity.ManagerApproved.id)` drives the button text
-- **`handleSubmit` completes the approval** -- validates, syncs remaining fields, then completes the activity

package/docs/examples/workflow/filtered-activity-table.md

@@ -1,101 +0,0 @@
-# Filtered Activity Table
-
-> Filter activity instances by date range using `useActivityTable` with the integrated `table.filter` API.
-
-```tsx
-import { useState, useMemo } from "react";
-import { useActivityTable, ActivityTableStatus } from "@ram_28/kf-ai-sdk/workflow";
-import type { UseActivityTableReturnType } from "@ram_28/kf-ai-sdk/workflow";
-import { ConditionOperator, RHSType } from "@ram_28/kf-ai-sdk/filter";
-import { EmployeeInputActivity } from "@/workflow/leave";
-
-export default function FilteredActivityTable() {
-  const activity = useMemo(() => new EmployeeInputActivity(), []);
-  const table: UseActivityTableReturnType<EmployeeInputActivity> = useActivityTable({ activity, status: ActivityTableStatus.InProgress });
-
-  // ── Date range filter on StartDate ─────────────────────────────
-  const [startDateFrom, setStartDateFrom] = useState("");
-  const [startDateTo, setStartDateTo] = useState("");
-  const [fromConditionId, setFromConditionId] = useState<string | null>(null);
-  const [toConditionId, setToConditionId] = useState<string | null>(null);
-
-  const applyDateFilter = () => {
-    if (fromConditionId) { table.filter.removeCondition(fromConditionId); setFromConditionId(null); }
-    if (toConditionId) { table.filter.removeCondition(toConditionId); setToConditionId(null); }
-
-    if (startDateFrom) {
-      const id = table.filter.addCondition({
-        LHSField: activity.StartDate.id,
-        Operator: ConditionOperator.GTE,
-        RHSType: RHSType.Constant,
-        RHSValue: startDateFrom,
-      });
-      setFromConditionId(id);
-    }
-    if (startDateTo) {
-      const id = table.filter.addCondition({
-        LHSField: activity.StartDate.id,
-        Operator: ConditionOperator.LTE,
-        RHSType: RHSType.Constant,
-        RHSValue: startDateTo,
-      });
-      setToConditionId(id);
-    }
-  };
-
-  const clearDateFilter = () => {
-    if (fromConditionId) { table.filter.removeCondition(fromConditionId); setFromConditionId(null); }
-    if (toConditionId) { table.filter.removeCondition(toConditionId); setToConditionId(null); }
-    setStartDateFrom("");
-    setStartDateTo("");
-  };
-
-  if (table.isLoading) return <p>Loading...</p>;
-
-  return (
-    <div>
-      {/* Date range filter */}
-      <div>
-        <label>From</label>
-        <input type="date" value={startDateFrom} onChange={(e) => setStartDateFrom(e.target.value)} />
-        <label>To</label>
-        <input type="date" value={startDateTo} onChange={(e) => setStartDateTo(e.target.value)} />
-        <button onClick={applyDateFilter}>Apply</button>
-        {table.filter.hasConditions && <button onClick={clearDateFilter}>Clear</button>}
-      </div>
-
-      {/* Table */}
-      <table>
-        <thead>
-          <tr>
-            <th>{activity.StartDate.label}</th>
-            <th>{activity.EndDate.label}</th>
-            <th>{activity.LeaveType.label}</th>
-            <th>{activity.LeaveDays.label}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {table.rows.map((row) => (
-            <tr key={row._id}>
-              <td>{row.StartDate.get()}</td>
-              <td>{row.EndDate.get()}</td>
-              <td>{row.LeaveType.get()}</td>
-              <td>{row.LeaveDays.get()}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-
-      <span>Page {table.pagination.pageNo} of {table.pagination.totalPages}</span>
-    </div>
-  );
-}
-```
-
-## Key Patterns
-
-- **Date range with GTE + LTE** -- two separate conditions tracked by their own IDs
-- **`addCondition()` returns an ID** -- store it to later remove the condition with `removeCondition(id)`
-- **`table.filter.hasConditions`** -- show a "Clear" button only when filters are active
-- **Filter changes auto-reset pagination** -- the table resets to page 1 when conditions change
-- **Same filter API as `useBDOTable`** -- `table.filter` works identically in both BDO and Activity tables