# Migration Plan: Blade Templates to Vue Components

## Overview
This document outlines the migration from Blade templates to Vue 3 components for the BukidBountyApp project.

---

## Already Migrated Templates (Excluded from this plan)

| Template | Destination |
|----------|-------------|
| `home.blade.php` | `Pages/Home.vue` |
| `list_product.blade.php` | `Pages/Market/ListProductsMarket.vue` |
| `list_store.blade.php` | `Pages/Market/ListStoreMarket.vue` |

---

## Remaining Blade Templates to Migrate

### Category 1: Core Photos (2 templates)

| Template | Functionality | Notes |
|----------|---------------|-------|
| `view_photo_admin.blade.php` | Photo view with admin controls | Simple display, use Vue component structure |
| `view_photo_admin_advanced.blade.php` | Advanced photo view | Similar to above |

**Status:** Pending

---

### Category 2: Market Shared (4 templates)

| Template | Functionality | Dependencies |
|----------|---------------|--------------|
| `buy_view_product_market.blade.php` | Product buying view with images, description, quantity | Already migrated - use existing Vue component |
| `create_store_market.blade.php` | Store creation form with photo upload | New store Pinia store needed |
| `edit_store_market.blade.php` | Store editing form | Existing store data loading |

**Status:** Pending (some already have Vue equivalents)

---

### Category 3: User Shared Admin (3 templates)

| Template | Functionality | Notes |
|----------|---------------|-------|
| `view_buy_product_admin.blade.php` | Product view from admin perspective | Use existing product component pattern |

**Status:** Pending

---

### Category 4: User Shared AdminAdvanced (9 templates)

| Template | Functionality | Dependencies |
|----------|---------------|--------------|
| `create_user.blade.php` | Create new user form with role selection | User Pinia store needed |
| `edit_user.blade.php` | Edit existing user profile | User Pinia store needed |
| `view_store_market.blade.php` | Store market view page | Already migrated |
| `manage_product_admin.blade.php` | Product management card view | ViewBuilder → Vue reactivity |
| `edit_product_ultimate.blade.php` | Product edit form (categories, subcategories) | Category API calls |
| `edit_store_ultimate.blade.php` | Store edit with owner selection | User list dropdown |
| `remove_product_from_store_admin.blade.php` | Remove product from store | Confirmation dialog needed |
| `manage_global_transactions.blade.php` | Transaction history table | DataTables → Vue table |

**Status:** Pending

---

### Category 5: User Shared All (2 templates)

| Template | Functionality | Notes |
|----------|---------------|-------|
| `account_settings.blade.php` | User profile display | Simple HTML structure, convert to Vue component |
| `transfermycredit.blade.php` | Credit transfer form with modals | Use Pinia store for state |

**Status:** Pending

---

### Category 6: User Ultimate (4 templates)

| Template | Functionality | Dependencies |
|----------|---------------|--------------|
| `home.blade.php` | Ultimate home page menu | Already migrated |
| `ultimatefunction.blade.php` | Navigation menu with service buttons | Use Vue component array |
| `userlist.blade.php` | Child users table with DataTables | API endpoint: /admin/users/list |
| `usermodify.blade.php` | User management (enable/disable, roles, notes) | Multiple admin endpoints |

**Status:** Pending

---

## Pinia Stores Required

### Existing Store
- **`stores/network.js`** - Network status and loading states ✅

### New Stores to Create

#### 1. `stores/product.js`
```javascript
export const useProductStore = defineStore('product', {
  state: () => ({
    products: [],
    currentProduct: null,
    categories: [],
    subcategories: []
  }),
  actions: {
    async fetchProducts() { ... },
    async fetchProductById(id) { ... },
    async updateProduct(data) { ... }
  }
})
```

#### 2. `stores/store.js`
```javascript
export const useStoreStore = defineStore('store', {
  state: () => ({
    stores: [],
    currentStore: null,
    storeProducts: []
  }),
  actions: {
    async fetchStores() { ... },
    async createStore(data) { ... }
  }
})
```

#### 3. `stores/user.js`
```javascript
export const useUserStore = defineStore('user', {
  state: () => ({
    users: [],
    currentUser: null,
    roles: []
  }),
  actions: {
    async fetchUsers() { ... },
    async updateUser(data) { ... }
  }
})
```

---

## Vue Component Patterns to Follow

### Navigation
```vue
<script setup>
import { useNavigate } from '../composables/Core/useNavigate'

const { navigate } = useNavigate()
navigate({ page: 'PageName', props: { id: 123 } })
</script>
```

### Modals
```vue
<script setup>
import { useModal } from '../composables/Core/useModal'

const modal = useModal()
modal.show('title', 'body content')
</script>
```

### API Calls (using axios)
```javascript
import axios from 'axios'

const response = await axios.post('/api/endpoint', data)
```

---

## Migration Priority Order

### Phase 1: High Priority (Core Features)
1. `create_user.blade.php` - User creation (admin feature)
2. `edit_product_ultimate.blade.php` - Product editing
3. `remove_product_from_store_admin.blade.php` - Product removal
4. `transfermycredit.blade.php` - Credit transfer

### Phase 2: Medium Priority
5. `account_settings.blade.php` - User settings
6. `manage_global_transactions.blade.php` - Transaction history
7. `userlist.blade.php` - User listing

### Phase 3: Lower Priority
8. All admin advanced templates (9 files)
9. Core photo templates (2 files)

---

## Implementation Steps

1. Create Pinia stores for products, stores, and users
2. Convert each Blade template following Vue component structure:
   - `<template>` section with Vue directives
   - `<script setup>` with Composition API
   - `<style scoped>` for component-specific styles
3. Replace `gotoPage()` with `navigate()` calls
4. Replace jQuery/Ajax with axios or composables
5. Test each migrated component

---

## Notes

- All migrated templates should be placed in `resources/js/Pages/`
- Use the existing `VueMigration.md` for reference patterns
- Maintain consistent styling with the rest of the Vue app
- Ensure all routes are properly configured in routing system