FEAT: Add children layout in all routes

[Caussz]

Change Route Structure

Description:

This issue involves restructuring the routing setup for the project. All routes should now derive from a layout and follow Vue's layout inheritance using the children property. Additionally, two types of layouts should be created: a default layout for all pages that includes a header and footer, and a blank layout for pages such as login.

Checklist:

• Create a default layout component (LayoutPage.vue) with a header and footer.
• Create a blank layout component (BlankLayout.vue) for use on specific pages like login.
• Update the routing configuration to use the new layout structure.
• Ensure all routes follow the layout inheritance using the children property.

Example Structure:

{
  path: '/',
  component: () => import('../layouts/LayoutPage.vue'),
  children: [
    {
      path: '/',
      name: 'home',
      component: () => import('../pages/HomeView.vue'),
    },
  ],
},
{
  path: '/login',
  component: () => import('../layouts/BlankLayout.vue'),
  children: [
    {
      path: '',
      name: 'login',
      component: () => import('../pages/LoginView.vue'),
    },
  ],
},

Notes:

• Ensure the new route structure is tested thoroughly to confirm that all pages render correctly within the specified layouts.
• Validate the implementation with the team leader before finalizing.
• Please check off each item on the checklist as you complete the tasks.

[Caussz]

This can be confusing to implement the first time, so let's do it together so I can explain the concepts and you can replicate them in future tasks