122 lines
7.0 KiB
Markdown
122 lines
7.0 KiB
Markdown
---
|
|
task: Enhance HomeOperator.vue (Corporation dashboard) — fix dark-mode bg-white violations, add multi-store performance stats, and improve corporate presentation for demo screenshots
|
|
cycles: 5
|
|
context: true
|
|
private: false
|
|
started: 2026-05-16T00:00:00Z
|
|
finished: 2026-05-16T00:03:00Z
|
|
---
|
|
|
|
## files
|
|
- `resources/js/Pages/Fragments/Home/HomeOperator.vue` — primary target; has `bg-white` hardcoded in 4 places, missing dark-mode support, missing multi-store corporate stats
|
|
- `resources/js/Pages/Fragments/Home/HomeSuperOperator.vue` — secondary reference; check what stats/layout it uses
|
|
- `routes/web.php` [lines 76-135] — `/home-data` endpoint; needs OPERATOR-scoped stats: store count under management, today's revenue across all managed stores, active POS sessions
|
|
- `app/Http/Controllers/Support/VueRouteMap.php` — confirm OPERATOR has access to all pages used in the dashboard
|
|
|
|
## steps
|
|
1. **`routes/web.php` @ `/home-data` closure** — Add OPERATOR-specific stats after the existing `$myStoresCount` block:
|
|
```php
|
|
$isOperator = $acctType === \App\Enums\UserTypes::OPERATOR;
|
|
$operatorStoreIds = [];
|
|
if ($isOperator && $user) {
|
|
$operatorStoreIds = \App\Models\Market\Store::where('owner_id', $user->id)
|
|
->orWhereHas('managers', fn($q) => $q->where('user_id', $user->id))
|
|
->pluck('id')->toArray();
|
|
}
|
|
$activePosSessionsNo = $isOperator
|
|
? \App\Models\Market\PosSession::whereIn('store_id', $operatorStoreIds)->where('status','PENDING')->count()
|
|
: \App\Models\Market\PosSession::where('status','PENDING')->count();
|
|
$managedStoresNo = $isOperator ? count($operatorStoreIds) : $storeCount;
|
|
$todayRevenueOperator = $isOperator
|
|
? \App\Models\GlobalTransaction::whereDate('created_at', today())
|
|
->whereIn('store_id', $operatorStoreIds)
|
|
->where('flow', \App\Enums\Market\TransactionFlow::INCOME->value)
|
|
->sum('amount')
|
|
: $projectedIncomeToday;
|
|
```
|
|
Add to `$props['props']['stats']`:
|
|
- `'active_pos_sessions_no' => $activePosSessionsNo`
|
|
- `'managed_stores_no' => $managedStoresNo`
|
|
- `'today_revenue_php' => number_format((float) $todayRevenueOperator, 2)`
|
|
|
|
2. **`HomeOperator.vue` — Fix all `bg-white` violations** (lines ~146, 172, 191, 192):
|
|
- Replace `bg-white` class with `style="background: var(--bg-card);"` or remove the class entirely (global bootstrap override handles it)
|
|
- Line ~146: `class="card border-0 shadow-sm rounded-4 bg-white p-3"` → remove `bg-white`
|
|
- Line ~172: `class="card border-0 shadow-sm rounded-20 bg-white overflow-hidden p-0"` → remove `bg-white`
|
|
- Line ~191: `class="activity-section card border-0 shadow-sm rounded-4 bg-white overflow-hidden"` → remove `bg-white`
|
|
- Line ~192: `class="card-header bg-white border-0 ..."` → remove `bg-white`
|
|
- Any `color: #333` or `color: #856404` hardcoded inline → replace with `color: var(--text-primary)` and `color: var(--text-warning)` respectively
|
|
|
|
3. **`HomeOperator.vue` — Update stats ref** to include the new corporate KPIs:
|
|
```js
|
|
const stats = ref([
|
|
{ title: "Stores", number: 0, unit: "Managed", align: "left", numberId: "managed_stores_no" },
|
|
{ title: "Revenue", number: '0.00', unit: "PHP Today", align: "left", numberId: "today_revenue_php" },
|
|
{ title: "POS Live", number: 0, unit: "Active", align: "right", numberId: "active_pos_sessions_no" },
|
|
]);
|
|
```
|
|
(Replaces the current generic `total_transactions_no`, `total_transactions_php`, `projected_income_today`)
|
|
|
|
4. **`HomeOperator.vue` — Add corporate identity header section** before the BalanceBox in the template:
|
|
```html
|
|
<div class="tf-container mt-3 mb-1">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="corp-avatar d-flex align-items-center justify-content-center rounded-3 bg-primary text-white fw_7"
|
|
style="width:48px;height:48px;font-size:1.2rem;flex-shrink:0;">
|
|
<i class="fas fa-building"></i>
|
|
</div>
|
|
<div>
|
|
<div class="fw_7" style="font-size:1rem;color:var(--text-primary);">{{ user?.name }}</div>
|
|
<div class="small text-muted">Operator Account · Corporation View</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
Insert this block right after `<HomeSkeleton v-if="loading && !data" />` and `<div v-if="showStaleIndicator">`, before `<div v-if="data">` opens.
|
|
|
|
5. **`HomeOperator.vue` — Add POS Quick Launch button** to `balanceFooterItems` ref:
|
|
Current footer has `AddTransaction` and `ListReports`. Add:
|
|
- `{ title: 'POS Monitor', icon: '<pos-icon-url>', pagename: 'PosHistory' }` — or use a store-select flow like HomeShared
|
|
|
|
6. **`HomeOperator.vue` — Add `services` tile for Corporation-specific items** that are missing:
|
|
Ensure the grid includes:
|
|
- `{ title: 'Batch Products', pagename: 'BatchAddProducts' }` if not already there
|
|
- `{ title: 'POS Keys', pagename: 'PosAccessKeys' }` — already present, keep
|
|
- `{ title: 'Cooperatives', pagename: 'CooperativeList' }` — already present, keep
|
|
|
|
7. **`HomeOperator.vue` — Fix the stale-notice style** to use theme vars (currently hardcoded yellow):
|
|
Replace `background-color: #fff3cd; color: #856404;` with:
|
|
`background-color: var(--bs-warning-bg-subtle, #fff3cd); color: var(--bs-warning-text-emphasis, #856404);`
|
|
|
|
8. **VueRouteMap audit** — Confirm OPERATOR (`'operator'`) is listed in `allowedUserTypes` for: `BatchAddProducts`, `ManageStoresAdmin`, `ManageProductsAdmin`, `PosAccessKeys`, `PosHistory`, `ListReports`, `AccountingDashboard`, `CooperativeList`, `FarmerProfileEdit`, `VerificationDashboard`, `LandingPageEditor`, `CreateOrganization`.
|
|
|
|
## context
|
|
```
|
|
// HomeOperator.vue stats currently:
|
|
const stats = ref([
|
|
{ title: "Transactions", number: 0, unit: "Total", align: "left", numberId: "total_transactions_no" },
|
|
{ title: "Value", number: 0, unit: "PHP", align: "left", numberId: "total_transactions_php" },
|
|
{ title: "Projected", number: 0, unit: "Income", align: "right", numberId: "projected_income_today" },
|
|
]);
|
|
|
|
// HomeOperator.vue services already includes (lines 59-72):
|
|
// Users, Stores, Products, Transactions, Reports, POS Keys, Market, Accounting, Shipments, Farmers, Verification, Cooperatives
|
|
|
|
// HomeOperator.vue template bg-white locations (approximate lines):
|
|
// ~146: OrgHierarchyExplorer card wrapper
|
|
// ~172: Cooperative Hub card
|
|
// ~191: Recent Activity card
|
|
// ~192: Activity card-header
|
|
|
|
// /home-data new stats to add:
|
|
// 'active_pos_sessions_no', 'managed_stores_no', 'today_revenue_php'
|
|
|
|
// POS session model: App\Models\Market\PosSession, status field, store_id FK
|
|
// GlobalTransaction model: flow field = TransactionFlow::INCOME->value (1), store_id FK
|
|
```
|
|
|
|
## notes
|
|
- dictionary: `ai-docs/dictionary.md`
|
|
- linters: none detected
|
|
- constraints: Dark mode compliance is mandatory — no `bg-white`/`bg-light`/`text-dark`. The corporate header must feel premium (icon + name + role badge). Do not break the existing Cooperative Hub tabs (Overview/Docs/Resolutions) — they are valuable for demo. Stats change is scoped to OPERATOR only via the if-block so other roles are unaffected.
|