# 1 of 2 Build Fullstack Invoicing App using Blazor Server + Tailwind 4 in .NET 10 by Abhay Prince

The video introduces a full-stack invoicing application built with Blazor interactive server render mode, .NET 10, and Tailwind CSS. It highlights features like PDF printing using Quest PDF and custom-built components. The application includes user registration, login, a dashboard with quick stats on invoices, clients, and services, overdue and upcoming invoice sections. It also details the invoices page with recent, pending, and paid invoice tabs, offering functionalities like viewing line items, marking invoices as paid/unpaid, editing, deleting, and generating PDF previews. The video also covers settings for business information and client/product management features.

The project is initialized as a Blazor web app in Visual Studio 2026, targeting .NET 10, with individual accounts authentication. The initial `program.cs` setup for ASP.NET Core Identity and Entity Framework is reviewed. Tailwind CSS is integrated using a VS extension for Tailwind CSS VS 2022 editor support, which sets up `package.json`, `tailwind.css`, and `tailwind.extension.json`. The process involves creating an output file (`styles.css`) and configuring it to be generated by Tailwind CLI, demonstrating basic Tailwind class application to confirm successful integration.

A responsive layout is designed with a top bar, a left navigation bar, and a main body content area. The top bar includes the application name, logged-in user's name, and a logout button. The left navigation bar features dashboard, clients, invoices, and product/services links, along with a business name and settings button at the bottom. Icons from Lucid icons are integrated to enhance the visual appeal of the layout, and base Tailwind CSS classes are applied for styling throughout the structure.

The product and services page UI is developed, featuring a heading, an 'Add Product/Service' button, and a display area for existing items. A `Service` model is defined with properties like `ID`, `Name`, `Rate`, `Unit`, and `Description`, including data annotations for validation. Sample data is generated to demonstrate the UI. The page displays services in a card-like grid structure, with individual cards showing service details, edit, and delete buttons. The UI also includes an empty state message when no services are added and hover effects for interaction.

A reusable right sidebar component is created for adding and editing product/service forms. This component acts as an off-canvas panel with an overlay, featuring a dynamic title, a close button, and a content slot for the form. The visibility of the sidebar is managed by an `EventCallback` `OnClose` parameter. The form fields for `Service` (`Name`, `Rate`, `Unit`, `Description`) are integrated within the sidebar, utilizing `EditForm` and `DataAnnotationsValidator` for validation. The component's dynamic nature is demonstrated for both add and edit modes, handling state changes and ensuring proper data binding.

A reusable confirmation dialog component is implemented. This modal dialog overlays the entire screen with a semi-transparent background, displaying a dynamic message, a title, and 'Yes'/'No' buttons. A `ConfirmationModel` is created to encapsulate the message and `Action` delegates for handling 'Yes' and 'No' responses. A `UIService` (scoped to user session) is introduced to manage the display and interaction with the confirmation dialog, allowing any component to trigger a confirmation request. The dialog's Z-index is adjusted to ensure it appears above other elements in the UI hierarchy.

The client management page is developed, inheriting the structural layout from the product/services page. A `ClientModel` is defined with properties like `ID`, `Name`, `Email`, `ContactNumber`, and `Remarks`. The page displays client data in a tabular format, allowing for quick preview of client details. Functionalities for adding, editing, and deleting clients are implemented. The reusable right sidebar form component and confirmation dialog are integrated for these operations, demonstrating reusability and consistent user experience. Client-specific seed data is added for testing the UI.

The business settings functionality is implemented via a modal pop-up, accessed from the left navigation bar. A `BusinessInfoModel` is defined to hold properties such as `BusinessName`, `Email`, `ContactNumber`, `Address`, and `TaxPercentage`. The modal uses the reusable right sidebar form component to render an `EditForm` for managing these settings. Validation is applied to the input fields. The pop-up correctly displays initial settings and updates them upon saving, reflecting changes in the top bar and navigation bar. Z-index hierarchy is refined to ensure proper layering of modals.

