web-hosts/domains/coppertone.tech/docs/project-plan/phases/Phase-4-Client-Portal-and-Work-Management-UI.md

Phase 4 Breakdown: Client Portal & Work Management UI

This phase is about bringing the backend functionality to life by building the user interfaces that clients and internal staff will interact with. The focus is on creating intuitive, responsive, and secure dashboards within the Vue.js frontend application.

---

Task 4.1: Client Portal Dashboard

The client portal is a secure area where clients can track their projects and manage their accounts.

• 4.1.1. Secure Area Scaffolding:
  • Create a new layout component src/layouts/DashboardLayout.vue. This layout will include the shared navigation for the portal (e.g., a sidebar).
  • In Vue Router, create a "meta" field on routes to mark them as requiring authentication:

    {
      path: '/client/dashboard',
      name: 'ClientDashboard',
      component: () => import('@/views/client/DashboardView.vue'),
      meta: { requiresAuth: true, roles: ['CLIENT'] }
    }
    

  • Implement a navigation guard (router.beforeEach) that checks for a valid JWT (stored in Pinia/localStorage) and the user's role before allowing access to protected routes. If the user is not authenticated, redirect them to the login page.
• 4.1.2. Dashboard View (/client/dashboard):
  • This will be the main landing page for logged-in clients.
  • Display a summary of active projects.
  • Show recent activity or notifications.
  • Provide quick links to outstanding invoices.
• 4.1.3. Project Details View (/client/projects/:id):
  • Display all details for a specific project.
  • Show a list or timeline of tasks associated with the project, including their status.
  • (Future) Include a comment/communication thread for the project.
• 4.1.4. Invoices and Payments View (/client/billing):
  • Display a table of all invoices (past and present) with their status (Paid, Due, Overdue).
  • For unpaid invoices, provide a "Pay Now" button that initiates the payment flow.
  • When "Pay Now" is clicked, the UI will fetch the necessary intent/information from the backend and use the appropriate frontend library (Stripe.js, or a custom flow for crypto) to handle the payment.

---

Task 4.2: Internal Work Management Dashboard

This is the control center for Copper Tone Technologies' staff to manage the company's operations. Access will be restricted to ADMIN and STAFF roles.

• 4.2.1. Scaffolding and Access Control:
  • The internal dashboard will share the same DashboardLayout.vue but will have a different set of navigation links based on user role.
  • The navigation guard in Vue Router will be configured to check for ADMIN or STAFF roles for these routes.
• 4.2.2. Projects Management View (/internal/projects):
  • Display a comprehensive table of all projects.
  • Include functionality to create new projects, edit existing ones, and change their status.
  • The view should be searchable and filterable.
• 4.2.3. Task Management View (/internal/projects/:id/tasks):
  • Within a project's detail view, provide a full interface to manage tasks.
  • Allow staff to create, edit, and delete tasks.
  • Implement functionality to assign tasks to specific team members (users with the STAFF role).
  • Use drag-and-drop functionality (e.g., with a library like VueDraggable) to create a Kanban-style board for managing task statuses (To Do, In Progress, Done).
• 4.2.4. User Management View (/internal/users - Admin only):
  • A view, accessible only to users with the ADMIN role, to manage all users in the system.
  • Provide functionality to create new users, assign roles, and deactivate accounts.

---

Task 4.3: Connect Frontend to Backend (State Management)

This task runs in parallel with the UI development. It involves fetching data from the API (provided by Go serverless functions) and managing that state within the frontend application using Pinia.

• 4.3.1. API Service Module:
  • Create a dedicated module (src/services/api.ts) for handling all HTTP requests to the backend (Go serverless functions).
  • This module will use a library like axios and will automatically attach the JWT to the headers of authenticated requests.
  • It should also handle token refresh logic and centralize error handling.
• 4.3.2. Pinia Stores:
  • Create separate stores for different domains of application state:
    • auth.store.ts: Manages the user's authentication state, JWT, and profile information. It will have actions for login, logout, and register.
    • project.store.ts: Manages project data. It will have actions to fetchAllProjects, fetchProjectById, createProject, etc. These actions will call the API service module.
    • task.store.ts: Manages tasks for projects.
    • invoice.store.ts: Manages billing information.
• 4.3.3. Component Integration:
  • Vue components will not make direct API calls. Instead, they will call actions from the Pinia stores.
  • They will use getters from the stores to display data, ensuring a reactive and predictable data flow. For example, a component will call projectStore.fetchAllProjects() and then use a getter projectStore.projects to display the list.