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 lets you add employees directly from the browser without editing any files. Clicking the Add Employee button reveals an inline form. Once you fill in the required fields and submit, the new employee is inserted into the list in alphabetical order and the form closes automatically.

​
Opening and closing the form

The Add Employee button sits at the top of the app. Clicking it toggles a boolean in React state (showingAddEmployee). When the state is true, the AddEmployee component renders below the button. Clicking Cancel — or successfully submitting the form — sets the state back to false and hides the form.

​
Form fields

FieldTypeRequiredDescription
NametextYesThe employee’s full display name
PhonetextYesContact phone number (any format)
EmailemailYesContact email address, validated by the browser
MondaycheckboxNoInclude Monday as a workday
TuesdaycheckboxNoInclude Tuesday as a workday
WednesdaycheckboxNoInclude Wednesday as a workday
ThursdaycheckboxNoInclude Thursday as a workday
FridaycheckboxNoInclude Friday as a workday

​
How the form works

The AddEmployee component (src/addEmployee.jsx) holds all field values in a single state object. Text inputs are handled by handleInputChange, which spreads the existing state and overwrites the changed key. Workday checkboxes are handled by handleCheckboxChange, which does the same inside the nested workdays object. 
function handleInputChange(e) {
  const { name, value } = e.target;
  setEmployee({
    ...Employee,
    [name]: value,
  });
}

function handleCheckboxChange(e) {
  const { name, checked } = e.target;
  setEmployee({
    ...Employee,
    workdays: {
      ...Employee.workdays,
      [name]: checked,
    },
  });
}
On submission, handleSubmit prevents the default form behaviour and passes the assembled employee object up to App.jsx via the addEmployee prop: 
function handleSubmit(e) {
  e.preventDefault();
  addEmployee(Employee);
}
App.jsx then merges the new employee into the existing array, re-sorts the entire list with localeCompare, updates state, and sets showingAddEmployee to false — closing the form.

​
Step-by-step

1

Open the form

Click Add Employee at the top of the page. The form expands below the button.
2

Enter contact details

Fill in the Name, Phone, and Email fields. All three are required — the browser will block submission if any are empty or if the email is malformed.
3

Select workdays

Check any combination of Monday through Friday to mark the employee’s schedule. All days default to unchecked.
4

Submit

Click Add. The employee is inserted into the list in alphabetical order and the form closes.
Employees added through the form exist only in React state for the current browser session. They are not written back to public/employees.json, so they will disappear on the next page load or refresh.
To add employees that persist across page loads, open public/employees.json and append a new entry following the existing structure. The file is fetched on every app start, so your additions will appear automatically on the next load. See Employee data format for the required fields.

Build docs developers (and LLMs) love

Get started for freeTalk to us