Frontend

Devlog Week 15: Frontend Final Wrap-Up (From Kickoff to Deployed App) # When I wrote the first frontend entry (Week 9), the React app was basically a shell: Vite setup, a layout route, a drawer menu, and a couple of placeholder pages driven by mock data.

Devlog Week 14: Manager/Admin Flows, Create Pages, and Session Expiry Handling # This entry covers the manager/admin-facing workflows (create pages and domain admin actions), and ends with a centralized error-handling + session expiry (token expiration) flow to keep UX consistent across the app.

Devlog Week 13: Employee Lists, Log Views, and LogCard Refactor # This entry focuses on the employee list + employee log viewing flows, plus a refactor of LogCard to support reuse across more contexts (and avoid invalid nested interactive elements).

Devlog Week 12: User Profiles, Employee Admin Actions, and Form Patterns # This entry covers the employee-facing parts of the UI: profile views, edit flows, admin actions, and the form patterns used to keep components maintainable. What Changed # UserProfile supports both “me” and viewing other employees via dynamic route params Profile page extracted into focused subcomponents: EditProfileForm, AdminActions, PasswordChangeForm Form handling uses a mix of controlled inputs and a FormData approach (when appropriate) useEffect race-condition prevention via an ignore flag to avoid setting state after unmount Admin-only employee actions (deactivate/reactivate) gated by role and disallowed on own profile User Profile: “Me” vs “Other Employee” # The profile route supports multiple entry points:

Devlog Week 11: Assets, Logs, Filtering, and Creating Maintenance Entries # This entry focuses on the asset/log workflow: fetching real data from the API, filtering lists, displaying asset details, and adding log creation behind role checks. What Changed # AssetList now fetches from the real backend API Active/inactive filtering implemented via a reusable Select component AssetDetail fetches asset + logs in parallel using Promise.all Status and task type filters wired to server-side filtering “Create log” is role-gated (TECHNICIAN+) and also hidden for inactive assets CreateLog includes client-side validation and prevents double-submit CSS Modules adopted for scoped styling Asset List: Fetch + Filter Pattern # AssetList implements a reusable pattern used elsewhere in the frontend:

Devlog Week 10: Frontend Auth, Routing, and API Client Structure # This entry covers the “plumbing” for the React frontend: the route layout, guarded routes by role, auth rehydration, and an API layer split by domain. What Changed # Vite + React + React Router setup with a domain-organized structure (pages/, components/, utils/, context/, styles/) Declarative nested routing with a layout route and <Outlet /> Auth context for user state, token rehydration, and role checks ProtectedRoute component for nestable route protection API layer split by domain with a shared apiRequest() helper Routing: Nested Layout + Guards # The router is set up as nested routes:

Devlog Week 9: React Frontend Kickoff (Vite, Routing, Layout) # This week starts the frontend phase of the Maintenance Log project. The focus was not new domain functionality yet, but establishing a clean React baseline: routing, layout composition, reusable UI building blocks, and a consistent styling foundation.