@snapdragonsnursery/react-components 1.0.0

package/src/ChildSearchDemo.jsx

@@ -0,0 +1,478 @@
+import React, { useState } from "react";
+import ChildSearchModal from "./ChildSearchModal";
+
+const ChildSearchDemo = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedChild, setSelectedChild] = useState(null);
+  const [demoConfig, setDemoConfig] = useState({
+    siteId: null,
+    siteIds: null, // Array for multi-site search
+    sites: null, // Array of site objects from useUserSites hook
+    activeOnly: true,
+    status: "active",
+    dobFrom: "",
+    dobTo: "",
+    ageFrom: "",
+    ageTo: "",
+    sortBy: "last_name",
+    sortOrder: "asc",
+    bypassPermissions: false,
+    showSiteFilter: true,
+    multiSelect: false,
+    maxSelections: null,
+  });
+
+  // Mock sites data for demo purposes
+  const mockSites = [
+    { site_id: 1, site_name: "Nursery A" },
+    { site_id: 2, site_name: "Nursery B" },
+    { site_id: 3, site_name: "Nursery C" },
+  ];
+
+  const handleChildSelect = (child) => {
+    if (demoConfig.multiSelect) {
+      // Multi-select mode - child is an array
+      setSelectedChild(child);
+      console.log("Selected children:", child);
+    } else {
+      // Single select mode - child is a single object
+      setSelectedChild(child);
+      console.log("Selected child:", child);
+    }
+  };
+
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto">
+      <h1 className="text-2xl font-bold mb-6">Child Search Modal Demo</h1>
+
+      {/* Configuration */}
+      <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg mb-6">
+        <h2 className="text-lg font-semibold mb-4">Configuration</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <div>
+            <label className="block text-sm font-medium mb-2">
+              Site ID (optional)
+            </label>
+            <input
+              type="number"
+              value={demoConfig.siteId || ""}
+              onChange={(e) =>
+                setDemoConfig((prev) => ({
+                  ...prev,
+                  siteId: e.target.value ? parseInt(e.target.value) : null,
+                }))
+              }
+              placeholder="Leave empty for all sites"
+              className="w-full px-3 py-2 border border-gray-300 rounded-md"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-2">
+              Site IDs (comma-separated)
+            </label>
+            <input
+              type="text"
+              value={demoConfig.siteIds ? demoConfig.siteIds.join(",") : ""}
+              onChange={(e) =>
+                setDemoConfig((prev) => ({
+                  ...prev,
+                  siteIds: e.target.value
+                    ? e.target.value
+                        .split(",")
+                        .map((id) => parseInt(id.trim()))
+                        .filter((id) => !isNaN(id))
+                    : null,
+                }))
+              }
+              placeholder="1,2,3 for multiple sites"
+              className="w-full px-3 py-2 border border-gray-300 rounded-md"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-2">Status</label>
+            <select
+              value={demoConfig.status}
+              onChange={(e) =>
+                setDemoConfig((prev) => ({
+                  ...prev,
+                  status: e.target.value,
+                }))
+              }
+              className="w-full px-3 py-2 border border-gray-300 rounded-md"
+            >
+              <option value="active">Active only</option>
+              <option value="inactive">Inactive only</option>
+              <option value="all">All children</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-2">
+              Bypass Permissions
+            </label>
+            <select
+              value={demoConfig.bypassPermissions.toString()}
+              onChange={(e) =>
+                setDemoConfig((prev) => ({
+                  ...prev,
+                  bypassPermissions: e.target.value === "true",
+                }))
+              }
+              className="w-full px-3 py-2 border border-gray-300 rounded-md"
+            >
+              <option value="false">Use permissions</option>
+              <option value="true">Bypass permissions</option>
+            </select>
+          </div>
+        </div>
+
+        {/* Selection Mode Configuration */}
+        <div className="mt-4 p-4 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg">
+          <h3 className="text-sm font-semibold text-purple-800 dark:text-purple-200 mb-3">
+            Selection Mode
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div>
+              <label className="block text-sm font-medium mb-2">
+                Selection Mode
+              </label>
+              <select
+                value={demoConfig.multiSelect ? "multi" : "single"}
+                onChange={(e) =>
+                  setDemoConfig((prev) => ({
+                    ...prev,
+                    multiSelect: e.target.value === "multi",
+                  }))
+                }
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              >
+                <option value="single">Single Selection</option>
+                <option value="multi">Multi Selection</option>
+              </select>
+            </div>
+            {demoConfig.multiSelect && (
+              <>
+                <div>
+                  <label className="block text-sm font-medium mb-2">
+                    Max Selections
+                  </label>
+                  <select
+                    value={demoConfig.maxSelections || "unlimited"}
+                    onChange={(e) =>
+                      setDemoConfig((prev) => ({
+                        ...prev,
+                        maxSelections:
+                          e.target.value === "unlimited"
+                            ? null
+                            : parseInt(e.target.value),
+                      }))
+                    }
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                  >
+                    <option value="unlimited">Unlimited</option>
+                    <option value="5">5 children</option>
+                    <option value="10">10 children</option>
+                    <option value="20">20 children</option>
+                  </select>
+                </div>
+                <div className="flex items-end">
+                  <button
+                    onClick={() => setSelectedChild(null)}
+                    className="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600"
+                  >
+                    Clear Selection
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* Site Configuration */}
+        <div className="mt-4 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
+          <h3 className="text-sm font-semibold text-green-800 dark:text-green-200 mb-3">
+            Site Configuration
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium mb-2">
+                Use Mock Sites
+              </label>
+              <select
+                value={demoConfig.sites ? "mock" : "none"}
+                onChange={(e) =>
+                  setDemoConfig((prev) => ({
+                    ...prev,
+                    sites: e.target.value === "mock" ? mockSites : null,
+                  }))
+                }
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              >
+                <option value="none">No sites (use permissions)</option>
+                <option value="mock">Use mock sites (demo)</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-2">
+                Show Site Filter
+              </label>
+              <select
+                value={demoConfig.showSiteFilter.toString()}
+                onChange={(e) =>
+                  setDemoConfig((prev) => ({
+                    ...prev,
+                    showSiteFilter: e.target.value === "true",
+                  }))
+                }
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              >
+                <option value="true">Show site filter</option>
+                <option value="false">Hide site filter</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        {/* Advanced Configuration */}
+        <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+          <h3 className="text-sm font-semibold text-blue-800 dark:text-blue-200 mb-3">
+            Advanced Configuration
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            <div>
+              <label className="block text-sm font-medium mb-2">DOB From</label>
+              <input
+                type="date"
+                value={demoConfig.dobFrom}
+                onChange={(e) =>
+                  setDemoConfig((prev) => ({
+                    ...prev,
+                    dobFrom: e.target.value,
+                  }))
+                }
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-2">DOB To</label>
+              <input
+                type="date"
+                value={demoConfig.dobTo}
+                onChange={(e) =>
+                  setDemoConfig((prev) => ({
+                    ...prev,
+                    dobTo: e.target.value,
+                  }))
+                }
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-2">
+                Age From (months)
+              </label>
+              <input
+                type="number"
+                min="0"
+                value={demoConfig.ageFrom}
+                onChange={(e) =>
+                  setDemoConfig((prev) => ({
+                    ...prev,
+                    ageFrom: e.target.value,
+                  }))
+                }
+                placeholder="0"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-2">
+                Age To (months)
+              </label>
+              <input
+                type="number"
+                min="0"
+                value={demoConfig.ageTo}
+                onChange={(e) =>
+                  setDemoConfig((prev) => ({
+                    ...prev,
+                    ageTo: e.target.value,
+                  }))
+                }
+                placeholder="60"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              />
+            </div>
+          </div>
+          <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium mb-2">Sort By</label>
+              <select
+                value={demoConfig.sortBy}
+                onChange={(e) =>
+                  setDemoConfig((prev) => ({
+                    ...prev,
+                    sortBy: e.target.value,
+                  }))
+                }
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              >
+                <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 mb-2">
+                Sort Order
+              </label>
+              <select
+                value={demoConfig.sortOrder}
+                onChange={(e) =>
+                  setDemoConfig((prev) => ({
+                    ...prev,
+                    sortOrder: e.target.value,
+                  }))
+                }
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              >
+                <option value="asc">Ascending</option>
+                <option value="desc">Descending</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Open Modal Button */}
+      <div className="mb-6">
+        <button
+          onClick={openModal}
+          className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors"
+        >
+          Open Child Search Modal
+        </button>
+      </div>
+
+      {/* Selected Child Display */}
+      {selectedChild && (
+        <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 mb-6">
+          <h3 className="text-lg font-semibold text-green-800 dark:text-green-200 mb-2">
+            {demoConfig.multiSelect ? "Selected Children" : "Selected Child"}
+          </h3>
+          <div className="text-green-700 dark:text-green-300">
+            {demoConfig.multiSelect && Array.isArray(selectedChild) ? (
+              // Multi-select display
+              <div>
+                <p className="mb-2">
+                  <strong>Total Selected:</strong> {selectedChild.length}
+                  {demoConfig.maxSelections && ` / ${demoConfig.maxSelections}`}
+                </p>
+                <div className="space-y-2 max-h-60 overflow-y-auto">
+                  {selectedChild.map((child, index) => (
+                    <div
+                      key={child.child_id}
+                      className="p-2 bg-white dark:bg-gray-800 rounded border"
+                    >
+                      <p>
+                        <strong>{index + 1}.</strong> {child.full_name} (ID:{" "}
+                        {child.child_id})
+                      </p>
+                      <p className="text-sm">
+                        Site: {child.site_name} • DOB:{" "}
+                        {child.date_of_birth
+                          ? new Date(child.date_of_birth).toLocaleDateString(
+                              "en-GB"
+                            )
+                          : "N/A"}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              // Single select display
+              <div>
+                <p>
+                  <strong>Name:</strong> {selectedChild.full_name}
+                </p>
+                <p>
+                  <strong>ID:</strong> {selectedChild.child_id}
+                </p>
+                <p>
+                  <strong>Site:</strong> {selectedChild.site_name}
+                </p>
+                <p>
+                  <strong>Date of Birth:</strong>{" "}
+                  {selectedChild.date_of_birth
+                    ? new Date(selectedChild.date_of_birth).toLocaleDateString(
+                        "en-GB"
+                      )
+                    : "N/A"}
+                </p>
+                <p>
+                  <strong>Age:</strong> {selectedChild.age_years || 0}y{" "}
+                  {selectedChild.age_months || 0}m
+                </p>
+                <p>
+                  <strong>Status:</strong>{" "}
+                  {selectedChild.is_active ? "Active" : "Inactive"}
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Usage Instructions */}
+      <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+        <h3 className="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-2">
+          Usage Instructions
+        </h3>
+        <div className="text-blue-700 dark:text-blue-300 space-y-2">
+          <p>• Click "Open Child Search Modal" to open the search interface</p>
+          <p>• Type in the search box to find children by name or ID</p>
+          <p>• Click on a child to select them</p>
+          <p>• Use the pagination controls to navigate through results</p>
+          <p>• The modal will close automatically when a child is selected</p>
+        </div>
+      </div>
+
+      {/* Child Search Modal */}
+      <ChildSearchModal
+        isOpen={isModalOpen}
+        onClose={closeModal}
+        onSelect={handleChildSelect}
+        title="Search Children"
+        siteId={demoConfig.siteId}
+        siteIds={demoConfig.siteIds}
+        sites={demoConfig.sites}
+        activeOnly={demoConfig.activeOnly}
+        status={demoConfig.status}
+        dobFrom={demoConfig.dobFrom}
+        dobTo={demoConfig.dobTo}
+        ageFrom={demoConfig.ageFrom}
+        ageTo={demoConfig.ageTo}
+        sortBy={demoConfig.sortBy}
+        sortOrder={demoConfig.sortOrder}
+        bypassPermissions={demoConfig.bypassPermissions}
+        applicationContext="child-search-demo"
+        showAdvancedFilters={true}
+        showSiteFilter={demoConfig.showSiteFilter}
+        multiSelect={demoConfig.multiSelect}
+        maxSelections={demoConfig.maxSelections}
+      />
+    </div>
+  );
+};
+
+export default ChildSearchDemo;