initial: bootstrap from BukidBountyApp base

2026-06-06 18:43:00 +08:00
commit eb4a5731fb
5674 changed files with 160857 additions and 0 deletions
--- a/docs/completed/prt-20260403142500.md
+++ b/docs/completed/prt-20260403142500.md
@@ -0,0 +1,37 @@
+# High-Level Plan: Responsive UI Transition
+
+## Objective
+Analyze and resolve the "portrait-only" feel of the UI by removing hardcoded maximum width constraints (800px) and implementing a responsive, centered layout that supports landscape and ultra-wide displays.
+
+## Background
+The application currently injects a global style into the `<head>` via `resources/js/app.js` that limits the `body` to `max-width: 800px`. This design choice, while good for mobile-first "superapps", prevents the UI from utilizing desktop or landscape screen real estate, causing it to appear as a narrow column.
+
+## Technical Approach
+
+### 1. Centralized Layout Configuration
+- Introduce CSS variables in `:root` or `body` to define `---layout-max-width`.
+- Default the max-width to a more modern value (e.g., `1440px`) or set it to `none` for full responsiveness with internal containers.
+
+### 2. Update Global Styles (app.js)
+- Modify the `body` style injection in `resources/js/app.js`.
+- Change `max-width: 800px` to a responsive variable or remove it.
+- Ensure `margin: 0 auto` is maintained to keep the content centered on large screens.
+
+### 3. Component Updates
+- **TopHeader.vue**: Update `.header` to use the new layout width.
+- **BottomNav.vue**: Update `.bottom-navigation-bar` to use the new layout width.
+- **Containers**: Ensure `.tf-container` classes throughout the app are configured to limit content width to a readable measure (e.g., 1200px) while allowing the background/header to span wider.
+
+### 4. Responsiveness
+- Ensure that on mobile, the UI still behaves as expected (100% width).
+- On landscape/desktop, the UI should expand or stay centered without being artificially "pinched" to 800px.
+
+## Affected Files
+- `resources/js/app.js`
+- `resources/js/Pages/Core/Fragments/TopHeader.vue`
+- `resources/js/Pages/Core/Fragments/BottomNav.vue`
+- `ai-docs/dictionary.md` (Update layout definitions)
+
+## Verification
+- Visual inspection on different screen sizes (Mobile, Tablet, Desktop, Landscape).
+- Verify `is-full-width` mode (used for POS) still works correctly.