@snapdragonsnursery/react-components 1.16.1 → 1.17.0

package/README.md

@@ -6,6 +6,8 @@ A collection of reusable React components for Snapdragons Nursery applications.
 
 - **ChildSearchModal**: Advanced child search and selection component with filtering, pagination, and multi-select capabilities
 - **ChildSearchFilters**: Advanced filtering component with date range picker, status, site, and age filters (includes Apply button for better UX)
+- **EmployeeSelect**: Lightweight, searchable employee selector with grouping and optional avatars
+- **EmployeeSearchModal**: Advanced employee search with server-side filtering, pagination, and complex filters
 - **DateRangePicker**: Shadcn-style date range picker component (supports optional presets)
 - **DatePicker**: Shadcn-style single date picker component
 - **Calendar**: Official shadcn calendar component
@@ -40,6 +42,44 @@ function MyComponent() {
 }
 ```
 
+### EmployeeSelect Example
+
+```jsx
+import { EmployeeSelect } from '@snapdragonsnursery/react-components';
+
+function MyComponent() {
+  const [selectedEntraId, setSelectedEntraId] = useState();
+  const employees = [
+    {
+      entra_id: '123-456',
+      full_name: 'Jane Smith',
+      site_name: 'Main Office',
+      role_name: 'Teacher',
+      employee_id: 'EMP001',
+      email: 'jane@example.com',
+      employee_status: 'Active'
+    },
+    // ... more employees
+  ];
+
+  return (
+    <EmployeeSelect
+      value={selectedEntraId}
+      onChange={setSelectedEntraId}
+      items={employees}
+      groupBy="site"
+      showAvatar
+      showSiteName
+      placeholder="Select an employee..."
+    />
+  );
+}
+```
+
+**EmployeeSelect vs EmployeeSearchModal**:
+- **EmployeeSelect**: Use for simple dropdown selection with pre-loaded employee data. Supports grouping by site/role, optional avatars, and built-in client-side search. Perfect for forms with limited employee lists.
+- **EmployeeSearchModal**: Use for advanced search scenarios requiring server-side filtering, pagination, complex multi-criteria filters, and multi-select. Ideal for large employee databases.
+
 ### SoftWarningAlert Example
 
 ```jsx
@@ -198,6 +238,7 @@ VITE_APIM_SCOPE=api://your-apim-app-id/.default
 
 - [ChildSearchModal Documentation](docs/CHILD_SEARCH_MODAL_DOCUMENTATION.md)
 - [ChildSearchModal README](docs/CHILD_SEARCH_README.md)
+- [EmployeeSelect Documentation](docs/EMPLOYEE_SELECT_DOCUMENTATION.md)
 - [Release Guide](./RELEASE.md)
 - [SoftWarningAlert](./SOFT_WARNING_ALERT.md)
 

package/package.json

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

package/src/components/EmployeeSelect.jsx

