@schandlergarcia/sf-web-components 1.9.28 → 1.9.30

package/.a4drules/skills/component-library/card-components.md

@@ -0,0 +1,253 @@
+## Card Components
+
+### MetricCard
+**When:** Display a single KPI value (revenue, count, percentage).
+
+```jsx
+<MetricCard
+  title="Active Travelers"       // label
+  value={6}                       // main display value (any)
+  subtitle="Currently on trips"   // secondary text
+  change="+5.2%"                  // change amount string
+  changeType="positive"           // "positive" | "negative" | "neutral"
+  icon={<UsersIcon className="h-5 w-5 text-engine-teal" />}
+  color="default"                 // "default" | "primary" | "success" | "warning" | "danger"
+  trend="vs last month"           // trend label text
+  layout="default"                // "default" | "compact"
+  footer={<span>...</span>}       // bottom content
+  actions={<button>...</button>}  // top-right actions
+  loading={false}
+/>
+```
+**Mistakes:** ❌ `changeValue` → use `change`. ❌ `trend="positive"` → `trend` is a label, use `changeType`.
+
+### ChartCard
+**When:** Wrap a D3Chart visualization in a titled card.
+
+```jsx
+<ChartCard
+  title="Spend Trend"
+  subtitle="Last 30 days"
+  height={280}                    // container height px (default 280)
+  chart={<D3Chart ... />}         // ReactNode — the chart (REQUIRED, via prop not children)
+  legend={<div>...</div>}         // below chart
+  chartType="Line Chart"          // chip label
+  filters={<SelectFilter ... />}  // header filters
+  timeRange={{ current: "30d", options: ["7d","30d","90d"], onChange: fn }}
+/>
+```
+**Critical:** Pass chart via `chart={}` prop. Height sets CSS on container — match with D3Chart `height`.
+**Do NOT use for GeoMap** — GeoMap renders directly without a card wrapper.
+**Do NOT pass Recharts/Chart.js components** — only `D3Chart` is allowed.
+
+### TableCard
+**When:** Display tabular data with sorting, search, pagination.
+
+```jsx
+<TableCard
+  title="Travelers"
+  subtitle="6 active"
+  data={[{ id: "1", name: "Maya", cost: 2840, status: "Active" }]}
+  columns={[
+    { key: "name", label: "Name" },
+    { key: "cost", label: "Cost", type: "currency" },
+    { key: "status", label: "Status", render: (value, row) => <span>{value}</span> },
+  ]}
+  searchable       // shows search input
+  sortable         // clickable column headers
+  paginated        // pagination controls
+  pageSize={10}
+  rowActions={(row) => <button>View</button>}
+  onRowSelect={(row) => console.log(row)}
+  emptyMessage="No travelers found."
+/>
+```
+**Column types:** `"currency"` | `"percentage"` | `"number"` — auto-formatted, use before custom `render`.
+**`render` receives `(value, row)`** — NOT `(row)`. `value` = `row[column.key]`.
+
+### ListCard
+**When:** Display a scrollable list of items with avatars, status badges, timestamps.
+
+```jsx
+<ListCard
+  title="Active Trips"
+  items={[{
+    id: "1",
+    title: "Hotel Zephyr",          // or `name`
+    description: "San Francisco · Mar 23–26",
+    status: "Checked In",           // shown as badge
+    timestamp: "2 min ago",         // string or Date
+    avatar: undefined,                // omit to auto-generate initials from title/name
+    // avatar: "https://example.com/photo.jpg",  // URL string → renders <img>
+    // avatar: <Avatar initials="MR" />,          // ReactNode → renders inside circle
+    value: "$2,840",                // right-aligned
+    unit: "USD",                    // after value
+  }]}
+  maxBodyHeight={300}               // enables scroll (string or number)
+  showAvatars={true}
+  showStatus={true}
+  showTimestamp={true}
+  dense={false}
+  divided={true}
+  onItemClick={(item, index) => {}}
+  itemActions={(item, index) => <button>View</button>}
+  emptyMessage="No items."
+/>
+```
+
+### ActivityCard
+**When:** Show an activity log with animated status icons (working, pending, complete, error).
+
+```jsx
+<ActivityCard
+  title="Today's Activity"
+  actions={[                        // ⚠️ prop is "actions" NOT "items"
+    {
+      id: "1",                      // REQUIRED
+      status: "complete",           // REQUIRED: "working" | "pending" | "complete" | "error"
+      title: "Maya checked in",     // or `action` as fallback
+      subtitle: "Hotel Zephyr · SF",
+      timestamp: "2 min ago",       // or `startedAt`
+    },
+  ]}
+/>
+```
+**Returns `null`** if actions is empty. **No `maxBodyHeight`** — for scrollable feeds use `ListCard` instead.
+Status icons: `"complete"` → green check, `"working"` → spinning (indigo), `"pending"` → clock, `"error"` → red exclamation.
+
+### CalloutCard
+**When:** Highlight an alert, warning, or important notice.
+
+```jsx
+<CalloutCard
+  title="Late booking penalty"
+  tone="warning"                    // "neutral" | "success" | "warning" | "danger" | "info"
+  icon={<ExclamationTriangleIcon className="h-5 w-5" />}
+  message={                         // ⚠️ use `message` NOT children
+    <div>
+      <p>Priya Nair — Booking 2 days before departure</p>
+      <button onClick={handleApprove}>Approve</button>
+    </div>
+  }
+/>
+```
+**Mistakes:** ❌ `variant` → use `tone`. ❌ Children → use `message` prop.
+
+### SectionCard
+**When:** Display a prominent section heading or divider.
+
+```jsx
+<SectionCard
+  title="Eva · Agentforce Agent"
+  description="Powered by Agentforce"
+  label="LIVE"                      // small pill badge
+  variant="default"                 // "default" | "primary" | "secondary" | "accent"
+  size="md"                         // "sm" | "md" | "lg" | "xl"
+  isDark={false}
+/>
+```
+
+### WidgetCard
+**When:** Display multiple content sections in one card, OR wrap arbitrary custom interactive content (expand/collapse lists, inline detail panels, custom layouts) that doesn't fit other card types.
+
+**This is the go-to card when you need custom JSX inside a card container.** Each section's `content` accepts arbitrary React nodes — use this instead of hand-rolling `<div className="bg-white border rounded ...">`.
+
+**CRITICAL: WidgetCard does NOT accept children.** All content MUST go through the `sections` prop. If you write `<WidgetCard><div>...</div></WidgetCard>`, the children are silently ignored and the card renders "No sections." instead.
+
+**Padding:** BaseCard already applies `p-4` around all content (header + body). Do NOT add extra `p-5`, `p-6`, etc. to your `header` or section `content` — it will cause double padding. If you need edge-to-edge content inside a section (like a divided list), use negative margins or set `padding="none"` on the card.
+
+```jsx
+// ❌ WRONG — children are ignored, shows "No sections."
+<WidgetCard>
+  <div>This content will NOT render</div>
+</WidgetCard>
+
+// ✅ CORRECT — content goes in sections prop
+<WidgetCard
+  sections={[{ id: "main", content: <div>This content WILL render</div> }]}
+/>
+
+// Multi-section panel
+<WidgetCard
+  header={<div>Custom header</div>}
+  sections={[
+    { id: "1", title: "Section A", content: <div>...</div>, actions: <button>...</button> },
+    { id: "2", title: "Section B", content: <div>...</div> },
+  ]}
+  footer={<div>Footer</div>}
+  divided={true}                    // border between sections
+  collapsible={false}
+/>
+
+// Single-section wrapper for custom interactive content (e.g., expandable list)
+// NOTE: BaseCard already applies p-4 padding — do NOT add extra p-* to header/section content
+<WidgetCard
+  header={<h2 className="text-lg font-semibold text-engine-text">Active Travelers</h2>}
+  sections={[{
+    id: "travelers",
+    content: (
+      <div className="divide-y divide-engine-border">
+        {travelers.map(t => (
+          <div key={t.id} onClick={() => toggle(t.id)}>
+            {/* collapsed row + expanded details — any JSX works here */}
+          </div>
+        ))}
+      </div>
+    ),
+  }]}
+/>
+```
+
+### StatusCard
+**When:** Show system health or service status with colored indicators.
+
+```jsx
+<StatusCard
+  title="System Health"
+  status="operational"              // "operational" | "degraded" | "outage" | "maintenance"
+  items={[
+    { id: "1", title: "API", status: "operational" },
+    { id: "2", title: "Database", status: "degraded", description: "High latency" },
+  ]}
+  layout="list"                     // "list" | "grid" | "timeline"
+  showProgress={true}               // shows % operational bar
+/>
+```
+Status aliases: `"ok"/"healthy"/"up"` → `"operational"`, `"warn"` → `"degraded"`, `"down"/"critical"` → `"outage"`.
+
+### FeedPanel
+**When:** Sidebar-style scrollable feed with fixed header.
+
+```jsx
+<FeedPanel title="Notifications" subtitle="3 new" width={320}>
+  {children}
+</FeedPanel>
+```
+
+### MetricsStrip
+**When:** Compact horizontal row of metrics (inline, not cards).
+
+```jsx
+<MetricsStrip
+  title="Overview"
+  metrics={[
+    { label: "Users", value: "1,234", trend: "+5%" },
+    { label: "Revenue", value: "$45K", trend: "-2%" },
+  ]}
+  collapsible={false}
+/>
+```
+
+### ActionList
+**When:** Row of action buttons.
+
+```jsx
+<ActionList
+  title="Quick Actions"
+  actions={[{ label: "Approve" }, { label: "Deny" }, { label: "Defer" }]}
+  onAction={(action) => console.log(action.label)}
+/>
+```
+
+---
+

