# Tenant API Integration TODO

- [x] Review existing tenant API and UI navigation/routes (done in analysis)
- [x] Add tenant service for API CRUD in `src/services/tenantService.js`
- [x] Add tenant route in `src/router/index.js`
- [x] Add tenant menu item in `src/_nav.js`
- [x] Create tenant page `src/views/tenants/Tenants.vue` and integrate list API
- [x] Verify integration consistency

# Tenant CRUD UI TODO

- [x] Upgrade `src/views/tenants/Tenants.vue` to full CRUD page
- [x] Integrate create/read/update/delete flows with `tenantService`
- [x] Add form validation for `tenant_code`, `tenant_name`, `status`
- [x] Add detail modal and delete confirmation
- [x] Final consistency review

# BaseResponsiveDataView Header/Table Alignment TODO

- [x] Refactor desktop table header structure to follow row list layout
- [x] Align desktop header columns with rendered desktop columns
- [x] Remove desktop action spacer and use consistent action column
- [x] Keep mobile behavior unchanged
- [x] Mark tasks complete after implementation

# GroupMenus Responsive Style Alignment TODO

- [x] Review `GroupMenus.vue` and map existing actions/data to `BaseResponsiveDataView`
- [x] Refactor GroupMenus list section to use `BaseResponsiveDataView`
- [x] Keep existing action flows (detail, detail menu, edit, hapus) working via action handler
- [x] Add scoped container/header styling pattern similar to `Tenants.vue`
- [x] Final consistency review

# BaseResponsiveDataView Desktop Column Proportion TODO

- [ ] Review desktop grid logic in `BaseResponsiveDataView.vue` and `_base-responsive-data-view.scss`
- [ ] Make desktop column count dynamic (not hardcoded 6)
- [ ] Make action column width proportional and consistent
- [ ] Ensure desktop remains balanced even with only 2 data columns
- [ ] Final consistency review for desktop/mobile behavior