@@ -0,0 +1,259 @@
+// EmployeeSelect Component
+// A lightweight, searchable employee selector built with shadcn/ui primitives.
+// Use this for simple employee selection with pre-loaded data. For advanced search
+// with server-side filtering, pagination, and complex filters, use EmployeeSearchModal instead.
+//
+// Example:
+//   import { EmployeeSelect } from '@snapdragonsnursery/react-components'
+//   const [entraId, setEntraId] = useState()
+//   const { employees } = useAuth()
+//   <EmployeeSelect
+//     value={entraId}
+//     onChange={setEntraId}
+//     items={employees}
+//     groupBy="site"
+//     showAvatar
+//     showSiteName
+//   />
+//
+// Props:
+// - value?: string                       // selected entra_id
+// - onChange?: (entraId?: string) => void
+// - items: Array<employee>               // required employee list
+// - filter?: 'active' | 'all'           // filter by status (default: 'active')
+// - groupBy?: 'site' | 'role' | 'none'  // grouping (default: 'none')
+// - showAvatar?: boolean                 // show colored initials (default: false)
+// - showSiteName?: boolean               // show site below name (default: true)
+// - showEmployeeId?: boolean             // show employee ID below name (default: false)
+// - showEmail?: boolean                  // show email below name (default: false)
+// - placeholder?: string
+// - disabled?: boolean
+// - className?: string
+// - allowAll?: boolean                   // include "All employees" option
+// - allLabel?: string                    // custom label for all option
+// - maxHeight?: string                   // max height for dropdown (default: '160px')
+
+import React from "react";
+import { Users } from "lucide-react";
+import { cn } from "../lib/utils";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+
+export const EmployeeSelect = ({
+  value,
+  onChange,
+  items = [],
+  filter = "active",
+  groupBy = "none",
+  showAvatar = false,
+  showSiteName = true,
+  showEmployeeId = false,
+  showEmail = false,
+  placeholder = "Select employee…",
+  disabled = false,
+  className,
+  allowAll = false,
+  allLabel = "All employees",
+  maxHeight = "160px",
+}) => {
+  // Helper function to generate initials from full name
+  const getInitials = (name) => {
+    if (!name) return "??";
+    return name
+      .split(" ")
+      .map((word) => word.charAt(0))
+      .join("")
+      .toUpperCase()
+      .slice(0, 2);
+  };
+
+  // Helper function to get avatar color based on name
+  const getAvatarColor = (name) => {
+    if (!name) return "#6b7280";
+    // Generate a consistent color based on the name
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+      hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const hue = hash % 360;
+    return `hsl(${hue}, 70%, 50%)`;
+  };
+
+  const processedItems = React.useMemo(() => {
+    const list = Array.isArray(items) ? [...items] : [];
+
+    // Filter by employee status
+    const filtered = list.filter((e) => {
+      if (filter === "active") {
+        return e.employee_status === "Active";
+      }
+      return true; // 'all' - no filtering
+    });
+
+    // Map to consistent structure
+    const mapped = filtered
+      .map((e) => ({
+        entraId: String(e.entra_id || ""),
+        fullName: String(e.full_name || "Unknown"),
+        siteName: String(e.site_name || ""),
+        roleName: String(e.role_name || ""),
+        employeeId: String(e.employee_id || ""),
+        email: String(e.email || ""),
+      }))
+      .filter((e) => e.entraId); // Remove items without entra_id
+
+    // Sort based on grouping
+    mapped.sort((a, b) => {
+      if (groupBy === "site") {
+        const siteCompare = a.siteName.localeCompare(b.siteName);
+        if (siteCompare !== 0) return siteCompare;
+        return a.fullName.localeCompare(b.fullName);
+      }
+      if (groupBy === "role") {
+        const roleCompare = a.roleName.localeCompare(b.roleName);
+        if (roleCompare !== 0) return roleCompare;
+        return a.fullName.localeCompare(b.fullName);
+      }
+      return a.fullName.localeCompare(b.fullName);
+    });
+
+    return mapped;
+  }, [items, filter, groupBy]);
+
+  const selectedEmployee = processedItems.find((e) => e.entraId === value);
+
+  const renderEmployeeItem = (employee, isSelected = false) => (
+    <div className="flex items-center gap-2">
+      {showAvatar && !isSelected && (
+        <div
+          className="flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium text-white"
+          style={{ backgroundColor: getAvatarColor(employee.fullName) }}
+        >
+          {getInitials(employee.fullName)}
+        </div>
+      )}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="truncate">{employee.fullName}</span>
+        </div>
+        {showSiteName && employee.siteName && (
+          <div className="text-xs text-muted-foreground truncate">
+            {employee.siteName}
+          </div>
+        )}
+        {showEmployeeId && employee.employeeId && (
+          <div className="text-xs text-muted-foreground truncate">
+            ID: {employee.employeeId}
+          </div>
+        )}
+        {showEmail && employee.email && (
+          <div className="text-xs text-muted-foreground truncate">
+            {employee.email}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <Select
+      value={value || (allowAll ? "__all__" : undefined)}
+      onValueChange={(val) => {
+        if (val === "__all__") {
+          onChange?.(undefined);
+        } else {
+          onChange?.(val);
+        }
+      }}
+      disabled={disabled}
+    >
+      <SelectTrigger className={cn("w-full", className)}>
+        <div className="flex items-center gap-2">
+          {selectedEmployee && showAvatar ? (
+            <div
+              className="flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium text-white"
+              style={{ backgroundColor: getAvatarColor(selectedEmployee.fullName) }}
+            >
+              {getInitials(selectedEmployee.fullName)}
+            </div>
+          ) : (
+            <Users className="h-4 w-4" />
+          )}
+          <SelectValue placeholder={placeholder} />
+        </div>
+      </SelectTrigger>
+      <SelectContent
+        className="[&_[data-radix-select-viewport]]:max-h-[var(--select-max-height)] [&_[data-radix-select-viewport]]:overflow-y-auto [&>button[data-radix-select-scroll-up-button]]:hidden [&>button[data-radix-select-scroll-down-button]]:hidden"
+        style={{ "--select-max-height": maxHeight }}
+      >
+        {allowAll && <SelectItem value="__all__">{allLabel}</SelectItem>}
+        {groupBy === "site"
+          ? // Group by site
+            Object.entries(
+              processedItems.reduce((groups, employee) => {
+                const site = employee.siteName || "Other";
+                if (!groups[site]) groups[site] = [];
+                groups[site].push(employee);
+                return groups;
+              }, {})
+            ).map(([siteName, employees]) => (
+              <div key={siteName}>
+                <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                  {siteName}
+                </div>
+                {employees.map((employee) => {
+                  const isSelected = value === employee.entraId;
+                  return (
+                    <SelectItem key={employee.entraId} value={employee.entraId}>
+                      {renderEmployeeItem(employee, isSelected)}
+                    </SelectItem>
+                  );
+                })}
+              </div>
+            ))
+          : groupBy === "role"
+            ? // Group by role
+              Object.entries(
+                processedItems.reduce((groups, employee) => {
+                  const role = employee.roleName || "Other";
+                  if (!groups[role]) groups[role] = [];
+                  groups[role].push(employee);
+                  return groups;
+                }, {})
+              ).map(([roleName, employees]) => (
+                <div key={roleName}>
+                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                    {roleName}
+                  </div>
+                  {employees.map((employee) => {
+                    const isSelected = value === employee.entraId;
+                    return (
+                      <SelectItem key={employee.entraId} value={employee.entraId}>
+                        {renderEmployeeItem(employee, isSelected)}
+                      </SelectItem>
+                    );
+                  })}
+                </div>
+              ))
+            : // No grouping
+              processedItems.map((employee) => {
+                const isSelected = value === employee.entraId;
+                return (
+                  <SelectItem key={employee.entraId} value={employee.entraId}>
+                    {renderEmployeeItem(employee, isSelected)}
+                  </SelectItem>
+                );
+              })}
+      </SelectContent>
+    </Select>
+  );
+};
+
+export default EmployeeSelect;
+

package/src/index.js

@@ -16,6 +16,7 @@ export { default as EmployeeSearchPage } from "./EmployeeSearchPage.jsx";
 export { default as EmployeeSearchModal } from "./EmployeeSearchModal.jsx";
 export { default as EmployeeSearchDemo } from "./EmployeeSearchDemo.jsx";
 export { default as EmployeeSearchFilters } from "./components/EmployeeSearchFilters.jsx";
+export { default as EmployeeSelect } from "./components/EmployeeSelect.jsx";
 
 export { configureTelemetry } from "./telemetry.js";