package/.a4drules/skills/component-library/charts.md

@@ -0,0 +1,64 @@
+## Chart Components
+
+### D3Chart
+**When:** Render any D3 visualization inside a ChartCard.
+
+```jsx
+<D3Chart
+  data={dataArray}
+  renderChart={D3ChartTemplates.lineChart}  // function — NOT template prop
+  options={{ xKey: "x", yKey: "y", stroke: "#5BC8C8" }}
+  responsive={true}
+  height={280}
+/>
+```
+**`renderChart` signature:** `(svgEl, data, { width, height }, options) => void`
+
+### D3ChartTemplates
+
+Only **two** built-in templates:
+
+**`lineChart`** — `{ xKey, yKey, stroke, strokeWidth, margin, showAxes, showGrid }`
+- Data: `[{ x: 1, y: 100 }]` — **numeric x required**
+
+**`groupedBarChart`** — `{ xKey, groups, colors, barRadius, margin, yFormat, showGrid }`
+- Data: `[{ x: "Jan", Hotels: 12000, Flights: 8000 }]` — **categorical x**
+
+For donut, horizontal bar, area chart, etc. → write a custom `renderChart(svgEl, data, dims)` function using d3.
+
+### GeoMap
+**When:** Show a world map with markers, flight arcs, and overlays.
+
+```jsx
+<GeoMap
+  markers={[{ id: "sf", lon: -122.4, lat: 37.8, active: true, label: "SF" }]}
+  arcs={[{ id: "a1", from: [-122.4, 37.8], to: [-74.0, 40.7], progress: 0.65 }]}
+  overlays={[{ id: "wx1", center: [-97.7, 30.3], radius: 3 }]}
+  initialBounds={{ sw: [-130, 24], ne: [-65, 50], padding: 30 }}
+  theme="dark"
+  width={960} height={480}
+  zoomable
+  className="h-full w-full"
+/>
+```
+**Do NOT wrap in ChartCard.** Render directly in `<div className="relative overflow-hidden rounded-xl h-[300px]">`.
+Arc `danger: true` renders in red. Arc `progress` (0–1) shows animated dot along route.
+
+---
+
+## Layout & Skeletons
+
+### PageContainer
+```jsx
+<PageContainer>{children}</PageContainer>
+```
+Centered `max-w-6xl` wrapper with padding.
+
+### CardSkeleton
+```jsx
+<CardSkeleton lines={3} />
+```
+Animated placeholder card for loading states.
+
+---
+

