@snapdragonsnursery/react-components 1.1.9 → 1.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.1.9",
+  "version": "1.1.12",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -31,7 +31,7 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "type": "commonjs",
+  "type": "module",
   "bugs": {
     "url": "https://github.com/Snapdragons-Nursery/react-components/issues"
   },
@@ -39,8 +39,13 @@
   "dependencies": {
     "@headlessui/react": "^2.2.4",
     "@popperjs/core": "^2.11.8",
+    "@tanstack/react-table": "^8.21.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.526.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^3.3.1"
   },
   "peerDependencies": {
     "@azure/msal-react": ">=1.0.0",

package/src/ChildSearchPage.jsx

@@ -0,0 +1,821 @@
+// Full page Child Search component with TanStack table and shadcn styling
+// Provides a comprehensive search interface for children with advanced filtering and pagination
+
+import React, { useState, useEffect, useCallback } from "react";
+import { useMsal } from "@azure/msal-react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  flexRender,
+  createColumnHelper,
+} from "@tanstack/react-table";
+import { trackEvent } from "./telemetry";
+import { Button } from "./components/ui/button";
+import { Input } from "./components/ui/input";
+import { Select, SelectOption } from "./components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./components/ui/table";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "./components/ui/pagination";
+import {
+  MagnifyingGlassIcon,
+  FunnelIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  UserIcon,
+  MapPinIcon,
+  CalendarIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+} from "@heroicons/react/24/outline";
+import { cn } from "./lib/utils";
+
+const ChildSearchPage = ({
+  title = "Search Children",
+  siteId = null,
+  siteIds = null,
+  sites = null,
+  activeOnly = true,
+  status = null,
+  dobFrom = null,
+  dobTo = null,
+  ageFrom = null,
+  ageTo = null,
+  sortBy = "last_name",
+  sortOrder = "asc",
+  applicationContext = "child-search",
+  bypassPermissions = false,
+  onSelect = null, // Optional callback for when a child is selected
+  multiSelect = false,
+  maxSelections = null,
+  selectedChildren = [],
+}) => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [children, setChildren] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [pagination, setPagination] = useState({
+    page: 1,
+    pageSize: 20,
+    totalCount: 0,
+    totalPages: 0,
+    hasNextPage: false,
+    hasPreviousPage: false,
+  });
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+  const [isAdvancedFiltersOpen, setIsAdvancedFiltersOpen] = useState(false);
+  const [advancedFilters, setAdvancedFilters] = useState({
+    status: status || (activeOnly ? "active" : "all"),
+    selectedSiteId: siteId || "",
+    dobFrom: dobFrom || "",
+    dobTo: dobTo || "",
+    ageFrom: ageFrom || "",
+    ageTo: ageTo || "",
+    sortBy: sortBy,
+    sortOrder: sortOrder,
+  });
+
+  // State for multi-select mode
+  const [selectedChildrenState, setSelectedChildrenState] = useState(
+    selectedChildren || []
+  );
+
+  const { instance, accounts } = useMsal();
+
+  // Column helper for TanStack table
+  const columnHelper = createColumnHelper();
+
+  // Define table columns
+  const columns = [
+    // Checkbox column for multi-select
+    ...(multiSelect
+      ? [
+          columnHelper.display({
+            id: "select",
+            header: ({ table }) => (
+              <input
+                type="checkbox"
+                checked={table.getIsAllPageRowsSelected()}
+                onChange={table.getToggleAllPageRowsSelectedHandler()}
+                className="rounded border-gray-300"
+              />
+            ),
+            cell: ({ row }) => (
+              <input
+                type="checkbox"
+                checked={row.getIsSelected()}
+                onChange={row.getToggleSelectedHandler()}
+                className="rounded border-gray-300"
+              />
+            ),
+            size: 50,
+          }),
+        ]
+      : []),
+    // Name column
+    columnHelper.accessor("full_name", {
+      header: "Name",
+      cell: ({ row }) => (
+        <div className="flex items-center space-x-2">
+          <UserIcon className="h-4 w-4 text-gray-400" />
+          <div>
+            <div className="font-medium">{row.original.full_name}</div>
+            <div className="text-sm text-gray-500">
+              ID: {row.original.child_id}
+            </div>
+          </div>
+        </div>
+      ),
+    }),
+    // Site column
+    columnHelper.accessor("site_name", {
+      header: "Site",
+      cell: ({ row }) => (
+        <div className="flex items-center space-x-2">
+          <MapPinIcon className="h-4 w-4 text-gray-400" />
+          <span>{row.original.site_name}</span>
+        </div>
+      ),
+    }),
+    // Date of Birth column
+    columnHelper.accessor("date_of_birth", {
+      header: "Date of Birth",
+      cell: ({ row }) => (
+        <div className="flex items-center space-x-2">
+          <CalendarIcon className="h-4 w-4 text-gray-400" />
+          <span>
+            {row.original.date_of_birth
+              ? new Date(row.original.date_of_birth).toLocaleDateString("en-GB")
+              : "N/A"}
+          </span>
+        </div>
+      ),
+    }),
+    // Age column
+    columnHelper.accessor("age_years", {
+      header: "Age",
+      cell: ({ row }) => {
+        const { age_years, age_months } = row.original;
+        const ageText =
+          age_years || age_months
+            ? `${age_years || 0}y ${age_months || 0}m`
+            : "N/A";
+        return (
+          <div className="flex items-center space-x-2">
+            <span className="text-gray-400 font-mono">#</span>
+            <span>{ageText}</span>
+          </div>
+        );
+      },
+    }),
+    // Status column
+    columnHelper.accessor("is_active", {
+      header: "Status",
+      cell: ({ row }) => (
+        <div className="flex items-center space-x-2">
+          {row.original.is_active ? (
+            <CheckCircleIcon className="h-4 w-4 text-green-500" />
+          ) : (
+            <XCircleIcon className="h-4 w-4 text-red-500" />
+          )}
+          <span
+            className={cn(
+              "px-2 py-1 text-xs rounded-full",
+              row.original.is_active
+                ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+                : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
+            )}
+          >
+            {row.original.is_active ? "Active" : "Inactive"}
+          </span>
+        </div>
+      ),
+    }),
+  ];
+
+  // Create table instance
+  const table = useReactTable({
+    data: children,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      rowSelection: selectedChildrenState.reduce((acc, child, index) => {
+        acc[index] = true;
+        return acc;
+      }, {}),
+    },
+    onRowSelectionChange: (updater) => {
+      const newSelection =
+        typeof updater === "function" ? updater({}) : updater;
+      const selectedRows = Object.keys(newSelection).map(
+        (index) => children[parseInt(index)]
+      );
+      setSelectedChildrenState(selectedRows);
+    },
+  });
+
+  // Debounce search term
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+      setPagination((prev) => ({ ...prev, page: 1 }));
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [searchTerm]);
+
+  // Search children
+  const searchChildren = useCallback(async () => {
+    if (!instance || !accounts[0]) {
+      setError("Authentication required");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const functionKey = import.meta.env.VITE_COMMON_API_FUNCTION_KEY || "";
+
+      const params = new URLSearchParams({
+        entra_id: accounts[0].localAccountId,
+        search_term: debouncedSearchTerm,
+        page: pagination.page,
+        page_size: pagination.pageSize,
+        application_context: applicationContext,
+        bypass_permissions: bypassPermissions.toString(),
+      });
+
+      // Handle site filtering
+      if (siteIds && siteIds.length > 0) {
+        params.append("site_ids", siteIds.join(","));
+      } else if (advancedFilters.selectedSiteId) {
+        params.append("site_id", advancedFilters.selectedSiteId.toString());
+      } else if (siteId) {
+        params.append("site_id", siteId.toString());
+      }
+
+      // Handle status filtering
+      if (advancedFilters.status && advancedFilters.status !== "all") {
+        params.append("status", advancedFilters.status);
+      } else if (activeOnly) {
+        params.append("active_only", "true");
+      }
+
+      // Add date of birth filters
+      if (advancedFilters.dobFrom) {
+        params.append("dob_from", advancedFilters.dobFrom);
+      }
+      if (advancedFilters.dobTo) {
+        params.append("dob_to", advancedFilters.dobTo);
+      }
+
+      // Add age filters
+      if (advancedFilters.ageFrom) {
+        params.append("age_from", advancedFilters.ageFrom);
+      }
+      if (advancedFilters.ageTo) {
+        params.append("age_to", advancedFilters.ageTo);
+      }
+
+      // Add sorting
+      params.append("sort_by", advancedFilters.sortBy);
+      params.append("sort_order", advancedFilters.sortOrder);
+
+      const apiResponse = await fetch(
+        `${
+          import.meta.env.VITE_COMMON_API_BASE_URL ||
+          "https://snaps-common-api.azurewebsites.net"
+        }/api/search-children?${params}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-functions-key": functionKey,
+          },
+        }
+      );
+
+      if (!apiResponse.ok) {
+        throw new Error(`API request failed: ${apiResponse.status}`);
+      }
+
+      const data = await apiResponse.json();
+
+      if (data.success) {
+        setChildren(data.data.children);
+        setPagination(data.data.pagination);
+        trackEvent("child_search_success", {
+          searchTerm: debouncedSearchTerm,
+          resultCount: data.data.children.length,
+          totalCount: data.data.pagination.totalCount,
+        });
+      } else {
+        throw new Error(data.error || "Search failed");
+      }
+    } catch (err) {
+      console.error("Error searching children:", err);
+      setError(err.message);
+      trackEvent("child_search_error", {
+        error: err.message,
+        searchTerm: debouncedSearchTerm,
+      });
+    } finally {
+      setLoading(false);
+    }
+  }, [
+    instance,
+    accounts,
+    debouncedSearchTerm,
+    pagination.page,
+    pagination.pageSize,
+    siteId,
+    siteIds,
+    activeOnly,
+    advancedFilters,
+    applicationContext,
+    bypassPermissions,
+  ]);
+
+  // Search when debounced term changes
+  useEffect(() => {
+    searchChildren();
+  }, [debouncedSearchTerm, pagination.page, searchChildren]);
+
+  // Initial search on component mount
+  useEffect(() => {
+    if (instance && accounts[0]) {
+      searchChildren();
+    }
+  }, [instance, accounts, searchChildren]);
+
+  const handlePageChange = (newPage) => {
+    setPagination((prev) => ({ ...prev, page: newPage }));
+  };
+
+  const handleChildSelect = (child) => {
+    if (onSelect) {
+      if (multiSelect) {
+        const isAlreadySelected = selectedChildrenState.some(
+          (selected) => selected.child_id === child.child_id
+        );
+
+        if (isAlreadySelected) {
+          const updatedSelection = selectedChildrenState.filter(
+            (selected) => selected.child_id !== child.child_id
+          );
+          setSelectedChildrenState(updatedSelection);
+          onSelect(updatedSelection);
+        } else {
+          if (maxSelections && selectedChildrenState.length >= maxSelections) {
+            return;
+          }
+          const updatedSelection = [...selectedChildrenState, child];
+          setSelectedChildrenState(updatedSelection);
+          onSelect(updatedSelection);
+        }
+      } else {
+        onSelect(child);
+      }
+    }
+  };
+
+  const clearFilters = () => {
+    setAdvancedFilters({
+      status: activeOnly ? "active" : "all",
+      selectedSiteId: "",
+      dobFrom: "",
+      dobTo: "",
+      ageFrom: "",
+      ageTo: "",
+      sortBy: "last_name",
+      sortOrder: "asc",
+    });
+  };
+
+  // Calculate pagination display values
+  const startItem = pagination.totalCount > 0 ? (pagination.page - 1) * pagination.pageSize + 1 : 0;
+  const endItem = Math.min(pagination.page * pagination.pageSize, pagination.totalCount);
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+            {title}
+          </h1>
+          {multiSelect && (
+            <div className="mt-2 flex items-center space-x-2">
+              <span className="px-3 py-1 text-sm bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 rounded-full">
+                {selectedChildrenState.length} selected
+                {maxSelections && ` / ${maxSelections}`}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Search and Filters */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-6">
+          <div className="p-6">
+            {/* Search Input */}
+            <div className="relative mb-4">
+              <MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+              <Input
+                type="text"
+                placeholder="Search by name or child ID..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="pl-10"
+              />
+            </div>
+
+            {/* Advanced Filters Toggle */}
+            <div className="flex items-center justify-between">
+              <button
+                onClick={() => setIsAdvancedFiltersOpen(!isAdvancedFiltersOpen)}
+                className="flex items-center space-x-2 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
+              >
+                <FunnelIcon className="h-4 w-4" />
+                <span>Advanced Filters</span>
+                {isAdvancedFiltersOpen ? (
+                  <ChevronUpIcon className="h-4 w-4" />
+                ) : (
+                  <ChevronDownIcon className="h-4 w-4" />
+                )}
+              </button>
+              <button
+                onClick={clearFilters}
+                className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"
+              >
+                Clear Filters
+              </button>
+            </div>
+
+            {/* Advanced Filters */}
+            {isAdvancedFiltersOpen && (
+              <div className="mt-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {/* Status Filter */}
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      Status
+                    </label>
+                    <Select
+                      value={advancedFilters.status}
+                      onChange={(e) =>
+                        setAdvancedFilters((prev) => ({
+                          ...prev,
+                          status: e.target.value,
+                        }))
+                      }
+                    >
+                      <SelectOption value="all">All Children</SelectOption>
+                      <SelectOption value="active">Active Only</SelectOption>
+                      <SelectOption value="inactive">
+                        Inactive Only
+                      </SelectOption>
+                    </Select>
+                  </div>
+
+                  {/* Site Filter */}
+                  {sites && sites.length > 0 && (
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                        Site
+                      </label>
+                      <Select
+                        value={advancedFilters.selectedSiteId}
+                        onChange={(e) =>
+                          setAdvancedFilters((prev) => ({
+                            ...prev,
+                            selectedSiteId: e.target.value,
+                          }))
+                        }
+                      >
+                        <SelectOption value="">All Sites</SelectOption>
+                        {sites.map((site) => (
+                          <SelectOption key={site.site_id} value={site.site_id}>
+                            {site.site_name}
+                          </SelectOption>
+                        ))}
+                      </Select>
+                    </div>
+                  )}
+
+                  {/* Date of Birth Range */}
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      Date of Birth From
+                    </label>
+                    <Input
+                      type="date"
+                      value={advancedFilters.dobFrom}
+                      onChange={(e) =>
+                        setAdvancedFilters((prev) => ({
+                          ...prev,
+                          dobFrom: e.target.value,
+                        }))
+                      }
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      Date of Birth To
+                    </label>
+                    <Input
+                      type="date"
+                      value={advancedFilters.dobTo}
+                      onChange={(e) =>
+                        setAdvancedFilters((prev) => ({
+                          ...prev,
+                          dobTo: e.target.value,
+                        }))
+                      }
+                    />
+                  </div>
+
+                  {/* Age Range */}
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      Age From (months)
+                    </label>
+                    <Input
+                      type="number"
+                      min="0"
+                      value={advancedFilters.ageFrom}
+                      onChange={(e) =>
+                        setAdvancedFilters((prev) => ({
+                          ...prev,
+                          ageFrom: e.target.value,
+                        }))
+                      }
+                      placeholder="0"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      Age To (months)
+                    </label>
+                    <Input
+                      type="number"
+                      min="0"
+                      value={advancedFilters.ageTo}
+                      onChange={(e) =>
+                        setAdvancedFilters((prev) => ({
+                          ...prev,
+                          ageTo: e.target.value,
+                        }))
+                      }
+                      placeholder="60"
+                    />
+                  </div>
+
+                  {/* Sort Options */}
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      Sort By
+                    </label>
+                    <Select
+                      value={advancedFilters.sortBy}
+                      onChange={(e) =>
+                        setAdvancedFilters((prev) => ({
+                          ...prev,
+                          sortBy: e.target.value,
+                        }))
+                      }
+                    >
+                      <SelectOption value="last_name">Last Name</SelectOption>
+                      <SelectOption value="first_name">First Name</SelectOption>
+                      <SelectOption value="full_name">Full Name</SelectOption>
+                      <SelectOption value="date_of_birth">
+                        Date of Birth
+                      </SelectOption>
+                      <SelectOption value="site_name">Site Name</SelectOption>
+                    </Select>
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      Sort Order
+                    </label>
+                    <Select
+                      value={advancedFilters.sortOrder}
+                      onChange={(e) =>
+                        setAdvancedFilters((prev) => ({
+                          ...prev,
+                          sortOrder: e.target.value,
+                        }))
+                      }
+                    >
+                      <SelectOption value="asc">Ascending</SelectOption>
+                      <SelectOption value="desc">Descending</SelectOption>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Results */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+          {loading && (
+            <div className="flex items-center justify-center p-8">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+            </div>
+          )}
+
+          {error && (
+            <div className="p-6 text-center">
+              <div className="text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 p-4 rounded-lg">
+                {error}
+              </div>
+            </div>
+          )}
+
+          {!loading && !error && (
+            <>
+              {/* Results Header */}
+              <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+                <div className="flex items-center justify-between">
+                  <div className="text-sm text-gray-600 dark:text-gray-400">
+                    {pagination.totalCount === 0
+                      ? "No children found"
+                      : `Showing ${startItem} to ${endItem} of ${pagination.totalCount} children`}
+                  </div>
+                </div>
+              </div>
+
+              {/* Table */}
+              {children.length > 0 ? (
+                <div className="overflow-x-auto">
+                  <Table>
+                    <TableHeader>
+                      {table.getHeaderGroups().map((headerGroup) => (
+                        <TableRow key={headerGroup.id}>
+                          {headerGroup.headers.map((header) => (
+                            <TableHead key={header.id}>
+                              {header.isPlaceholder
+                                ? null
+                                : flexRender(
+                                    header.column.columnDef.header,
+                                    header.getContext()
+                                  )}
+                            </TableHead>
+                          ))}
+                        </TableRow>
+                      ))}
+                    </TableHeader>
+                    <TableBody>
+                      {table.getRowModel().rows?.length ? (
+                        table.getRowModel().rows.map((row) => (
+                          <TableRow
+                            key={row.id}
+                            data-state={row.getIsSelected() && "selected"}
+                            onClick={() => handleChildSelect(row.original)}
+                            className="cursor-pointer"
+                          >
+                            {row.getVisibleCells().map((cell) => (
+                              <TableCell key={cell.id}>
+                                {flexRender(
+                                  cell.column.columnDef.cell,
+                                  cell.getContext()
+                                )}
+                              </TableCell>
+                            ))}
+                          </TableRow>
+                        ))
+                      ) : (
+                        <TableRow>
+                          <TableCell
+                            colSpan={columns.length}
+                            className="h-24 text-center"
+                          >
+                            {debouncedSearchTerm
+                              ? "No children found matching your search."
+                              : "Start typing to search for children."}
+                          </TableCell>
+                        </TableRow>
+                      )}
+                    </TableBody>
+                  </Table>
+                </div>
+              ) : (
+                <div className="p-6 text-center text-gray-500 dark:text-gray-400">
+                  {debouncedSearchTerm
+                    ? "No children found matching your search."
+                    : "Start typing to search for children."}
+                </div>
+              )}
+
+              {/* Pagination */}
+              {pagination.totalCount > 0 && (
+                <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
+                  {/* Pagination Info */}
+                  <div className="flex items-center justify-between mb-4">
+                    <div className="text-sm text-gray-600 dark:text-gray-400">
+                      Page {pagination.page} of {pagination.totalPages}
+                    </div>
+                    <div className="text-sm text-gray-600 dark:text-gray-400">
+                      {pagination.totalCount} total children
+                    </div>
+                  </div>
+                  
+                  {/* Pagination Controls */}
+                  {pagination.totalPages > 1 && (
+                    <Pagination>
+                      <PaginationContent>
+                        <PaginationItem>
+                          <PaginationPrevious
+                            onClick={() => handlePageChange(pagination.page - 1)}
+                            className={cn(
+                              !pagination.hasPreviousPage &&
+                                "pointer-events-none opacity-50"
+                            )}
+                          />
+                        </PaginationItem>
+
+                        {/* Page numbers */}
+                        {Array.from(
+                          { length: pagination.totalPages },
+                          (_, i) => i + 1
+                        )
+                          .filter((page) => {
+                            const current = pagination.page;
+                            const total = pagination.totalPages;
+                            return (
+                              page === 1 ||
+                              page === total ||
+                              (page >= current - 1 && page <= current + 1)
+                            );
+                          })
+                          .map((page, index, array) => {
+                            if (index > 0 && array[index - 1] !== page - 1) {
+                              return (
+                                <React.Fragment key={`ellipsis-${page}`}>
+                                  <PaginationItem>
+                                    <PaginationEllipsis />
+                                  </PaginationItem>
+                                  <PaginationItem>
+                                    <PaginationLink
+                                      onClick={() => handlePageChange(page)}
+                                      isActive={page === pagination.page}
+                                    >
+                                      {page}
+                                    </PaginationLink>
+                                  </PaginationItem>
+                                </React.Fragment>
+                              );
+                            }
+                            return (
+                              <PaginationItem key={page}>
+                                <PaginationLink
+                                  onClick={() => handlePageChange(page)}
+                                  isActive={page === pagination.page}
+                                >
+                                  {page}
+                                </PaginationLink>
+                              </PaginationItem>
+                            );
+                          })}
+
+                        <PaginationItem>
+                          <PaginationNext
+                            onClick={() => handlePageChange(pagination.page + 1)}
+                            className={cn(
+                              !pagination.hasNextPage &&
+                                "pointer-events-none opacity-50"
+                            )}
+                          />
+                        </PaginationItem>
+                      </PaginationContent>
+                    </Pagination>
+                  )}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChildSearchPage;

package/src/ChildSearchPageDemo.jsx

@@ -0,0 +1,78 @@
+// Demo component for ChildSearchPage
+// Shows how to use the new full page child search component
+
+import React, { useState } from "react";
+import { ChildSearchPage } from "./index";
+
+const ChildSearchPageDemo = () => {
+  const [selectedChild, setSelectedChild] = useState(null);
+  const [selectedChildren, setSelectedChildren] = useState([]);
+
+  // Mock sites data for demo
+  const mockSites = [
+    { site_id: 1, site_name: "Sunshine Nursery" },
+    { site_id: 2, site_name: "Rainbow Daycare" },
+    { site_id: 3, site_name: "Little Stars Preschool" },
+  ];
+
+  const handleSingleSelect = (child) => {
+    setSelectedChild(child);
+    console.log("Selected child:", child);
+  };
+
+  const handleMultiSelect = (children) => {
+    setSelectedChildren(children);
+    console.log("Selected children:", children);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      {/* Demo Controls */}
+      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-4">
+        <div className="max-w-7xl mx-auto">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+            ChildSearchPage Demo
+          </h2>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Single Select Mode
+              </h3>
+              {selectedChild && (
+                <div className="text-sm text-gray-600 dark:text-gray-400">
+                  Selected: {selectedChild.full_name} (ID:{" "}
+                  {selectedChild.child_id})
+                </div>
+              )}
+            </div>
+
+            <div>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Multi Select Mode
+              </h3>
+              {selectedChildren.length > 0 && (
+                <div className="text-sm text-gray-600 dark:text-gray-400">
+                  Selected: {selectedChildren.length} children
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ChildSearchPage Component */}
+      <ChildSearchPage
+        title="Search Children - Demo"
+        sites={mockSites}
+        activeOnly={true}
+        applicationContext="demo"
+        onSelect={handleSingleSelect}
+        multiSelect={false}
+        showAdvancedFilters={true}
+      />
+    </div>
+  );
+};
+
+export default ChildSearchPageDemo;

package/src/components/ui/button.jsx

@@ -0,0 +1,51 @@
+// shadcn-style Button component with variants
+// Provides consistent button styling across the application
+
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+const Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? "span" : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }), "cursor-pointer")}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/components/ui/input.jsx

@@ -0,0 +1,22 @@
+// shadcn-style Input component
+// Provides consistent input styling across the application
+
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Input.displayName = "Input";
+
+export { Input };

package/src/components/ui/pagination.jsx

@@ -0,0 +1,95 @@
+// shadcn-style Pagination component
+// Provides consistent pagination styling for tables
+
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Button } from "./button";
+import { ChevronLeftIcon, ChevronRightIcon, EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
+
+const Pagination = ({ className, ...props }) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+));
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+));
+PaginationItem.displayName = "PaginationItem";
+
+const PaginationLink = React.forwardRef(
+  ({ className, isActive, size = "icon", ...props }, ref) => (
+    <Button
+      aria-current={isActive ? "page" : undefined}
+      variant={isActive ? "outline" : "ghost"}
+      size={size}
+      ref={ref}
+      className={cn("cursor-pointer", className)}
+      {...props}
+    />
+  )
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = React.forwardRef(({ className, ...props }, ref) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    ref={ref}
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeftIcon className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+));
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = React.forwardRef(({ className, ...props }, ref) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    ref={ref}
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRightIcon className="h-4 w-4" />
+  </PaginationLink>
+));
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({ className, ...props }) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <EllipsisHorizontalIcon className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};

package/src/components/ui/select.jsx

@@ -0,0 +1,34 @@
+// shadcn-style Select component
+// Provides consistent select styling across the application
+
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const Select = React.forwardRef(({ className, children, ...props }, ref) => {
+  return (
+    <select
+      className={cn(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </select>
+  );
+});
+Select.displayName = "Select";
+
+const SelectOption = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <option className={cn("", className)} ref={ref} {...props}>
+        {children}
+      </option>
+    );
+  }
+);
+SelectOption.displayName = "SelectOption";
+
+export { Select, SelectOption };

package/src/components/ui/table.jsx

@@ -0,0 +1,95 @@
+// shadcn-style Table components
+// Provides consistent table styling for TanStack table integration
+
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const Table = React.forwardRef(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

package/src/index.js

@@ -1,6 +1,8 @@
 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 { configureTelemetry } from "./telemetry";

package/src/lib/utils.js

@@ -0,0 +1,9 @@
+// Utility functions for shadcn styling
+// This file provides the cn function for combining class names with proper Tailwind CSS merging
+
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}