@snapdragonsnursery/react-components 1.2.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/EmployeeSearchDemo.jsx

@@ -0,0 +1,275 @@
+// Employee Search Demo Component
+// Demonstrates the employee search functionality with various configurations and examples
+// Usage: <EmployeeSearchDemo />
+
+import React, { useState } from "react";
+import EmployeeSearchPage from "./EmployeeSearchPage";
+import EmployeeSearchModal from "./EmployeeSearchModal";
+import { Button } from "./components/ui/button";
+
+const EmployeeSearchDemo = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedEmployee, setSelectedEmployee] = useState(null);
+  const [selectedEmployees, setSelectedEmployees] = useState([]);
+
+  // Mock data for demonstration
+  const mockSites = [
+    { site_id: 1, site_name: "Nursery A" },
+    { site_id: 2, site_name: "Nursery B" },
+    { site_id: 3, site_name: "Nursery C" },
+  ];
+
+  const mockRoles = [
+    { role_id: 1, role_name: "Manager" },
+    { role_id: 2, role_name: "Deputy Manager" },
+    { role_id: 3, role_name: "Room Leader" },
+    { role_id: 4, role_name: "Early Years Practitioner" },
+    { role_id: 5, role_name: "Apprentice" },
+  ];
+
+  const mockManagers = [
+    { entra_id: "manager1", full_name: "John Smith" },
+    { entra_id: "manager2", full_name: "Jane Doe" },
+    { entra_id: "manager3", full_name: "Bob Johnson" },
+  ];
+
+  const handleEmployeeSelect = (employee) => {
+    setSelectedEmployee(employee);
+    console.log("Selected employee:", employee);
+  };
+
+  const handleEmployeesSelect = (employees) => {
+    setSelectedEmployees(employees);
+    console.log("Selected employees:", employees);
+  };
+
+  const handleModalEmployeeSelect = (employee) => {
+    setSelectedEmployee(employee);
+    console.log("Modal selected employee:", employee);
+  };
+
+  const handleModalEmployeesSelect = (employees) => {
+    setSelectedEmployees(employees);
+    console.log("Modal selected employees:", employees);
+  };
+
+  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 mb-4">
+            Employee Search Demo
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400">
+            This demo showcases the employee search functionality with various configurations.
+          </p>
+        </div>
+
+        {/* Demo Controls */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-8">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            Demo Controls
+          </h2>
+          
+          <div className="flex flex-wrap gap-4">
+            <Button
+              onClick={() => setIsModalOpen(true)}
+              variant="outline"
+            >
+              Open Employee Search Modal
+            </Button>
+            
+            <Button
+              onClick={() => setIsModalOpen(true)}
+              variant="outline"
+            >
+              Open Multi-Select Modal
+            </Button>
+          </div>
+
+          {/* Selected Employee Display */}
+          {selectedEmployee && (
+            <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+              <h3 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">
+                Selected Employee:
+              </h3>
+              <div className="text-sm text-blue-800 dark:text-blue-200">
+                <p><strong>Name:</strong> {selectedEmployee.full_name}</p>
+                <p><strong>ID:</strong> {selectedEmployee.employee_id}</p>
+                <p><strong>Site:</strong> {selectedEmployee.site_name}</p>
+                <p><strong>Role:</strong> {selectedEmployee.role_name}</p>
+                <p><strong>Status:</strong> {selectedEmployee.employee_status}</p>
+              </div>
+            </div>
+          )}
+
+          {/* Selected Employees Display */}
+          {selectedEmployees.length > 0 && (
+            <div className="mt-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
+              <h3 className="text-sm font-medium text-green-900 dark:text-green-100 mb-2">
+                Selected Employees ({selectedEmployees.length}):
+              </h3>
+              <div className="flex flex-wrap gap-2">
+                {selectedEmployees.map((employee) => (
+                  <span key={employee.entra_id} className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
+                    {employee.full_name}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Configuration Examples */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+          {/* Basic Employee Search */}
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+              Basic Employee Search
+            </h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+              Simple employee search with default filters and single selection.
+            </p>
+            <EmployeeSearchPage
+              title="Basic Employee Search"
+              onSelect={handleEmployeeSelect}
+              sites={mockSites}
+              roles={mockRoles}
+              managers={mockManagers}
+              showRoleFilter={true}
+              showManagerFilter={true}
+              showTermTimeFilter={false}
+              showMaternityFilter={false}
+              showStartDateFilter={true}
+              showEndDateFilter={false}
+              showDbsFilter={false}
+              showWorkingHoursFilter={false}
+            />
+          </div>
+
+          {/* Advanced Employee Search */}
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+              Advanced Employee Search
+            </h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+              Full-featured employee search with all filters and multi-selection.
+            </p>
+            <EmployeeSearchPage
+              title="Advanced Employee Search"
+              onSelect={handleEmployeesSelect}
+              multiSelect={true}
+              maxSelections={5}
+              sites={mockSites}
+              roles={mockRoles}
+              managers={mockManagers}
+              showRoleFilter={true}
+              showManagerFilter={true}
+              showTermTimeFilter={true}
+              showMaternityFilter={true}
+              showStartDateFilter={true}
+              showEndDateFilter={true}
+              showDbsFilter={true}
+              showWorkingHoursFilter={true}
+            />
+          </div>
+        </div>
+
+        {/* Site-Specific Search */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-8">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+            Site-Specific Employee Search
+          </h3>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+            Employee search restricted to a specific site with custom filters.
+          </p>
+          <EmployeeSearchPage
+            title="Site-Specific Search"
+            siteId={1}
+            onSelect={handleEmployeeSelect}
+            sites={mockSites}
+            roles={mockRoles}
+            managers={mockManagers}
+            showRoleFilter={true}
+            showManagerFilter={false}
+            showTermTimeFilter={true}
+            showMaternityFilter={true}
+            showStartDateFilter={true}
+            showEndDateFilter={false}
+            showDbsFilter={false}
+            showWorkingHoursFilter={true}
+          />
+        </div>
+
+        {/* Status-Filtered Search */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-8">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+            Active Employees Only
+          </h3>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+            Employee search showing only active employees with minimal filters.
+          </p>
+          <EmployeeSearchPage
+            title="Active Employees"
+            activeOnly={true}
+            onSelect={handleEmployeeSelect}
+            sites={mockSites}
+            roles={mockRoles}
+            managers={mockManagers}
+            showRoleFilter={true}
+            showManagerFilter={false}
+            showTermTimeFilter={false}
+            showMaternityFilter={false}
+            showStartDateFilter={false}
+            showEndDateFilter={false}
+            showDbsFilter={false}
+            showWorkingHoursFilter={false}
+          />
+        </div>
+
+        {/* Employee Search Modal */}
+        <EmployeeSearchModal
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+          onSelect={handleModalEmployeeSelect}
+          title="Select Employee"
+          sites={mockSites}
+          roles={mockRoles}
+          managers={mockManagers}
+          showRoleFilter={true}
+          showManagerFilter={true}
+          showTermTimeFilter={true}
+          showMaternityFilter={true}
+          showStartDateFilter={true}
+          showEndDateFilter={true}
+          showDbsFilter={true}
+          showWorkingHoursFilter={true}
+        />
+
+        {/* Multi-Select Modal */}
+        <EmployeeSearchModal
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+          onSelect={handleModalEmployeesSelect}
+          title="Select Multiple Employees"
+          multiSelect={true}
+          maxSelections={10}
+          sites={mockSites}
+          roles={mockRoles}
+          managers={mockManagers}
+          showRoleFilter={true}
+          showManagerFilter={true}
+          showTermTimeFilter={true}
+          showMaternityFilter={true}
+          showStartDateFilter={true}
+          showEndDateFilter={true}
+          showDbsFilter={true}
+          showWorkingHoursFilter={true}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default EmployeeSearchDemo;