UI: Dashboard
Relevant source files
The following files were used as context for generating this wiki page:
- app/Filament/Pages/HomeDashboard.php
- app/Filament/Widgets/ProductStats.php
- app/Filament/Resources/ProductResource/Pages/ListProducts.php
- resources/views/filament/widgets/no-products-found.blade.php
- resources/views/filament/pages/product/price-stat.blade.php
- README.md
- app/Filament/Resources/ProductResource/Pages/View.php
The Dashboard is the main landing page for authenticated users in the PriceBuddy application. It provides a high-level overview of tracked products, their current prices, and price history. Built with the Filament PHP framework, it serves as the central hub for users to monitor their products and navigate to other key areas of the application, such as creating new products or viewing detailed product information.
The dashboard is designed to be the user's primary interface, presenting key statistics and quick access to actions. Its layout is a single column, which contains a series of widgets. The primary widget displays statistics for each tracked product.
Architecture and Components
The dashboard is composed of a main page class (HomeDashboard) that orchestrates the display of several widgets. The core component is the ProductStats widget, which renders individual stat cards for each product.
Dashboard Page (HomeDashboard)
The main dashboard is defined by the App\Filament\Pages\HomeDashboard class. This class extends Filament\Pages\Page and configures the dashboard's route, navigation, and content.
- Route Path: The dashboard is the root page of the admin panel, accessible at
/.
Sources: app/Filament/Pages/HomeDashboard.php:11 - Navigation: It appears first in the navigation with a sort order of
-2and uses a home icon.
Sources: app/Filament/Pages/HomeDashboard.php:13, app/Filament/Pages/HomeDashboard.php:23-28 - View: It uses the standard Filament dashboard view template
filament-panels::pages.dashboard.
Sources: app/Filament/Pages/HomeDashboard.php:18 - Layout: The dashboard is configured to use a single-column layout.
Sources: app/Filament/Pages/HomeDashboard.php:57-60 - Header Actions: A "Create" action button is present in the header, allowing users to add a new product directly from the dashboard.
Sources: app/Filament/Pages/HomeDashboard.php:67-72
The following diagram illustrates the class structure for the HomeDashboard.
Dashboard Widgets
The HomeDashboard's primary function is to load and display widgets. The getWidgets() method specifies which widgets to include.
ProductStats Widget
This is the main widget displayed on the dashboard. It is responsible for fetching and rendering statistics for each product belonging to the current user.
- Type: It extends
Filament\Widgets\StatsOverviewWidget. - Data Fetching: The
getStats()method is the core of this widget. It retrieves products for the current user, ordered by aweightproperty. - Conditional Display:
- If the user has no products, it displays a
no-products-foundview, prompting them to create their first product. - If products exist, it iterates through them, creating a
Statcard for each one.
Sources: app/Filament/Widgets/ProductStats.php:23-45
- If the user has no products, it displays a
The flow for rendering dashboard widgets is as follows:
No Products View
When a user has no products, a dedicated view is rendered to guide them.
- View File:
resources/views/filament/widgets/no-products-found.blade.php - Content: This view displays a heading, a description, and a call-to-action (CTA) button.
- CTA: The button links to the product creation page, encouraging the user to add a product.
| Element | Description | Source |
|---|---|---|
| Heading | A welcoming header, e.g., "No products found". | resources/views/filament/widgets/no-products-found.blade.php:3-5 |
| Description | Explanatory text. | resources/views/filament/widgets/no-products-found.blade.php:6-8 |
| CTA Button | A button to navigate to the product creation URL. | resources/views/filament/widgets/no-products-found.blade.php:9-15 |
Sources: resources/views/filament/widgets/no-products-found.blade.php, app/Filament/Widgets/ProductStats.php:28-35
Product Stat Card
Each product is rendered as a "stat card" on the dashboard. The view for this is resources/views/filament/pages/product/price-stat.blade.php.
- Value: Displays the current price of the product. The first product card has a larger font size.
Sources: resources/views/filament/pages/product/price-stat.blade.php:30-32, resources/views/filament/pages/product/price-stat.blade.php:40-43 - Label: Shows the store name from which the price was fetched.
Sources: resources/views/filament/pages/product/price-stat.blade.php:51-53 - Chart: A small line chart visualizes the recent price history. The chart data and color are passed from the
ProductStatswidget.
Sources: resources/views/filament/pages/product/price-stat.blade.php:92-129 - Badges: Conditional badges are shown if the last scrape was not successful or if the current price matches the user's notification target.
Sources: resources/views/filament/pages/product/price-stat.blade.php:73-90 - Actions: Each card has an expandable section with actions:
- View: Navigates to the detailed product view page.
- Fetch: Triggers a price fetch for that specific URL.
- Delete: Removes the URL from the product.
Sources: resources/views/filament/pages/product/price-stat.blade.php:134-138
The stat card is clickable and links to the product's detailed view page.
Sources: resources/views/filament/pages/product/price-stat.blade.php:21-24, app/Filament/Widgets/ProductStats.php:54
Product View Page
Clicking on a product stat card or the product title navigates the user to the product's detail page, defined in app/Filament/Resources/ProductResource/Pages/View.php.
- View File:
resources/views/filament/resources/product-resource/pages/view.blade.php - Layout: This page uses a tabbed interface to organize product information.
The tabs available are:
- Overview: Shows the product image, a list of its URLs with price stats (
ProductUrlStatswidget), creation date, and associated tags.
Sources: resources/views/filament/resources/product-resource/pages/view.blade.php:11-18, resources/views/filament/resources/product-resource/pages/view.blade.php:32-61 - History: Displays a more detailed price history chart (
PriceHistoryChartwidget) and a min/max price history component.
Sources: resources/views/filament/resources/product-resource/pages/view.blade.php:63-68 - Search: If the SearXNG integration is enabled, this tab allows users to search for and add more URLs for the product.
Sources: resourcesviews/filament/resources/product-resource/pages/view.blade.php:20-27, resources/views/filament/resources/product-resource/pages/view.blade.php:70-74
The active tab can be controlled via a searchQuery URL parameter, which defaults to the 'search' tab if present.
Sources: resources/views/filament/resources/product-resource/pages/view.blade.php:4-5