---
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.