Municipal seal
General Services Office
Municipality of Barotac Nuevo
System UI Documentation

Components / Feedback & Alerts

Standard modals, confirmations, success toasts, and error handling for IMS.
Confirmation Modal Pattern
Use this before doing destructive or important actions (delete record, approve PR, finalize PO, etc.).
JS (sample):
if (user confirms) → run backend → show success toast
Action Success Toast / Alert
Use after successful save / delete / update. Auto-dismiss after ~3 seconds. Default position: upper right for normal success. You can also show it centered if it's a big/important notice.
Recommended timer:
const delayMs = 3000; // 3 seconds
Error / Warning Modal
Use this for validation failures, blocked actions, missing required fields, etc. This is more "stop now" compared to toast.
Error modal is blocking (user must click Close / Fix). Toast is passive (just informs).
Note: You can reuse these components across modules. Just change inner text (title, message), and call the same show/hide functions.
Confirm Action
Are you sure you want to continue?
This action may affect records in the system. Please double-check.
Success
Record saved.
Heads up
System note here.
Error
Something went wrong. Please try again.
Internal code: ERR-001
Contact system admin if this repeats.
Routing Status
Current routing progress.
Shows who has it now and who signs next.
Export Report