package/.a4drules/skills/component-library/chat-data.md

@@ -0,0 +1,184 @@
+## Chat
+
+### ChatBar (command palette — use on dashboards)
+```jsx
+<ChatBar
+  title="Eva · Travel Assistant"
+  placeholder="Ask Eva..."
+  suggestions={["Show spend", "Who has flags?", "Active trips"]}
+  onSend={async (userMsg, allMessages, helpers) => {
+    // Return message object to add to chat:
+    return { role: "assistant", content: "Here's what I found..." };
+    // Or stream: helpers.addMessage, helpers.appendChunk, helpers.setStreaming
+  }}
+/>
+```
+
+### ChatPanel (full-page chat)
+```jsx
+<ChatPanel
+  title="AI Assistant"
+  onSend={async (userMsg, allMessages, helpers) => {
+    return { role: "assistant", content: "Reply" };
+  }}
+  suggestions={["Help me with...", "Show me..."]}
+  welcomeTitle="How can I help?"
+  welcomeSubtitle="Ask anything about your data."
+  showHeader={true}
+/>
+```
+
+### useChatState (standalone hook)
+```jsx
+import { useChatState } from "@/components/library";
+const chat = useChatState({ onSend: async (msg, history, helpers) => ({ role: "assistant", content: "Reply" }) });
+// chat.messages, chat.sendMessage(text), chat.isLoading, chat.clearMessages, chat.retryLast
+```
+
+---
+
+## Data
+
+### useDataSource (DEFAULT export)
+```jsx
+import useDataSource from "@/components/library/data/useDataSource";
+const data = useDataSource({ sample: SAMPLE_DATA, live: fetchLiveFn });
+```
+⚠️ **Default export** — `import { useDataSource }` will fail silently.
+
+### DataModeProvider
+Wraps app. Provides `useDataMode()` → `{ mode, isSample, isLive, toggle, setMode }`.
+
+---
+
+## Data Utilities
+
+### DataModeToggle
+**When:** Place in the app header to let users switch between sample and live data.
+
+```jsx
+<DataModeToggle className="ml-4" />
+```
+Pill button switching between "Sample" (beaker icon, amber) and "Live" (signal icon, emerald). Reads/writes to `DataModeProvider` context.
+
+### usePageFilters
+**When:** Complete filtering + sorting state for a data page.
+
+```jsx
+const {
+  values,              // current filter values
+  setFilter,           // (filterId, value) => void
+  resetFilters,        // () => void
+  sort,                // { key, direction } | null
+  setSort,             // (key, direction) => void
+  toggleSort,          // (key) => void — cycles asc → desc → null
+  filteredData,        // data after filters
+  sortedData,          // data after filters + sort (pass this to components)
+  activeFilterCount,   // number of non-default filters
+} = usePageFilters({
+  data: rawData,
+  filters: [
+    { id: "search", type: "search", keys: ["name", "city"] },
+    { id: "status", type: "select", key: "status", defaultValue: "all" },
+    { id: "flagged", type: "toggle", key: "isFlagged", matchValue: true },
+    { id: "dates", type: "dateRange", key: "createdAt" },
+  ],
+  defaultSort: { key: "name", direction: "asc" },
+});
+```
+Pass `sortedData` (not `filteredData`) to components. Disable `TableCard.searchable` when FilterBar provides search.
+
+### filterUtils (pure functions)
+```jsx
+import { filterBySearch, filterByValue, filterByToggle, filterByDateRange, sortByKey, applyFilters } from "@/components/library";
+
+filterBySearch(data, "maya", ["name", "city"])       // case-insensitive multi-key
+filterByValue(data, "status", "Active")              // exact match; skips "all"/""/ null
+filterByToggle(data, "isFlagged", true, true)        // when active, match key to value
+filterByDateRange(data, "createdAt", { start, end }) // date range inclusion
+sortByKey(data, "name", "asc")                       // "asc" | "desc"; handles null, numbers, strings
+applyFilters(data, filterDefs, filterValues)          // apply all filters declaratively
+```
+
+---
+
+## Chat Sub-Components
+
+ChatBar and ChatPanel compose these internally, but they can be used standalone for custom chat layouts:
+
+### ChatMessageList
+```jsx
+<ChatMessageList
+  messages={messages}
+  isLoading={true}                     // shows "Thinking" indicator
+  isStreaming={false}                   // shows "Generating" indicator
+  suggestions={["Show spend", "Top travelers"]}
+  onSuggestion={(text) => sendMessage(text)}
+  renderAvatar={(msg) => <Avatar ... />}  // optional per-message avatar
+/>
+```
+Scrollable message area with auto-scroll to latest message.
+
+### ChatMessage
+```jsx
+<ChatMessage
+  message={{ id: "1", role: "assistant", content: "Here's what I found...",
+    components: [<MetricCard ... />],  // inline rendered components
+    toolCalls: [{ name: "search", status: "complete", result: "..." }],
+    isStreaming: false, timestamp: "2:30 PM" }}
+  avatar={<Avatar icon={<CpuChipIcon />} />}
+/>
+```
+Renders a single message bubble. Assistant messages format markdown (code blocks, bold, italic, inline code). System messages render as centered alerts.
+
+### ChatInput
+```jsx
+<ChatInput
+  onSend={(content) => handleSend(content)}
+  disabled={false}
+  isLoading={isProcessing}             // shows stop button instead of send
+  onStop={() => cancelRequest()}
+  placeholder="Type a message..."
+  maxRows={6}                          // max visible rows before scroll
+/>
+```
+Auto-resizing textarea. Enter sends, Shift+Enter = newline.
+
+### ChatTypingIndicator
+```jsx
+<ChatTypingIndicator label="Thinking" />
+```
+Animated three-dot bouncing indicator with AI icon.
+
+### ChatSuggestions
+```jsx
+<ChatSuggestions
+  suggestions={["Show spend", "Active trips"]}
+  onSelect={(text) => sendMessage(text)}
+/>
+```
+Row of sparkle-icon pill buttons for quick prompts. Returns null if empty.
+
+### ChatToolCall
+```jsx
+<ChatToolCall
+  toolCall={{ id: "tc1", name: "queryRecords", args: { object: "Trip__c" },
+    status: "complete", result: "Found 6 records" }}
+/>
+```
+Collapsible tool execution step. Status icons: spinner (running), check (complete), X (error). Color-coded by status.
+
+### ChatWelcome
+```jsx
+<ChatWelcome
+  title="How can I help?"
+  subtitle="Ask me anything about your travel data."
+  suggestions={["Show spend", "Active trips"]}
+  onSuggestion={(text) => sendMessage(text)}
+  icon={<CpuChipIcon className="h-8 w-8" />}
+/>
+```
+Full-screen welcome state shown before first message.
+
+---
+

