@snapdragonsnursery/react-components 1.0.0

package/src/ChildSearchModal.jsx

@@ -0,0 +1,787 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { useMsal } from "@azure/msal-react";
+import { trackEvent } from "./telemetry";
+
+const ChildSearchModal = ({
+  isOpen,
+  onClose,
+  onSelect,
+  title = "Search Children",
+  siteId = null,
+  siteIds = null, // Array of site IDs for multi-site search
+  sites = null, // Array of site objects from useUserSites hook
+  activeOnly = true,
+  status = null, // "active", "inactive", or "all" (overrides activeOnly)
+  dobFrom = null, // Date of birth from (YYYY-MM-DD)
+  dobTo = null, // Date of birth to (YYYY-MM-DD)
+  ageFrom = null, // Age in months from
+  ageTo = null, // Age in months to
+  sortBy = "last_name", // "last_name", "first_name", "date_of_birth", "site_name", "full_name"
+  sortOrder = "asc", // "asc" or "desc"
+  applicationContext = "child-search",
+  bypassPermissions = false,
+  className = "",
+  showAdvancedFilters = false, // Whether to show advanced filter options
+  showSiteFilter = true, // Whether to show site filter dropdown
+  multiSelect = false, // Enable multiple child selection
+  maxSelections = null, // Maximum number of children that can be selected (null = unlimited)
+  selectedChildren = [], // Array of already selected children (for multi-select mode)
+}) => {
+  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(showAdvancedFilters);
+  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();
+  const modalRef = useRef();
+  const searchInputRef = useRef();
+
+  // Debounce search term
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+      setPagination((prev) => ({ ...prev, page: 1 })); // Reset to first page on new search
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [searchTerm]);
+
+  // Close modal when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (modalRef.current && !modalRef.current.contains(event.target)) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      // Focus search input when modal opens
+      if (searchInputRef.current) {
+        searchInputRef.current.focus();
+      }
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, onClose]);
+
+  // Search children
+  const searchChildren = useCallback(async () => {
+    if (!instance || !accounts[0]) {
+      setError("Authentication required");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      // Get access token
+      const response = await instance.acquireTokenSilent({
+        scopes: ["api://your-api-scope/.default"], // Update with your actual API scope
+        account: accounts[0],
+      });
+
+      // Build query parameters
+      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);
+
+      // Make API call
+      const apiResponse = await fetch(
+        `${
+          process.env.REACT_APP_API_BASE_URL ||
+          "https://your-function-app.azurewebsites.net"
+        }/api/search-children?${params}`,
+        {
+          headers: {
+            Authorization: `Bearer ${response.accessToken}`,
+            "Content-Type": "application/json",
+          },
+        }
+      );
+
+      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(() => {
+    if (isOpen) {
+      searchChildren();
+    }
+  }, [debouncedSearchTerm, pagination.page, isOpen, searchChildren]);
+
+  // Reset selection when modal opens (for multi-select mode)
+  useEffect(() => {
+    if (isOpen && multiSelect) {
+      setSelectedChildrenState(selectedChildren || []);
+    }
+  }, [isOpen, multiSelect, selectedChildren]);
+
+  const handleChildSelect = (child) => {
+    if (multiSelect) {
+      // Multi-select mode
+      const isAlreadySelected = selectedChildrenState.some(
+        (selected) => selected.child_id === child.child_id
+      );
+
+      if (isAlreadySelected) {
+        // Remove child from selection
+        const updatedSelection = selectedChildrenState.filter(
+          (selected) => selected.child_id !== child.child_id
+        );
+        setSelectedChildrenState(updatedSelection);
+        trackEvent("child_deselected", {
+          childId: child.child_id,
+          childName: child.full_name,
+          siteId: child.site_id,
+        });
+      } else {
+        // Add child to selection (check max limit)
+        if (maxSelections && selectedChildrenState.length >= maxSelections) {
+          // Could show a toast/alert here
+          return;
+        }
+        const updatedSelection = [...selectedChildrenState, child];
+        setSelectedChildrenState(updatedSelection);
+        trackEvent("child_selected", {
+          childId: child.child_id,
+          childName: child.full_name,
+          siteId: child.site_id,
+          multiSelect: true,
+        });
+      }
+    } else {
+      // Single select mode
+      trackEvent("child_selected", {
+        childId: child.child_id,
+        childName: child.full_name,
+        siteId: child.site_id,
+        multiSelect: false,
+      });
+      onSelect(child);
+      onClose();
+    }
+  };
+
+  const handlePageChange = (newPage) => {
+    setPagination((prev) => ({ ...prev, page: newPage }));
+  };
+
+  const handleConfirmSelection = () => {
+    trackEvent("multi_select_confirmed", {
+      selectedCount: selectedChildrenState.length,
+      applicationContext,
+    });
+    onSelect(selectedChildrenState);
+    onClose();
+  };
+
+  const handleCancelSelection = () => {
+    trackEvent("multi_select_cancelled", {
+      applicationContext,
+    });
+    setSelectedChildrenState([]);
+    onClose();
+  };
+
+  const isChildSelected = (child) => {
+    return selectedChildrenState.some(
+      (selected) => selected.child_id === child.child_id
+    );
+  };
+
+  const formatAge = (years, months) => {
+    if (years && months) {
+      return `${years}y ${months}m`;
+    } else if (years) {
+      return `${years}y`;
+    } else if (months) {
+      return `${months}m`;
+    }
+    return "";
+  };
+
+  const formatDate = (dateString) => {
+    if (!dateString) return "";
+    return new Date(dateString).toLocaleDateString("en-GB");
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div
+        ref={modalRef}
+        className={`bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] flex flex-col ${className}`}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
+          <div className="flex items-center space-x-3">
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+              {title}
+            </h2>
+            {multiSelect && (
+              <span className="px-2 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 className="flex items-center space-x-2">
+            {multiSelect && selectedChildrenState.length > 0 && (
+              <>
+                <button
+                  onClick={handleConfirmSelection}
+                  className="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors text-sm"
+                >
+                  Confirm ({selectedChildrenState.length})
+                </button>
+                <button
+                  onClick={handleCancelSelection}
+                  className="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors text-sm"
+                >
+                  Cancel
+                </button>
+              </>
+            )}
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+            >
+              <svg
+                className="w-6 h-6"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* Search Input */}
+        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
+          <div className="relative">
+            <input
+              ref={searchInputRef}
+              type="text"
+              placeholder="Search by name or child ID..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full px-4 py-2 pl-10 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
+            />
+            <svg
+              className="absolute left-3 top-2.5 w-5 h-5 text-gray-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+              />
+            </svg>
+          </div>
+
+          {/* Advanced Filters Toggle */}
+          <div className="mt-4">
+            <button
+              onClick={() => setIsAdvancedFiltersOpen(!isAdvancedFiltersOpen)}
+              className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 flex items-center space-x-1"
+            >
+              <svg
+                className={`w-4 h-4 transition-transform ${
+                  isAdvancedFiltersOpen ? "rotate-180" : ""
+                }`}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M19 9l-7 7-7-7"
+                />
+              </svg>
+              <span>Advanced Filters</span>
+            </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,
+                      }))
+                    }
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm dark:bg-gray-600 dark:text-white"
+                  >
+                    <option value="all">All Children</option>
+                    <option value="active">Active Only</option>
+                    <option value="inactive">Inactive Only</option>
+                  </select>
+                </div>
+
+                {/* Site Filter */}
+                {showSiteFilter && 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,
+                        }))
+                      }
+                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm dark:bg-gray-600 dark:text-white"
+                    >
+                      <option value="">All Sites</option>
+                      {sites.map((site) => (
+                        <option key={site.site_id} value={site.site_id}>
+                          {site.site_name}
+                        </option>
+                      ))}
+                    </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,
+                      }))
+                    }
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm dark:bg-gray-600 dark:text-white"
+                  />
+                </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,
+                      }))
+                    }
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm dark:bg-gray-600 dark:text-white"
+                  />
+                </div>
+
+                {/* Age Range (in months) */}
+                <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,
+                      }))
+                    }
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm dark:bg-gray-600 dark:text-white"
+                    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,
+                      }))
+                    }
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm dark:bg-gray-600 dark:text-white"
+                    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,
+                      }))
+                    }
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm dark:bg-gray-600 dark:text-white"
+                  >
+                    <option value="last_name">Last Name</option>
+                    <option value="first_name">First Name</option>
+                    <option value="full_name">Full Name</option>
+                    <option value="date_of_birth">Date of Birth</option>
+                    <option value="site_name">Site Name</option>
+                  </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,
+                      }))
+                    }
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm dark:bg-gray-600 dark:text-white"
+                  >
+                    <option value="asc">Ascending</option>
+                    <option value="desc">Descending</option>
+                  </select>
+                </div>
+              </div>
+
+              {/* Clear Filters Button */}
+              <div className="mt-4 flex justify-end">
+                <button
+                  onClick={() =>
+                    setAdvancedFilters({
+                      status: activeOnly ? "active" : "all",
+                      selectedSiteId: "",
+                      dobFrom: "",
+                      dobTo: "",
+                      ageFrom: "",
+                      ageTo: "",
+                      sortBy: "last_name",
+                      sortOrder: "asc",
+                    })
+                  }
+                  className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"
+                >
+                  Clear Filters
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-hidden">
+          {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 && (
+            <div className="overflow-y-auto max-h-96">
+              {children.length === 0 ? (
+                <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>
+              ) : (
+                <div className="divide-y divide-gray-200 dark:divide-gray-700">
+                  {children.map((child) => {
+                    const isSelected = isChildSelected(child);
+                    return (
+                      <div
+                        key={child.child_id}
+                        onClick={() => handleChildSelect(child)}
+                        className={`p-4 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors ${
+                          isSelected && multiSelect
+                            ? "bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500"
+                            : ""
+                        }`}
+                      >
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center space-x-3 flex-1">
+                            {multiSelect && (
+                              <div className="flex-shrink-0">
+                                <div
+                                  className={`w-5 h-5 rounded border-2 flex items-center justify-center ${
+                                    isSelected
+                                      ? "bg-blue-500 border-blue-500"
+                                      : "border-gray-300 dark:border-gray-600"
+                                  }`}
+                                >
+                                  {isSelected && (
+                                    <svg
+                                      className="w-3 h-3 text-white"
+                                      fill="currentColor"
+                                      viewBox="0 0 20 20"
+                                    >
+                                      <path
+                                        fillRule="evenodd"
+                                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                        clipRule="evenodd"
+                                      />
+                                    </svg>
+                                  )}
+                                </div>
+                              </div>
+                            )}
+                            <div className="flex-1">
+                              <div className="flex items-center space-x-3">
+                                <h3 className="text-lg font-medium text-gray-900 dark:text-white">
+                                  {child.full_name}
+                                </h3>
+                                <span className="text-sm text-gray-500 dark:text-gray-400">
+                                  ID: {child.child_id}
+                                </span>
+                                {!child.is_active && (
+                                  <span className="px-2 py-1 text-xs bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 rounded-full">
+                                    Inactive
+                                  </span>
+                                )}
+                              </div>
+                              <div className="mt-1 text-sm text-gray-600 dark:text-gray-300">
+                                <span>{child.site_name}</span>
+                                {child.date_of_birth && (
+                                  <>
+                                    <span className="mx-2">•</span>
+                                    <span>
+                                      DOB: {formatDate(child.date_of_birth)}
+                                    </span>
+                                  </>
+                                )}
+                                {(child.age_years || child.age_months) && (
+                                  <>
+                                    <span className="mx-2">•</span>
+                                    <span>
+                                      Age:{" "}
+                                      {formatAge(
+                                        child.age_years,
+                                        child.age_months
+                                      )}
+                                    </span>
+                                  </>
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                          {!multiSelect && (
+                            <svg
+                              className="w-5 h-5 text-gray-400"
+                              fill="none"
+                              stroke="currentColor"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M9 5l7 7-7 7"
+                              />
+                            </svg>
+                          )}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Pagination */}
+        {!loading && !error && pagination.totalPages > 1 && (
+          <div className="p-6 border-t 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">
+                Showing {(pagination.page - 1) * pagination.pageSize + 1} to{" "}
+                {Math.min(
+                  pagination.page * pagination.pageSize,
+                  pagination.totalCount
+                )}{" "}
+                of {pagination.totalCount} children
+              </div>
+              <div className="flex space-x-2">
+                <button
+                  onClick={() => handlePageChange(pagination.page - 1)}
+                  disabled={!pagination.hasPreviousPage}
+                  className="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-700"
+                >
+                  Previous
+                </button>
+                <span className="px-3 py-1 text-sm text-gray-600 dark:text-gray-400">
+                  Page {pagination.page} of {pagination.totalPages}
+                </span>
+                <button
+                  onClick={() => handlePageChange(pagination.page + 1)}
+                  disabled={!pagination.hasNextPage}
+                  className="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-700"
+                >
+                  Next
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ChildSearchModal;