Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/y-broad/workschedule/llms.txt

Use this file to discover all available pages before exploring further.

The Work Schedule Organizer includes a workday filter that sits directly above the employee grid. A row of five checkboxes — one for each weekday — lets you instantly narrow the list to employees who work on any of the selected days. The filter updates the view on every checkbox change with no submit button required.

​
The filter component

The WorkDayFilter component (src/workDayFilter.jsx) manages its own selectedDays state object. Each checkbox is a controlled input bound to the corresponding boolean in that object. Whenever a checkbox changes, handleCheckboxChange updates the state and immediately calls the filterEmployees callback passed down from the parent Employees component. 
export default function WorkDayFilter({ filterEmployees }) {
  const [selectedDays, setSelectedDays] = useState({
    monday: false,
    tuesday: false,
    wednesday: false,
    thursday: false,
    friday: false,
  });
  const { monday, tuesday, wednesday, thursday, friday } = selectedDays;

  function handleCheckboxChange(event) {
    const { name, checked } = event.target;
    const updatedDays = {
      ...selectedDays,
      [name]: checked,
    };
    setSelectedDays(updatedDays);
    filterEmployees(updatedDays);
  }

  return (
    <form className="filter">
      <label>Filter by workdays:</label>
      <label>
        <input type="checkbox" checked={monday} onChange={handleCheckboxChange} name="monday" />
        Monday
      </label>
      <label>
        <input type="checkbox" checked={tuesday} onChange={handleCheckboxChange} name="tuesday" />
        Tuesday
      </label>
      <label>
        <input type="checkbox" checked={wednesday} onChange={handleCheckboxChange} name="wednesday" />
        Wednesday
      </label>
      <label>
        <input type="checkbox" checked={thursday} onChange={handleCheckboxChange} name="thursday" />
        Thursday
      </label>
      <label>
        <input type="checkbox" checked={friday} onChange={handleCheckboxChange} name="friday" />
        Friday
      </label>
    </form>
  );
}

​
Filter logic

The filterEmployees function in Employees (src/employees.jsx) receives the updated selectedDays object and iterates over every employee. For each employee it loops over the selected days: as soon as it finds a day that is both selected in the filter and marked as a workday for that employee, it returns true and includes them in the results. 
function filterEmployees(selectedDays) {
  const filtered = employees.filter((employee) => {
    for (const day in selectedDays) {
      if (selectedDays[day] && employee.workdays[day]) {
        return true;
      }
    }
    return false;
  });
  if (filtered.length === 0) {
    return setFilteredEmployees(null);
  }
  setFilteredEmployees(filtered);
}
The filter uses OR logic: an employee is shown if they work on at least one of the selected days. Selecting Wednesday and Friday will include any employee who works Wednesday, any employee who works Friday, and any employee who works both — it will not restrict the list to employees who work all selected days.

​
Edge cases

No days selected — when all checkboxes are unchecked, filterEmployees is still called on each change, but every day in selectedDays is false. No employee passes the selectedDays[day] && employee.workdays[day] check, so filtered is empty and setFilteredEmployees(null) is called. The Employees component falls back to the full unfiltered list: 
const currentEmployees = filteredEmployees ? filteredEmployees : employees;
Because null is falsy, currentEmployees resolves to the full employees array and all cards are shown. A day is selected but no employees match — if the filtered array is empty, setFilteredEmployees(null) is called. Because null is falsy, currentEmployees resolves to the full employees array, so the full roster is displayed rather than an empty grid. This means there is no “no results” state — when no employees work on the selected day, the filter silently reverts to showing everyone. To display an explicit empty state instead, filterEmployees would need to store an empty array in state rather than resetting to null.

Build docs developers (and LLMs) love

Get started for freeTalk to us