package/.a4drules/skills/component-library/common-mistakes.md

@@ -0,0 +1,25 @@
+## Do Not
+
+- Import from individual library files when the barrel exports it
+- Modify vendored library files
+- Import shadcn (`@/components/ui/`) in command center code — shadcn components (`Button`, `Card`, `Input`, `Select`, `Alert`, `Skeleton`, etc.) exist for the outer app only. In command center pages, use the equivalent library component (`UIButton`, `BaseCard`/`WidgetCard`, `UIInput`, `Select`, `Alert`, `Skeleton`, etc. from `@/components/library`)
+- Use Lucide icons (`lucide-react`) in command center code — use Heroicons (`@heroicons/react`) instead
+- `import { useDataSource }` — it's a **default** export
+- Pass `items` to ActivityCard — use `actions`
+- Pass children to CalloutCard — use `message` prop
+- Pass `(row)` to TableCard render — it receives `(value, row)`
+- Use `template` prop on D3Chart — use `renderChart` function reference
+- Wrap GeoMap in ChartCard — render directly in a container div
+- Use ActivityCard for scrollable feeds — use ListCard with `maxBodyHeight`
+- Use raw `Modal` for form dialogs — use `FormModal` instead
+- Use `Tabs` as page-level navigation — only use inside cards for sub-sections
+- Pass `filteredData` to components — use `sortedData` from usePageFilters
+- Use `CardSkeleton` and `Skeleton` interchangeably — `CardSkeleton` for card placeholders, `Skeleton` for inline shapes
+- Recreate form state manually — use `useFormState` hook
+- Use `ChatPanel` on dashboards — use `ChatBar` (command palette style)
+- Pass children to `WidgetCard` — it ignores children and shows "No sections." Use the `sections` prop instead: `<WidgetCard sections={[{ id: "main", content: <div>...</div> }]} />`
+- Add `p-5`, `p-6`, etc. to WidgetCard `header` or section `content` — BaseCard already applies `p-4` padding, so extra padding causes double spacing
+- Pass initials strings as `avatar` in ListCard items — `avatar: "MR"` is treated as an image URL and breaks. Instead, omit `avatar` to auto-generate initials from `title`/`name`, or pass a ReactNode like `<Avatar initials="MR" />`
+- Hand-roll a card container (`<div className="bg-white border rounded ...">`) when `WidgetCard` with a single section can wrap your custom content
+- Use Recharts, Chart.js, or any third-party chart library — only `D3Chart` and `GeoMap` are allowed
+- Dismiss `validate:dashboard` errors as "justified" — every error has a library component fix

