@snapdragonsnursery/react-components 1.16.1 → 1.17.1

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.1",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -45,6 +45,7 @@
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",

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/components/ui/select.jsx

@@ -1,34 +1,155 @@
-// shadcn-style Select component
-// Provides consistent select styling across the application
+//
+// select.jsx
+// -----------
+// shadcn/ui Select component wrappers using @radix-ui/react-select.
+// Import and use in forms for consistent dropdown styling.
+//
+// Example:
+// <Select value={value} onValueChange={setValue}>
+//   <SelectTrigger className="w-full"><SelectValue placeholder="Select..." /></SelectTrigger>
+//   <SelectContent>
+//     <SelectItem value="site">Nursery site</SelectItem>
+//     <SelectItem value="custom">Custom address</SelectItem>
+//   </SelectContent>
+// </Select>
 
 import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import { cn } from "../../lib/utils";
 
-const Select = React.forwardRef(({ className, children, ...props }, ref) => {
-  return (
-    <select
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background",
+      "placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "[&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
       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",
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       )}
-      ref={ref}
+      position={position}
       {...props}
     >
-      {children}
-    </select>
-  );
-});
-Select.displayName = "Select";
-
-const SelectOption = React.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <option className={cn("", className)} ref={ref} {...props}>
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
         {children}
-      </option>
-    );
-  }
-);
-SelectOption.displayName = "SelectOption";
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none",
+      "focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
-export { Select, SelectOption };
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+};

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";