BarangaySystem/MIGRATION_PLAN.md

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

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

2. stores/store.js

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

3. stores/user.js

export const useUserStore = defineStore('user', {
  state: () => ({
    users: [],
    currentUser: null,
    roles: []
  }),
  actions: {
    async fetchUsers() { ... },
    async updateUser(data) { ... }
  }
})

---

Vue Component Patterns to Follow

Navigation

<script setup>
import { useNavigate } from '../composables/Core/useNavigate'

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

Modals

<script setup>
import { useModal } from '../composables/Core/useModal'

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

API Calls (using axios)

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