package/.a4drules/skills/component-library/forms-filters.md

@@ -0,0 +1,130 @@
+## Filters
+
+### FilterBar
+```jsx
+<FilterBar
+  filters={[
+    { id: "search", type: "search", placeholder: "Search..." },
+    { id: "status", type: "select", label: "Status", options: ["All", "Active"] },
+    { id: "flagged", type: "toggle", label: "Flagged only" },
+  ]}
+  values={{ search: "", status: "All", flagged: false }}
+  onChange={(filterId, value) => {}}   // ⚠️ receives (filterId, value) NOT full state
+  onReset={() => {}}
+  layout="inline"                     // "inline" | "stacked"
+/>
+```
+
+---
+
+## Forms
+
+### FormRenderer
+```jsx
+<FormRenderer
+  sections={[{ id: "s1", title: "Details", fields: [
+    { id: "name", type: "text", label: "Name", required: true },
+    { id: "dept", type: "select", label: "Department", options: ["Sales", "Eng"] },
+  ]}]}
+  values={{ name: "", dept: "" }}
+  errors={{}}
+  touched={{}}
+  onFieldChange={(fieldId, value) => {}}
+  onFieldBlur={(fieldId) => {}}
+/>
+```
+Field types: `text`, `email`, `url`, `number`, `date`, `textarea`, `select`, `radio`, `checkbox`, `checkboxGroup`, `toggle`.
+
+### FormModal
+**When:** Open a modal dialog with a schema-driven form (create or edit records).
+
+```jsx
+<FormModal
+  isOpen={showModal}
+  onClose={() => setShowModal(false)}
+  title="New Traveler"
+  subtitle="Add a traveler to the system"
+  sections={formSections}              // same schema as FormRenderer
+  initialValues={{ name: "Maya" }}     // prefill for edit mode; omit for create
+  onSubmit={async (values) => {}}      // async — modal auto-closes on success
+  submitLabel="Save"                   // default "Save"
+  cancelLabel="Cancel"                 // default "Cancel"
+  size="lg"                            // "sm" | "md" | "lg" | "xl"
+  destructive={false}                  // red submit button for deletions
+  minSubmitMs={4000}                   // min spinner duration ms
+/>
+```
+Renders via `createPortal` over a backdrop. Escape key dismisses. Wraps FormRenderer + useFormState internally.
+
+### FormSection & FormField
+Lower-level building blocks used by FormRenderer. Rarely needed directly.
+
+```jsx
+// FormSection — renders a titled group of fields in 2-col grid
+<FormSection section={sectionSchema} values={vals} errors={errs} touched={touched}
+  onFieldChange={(id, val) => {}} onFieldBlur={(id) => {}} />
+
+// FormField — renders a single labeled input
+<FormField field={fieldDef} value={val} error={errMsg} touched={true}
+  onChange={(val) => {}} onBlur={() => {}} />
+```
+
+### useFormState
+**When:** Manage form state without FormModal (inline forms, custom layouts).
+
+```jsx
+const form = useFormState({
+  initialValues: { name: "", dept: "" },
+  sections: formSections,              // schema — used for defaults + validation
+  onSubmit: async (values) => {},
+  minSubmitMs: 4000,                   // default 4000
+});
+
+// form.values, form.errors, form.touched
+// form.isDirty, form.isValid, form.isSubmitting
+// form.setValue(id, value), form.setValues(obj)
+// form.setTouched(id), form.validate(), form.reset()
+// form.handleSubmit(e)  — async, validates first, enforces minSubmitMs
+```
+Builds defaults from schema: `checkboxGroup` → `[]`, `toggle`/`checkbox` → `false`, others → `""`. Supports custom validators via `field.validate(value, allValues)`.
+
+---
+
+## Individual Filter Components
+
+FilterBar composes these internally, but they can also be used standalone:
+
+### SearchFilter
+```jsx
+<SearchFilter
+  value={searchText}
+  onChange={(text) => setSearchText(text)}
+  placeholder="Search travelers..."
+  className="w-64"
+/>
+```
+Text input with magnifying glass icon and clear button.
+
+### SelectFilter
+```jsx
+<SelectFilter
+  value={status}
+  onChange={(val) => setStatus(val)}
+  options={["All", "Active", "Inactive"]}   // or [{ value: "active", label: "Active" }]
+  label="Status"
+  placeholder="Select..."
+/>
+```
+Dropdown select. Value `"all"` skips filtering.
+
+### ToggleFilter
+```jsx
+<ToggleFilter
+  value={flaggedOnly}
+  onChange={(isActive) => setFlaggedOnly(isActive)}
+  label="Flagged only"
+/>
+```
+
+---
+