@snapdragonsnursery/react-components 1.5.0 → 1.7.0

package/README.md

@@ -6,13 +6,14 @@ A collection of reusable React components for Snapdragons Nursery applications.
 
 - **ChildSearchModal**: Advanced child search and selection component with filtering, pagination, and multi-select capabilities
 - **ChildSearchFilters**: Advanced filtering component with date range picker, status, site, and age filters (includes Apply button for better UX)
-- **DateRangePicker**: Shadcn-style date range picker component
+- **DateRangePicker**: Shadcn-style date range picker component (supports optional presets)
 - **DatePicker**: Shadcn-style single date picker component
 - **Calendar**: Official shadcn calendar component
 - **Popover**: Official shadcn popover component
 - **AuthButtons**: Authentication buttons for MSAL integration
 - **ThemeToggle**: Dark/light theme toggle component
 - **LandingPage**: Landing page component with authentication
+- **SoftWarningAlert**: Soft-styled alert for non-blocking warnings with optional action
 
 ## Installation
 
@@ -39,6 +40,25 @@ function MyComponent() {
 }
 ```
 
+### SoftWarningAlert Example
+
+```jsx
+import { SoftWarningAlert } from '@snapdragonsnursery/react-components';
+import { AlertTriangle } from 'lucide-react';
+
+function Notice() {
+  return (
+    <SoftWarningAlert
+      icon={AlertTriangle}
+      title="Unsubmitted claims"
+      description="You have 3 unsubmitted mileage claims. Create a report to submit."
+      actionLabel="Create report"
+      onAction={() => console.log('clicked')}
+    />
+  );
+}
+```
+
 ## Shadcn Components
 
 This package includes official shadcn components with proper styling. The components use shadcn CSS variables, so make sure your consuming project has the shadcn CSS variables defined in your CSS file.
@@ -118,11 +138,28 @@ function MyComponent() {
   };
 
   return (
-    <DateRangePicker
-      selectedRange={selectedRange}
-      onSelect={handleDateRangeChange}
-      placeholder="Select a date range"
-    />
+    <>
+      <DateRangePicker
+        selectedRange={selectedRange}
+        onSelect={handleDateRangeChange}
+        placeholder="Select a date range"
+        numberOfMonths={2}
+      />
+      {/* With presets */}
+      <DateRangePicker
+        selectedRange={selectedRange}
+        onSelect={handleDateRangeChange}
+        presetsEnabled
+        presets={[
+          { key: 'thisWeek', label: 'This week', getRange: () => ({ from: startOfWeek(new Date(), { weekStartsOn: 1 }), to: new Date() }) },
+          { key: 'lastWeek', label: 'Last week', getRange: () => { const ref = subWeeks(new Date(), 1); return { from: startOfWeek(ref, { weekStartsOn: 1 }), to: endOfWeek(ref, { weekStartsOn: 1 }) } } },
+          { key: 'thisMonth', label: 'This month', getRange: () => ({ from: startOfMonth(new Date()), to: new Date() }) },
+          { key: 'lastMonth', label: 'Last month', getRange: () => { const ref = subMonths(new Date(), 1); return { from: startOfMonth(ref), to: endOfMonth(ref) } } },
+          { key: 'thisYear', label: 'This year', getRange: () => ({ from: startOfYear(new Date()), to: new Date() }) },
+          { key: 'lastYear', label: 'Last year', getRange: () => { const ref = subYears(new Date(), 1); return { from: startOfYear(ref), to: endOfYear(ref) } } },
+        ]}
+      />
+    </>
   );
 }
 ```
@@ -162,6 +199,7 @@ VITE_COMMON_API_BASE_URL=https://snaps-common-api.azurewebsites.net
 - [ChildSearchModal Documentation](./CHILD_SEARCH_MODAL_DOCUMENTATION.md)
 - [ChildSearchModal README](./CHILD_SEARCH_README.md)
 - [Release Guide](./RELEASE.md)
+- [SoftWarningAlert](./SOFT_WARNING_ALERT.md)
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -59,6 +59,7 @@
     "react": "^18.0.0 || ^19.0.0"
   },
   "module": "src/index.js",
