A web application for managing sales invoices built with Next.js, TypeScript, and Tailwind CSS.
- Create Invoices - Add new invoices via a modal without leaving the dashboard
- Edit Invoices - Update existing invoice details and items
- Delete Invoices - Remove invoices with confirmation prompt
- Invoice Detail View - View complete invoice details on a dedicated page with print support
- File Attachments - Upload and manage files for each invoice with drag and drop support
- Filtering - Filter invoices by status (paid, pending, overdue), date range, and search by client name or invoice number
- Dashboard Stats - At a glance totals for paid, pending, and overdue amounts
- Persistent Storage - Invoice data is saved to local storage and persists across sessions
- Next.js 15 - React framework
- TypeScript - Type safety
- Tailwind CSS - Styling
- Jest - Unit testing
- React Testing Library - Component testing
Make sure you have the following installed:
- Node.js (v18 or higher)
- npm
- Clone the repository:
git clone https://github.com/YOUR_USERNAME/invoice-manager.git- Navigate into the project directory:
cd invoice-manager- Install dependencies:
npm install- Start the development server:
npm run dev- Open http://localhost:3000 in your browser.
Run the full test suite:
npm testRun tests in watch mode:
npm run test:watch├── app/
│ ├── components/ # Reusable UI components
│ │ ├── ClientDate.tsx
│ │ ├── FileUpload.tsx
│ │ ├── InvoiceFilter.tsx
│ │ ├── InvoiceForm.tsx
│ │ ├── InvoiceList.tsx
│ │ └── InvoiceModal.tsx
│ ├── invoices/
│ │ └── [id]/ # Invoice detail page
│ ├── lib/ # Types, utilities, and state management
│ │ ├── InvoiceContext.tsx
│ │ ├── mockData.ts
│ │ ├── storage.ts
│ │ ├── types.ts
│ │ └── utils.ts
│ ├── layout.tsx
│ └── page.tsx # Main dashboard
├── __tests__/
│ ├── components/ # Component tests
│ └── lib/ # Utility function tests
├── jest.config.js
├── jest.setup.ts
└── README.md