MERP: HR Management
The HR module of AL Muraba’s ERP. It keeps every employee’s civil-service record in one file.
Blurred on purpose: client work under NDA
Slide 1 of 13
Frontend developer · HR module
MERP is AL Muraba’s in-house ERP, an Arabic, right-to-left admin app with modules for common data, HR, archiving, projects and security. I was the main frontend developer on its HR module, which keeps each employee’s full civil-service record: employment history, grade and step, salary, certificates, thank-you letters and punishments, family and leave.
- A 12-tab employee file, each tab loaded the first time it opens
- Thank-you letters and punishments on one colour-coded timeline
- Study certificates with a university → college → department cascade
- A six-step wizard for adding a new employee
- Grade × step salary scale, salary strip and a per-employee HR summary
- Vue 3
- TypeScript
- Vite
- Vuetify 3
- Vuexy
- DevExtreme
- Pinia
- vue-i18n
- CASL
- Axios
- Keycloak
- ABP
How I built it
- Config-driven screens on a shared BaseDynamic grid, tree and form shell
- DevExtreme DataGrid and TreeList in a right-to-left Vuetify 3 UI
- CASL permissions built from ABP granted policies after Keycloak sign-in
- Reusable HR forms shared by grid drawers, profile dialogs and the wizard
- Cascading forms driven by API codes for certificates, addresses and salary
- Arabic-first vue-i18n with Arabic and English validators