The invoice management page is created, featuring a tab-like structure for 'Recent', 'Pending', 'Paid', and 'All' invoices. An `InvoiceModel` is defined with properties like `InvoiceNumber`, `ClientName`, `IssuedOn`, `DueOn`, `IsPaid`, `PaidOn`, and a collection of `InvoiceLineItemModel` for line items. Each invoice entry in the table displays key details, and status (`Paid`/`Pending`) is represented by colored chips. Dynamic action buttons are implemented for each invoice based on its status, allowing actions like 'Mark as Paid/Unpaid', 'Edit', 'Delete', and 'View' line items. A reusable `InvoicesGrid` component is introduced to present the invoice data, enhancing modularity.

A dedicated page for creating new invoices is developed, featuring a split layout: two-thirds for invoice details and line items, and one-third for business info, selected client info, and summary. The page uses a dynamic `EditForm` for input fields like `Invoice Number` (auto-generated), `Client Selection` (dropdown populated from client data), `Issued On`, `Due On`, `Status` (paid/pending dropdown), and `Notes`. The line item section allows adding and removing services with dynamic quantity, rate, and calculated amounts. The summary section dynamically calculates subtotal, tax (based on business settings), and the final total. Client and service data are fetched for selection and rate population.

The database setup is initiated by extending the `ApplicationUser` model (from ASP.NET Core Identity) with business-related properties (name, email, contact, address, tax percentage) and a full name field. Entity models for `Client`, `Service`, `Invoice`, and `InvoiceLineItem` are defined, incorporating relationships and denormalized data for historical accuracy. `ApplicationDbContext` is updated with `DbSet` properties for these new entities. Entity Framework Core migrations are generated using the Package Manager Console to apply these schema changes to the SQL Server database. An auto-migration script is added to `Program.cs` for development environments.

A seed user is added to the database via `Program.cs` to facilitate testing. The login and registration pages are styled using Tailwind CSS, moving away from Bootstrap. Authentication and authorization are enabled in `Program.cs` with `UseAuthentication()` and `UseAuthorization()`. Unauthorized access to application pages is restricted using the `[Authorize]` attribute applied broadly through a nested `_Imports.razor` file. Login and Logout functionalities are refined, with a dedicated logout page created to handle the session termination correctly, ensuring full page refresh for non-interactive pages via `NavigationManager.NavigateTo(..., forceLoad: true, replace: true)`.

To streamline access to user-specific data, a `UserService` is implemented. This service fetches `ApplicationUser` details, including the user's name and business name, by injecting `IDbContextFactory` for efficient database context management. This information is then passed down to components (like `MainLayout` and `LeftNavBar`) using a custom cascading parameter for `UserID`. The business settings form is updated to leverage this `UserService` to retrieve and persist business information to the database. Updates to business details are reflected dynamically in the UI upon saving, demonstrating a robust state management approach.

A `ProductService` class is created to handle CRUD (Create, Read, Update, Delete) operations for `Service` entities, leveraging `IDbContextFactory` for database interaction. The `ProductService` includes methods to `GetServicesAsync`, `SaveAsync` (for both adding and updating services), and `DeleteAsync`. `SaveAsync` distinguishes between new and existing services based on `ID` to either add a new record or update an existing one. Delete functionality ensures that only services owned by the current user can be removed. The UI on the product services page is updated to use this service, supporting real-time data manipulation (add, edit, delete) and ensuring data persistence in the database.

Similar to Product/Service management, a `ClientService` is implemented to provide CRUD operations for `Client` entities. This service includes `GetClientsAsync` to retrieve all clients for the authenticated user, `SaveAsync` to handle both adding new clients and updating existing ones, and `DeleteAsync` to remove clients. The client management page's UI is connected to these service methods, allowing users to add, edit, and delete client records with data persistence. The implementation reuses the `ClientModel` for data transfer and manages client-specific data effectively through database interactions.