+
((params) => {
style={{ width: `${progress}%` }}
/>
-
+
{Math.round(progress)}%
diff --git a/src/components/AGGrid/index-enhanced.ts b/src/components/AGGrid/index-enhanced.ts
index 19f279b2f..5e0315cad 100644
--- a/src/components/AGGrid/index-enhanced.ts
+++ b/src/components/AGGrid/index-enhanced.ts
@@ -1,100 +1,97 @@
// Main AG Grid Component with enhanced brand support
-export { AGGrid, AgGridReact } from './AGGrid';
export type {
+ AGColDef,
AGGridProps,
+ CellClickedEvent,
+ CellValueChangedEvent,
ColDef,
- AGColDef,
+ FilterChangedEvent,
+ FirstDataRenderedEvent,
GridApi,
GridReadyEvent,
RowClickedEvent,
- CellClickedEvent,
- CellValueChangedEvent,
+ RowSelectedEvent,
SelectionChangedEvent,
- FilterChangedEvent,
SortChangedEvent,
- RowSelectedEvent,
- FirstDataRenderedEvent,
} from './AGGrid';
+export { AGGrid, AgGridReact } from './AGGrid';
// Original Cell Renderers (backward compatibility)
+export type {
+ DateRendererProps,
+ ProgressRendererProps,
+ StatusBadgeRendererProps,
+ StatusConfig,
+} from './CellRenderers';
export {
- CellRenderers,
// Individual renderers
AvatarNameRenderer,
- StatusBadgeRenderer,
- EngagementScoreRenderer,
- EmailRenderer,
- PhoneRenderer,
- LinkedInRenderer,
- DomainRenderer,
- CurrencyRenderer,
- NumberRenderer,
- DateRenderer,
BooleanRenderer,
+ CellRenderers,
CompanyRenderer,
- ProgressRenderer,
- TagsRenderer,
+ CurrencyRenderer,
+ DateRenderer,
+ DomainRenderer,
+ EmailRenderer,
+ EngagementScoreRenderer,
+ // Utilities
+ formatPhoneDisplay,
+ LinkedInRenderer,
// Memoized renderers (recommended)
MemoizedAvatarNameRenderer,
- MemoizedStatusBadgeRenderer,
- MemoizedEngagementScoreRenderer,
+ MemoizedBooleanRenderer,
+ MemoizedCompanyRenderer,
+ MemoizedCurrencyRenderer,
+ MemoizedDateRenderer,
+ MemoizedDomainRenderer,
MemoizedEmailRenderer,
- MemoizedPhoneRenderer,
+ MemoizedEngagementScoreRenderer,
MemoizedLinkedInRenderer,
- MemoizedDomainRenderer,
- MemoizedCurrencyRenderer,
MemoizedNumberRenderer,
- MemoizedDateRenderer,
- MemoizedBooleanRenderer,
- MemoizedCompanyRenderer,
+ MemoizedPhoneRenderer,
MemoizedProgressRenderer,
+ MemoizedStatusBadgeRenderer,
MemoizedTagsRenderer,
- // Utilities
- formatPhoneDisplay,
+ NumberRenderer,
+ PhoneRenderer,
+ ProgressRenderer,
+ StatusBadgeRenderer,
statusColors,
-} from './CellRenderers';
-
-export type {
- StatusConfig,
- StatusBadgeRendererProps,
- DateRendererProps,
- ProgressRendererProps,
+ TagsRenderer,
} from './CellRenderers';
// Enhanced Cell Renderers with Design System Integration
+export type {
+ ActionsRendererProps,
+ EnhancedCellRendererType,
+} from './EnhancedCellRenderers';
export {
- EnhancedAvatarNameRenderer,
- EnhancedStatusBadgeRenderer,
EnhancedActionsRenderer,
+ EnhancedAvatarNameRenderer,
EnhancedBooleanRenderer,
+ enhancedCellRenderers,
EnhancedCurrencyRenderer,
EnhancedDateRenderer,
EnhancedProgressRenderer,
+ EnhancedStatusBadgeRenderer,
EnhancedTagsRenderer,
- enhancedCellRenderers,
-} from './EnhancedCellRenderers';
-
-export type {
- ActionsRendererProps,
- EnhancedCellRendererType,
} from './EnhancedCellRenderers';
// Brand Theme Utilities
+export type {
+ AGGridBrandName,
+ AGGridBrandTheme,
+ ResponsiveColumnOptions,
+ UseAGGridBrandThemeOptions,
+} from './brand-theme-utils';
export {
agGridBrandThemes,
- generateAGGridBrandCSS,
- generateAGGridDarkBrandCSS,
- useAGGridBrandTheme,
- injectAGGridBrandStyles,
- createBrandAwareColumnDef,
applyBrandThemeToColumns,
+ createBrandAwareColumnDef,
createResponsiveColumn,
+ generateAGGridBrandCSS,
+ generateAGGridDarkBrandCSS,
getBrandAwareGridOptions,
-} from './brand-theme-utils';
-
-export type {
- AGGridBrandName,
- AGGridBrandTheme,
- UseAGGridBrandThemeOptions,
- ResponsiveColumnOptions,
+ injectAGGridBrandStyles,
+ useAGGridBrandTheme,
} from './brand-theme-utils';
diff --git a/src/components/AI/icons.tsx b/src/components/AI/icons.tsx
index e5dcd0b75..ac39ecd0a 100644
--- a/src/components/AI/icons.tsx
+++ b/src/components/AI/icons.tsx
@@ -5,6 +5,7 @@
*/
import * as React from 'react';
+
import { cn } from '../../utils/cn';
// ============================================================================
diff --git a/src/components/ActivityFeed/ActivityFeed.stories.tsx b/src/components/ActivityFeed/ActivityFeed.stories.tsx
new file mode 100644
index 000000000..6a48113c0
--- /dev/null
+++ b/src/components/ActivityFeed/ActivityFeed.stories.tsx
@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ActivityFeed, type ActivityItem } from './ActivityFeed';
+
+const meta: Meta
= {
+ id: 'dashboard-activityfeed',
+ title: 'Modules/Dashboards/ActivityFeed',
+ component: ActivityFeed,
+ tags: ['autodocs', 'scope:general-purpose', 'maturity:beta'],
+ parameters: {
+ catalog: {"entry": "@mieweb/ui", "relationships": []}, docs: { description: { component: "### What it's for\n\nRecent events with timestamps, event icons, empty states and optional actions in ActivityFeed.\n\n### Use it when\n\nA dashboard needs a short, chronological summary linked to full records.\n\n### Don't use it when\n\nUse Timeline for a general process chronology or a table for searching an audit history.\n\n### Example\n\nFetch events in the page, pass items and loading, and use each item onClick to open its record.\n\n### Limitations\n\nIt does not fetch, paginate or authorize events. Supply localized titles. Relative timestamps are display text; provide a full audit screen for precise historical review." } }, layout: 'padded' },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const now = Date.now();
+const minutesAgo = (m: number) => new Date(now - m * 60_000).toISOString();
+
+const items: ActivityItem[] = [
+ {
+ id: '1',
+ kind: 'results_ready',
+ title: 'Results ready for Alex Rivera',
+ description: 'DOT Physical — Midwest Occ Health',
+ timestamp: minutesAgo(3),
+ onClick: () => {},
+ },
+ {
+ id: '2',
+ kind: 'order_accepted',
+ title: 'Order accepted',
+ description: 'BH-10235 — Jamie Chen',
+ timestamp: minutesAgo(14),
+ },
+ {
+ id: '3',
+ kind: 'employee_added',
+ title: 'New employee added',
+ description: 'Sam Patel',
+ actor: 'you',
+ timestamp: minutesAgo(60),
+ },
+ {
+ id: '4',
+ kind: 'order_completed',
+ title: 'Order completed',
+ description: 'BH-10232 — Taylor Park',
+ timestamp: minutesAgo(60 * 6),
+ },
+ {
+ id: '5',
+ kind: 'invoice_paid',
+ title: 'Invoice paid',
+ description: 'INV-221 — $1,240.00',
+ timestamp: minutesAgo(60 * 26),
+ },
+];
+
+export const Default: Story = {
+ args: { items },
+};
+
+export const Loading: Story = {
+ args: { items: [], loading: true },
+};
+
+export const Empty: Story = {
+ args: { items: [] },
+};
diff --git a/src/components/ActivityFeed/ActivityFeed.tsx b/src/components/ActivityFeed/ActivityFeed.tsx
new file mode 100644
index 000000000..9190e814a
--- /dev/null
+++ b/src/components/ActivityFeed/ActivityFeed.tsx
@@ -0,0 +1,281 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '../../utils/cn';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export type ActivityKind =
+ | 'order_created'
+ | 'order_accepted'
+ | 'order_completed'
+ | 'order_refused'
+ | 'results_ready'
+ | 'employee_added'
+ | 'invoice_paid'
+ | 'message'
+ | 'system';
+
+export interface ActivityItem {
+ id: string;
+ kind: ActivityKind;
+ /** Primary title (e.g. "Order accepted by Midwest Occ Health"). */
+ title: string;
+ /** Optional secondary description (e.g. employee name, service). */
+ description?: string;
+ /** Actor (e.g. user or system that generated the event). */
+ actor?: string;
+ /** When the event happened. */
+ timestamp?: string | Date;
+ /** Optional click handler to drill into the related entity. */
+ onClick?: () => void;
+}
+
+export interface ActivityFeedProps {
+ items: ActivityItem[];
+ /** Loading state. */
+ loading?: boolean;
+ /** Empty state node. */
+ emptyState?: React.ReactNode;
+ /** Max items to show before scrolling. */
+ maxItems?: number;
+ /** Additional CSS classes. */
+ className?: string;
+}
+
+// =============================================================================
+// Icon + color per kind
+// =============================================================================
+
+function relativeTime(input?: string | Date): string {
+ if (!input) return '';
+ const d = input instanceof Date ? input : new Date(input);
+ const diff = Date.now() - d.getTime();
+ if (Number.isNaN(diff)) return '';
+ const s = Math.max(0, Math.floor(diff / 1000));
+ if (s < 60) return 'just now';
+ const m = Math.floor(s / 60);
+ if (m < 60) return `${m}m ago`;
+ const h = Math.floor(m / 60);
+ if (h < 24) return `${h}h ago`;
+ const d2 = Math.floor(h / 24);
+ if (d2 < 30) return `${d2}d ago`;
+ return d.toLocaleDateString();
+}
+
+const KIND_STYLE: Record<
+ ActivityKind,
+ { color: string; bg: string; icon: React.ReactNode }
+> = {
+ order_created: {
+ color: 'text-sky-700 dark:text-sky-300',
+ bg: 'bg-sky-100 dark:bg-sky-900/30',
+ icon: (
+
+ ),
+ },
+ order_accepted: {
+ color: 'text-violet-700 dark:text-violet-300',
+ bg: 'bg-violet-100 dark:bg-violet-900/30',
+ icon: (
+
+ ),
+ },
+ order_completed: {
+ color: 'text-neutral-700 dark:text-neutral-300',
+ bg: 'bg-neutral-100 dark:bg-neutral-800',
+ icon: (
+
+ ),
+ },
+ order_refused: {
+ color: 'text-red-700 dark:text-red-300',
+ bg: 'bg-red-100 dark:bg-red-900/30',
+ icon: (
+
+ ),
+ },
+ results_ready: {
+ color: 'text-green-700 dark:text-green-300',
+ bg: 'bg-green-100 dark:bg-green-900/30',
+ icon: (
+
+ ),
+ },
+ employee_added: {
+ color: 'text-primary-700 dark:text-primary-300',
+ bg: 'bg-primary-100 dark:bg-primary-900/30',
+ icon: (
+
+ ),
+ },
+ invoice_paid: {
+ color: 'text-amber-700 dark:text-amber-300',
+ bg: 'bg-amber-100 dark:bg-amber-900/30',
+ icon: (
+
+ ),
+ },
+ message: {
+ color: 'text-sky-700 dark:text-sky-300',
+ bg: 'bg-sky-100 dark:bg-sky-900/30',
+ icon: (
+
+ ),
+ },
+ system: {
+ color: 'text-neutral-700 dark:text-neutral-300',
+ bg: 'bg-neutral-100 dark:bg-neutral-800',
+ icon: (
+
+ ),
+ },
+};
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * ActivityFeed — compact vertical event list. Intended for dashboards to
+ * surface recent order/result/invoice/message activity.
+ */
+export function ActivityFeed({
+ items,
+ loading = false,
+ emptyState,
+ maxItems,
+ className,
+}: ActivityFeedProps): React.JSX.Element {
+ const visible = maxItems ? items.slice(0, maxItems) : items;
+
+ if (loading) {
+ return (
+
+ {[0, 1, 2, 3].map((i) => (
+
+ ))}
+
+ {emptyState ?? (
+
+ No recent activity
+
+ )}
+
+ {visible.map((item, idx) => {
+ const style = KIND_STYLE[item.kind] ?? KIND_STYLE.system;
+ const isLast = idx === visible.length - 1;
+ const interactive = Boolean(item.onClick);
+ return (
+ -
+ {/* Timeline rail */}
+ {!isLast && (
+
+ )}
+
+ {style.icon}
+
+
{
+ if (!interactive) return;
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ item.onClick?.();
+ }
+ }}
+ >
+
+ {item.title}
+
+ {item.description && (
+
+ {item.description}
+
+ )}
+
+ {item.actor && {item.actor}}
+ {item.timestamp && (
+
+ {relativeTime(item.timestamp)}
+
+ )}
+
+
+ );
+ })}
+
+ );
+}
diff --git a/src/components/ActivityFeed/index.ts b/src/components/ActivityFeed/index.ts
new file mode 100644
index 000000000..a87c71a9e
--- /dev/null
+++ b/src/components/ActivityFeed/index.ts
@@ -0,0 +1,6 @@
+export {
+ ActivityFeed,
+ type ActivityFeedProps,
+ type ActivityItem,
+ type ActivityKind,
+} from './ActivityFeed';
diff --git a/src/components/AddContactModal/AddContactModal.stories.tsx b/src/components/AddContactModal/AddContactModal.stories.tsx
index 80ac83652..343c02183 100644
--- a/src/components/AddContactModal/AddContactModal.stories.tsx
+++ b/src/components/AddContactModal/AddContactModal.stories.tsx
@@ -1,7 +1,8 @@
import type { Meta, StoryObj } from '@storybook/react';
import { useEffect, useState } from 'react';
-import { AddContactModal, ContactFormData } from './AddContactModal';
+
import { Button } from '../Button/Button';
+import { AddContactModal, ContactFormData } from './AddContactModal';
const meta: Meta = {
id: 'users-integrations-addcontactmodal',
diff --git a/src/components/AddContactModal/AddContactModal.tsx b/src/components/AddContactModal/AddContactModal.tsx
index 96f55a1e1..e7a6774d0 100644
--- a/src/components/AddContactModal/AddContactModal.tsx
+++ b/src/components/AddContactModal/AddContactModal.tsx
@@ -1,18 +1,19 @@
'use client';
import * as React from 'react';
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
+
+import { cn } from '../../utils/cn';
+import { Button } from '../Button/Button';
+import { Input } from '../Input/Input';
import {
Modal,
- ModalHeader,
- ModalTitle,
ModalBody,
ModalFooter,
+ ModalHeader,
+ ModalTitle,
} from '../Modal/Modal';
-import { Button } from '../Button/Button';
-import { Input } from '../Input/Input';
import { Select } from '../Select/Select';
-import { cn } from '../../utils/cn';
// ============================================================================
// Constants
diff --git a/src/components/AddContactModal/index.ts b/src/components/AddContactModal/index.ts
index 8b6c2486a..234244a3b 100644
--- a/src/components/AddContactModal/index.ts
+++ b/src/components/AddContactModal/index.ts
@@ -1,7 +1,7 @@
-export { AddContactModal } from './AddContactModal';
export type {
AddContactModalProps,
- ContactFormData,
ContactAddress,
+ ContactFormData,
CustomField,
} from './AddContactModal';
+export { AddContactModal } from './AddContactModal';
diff --git a/src/components/AdditionalFields/AdditionalFields.tsx b/src/components/AdditionalFields/AdditionalFields.tsx
index c9322785d..94d8e747c 100644
--- a/src/components/AdditionalFields/AdditionalFields.tsx
+++ b/src/components/AdditionalFields/AdditionalFields.tsx
@@ -1,4 +1,5 @@
import * as React from 'react';
+
import { cn } from '../../utils/cn';
import { Button } from '../Button';
import { ChevronDownIcon, PlusIcon, TrashIcon } from '../Icons';
diff --git a/src/components/AdditionalFields/index.ts b/src/components/AdditionalFields/index.ts
index d6db0435f..17d425361 100644
--- a/src/components/AdditionalFields/index.ts
+++ b/src/components/AdditionalFields/index.ts
@@ -1,6 +1,6 @@
export {
AdditionalFields,
- generateId,
type AdditionalFieldsProps,
+ generateId,
type KeyValueEntry,
} from './AdditionalFields';
diff --git a/src/components/Address/Address.stories.tsx b/src/components/Address/Address.stories.tsx
index c41e8e070..38dd8235c 100644
--- a/src/components/Address/Address.stories.tsx
+++ b/src/components/Address/Address.stories.tsx
@@ -1,10 +1,11 @@
import type { Meta, StoryObj } from '@storybook/react';
+
import {
Address,
AddressCard,
- AddressInline,
AddressCompact,
type AddressData,
+ AddressInline,
} from './Address';
const meta: Meta = {
diff --git a/src/components/Address/AddressForm.tsx b/src/components/Address/AddressForm.tsx
index 8f2b9bf83..5e1fdccec 100644
--- a/src/components/Address/AddressForm.tsx
+++ b/src/components/Address/AddressForm.tsx
@@ -106,6 +106,21 @@ export interface AddressFormProps {
};
/** Custom className for the container */
className?: string;
+ /**
+ * Replace the Address Line 1 input, e.g. with an app-level address
+ * autocomplete. Call `onAddressSelect` to fill the remaining fields.
+ */
+ renderStreet1?: (field: {
+ id: string;
+ label: string;
+ placeholder: string;
+ value: string;
+ onChange: (value: string) => void;
+ onAddressSelect: (address: Partial) => void;
+ disabled: boolean;
+ required: boolean;
+ error?: string;
+ }) => React.ReactNode;
/** Google Places autocomplete options (requires Google Maps API) */
googlePlaces?: {
/** Whether to enable autocomplete on street1 field */
@@ -199,6 +214,7 @@ export function AddressForm({
placeholders = {},
className,
googlePlaces,
+ renderStreet1,
}: AddressFormProps) {
const generatedId = React.useId();
const idPrefix = id || generatedId;
@@ -313,20 +329,40 @@ export function AddressForm({
return (
{/* Street Address Line 1 */}
-
handleChange('street1', e.target.value)}
- disabled={disabled}
- required={required}
- hasError={!!errors.street1}
- error={errors.street1}
- autoComplete="address-line1"
- data-cy="input-address-line-1"
- />
+ {renderStreet1 ? (
+ renderStreet1({
+ id: `${idPrefix}-street1`,
+ label: mergedLabels.street1,
+ placeholder: mergedPlaceholders.street1,
+ value: value.street1 || '',
+ onChange: (street1) => handleChange('street1', street1),
+ onAddressSelect: (selected) =>
+ onChange({
+ ...value,
+ ...Object.fromEntries(
+ Object.entries(selected).filter(([, v]) => Boolean(v))
+ ),
+ }),
+ disabled,
+ required,
+ error: errors.street1,
+ })
+ ) : (
+
handleChange('street1', e.target.value)}
+ disabled={disabled}
+ required={required}
+ hasError={!!errors.street1}
+ error={errors.street1}
+ autoComplete="address-line1"
+ data-cy="input-address-line-1"
+ />
+ )}
{/* Street Address Line 2 */}
{logo}
{subtitle}
+ {subtitle}
)}
);
@@ -190,7 +190,7 @@ export function AppHeaderDivider({
// AppHeaderIconButton Component
// =============================================================================
-export interface AppHeaderIconButtonProps {
+export interface AppHeaderIconButtonProps extends React.AriaAttributes {
/** Button icon */
icon: ReactNode;
/** Accessible label */
@@ -215,6 +215,7 @@ export function AppHeaderIconButton({
isActive = false,
className,
'data-testid': testId,
+ ...ariaProps
}: AppHeaderIconButtonProps): React.JSX.Element {
return (