A responsive Angular application for managing invoices, supporting invoice creation, editing, deletion, status updates, filtering, theme toggling, and local storage persistence.
This project was generated using Angular CLI version 19.2.14
This project provides a modern UI for managing invoices. Users can view a list of invoices, filter by status, add new invoices, edit existing ones, and switch between light and dark themes. It is built using Angular with SCSS for styling and uses local storage for data persistence.
- Node.js >= 16
- Angular CLI installed globally:
npm install -g @angular/cli
git clone [repository-url] cd invoice-app
npm install
To start a local development server, run:
ng serveOnce the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.
- Invoice creation, editing, deletion
- Dark/Light theme toggle
- Fully responsive UI (mobile, tablet, desktop)
- Editable and dynamic item list form section
- Route-based navigation
- Scrollable edit modal with blur overlay
- Form validations
- LocalStorage-based persistence
- Filtering by status (Paid, Pending, Draft)
AppComponent– Main layout including the sidebar, theme toggle, and routingInvoiceListComponent– Displays invoices list with filtering and navigationInvoiceDetailsComponent– Detailed view of a specific invoiceEditInvoiceFormComponent– For editing invoicesNewInvoiceComponent– For adding new invoices
| Route | Component | Description |
|---|---|---|
/ |
Redirect | Redirects to /invoices |
/invoices |
InvoiceListComponent |
Displays all invoices |
/invoices/new |
NewInvoiceComponent |
Form to create a new invoice |
/invoices/:id |
InvoiceDetailsComponent |
Detailed view of selected invoice |
/invoices/:id/edit |
EditInvoiceComponent |
Edit form shown as modal |
- Reactive Forms are used throughout.
FormArrayfor dynamicitemslist.- Scrollable edit form panel.
- Field validation.
- Feature Branching:
git checkout -b feature/your-feature
2. **Commit Often**:
```bash
git add .
git commit -m "feat: add invoice filter dropdown"-
Push and PR:
git push origin feature/your-feature # Open a pull request from GitHub -
Merge to Production:
- Always test on
developmentbranch first. - After approval, merge
developmentintoproduction.
- Always test on
localStoragefor persisting invoice changes- Responsive scrollable modals using pure CSS
- SCSS theming with variables for light/dark modes
No License