+  "types": "src/index.d.ts",
   "files": [
     "src",
     "src/index.css"

package/src/ChildSearchModal.jsx

@@ -322,6 +322,10 @@ const ChildSearchModal = ({
     onClose();
   };
 
+  const handleClearSelection = () => {
+    setSelectedChildrenState([]);
+  };
+
   const isChildSelected = (child) => {
     return selectedChildrenState.some(
       (selected) => selected.child_id === child.child_id
@@ -870,6 +874,40 @@ const ChildSearchModal = ({
             </div>
           </div>
         )}
+
+        {/* Multi-select Action Bar */}
+        {multiSelect && (
+          <div className="p-6 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
+            <div className="text-sm text-gray-600 dark:text-gray-300">
+              {selectedChildrenState.length} selected{maxSelections ? ` / ${maxSelections}` : ''}
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={handleClearSelection}
+                disabled={selectedChildrenState.length === 0}
+                className="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Clear
+              </button>
+              <button
+                type="button"
+                onClick={onClose}
+                className="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                Go Back
+              </button>
+              <button
+                type="button"
+                onClick={handleConfirmSelection}
+                disabled={selectedChildrenState.length === 0}
+                className="px-3 py-2 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Confirm
+              </button>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

package/src/ChildSearchPage.jsx

@@ -56,6 +56,8 @@ const ChildSearchPage = ({
   applicationContext = "child-search",
   bypassPermissions = false,
   onSelect = null, // Optional callback for when a child is selected
+  onConfirm = null, // Optional callback (multi-select confirm)
+  onBack = null, // Optional go-back handler in multi-select
   multiSelect = false,
   maxSelections = null,
   selectedChildren = [],
@@ -245,6 +247,11 @@ const ChildSearchPage = ({
         (index) => children[parseInt(index)]
       );
       setSelectedChildrenState(selectedRows);
+      
+      // Call onSelect callback if provided and in multi-select mode
+      if (onSelect && multiSelect) {
+        onSelect(selectedRows);
+      }
     },
   });
 
@@ -445,6 +452,30 @@ const ChildSearchPage = ({
     setDebouncedAdvancedFilters(clearedFilters); // Clear immediately
   };
 
+  const handleClearSelection = () => {
+    setSelectedChildrenState([]);
+    if (onSelect && multiSelect) {
+      onSelect([]);
+    }
+  };
+
+  const handleConfirmSelection = () => {
+    const payload = selectedChildrenState;
+    if (onConfirm) {
+      onConfirm(payload);
+    } else if (onSelect) {
+      onSelect(payload);
+    }
+  };
+
+  const handleGoBack = () => {
+    if (onBack) {
+      onBack();
+    } else if (typeof window !== 'undefined' && window.history) {
+      window.history.back();
+    }
+  };
+
   // Calculate pagination display values
   const actualTotalCount = pagination.totalCount || children.length;
   const startItem = actualTotalCount > 0 ? (pagination.page - 1) * pagination.pageSize + 1 : 0;
@@ -686,6 +717,26 @@ const ChildSearchPage = ({
             </>
           )}
         </div>
+
+        {/* Multi-select Action Bar */}
+        {multiSelect && (
+          <div className="mt-4 flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 px-4 py-3">
+            <div className="text-sm text-gray-600 dark:text-gray-300">
+              {selectedChildrenState.length} selected{maxSelections ? ` / ${maxSelections}` : ''}
+            </div>
+            <div className="flex items-center gap-2">
+              <Button variant="outline" onClick={handleClearSelection} disabled={selectedChildrenState.length === 0}>
+                Clear
+              </Button>
+              <Button variant="outline" onClick={handleGoBack}>
+                Go Back
+              </Button>
+              <Button onClick={handleConfirmSelection} disabled={selectedChildrenState.length === 0}>
+                Confirm
+              </Button>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

package/src/EmployeeSearchModal.jsx

@@ -275,12 +275,45 @@ const EmployeeSearchModal = ({
     },
     onSortingChange: setSorting,
     onRowSelectionChange: (updater) => {
-      const newSelection =
-        typeof updater === "function" ? updater({}) : updater;
-      const selectedRows = Object.keys(newSelection).map(
-        (index) => employees[parseInt(index)]
-      );
-      setSelectedEmployeesState(selectedRows);
+      // Merge current-table selection changes with the existing global selection
+      // instead of replacing it, so selection is retained across searches/pages.
+
+      // Build current selection map (for visible rows only)
+      const prevSelection = selectedEmployeesState.reduce((acc, selectedEmployee) => {
+        const rowIndex = employees.findIndex((employee) => employee.entra_id === selectedEmployee.entra_id);
+        if (rowIndex !== -1) acc[rowIndex] = true;
+        return acc;
+      }, {});
+
+      const updatedSelection = typeof updater === 'function' ? updater(prevSelection) : updater;
+
+      // Determine which visible employees are selected after the change
+      const visibleSelected = Object.keys(updatedSelection)
+        .filter((idx) => Boolean(updatedSelection[idx]))
+        .map((idx) => employees[parseInt(idx, 10)])
+        .filter(Boolean);
+
+      // Start from the previous global selection keyed by entra_id
+      const prevById = new Map(selectedEmployeesState.map((e) => [e.entra_id, e]));
+
+      // Remove any currently visible employees that are now unselected
+      const visibleIds = new Set(employees.map((e) => e.entra_id));
+      const visibleSelectedIds = new Set(visibleSelected.map((e) => e.entra_id));
+      employees.forEach((e) => {
+        if (visibleIds.has(e.entra_id) && !visibleSelectedIds.has(e.entra_id)) {
+          prevById.delete(e.entra_id);
+        }
+      });
+
+      // Add visible selected that weren't already present (respect maxSelections)
+      for (const e of visibleSelected) {
+        if (!prevById.has(e.entra_id)) {
+          if (maxSelections && prevById.size >= maxSelections) break;
+          prevById.set(e.entra_id, e);
+        }
+      }
+
+      setSelectedEmployeesState(Array.from(prevById.values()));
     },
   });
 
@@ -502,6 +535,10 @@ const EmployeeSearchModal = ({
     }
   };
 
+  const handleClearSelection = () => {
+    setSelectedEmployeesState([]);
+  };
+
   const clearFilters = () => {
     const clearedFilters = {
       status: activeOnly ? "Active" : "all",
@@ -549,22 +586,7 @@ const EmployeeSearchModal = ({
                 <XMarkIcon className="h-6 w-6" />
               </button>
             </div>
-            {multiSelect && (
-              <div className="mt-2 flex items-center justify-between">
-                <span className="text-sm text-gray-600 dark:text-gray-400">
-                  {selectedEmployeesState.length} selected
-                  {maxSelections && ` / ${maxSelections}`}
-                </span>
-                {selectedEmployeesState.length > 0 && (
-                  <Button
-                    size="sm"
-                    onClick={handleConfirmSelection}
-                  >
-                    Confirm Selection
-                  </Button>
-                )}
-              </div>
-            )}
+            {/* Removed header confirm to avoid duplication; footer handles confirmation */}
           </div>
 
           {/* Content */}
@@ -793,20 +815,48 @@ const EmployeeSearchModal = ({
           </div>
 
           {/* Footer */}
-          <div className="bg-gray-50 dark:bg-gray-700 px-6 py-3 flex justify-end space-x-3">
-            <Button
-              variant="outline"
-              onClick={onClose}
-            >
-              Cancel
-            </Button>
-            {multiSelect && selectedEmployeesState.length > 0 && (
-              <Button
-                onClick={handleConfirmSelection}
-              >
-                Select {selectedEmployeesState.length} Employee{selectedEmployeesState.length !== 1 ? 's' : ''}
+          <div className="bg-gray-50 dark:bg-gray-700 px-6 py-3 flex items-center justify-between gap-3">
+            {/* Selection preview */}
+            <div className="flex-1 min-w-0">
+              {multiSelect && selectedEmployeesState.length > 0 && (
+                (() => {
+                  const total = selectedEmployeesState.length;
+                  const preview = selectedEmployeesState.slice(0, 5);
+                  const extra = Math.max(total - preview.length, 0);
+                  const previewText = `${total} selected${maxSelections ? ` / ${maxSelections}` : ''}: ` +
+                    preview.map((e) => e.full_name).join(', ') +
+                    (extra > 0 ? ` + ${extra} more` : '');
+                  const fullList = selectedEmployeesState.map((e) => e.full_name).join(', ');
+                  return (
+                    <div
+                      className="text-sm text-gray-600 dark:text-gray-300 truncate"
+                      title={fullList}
+                    >
+                      {previewText}
+                    </div>
+                  );
+                })()
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              {multiSelect && (
+                <Button variant="outline" onClick={handleClearSelection} disabled={selectedEmployeesState.length === 0}>
+                  Clear
+                </Button>
+              )}
+              <Button variant="outline" onClick={onClose}>
+                Go Back
               </Button>
-            )}
+              {multiSelect && (
+                <Button 
+                  onClick={handleConfirmSelection} 
+                  disabled={selectedEmployeesState.length === 0}
+                  aria-label={`Confirm ${selectedEmployeesState.length} selected`}
+                >
+                  {`Confirm (${selectedEmployeesState.length}${maxSelections ? `/${maxSelections}` : ''})`}
+                </Button>
+              )}
+            </div>
           </div>
         </div>
       </div>
@@ -814,4 +864,4 @@ const EmployeeSearchModal = ({
   );
 };
 
-export default EmployeeSearchModal; 
+export default EmployeeSearchModal; 

package/src/EmployeeSearchPage.jsx

@@ -58,6 +58,8 @@ const EmployeeSearchPage = ({
   applicationContext = "employee-search",
   bypassPermissions = false,
   onSelect = null, // Optional callback for when an employee is selected
+  onConfirm = null, // Optional callback (multi-select confirm)
+  onBack = null, // Optional callback for go back/cancel
   multiSelect = false,
   maxSelections = null,
   selectedEmployees = [],
@@ -322,6 +324,11 @@ const EmployeeSearchPage = ({
         (index) => employees[parseInt(index)]
       );
       setSelectedEmployeesState(selectedRows);
+      
+      // Call onSelect callback if provided and in multi-select mode
+      if (onSelect && multiSelect) {
+        onSelect(selectedRows);
+      }
     },
   });
 
@@ -615,6 +622,30 @@ const EmployeeSearchPage = ({
     setDebouncedAdvancedFilters(clearedFilters); // Clear immediately
   };
 
+  const handleClearSelection = () => {
+    setSelectedEmployeesState([]);
+    if (onSelect && multiSelect) {
+      onSelect([]);
+    }
+  };
+
+  const handleConfirmSelection = () => {
+    const payload = selectedEmployeesState;
+    if (onConfirm) {
+      onConfirm(payload);
+    } else if (onSelect) {
+      onSelect(payload);
+    }
+  };
+
+  const handleGoBack = () => {
+    if (onBack) {
+      onBack();
+    } else if (typeof window !== 'undefined' && window.history) {
+      window.history.back();
+    }
+  };
+
   // Calculate pagination display values
   const actualTotalCount = pagination.totalCount || employees.length;
   const startItem = loadAllResults ? 1 : (actualTotalCount > 0 ? (pagination.page - 1) * pagination.pageSize + 1 : 0);
@@ -897,9 +928,29 @@ const EmployeeSearchPage = ({
             </>
           )}
         </div>
+
+        {/* Multi-select Action Bar */}
+        {multiSelect && (
+          <div className="mt-4 flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 px-4 py-3">
+            <div className="text-sm text-gray-600 dark:text-gray-300">
+              {selectedEmployeesState.length} selected{maxSelections ? ` / ${maxSelections}` : ''}
+            </div>
+            <div className="flex items-center gap-2">
+              <Button variant="outline" onClick={handleClearSelection} disabled={selectedEmployeesState.length === 0}>
+                Clear
+              </Button>
+              <Button variant="outline" onClick={handleGoBack}>
+                Go Back
+              </Button>
+              <Button onClick={handleConfirmSelection} disabled={selectedEmployeesState.length === 0}>
+                Confirm
+              </Button>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );
 };
 
-export default EmployeeSearchPage; 
+export default EmployeeSearchPage; 

package/src/EmployeeSearchPage.test.jsx

@@ -1,254 +1 @@
-// Employee Search Page Component Tests
-// Tests the EmployeeSearchPage component functionality including search, filtering, pagination, and selection
-
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import EmployeeSearchPage from './EmployeeSearchPage';
-
-// Mock MSAL
-jest.mock('@azure/msal-react', () => ({
-  useMsal: () => ({
-    instance: {
-      acquireTokenSilent: jest.fn(),
-    },
-    accounts: [{ localAccountId: 'test-user-id' }],
-  }),
-}));
-
-// Mock telemetry
-jest.mock('./telemetry', () => ({
-  trackEvent: jest.fn(),
-}));
-
-// Mock utils
-jest.mock('./lib/utils', () => ({
-  cn: (...classes) => classes.filter(Boolean).join(' '),
-}));
-
-
-
-// Mock fetch
-global.fetch = jest.fn();
-
-// Mock process.env
-process.env.VITE_COMMON_API_FUNCTION_KEY = 'test-key';
-process.env.VITE_COMMON_API_BASE_URL = 'https://test-api.example.com';
-
-// Mock import.meta.env for Vite environment variables
-global.import = {
-  meta: {
-    env: {
-      VITE_COMMON_API_FUNCTION_KEY: 'test-key',
-      VITE_COMMON_API_BASE_URL: 'https://test-api.example.com',
-    },
-  },
-};
-
-// Mock the UI components
-jest.mock('./components/ui/input', () => ({
-  Input: ({ value, onChange, placeholder, ...props }) => {
-    return (
-      <input
-        data-testid="input"
-        value={value}
-        onChange={onChange}
-        placeholder={placeholder}
-        {...props}
-      />
-    );
-  }
-}));
-
-jest.mock('./components/ui/button', () => ({
-  Button: ({ children, onClick, variant, size, ...props }) => {
-    return (
-      <button
-        data-testid="button"
-        onClick={onClick}
-        data-variant={variant}
-        data-size={size}
-        {...props}
-      >
-        {children}
-      </button>
-    );
-  }
-}));
-
-jest.mock('./components/ui/table', () => ({
-  Table: ({ children, ...props }) => <table data-testid="table" {...props}>{children}</table>,
-  TableBody: ({ children, ...props }) => <tbody data-testid="table-body" {...props}>{children}</tbody>,
-  TableCell: ({ children, ...props }) => <td data-testid="table-cell" {...props}>{children}</td>,
-  TableHead: ({ children, ...props }) => <th data-testid="table-head" {...props}>{children}</th>,
-  TableHeader: ({ children, ...props }) => <thead data-testid="table-header" {...props}>{children}</thead>,
-  TableRow: ({ children, ...props }) => <tr data-testid="table-row" {...props}>{children}</tr>,
-}));
-
-jest.mock('./components/ui/pagination', () => ({
-  Pagination: ({ children, ...props }) => <nav data-testid="pagination" {...props}>{children}</nav>,
-  PaginationContent: ({ children, ...props }) => <div data-testid="pagination-content" {...props}>{children}</div>,
-  PaginationEllipsis: ({ ...props }) => <span data-testid="pagination-ellipsis" {...props}>...</span>,
-  PaginationItem: ({ children, ...props }) => <div data-testid="pagination-item" {...props}>{children}</div>,
-  PaginationLink: ({ children, onClick, isActive, ...props }) => (
-    <button data-testid="pagination-link" onClick={onClick} data-active={isActive} {...props}>
-      {children}
-    </button>
-  ),
-  PaginationNext: ({ children, onClick, ...props }) => (
-    <button data-testid="pagination-next" onClick={onClick} {...props}>
-      {children}
-    </button>
-  ),
-  PaginationPrevious: ({ children, onClick, ...props }) => (
-    <button data-testid="pagination-previous" onClick={onClick} {...props}>
-      {children}
-    </button>
-  ),
-}));
-
-// Mock EmployeeSearchFilters
-jest.mock('./components/EmployeeSearchFilters', () => {
-  return function MockEmployeeSearchFilters({ filters, onFiltersChange, onApplyFilters, onClearFilters, ...props }) {
-    return (
-      <div data-testid="employee-search-filters">
-        <button onClick={() => onFiltersChange({ ...filters, status: 'Inactive' })}>
-          Change Status
-        </button>
-        <button onClick={() => onApplyFilters(filters)}>
-          Apply Filters
-        </button>
-        <button onClick={onClearFilters}>
-          Clear Filters
-        </button>
-      </div>
-    );
-  };
-});
-
-const defaultProps = {
-  title: 'Employee Search',
-  onSelect: jest.fn(),
-};
-
-describe('EmployeeSearchPage', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    global.fetch.mockResolvedValue({
-      ok: true,
-      json: async () => ({
-        success: true,
-        data: {
-          employees: [],
-          pagination: {
-            page: 1,
-            pageSize: 20,
-            totalCount: 0,
-            totalPages: 0,
-            hasNextPage: false,
-            hasPreviousPage: false,
-          },
-        },
-      }),
-    });
-  });
-
-  describe('Basic Rendering', () => {
-    it('renders the page title', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      expect(screen.getByText('Employee Search')).toBeInTheDocument();
-    });
-
-    it('renders the search input', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      expect(screen.getByPlaceholderText('Search by name, employee ID, or email...')).toBeInTheDocument();
-    });
-
-    it('renders the employee search filters', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      expect(screen.getByTestId('employee-search-filters')).toBeInTheDocument();
-    });
-
-    it('shows loading state initially', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      expect(screen.getByRole('status')).toBeInTheDocument();
-    });
-  });
-
-  describe('Search Functionality', () => {
-    it('renders search input with correct placeholder', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      const searchInput = screen.getByPlaceholderText('Search by name, employee ID, or email...');
-      expect(searchInput).toBeInTheDocument();
-      expect(searchInput).toHaveAttribute('type', 'text');
-    });
-
-    it('allows typing in search input', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      const searchInput = screen.getByPlaceholderText('Search by name, employee ID, or email...');
-      fireEvent.change(searchInput, { target: { value: 'John' } });
-      
-      expect(searchInput).toHaveValue('John');
-    });
-  });
-
-  describe('Filter Integration', () => {
-    it('renders filter buttons', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      expect(screen.getByText('Change Status')).toBeInTheDocument();
-      expect(screen.getByText('Apply Filters')).toBeInTheDocument();
-      expect(screen.getByText('Clear Filters')).toBeInTheDocument();
-    });
-
-    it('calls filter change handler when filter button is clicked', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      const changeStatusButton = screen.getByText('Change Status');
-      fireEvent.click(changeStatusButton);
-      
-      // The mock should have been called
-      expect(changeStatusButton).toBeInTheDocument();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has proper ARIA labels', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      const searchInput = screen.getByPlaceholderText('Search by name, employee ID, or email...');
-      expect(searchInput).toBeInTheDocument();
-    });
-
-    it('supports keyboard navigation', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      const searchInput = screen.getByPlaceholderText('Search by name, employee ID, or email...');
-      searchInput.focus();
-      
-      expect(searchInput).toHaveFocus();
-    });
-  });
-
-  describe('Props Handling', () => {
-    it('renders custom title', () => {
-      render(<EmployeeSearchPage {...defaultProps} title="Custom Title" />);
-      
-      expect(screen.getByText('Custom Title')).toBeInTheDocument();
-    });
-
-    it('renders custom search placeholder', () => {
-      render(<EmployeeSearchPage {...defaultProps} searchPlaceholder="Custom placeholder" />);
-      
-      expect(screen.getByPlaceholderText('Custom placeholder')).toBeInTheDocument();
-    });
-  });
-
-
-}); 
+ 

package/src/components/ui/date-range-picker.jsx

@@ -4,19 +4,28 @@
 // Usage: <DateRangePicker selectedRange={range} onSelect={setRange} />
 
 import React, { useState, useEffect, useRef } from 'react'
-import { format } from 'date-fns'
+import { format, addDays, addMonths, endOfMonth, endOfYear, startOfMonth, startOfYear, subDays, subMonths, subYears } from 'date-fns'
 import { CalendarIcon } from '@heroicons/react/24/outline'
 import { Popover, PopoverContent, PopoverTrigger } from './popover'
 import { Calendar } from './calendar'
 import { Button } from './button'
 import { cn } from '../../lib/utils'
 
+// Optional preset type: { key: string, label: string, getRange: () => ({ from: Date, to: Date }) }
 export function DateRangePicker({ 
   selectedRange, 
   onSelect, 
   className,
   placeholder = "Select a date range",
   disabled,
+  // New: optional presets support (backwards compatible)
+  presetsEnabled = false,
+  presets,
+  // New: allow consumers to control month count
+  numberOfMonths = 2,
+  // New: allow styling popover content and calendar for layout control
+  contentClassName,
+  calendarClassName,
   ...props 
 }) {
   const [isOpen, setIsOpen] = useState(false)
@@ -185,8 +194,8 @@ export function DateRangePicker({
           )}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
-        <div className="relative">
+      <PopoverContent className={cn('w-[90vw] p-3 sm:w-auto', contentClassName)} align="start">
+        <div className="relative w-full sm:w-[520px]">
           <Calendar
             mode="range"
             defaultMonth={internalRange?.from}
@@ -197,8 +206,47 @@ export function DateRangePicker({
                 handleSelect(range)
               }
             }}
-            numberOfMonths={2}
+            numberOfMonths={numberOfMonths}
+            className={cn('w-full', calendarClassName)}
           />
+          {presetsEnabled && (
+            <div className="mt-2 flex flex-wrap gap-2 p-2">
+              {(presets && presets.length > 0 ? presets : defaultPresets()).map((p) => {
+                const r = p.getRange()
+                return (
+                  <Button
+                    key={p.key}
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      setInternalRange(r)
+                      isSelectingRange.current = false
+                      onSelect(r)
+                    }}
+                  >
+                    {p.label}
+                  </Button>
+                )
+              })}
+            </div>
+          )}
+          {/* Always-present footer actions for clarity on mobile/desktop */}
+          <div className="mt-3 flex items-center justify-between px-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                setInternalRange(null)
+                isSelectingRange.current = false
+                onSelect(null)
+              }}
+            >
+              Clear
+            </Button>
+            <Button size="sm" onClick={() => setIsOpen(false)}>
+              Done
+            </Button>
+          </div>
           {internalRange?.from && (
             <div className="absolute top-2 right-2 flex gap-1">
               <button
@@ -227,6 +275,23 @@ export function DateRangePicker({
   )
 }
 
+// Provide a default preset set similar to app usage, but minimal
+function defaultPresets() {
+  const today = new Date()
+  const last7Days = { from: subDays(today, 6), to: today }
+  const monthToDate = { from: startOfMonth(today), to: today }
+  const yearToDate = { from: startOfYear(today), to: today }
+  const lastMonth = { from: startOfMonth(subMonths(today, 1)), to: endOfMonth(subMonths(today, 1)) }
+  const lastYear = { from: startOfYear(subYears(today, 1)), to: endOfYear(subYears(today, 1)) }
+  return [
+    { key: 'last7', label: 'Last 7 days', getRange: () => last7Days },
+    { key: 'mtd', label: 'Month to date', getRange: () => monthToDate },
+    { key: 'lastMonth', label: 'Last month', getRange: () => lastMonth },
+    { key: 'ytd', label: 'Year to date', getRange: () => yearToDate },
+    { key: 'lastYear', label: 'Last year', getRange: () => lastYear },
+  ]
+}
+
 // Single date picker variant
 export function DatePicker({ 
   selectedDate, 
@@ -234,6 +299,7 @@ export function DatePicker({
   className,
   placeholder = "Select a date",
   disabled,
+  disableFuture = false,
   ...props 
 }) {
   const [isOpen, setIsOpen] = useState(false)
@@ -269,6 +335,7 @@ export function DatePicker({
           mode="single"
           selected={selectedDate}
           onSelect={handleSelect}
+          disabled={disableFuture ? { after: new Date() } : undefined}
           initialFocus
         />
       </PopoverContent>

package/src/components/ui/date-range-picker.test.jsx

@@ -38,7 +38,7 @@ describe('DateRangePicker', () => {
     fireEvent.click(button)
     
     await waitFor(() => {
-      expect(screen.getAllByRole('grid')).toHaveLength(2) // Two months for range picker
+      expect(screen.getAllByRole('grid')).toHaveLength(2) // Two months default
     })
   })
 
@@ -64,6 +64,24 @@ describe('DateRangePicker', () => {
   })
 })
 
+describe('DateRangePicker presets', () => {
+  it('renders presets when enabled and selects a range on click', async () => {
+    const onSelect = jest.fn()
+    render(<DateRangePicker selectedRange={null} onSelect={onSelect} presetsEnabled numberOfMonths={1} />)
+    // Open popover
+    fireEvent.click(screen.getByRole('button'))
+    // Default preset button e.g. Last 7 days should appear
+    await waitFor(() => {
+      expect(screen.getByText(/last 7 days/i)).toBeInTheDocument()
+    })
+    fireEvent.click(screen.getByText(/last 7 days/i))
+    expect(onSelect).toHaveBeenCalled()
+    const arg = onSelect.mock.calls[0][0]
+    expect(arg?.from).toBeInstanceOf(Date)
+    expect(arg?.to).toBeInstanceOf(Date)
+  })
+})
+
 describe('DatePicker', () => {
   it('renders with placeholder text', () => {
     const mockOnSelect = jest.fn()

package/src/components/ui/soft-warning-alert.jsx

@@ -0,0 +1,112 @@
+//
+// soft-warning-alert.jsx
+// -----------------------
+// A soft-styled warning alert built on shadcn-like primitives used in this package.
+// Use this for non-blocking warnings with an optional action button.
+//
+// Example:
+// import { SoftWarningAlert } from '@snapdragonsnursery/react-components'
+// import { AlertTriangle } from 'lucide-react'
+//
+// export default function Example() {
+//   return (
+//     <SoftWarningAlert
+//       icon={AlertTriangle}
+//       title="Unsubmitted claims"
+//       description="You have 3 unsubmitted mileage claims. Create a report to submit."
+//       actionLabel="Create report"
+//       onAction={() => console.log('clicked')}
+//     />
+//   )
+// }
+
+import React from 'react'
+import { cn } from '../../lib/utils'
+
+// Lightweight Alert primitives compatible with package styling
+function Alert({ className, children }) {
+  return (
+    <div
+      className={cn(
+        'w-full rounded-lg border p-4 text-sm',
+        'bg-amber-600/10 text-amber-700 border-amber-200',
+        'dark:bg-amber-400/10 dark:text-amber-300 dark:border-amber-300/20',
+        className
+      )}
+      role="alert"
+    >
+      {children}
+    </div>
+  )
+}
+
+// Prop types omitted to avoid runtime dependency
+
+function AlertTitle({ className, children }) {
+  return <div className={cn('font-medium', className)}>{children}</div>
+}
+
+// Prop types omitted to avoid runtime dependency
+
+function AlertDescription({ className, children }) {
+  return (
+    <div className={cn('mt-1 text-amber-700/80 dark:text-amber-300/80', className)}>
+      {children}
+    </div>
+  )
+}
+
+// Prop types omitted to avoid runtime dependency
+
+function Button({ className, children, ...props }) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        'inline-flex items-center rounded-md px-3 py-1.5 text-xs font-medium',
+        'bg-amber-600 text-white hover:bg-amber-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-500',
+        'dark:bg-amber-500 dark:text-black dark:hover:bg-amber-400',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+// Prop types omitted to avoid runtime dependency
+
+export function SoftWarningAlert({
+  title,
+  description,
+  icon: Icon,
+  className,
+  actionLabel,
+  onAction,
+}) {
+  return (
+    <Alert className={className}>
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex items-start gap-3">
+          {Icon ? <Icon className="h-5 w-5 mt-0.5 shrink-0" /> : null}
+          <div>
+            <AlertTitle>{title}</AlertTitle>
+            {description ? (
+              <AlertDescription>{description}</AlertDescription>
+            ) : null}
+          </div>
+        </div>
+        {typeof onAction === 'function' && actionLabel ? (
+          <Button onClick={onAction}>{actionLabel}</Button>
+        ) : null}
+      </div>
+    </Alert>
+  )
+}
+
+// Prop types omitted to avoid runtime dependency
+
+export default SoftWarningAlert
+
+

package/src/components/ui/stat-card.jsx

@@ -0,0 +1,100 @@
+// Stat Card UI Component (shared library)
+// Reusable statistic card with optional icon and caption.
+// Example:
+// <StatCard title="Active Users" value="97K" caption="+24.3% this month" icon={ArrowTrendingUpIcon} tone="success" />
+
+import React from 'react'
+import { cn } from '../../lib/utils'
+
+// Lightweight Card primitives aligned with this package styling
+const Card = React.forwardRef(function Card({ className, ...props }, ref) {
+  return (
+    <div
+      ref={ref}
+      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+      {...props}
+    />
+  )
+})
+
+const CardHeader = React.forwardRef(function CardHeader({ className, ...props }, ref) {
+  return <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+})
+
+const CardTitle = React.forwardRef(function CardTitle({ className, ...props }, ref) {
+  return (
+    <h3
+      ref={ref}
+      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+})
+
+const CardContent = React.forwardRef(function CardContent({ className, ...props }, ref) {
+  return <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+})
+
+function Skeleton({ className, ...props }) {
+  return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />
+}
+
+const toneClasses = {
+  default: {
+    badge: 'bg-gray-100 text-gray-700',
+    value: 'text-foreground',
+    ring: 'ring-gray-200',
+  },
+  success: {
+    badge: 'bg-emerald-100 text-emerald-700',
+    value: 'text-emerald-700',
+    ring: 'ring-emerald-200',
+  },
+  danger: {
+    badge: 'bg-rose-100 text-rose-700',
+    value: 'text-rose-700',
+    ring: 'ring-rose-200',
+  },
+  warning: {
+    badge: 'bg-amber-100 text-amber-700',
+    value: 'text-amber-700',
+    ring: 'ring-amber-200',
+  },
+  info: {
+    badge: 'bg-sky-100 text-sky-700',
+    value: 'text-sky-700',
+    ring: 'ring-sky-200',
+  },
+}
+
+export function StatCard({ title, value, caption, icon: Icon, tone = 'default', className, loading = false }) {
+  const styles = toneClasses[tone] || toneClasses.default
+  return (
+    <Card className={cn('shadow-sm hover:shadow transition-shadow', className)}>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-sm font-medium text-muted-foreground">
+            {loading ? <Skeleton className="h-4 w-24" /> : title}
+          </CardTitle>
+          {Icon ? (
+            <div className={cn('inline-flex h-10 w-10 items-center justify-center rounded-full ring-1', styles.badge, styles.ring)}>
+              {loading ? <Skeleton className="h-5 w-5 rounded-full" /> : <Icon className="h-5 w-5" />}
+            </div>
+          ) : null}
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className={cn('text-3xl font-extrabold tracking-tight', styles.value)}>
+          {loading ? <Skeleton className="h-8 w-20" /> : value}
+        </div>
+        {caption ? (
+          <div className="mt-1 text-sm text-muted-foreground">
+            {loading ? <Skeleton className="h-4 w-28" /> : caption}
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default StatCard

package/src/components/ui/stat-card.test.jsx

@@ -0,0 +1,24 @@
+// Basic render tests for StatCard
+// Example usage demonstrated in the component file header.
+
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import StatCard from './stat-card'
+
+describe('StatCard (library)', () => {
+  it('renders title and value', () => {
+    render(<StatCard title="Total" value={42} caption="units" />)
+    expect(screen.getByText('Total')).toBeInTheDocument()
+    expect(screen.getByText('42')).toBeInTheDocument()
+    expect(screen.getByText('units')).toBeInTheDocument()
+  })
+
+  it('renders skeletons when loading', () => {
+    const { container } = render(<StatCard title="Total" value={42} caption="units" loading />)
+    expect(screen.queryByText('Total')).toBeNull()
+    expect(screen.queryByText('42')).toBeNull()
+    expect(screen.queryByText('units')).toBeNull()
+    // Skeletons exist
+    expect(container.querySelectorAll('.animate-pulse').length).toBeGreaterThan(0)
+  })
+})

package/src/index.d.ts

@@ -0,0 +1,67 @@
+//
+// index.d.ts
+// -------------
+// TypeScript declarations for @snapdragonsnursery/react-components
+// This provides minimal typings for components used in consuming TypeScript apps.
+
+import * as React from 'react'
+
+export interface SoftWarningAlertProps {
+  title: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ComponentType<any>
+  className?: string
+  actionLabel?: string
+  onAction?: () => void
+}
+
+export const SoftWarningAlert: React.FC<SoftWarningAlertProps>
+
+// Existing components (typed as any for now)
+export const AuthButtons: React.ComponentType<any>
+export const ThemeToggle: React.ComponentType<any>
+export const ChildSearchModal: React.ComponentType<any>
+export const ChildSearchPage: React.ComponentType<any>
+export const ChildSearchPageDemo: React.ComponentType<any>
+export const ThemeToggleTest: React.ComponentType<any>
+export const LandingPage: React.ComponentType<any>
+export const ChildSearchFilters: React.ComponentType<any>
+export const DateRangePickerDemo: React.ComponentType<any>
+export const CalendarDemo: React.ComponentType<any>
+export const DateRangePickerTest: React.ComponentType<any>
+export const ApplyButtonDemo: React.ComponentType<any>
+export const EmployeeSearchPage: React.ComponentType<any>
+export const EmployeeSearchModal: React.ComponentType<any>
+export const EmployeeSearchDemo: React.ComponentType<any>
+export const EmployeeSearchFilters: React.ComponentType<any>
+
+export const DateRangePicker: React.ComponentType<any>
+export interface DatePickerProps {
+  selectedDate?: Date | null
+  onSelect: (date: Date | null) => void
+  className?: string
+  placeholder?: string
+  disabled?: boolean
+  disableFuture?: boolean
+}
+export const DatePicker: React.ComponentType<DatePickerProps>
+export const Calendar: React.ComponentType<any>
+export const SimpleCalendar: React.ComponentType<any>
+export const Popover: React.ComponentType<any>
+export const PopoverContent: React.ComponentType<any>
+export const PopoverTrigger: React.ComponentType<any>
+
+export interface StatCardProps {
+  title: string
+  value: React.ReactNode
+  caption?: React.ReactNode
+  icon?: React.ComponentType<any>
+  tone?: 'default' | 'success' | 'danger' | 'warning' | 'info'
+  className?: string
+  loading?: boolean
+}
+export const StatCard: React.ComponentType<StatCardProps>
+
+export function configureTelemetry(...args: any[]): any
+
+

package/src/index.js

@@ -1,26 +1,28 @@
-export { default as AuthButtons } from "./AuthButtons";
-export { default as ThemeToggle } from "./ThemeToggle";
-export { default as ChildSearchModal } from "./ChildSearchModal";
-export { default as ChildSearchPage } from "./ChildSearchPage";
-export { default as ChildSearchPageDemo } from "./ChildSearchPageDemo";
-export { default as ThemeToggleTest } from "./ThemeToggleTest";
-export { default as LandingPage } from "./LandingPage";
-export { default as ChildSearchFilters } from "./components/ChildSearchFilters";
-export { default as DateRangePickerDemo } from "./DateRangePickerDemo";
-export { default as CalendarDemo } from "./CalendarDemo";
-export { default as DateRangePickerTest } from "./DateRangePickerTest";
-export { default as ApplyButtonDemo } from "./ApplyButtonDemo";
+export { default as AuthButtons } from "./AuthButtons.jsx";
+export { default as ThemeToggle } from "./ThemeToggle.jsx";
+export { default as ChildSearchModal } from "./ChildSearchModal.jsx";
+export { default as ChildSearchPage } from "./ChildSearchPage.jsx";
+export { default as ChildSearchPageDemo } from "./ChildSearchPageDemo.jsx";
+export { default as ThemeToggleTest } from "./ThemeToggleTest.jsx";
+export { default as LandingPage } from "./LandingPage.jsx";
+export { default as ChildSearchFilters } from "./components/ChildSearchFilters.jsx";
+export { default as DateRangePickerDemo } from "./DateRangePickerDemo.jsx";
+export { default as CalendarDemo } from "./CalendarDemo.jsx";
+export { default as DateRangePickerTest } from "./DateRangePickerTest.jsx";
+export { default as ApplyButtonDemo } from "./ApplyButtonDemo.jsx";
 
 // Employee Search Components
-export { default as EmployeeSearchPage } from "./EmployeeSearchPage";
-export { default as EmployeeSearchModal } from "./EmployeeSearchModal";
-export { default as EmployeeSearchDemo } from "./EmployeeSearchDemo";
-export { default as EmployeeSearchFilters } from "./components/EmployeeSearchFilters";
+export { default as EmployeeSearchPage } from "./EmployeeSearchPage.jsx";
+export { default as EmployeeSearchModal } from "./EmployeeSearchModal.jsx";
+export { default as EmployeeSearchDemo } from "./EmployeeSearchDemo.jsx";
+export { default as EmployeeSearchFilters } from "./components/EmployeeSearchFilters.jsx";
 
-export { configureTelemetry } from "./telemetry";
+export { configureTelemetry } from "./telemetry.js";
 
 // UI Components
-export { DateRangePicker, DatePicker } from "./components/ui/date-range-picker";
-export { Calendar } from "./components/ui/calendar";
-export { SimpleCalendar } from "./components/ui/simple-calendar";
-export { Popover, PopoverContent, PopoverTrigger } from "./components/ui/popover";
+export { DateRangePicker, DatePicker } from "./components/ui/date-range-picker.jsx";
+export { Calendar } from "./components/ui/calendar.jsx";
+export { SimpleCalendar } from "./components/ui/simple-calendar.jsx";
+export { Popover, PopoverContent, PopoverTrigger } from "./components/ui/popover.jsx";
+export { default as SoftWarningAlert } from "./components/ui/soft-warning-alert.jsx";
+export { default as StatCard } from "./components/ui/stat-card.jsx";