Dashboard Frontend

Relevant source files

The following files were used as context for generating this wiki page:

• resources/views/layouts/app.blade.php
• resources/views/components/dashboard-sidebar.blade.php
• resources/views/dashboard/index.blade.php
• resources/views/dashboard/templates.blade.php
• resources/views/dashboard/profile.blade.php
• resources/views/dashboard/whatsapp-account.blade.php
• app/Services/TemplateService.php
• resources/views/dashboard/pos/reports.blade.php

The QashierWise Dashboard is a web-based user interface for managing the application's features, including WhatsApp Business integration, Point of Sale (POS) operations, and user profile settings. It is built as a multi-page application using Laravel Blade for server-side rendering, progressively enhanced with Alpine.js to create a reactive, single-page application (SPA)-like experience for interactivity.

The frontend communicates with the backend via a RESTful API to fetch data and perform actions. State management, including authentication tokens and user information, is handled on the client-side using localStorage and managed within Alpine.js components.

Architecture and Core Technologies

The dashboard frontend is built on a stack that combines server-side rendering with client-side reactivity.

• Templating Engine: Laravel Blade is used to structure the HTML and include shared components.
• Styling: Tailwind CSS provides the utility-first CSS framework. The application uses a custom theme defined with CSS variables (e.g., hsl(var(--muted))).
• Client-Side Interactivity: Alpine.js is the primary JavaScript framework for adding dynamic behavior to the UI. Each dashboard page typically has one or more dedicated Alpine.js components to manage its state and logic.
• Core Assets: The main layout file, layouts/app.blade.php, is responsible for loading all essential CSS and JavaScript libraries, including Tailwind CSS, Font Awesome, Alpine.js, ApexCharts, and Pusher for real-time events.

Sources: resources/views/layouts/app.blade.php, resources/views/dashboard/index.blade.php

Technology Stack Diagram

The following diagram illustrates the key technologies used in the dashboard frontend.

Layout and Structure

The dashboard UI is composed of several reusable Blade components that form a consistent layout across all pages.

• layouts/app.blade.php: The master layout file. It includes the <head> section with all CSS/JS asset links and a <body> that yields the main content for each page.
• components/dashboard-sidebar.blade.php: A responsive navigation sidebar. It is collapsible on desktop and functions as an off-canvas menu on mobile devices. Its state (sidebarOpen, isMobile) is managed by a global Alpine.js component.
• components/dashboard-header.blade.php: The top header bar containing the page title, description, user menu, and a notification dropdown.

Layout Composition

This diagram shows how the main layout components are assembled.

State Management and Data Flow

Client-side state is primarily managed by Alpine.js components, with persistent data stored in localStorage.

Authentication and Initialization

1. On login, an authentication token and user details are stored in localStorage.
2. When a dashboard page loads, the main Alpine.js component (e.g., dashboardApp, profileApp) reads the token and user from localStorage to initialize its state.
3. This token is then included in the Authorization header for all subsequent API requests.
4. The logout() function clears localStorage and redirects the user to the login page.

Sources: resources/views/dashboard/index.blade.php:550-555, resources/views/dashboard/templates.blade.php:1463-1469

Data Fetching Flow

The following sequence diagram shows a typical data-fetching process, such as loading dashboard statistics.

Key Frontend Components (Alpine.js)

Each dashboard page is powered by one or more Alpine.js components defined within <script> tags. These components encapsulate the state and behavior for a specific feature.

dashboardApp() / ...App()

This is the root component for each dashboard page, responsible for global concerns.

• State: sidebarOpen, isMobile, user, notifications.
• Functionality:
  • Manages sidebar visibility and responsiveness based on screen size.
  • Persists sidebar state to localStorage on non-mobile views.
  • Loads user information from localStorage.
  • Handles the global logout action.
• Source: resources/views/dashboard/index.blade.php:540-589

templatesManager()

A complex component for managing WhatsApp message templates, demonstrating full CRUD functionality.

• State: templates, filteredTemplates, loading, showCreateModal, showEditModal, createForm, editForm, errors.
• Functionality:
  • Fetches templates from /api/whatsapp/templates.
  • Provides client-side filtering by status, category, and search query.
  • Manages modals for creating, editing, viewing, and deleting templates.
  • Performs client-side validation (e.g., validateName, validateBody).
  • Submits data to the backend via POST, PUT, and DELETE requests.
  • Displays a live preview of the template as the user types.
• Source: resources/views/dashboard/templates.blade.php:1472-2432

profileManager()

Manages the user's business profile information.

• State: profile, originalProfile, editMode, loading, saving.
• Functionality:
  • Fetches profile data from /api/whatsapp/profile.
  • Toggles between a read-only view and an editable form.
  • Stores the original profile state to allow for cancellation of edits.
  • Handles profile picture uploads to /api/whatsapp/profile/picture.
  • Submits updated profile data to the backend.
• Source: resources/views/dashboard/profile.blade.php:204-325

subscriptionStatus()

Handles subscription status display and management.

• State: subscription, loading, portalLoading.
• Functionality:
  • Fetches subscription status from /api/subscription/status.
  • Displays the current plan, status, and trial days remaining.
  • Provides a button to open the customer portal by fetching a URL from /api/subscription/portal.
• Source: resources/views/dashboard/index.blade.php:733-827

Navigation

Navigation is handled by the dashboard-sidebar component, which contains a list of links to different sections of the dashboard.

Link Text	Icon	Route Path	Active Page Key
Dashboard	fa-home	/dashboard	dashboard
Contacts	fa-address-book	/dashboard/contacts	contacts
Messages	fa-comments	/dashboard/messages	messages
Templates	fa-file-alt	/dashboard/templates	templates
Business Profile	fa-building	/dashboard/profile	profile
WhatsApp Account	fa-whatsapp	/dashboard/whatsapp-account	whatsapp-account
Point of Sale
Orders	fa-shopping-cart	/dashboard/pos/orders	pos-orders
Payment	fa-credit-card	/dashboard/pos/payment	pos-payment
Products	fa-box	/dashboard/pos/products	pos-products
Categories	fa-tags	/dashboard/pos/categories	pos-categories
Stores	fa-store	/dashboard/pos/stores	pos-stores
Tables	fa-chair	/dashboard/pos/tables	pos-tables
Users	fa-users	/dashboard/pos/users	pos-users
Reports	fa-chart-bar	/dashboard/pos/reports	pos-reports
Transactions	fa-receipt	/dashboard/pos/transactions	pos-transactions

The active link is styled based on the $activePage variable passed to the sidebar component from the parent Blade view. The sidebar's responsive behavior is controlled by the sidebarOpen and isMobile state properties in the main Alpine.js component.

Sources: resources/views/components/dashboard-sidebar.blade.php:20-112

API Endpoints Summary

The dashboard frontend interacts with several backend API endpoints to function. All data-mutating requests are secured and require a Bearer token.

Method	Endpoint	Description	Source File
POST	/api/logout	Logs the user out.	dashboard/index.blade.php:585-589
GET	/api/whatsapp/stats	Fetches dashboard summary statistics.	dashboard/index.blade.php:563-566
GET	/api/whatsapp/stats/weekly-chart	Fetches data for the weekly messages chart.	dashboard/index.blade.php:611-614
GET	/api/whatsapp/messages	Fetches a list of recent messages.	dashboard/index.blade.php:698-701
GET	/api/whatsapp/phone-info	Retrieves details about the connected phone number.	dashboard/profile.blade.php:236-239
GET	/api/whatsapp/profile	Fetches the business profile information.	dashboard/profile.blade.php:219-222
POST	/api/whatsapp/profile	Updates the business profile information.	dashboard/profile.blade.php:292-297
POST	/api/whatsapp/profile/picture	Uploads a new profile picture.	dashboard/profile.blade.php:271-276
GET	/api/whatsapp/templates	Fetches all message templates.	dashboard/templates.blade.php:1510-1514
POST	/api/whatsapp/templates	Creates a new message template.	dashboard/templates.blade.php:1806-1815
PUT	/api/whatsapp/templates/{id}	Updates an existing message template.	dashboard/templates.blade.php:2237-2246
DELETE	/api/whatsapp/templates/{name}	Deletes a message template by name.	dashboard/templates.blade.php:2311-2317
GET	/api/whatsapp/account	Gets the status of the connected WhatsApp account.	dashboard/whatsapp-account.blade.php:329-335
DELETE	/api/whatsapp/account	Disconnects the WhatsApp account.	dashboard/whatsapp-account.blade.php:500-506
GET	/api/pos/reports/...	Fetches various sales and product reports.	dashboard/pos/reports.blade.php:131-143
GET	/api/pos/categories	Fetches product categories.	dashboard/pos/categories.blade.php:143-148
GET	/api/pos/tables	Fetches restaurant tables and their statuses.	dashboard/pos/tables.blade.php:121-124
GET	/api/pos/users	Fetches POS staff users.	dashboard/pos/users.blade.php:142-145

Conclusion

The QashierWise Dashboard Frontend is a robust and reactive interface that leverages Laravel Blade for its structure and Alpine.js for dynamic, client-side functionality. It follows a clear pattern of component-based development where each page is self-contained with its own state management and API interactions. The use of localStorage for the authentication token and a consistent API communication pattern makes the frontend a scalable and maintainable system for managing the application's core features.