Okay, I can help you set up a Next.js project using the App Router for creating invoices, storing data in MongoDB via Prisma, and generating PDFs. This setup includes the basic structure, database connection, an API route for creating invoices, a simple form, and PDF generation logic using `@react-pdf/renderer`. It also includes Docker configuration for development. { "name": "invoice-app", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "prisma generate && next build", "start": "next start", "lint": "next lint", "postinstall": "prisma generate" }, "dependencies": { "@prisma/client": "^5.14.0", "@react-pdf/renderer": "^3.4.4", "next": "14.2.3", "react": "^18", "react-dom": "^18" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.3", "postcss": "^8", "prisma": "^5.14.0", "tailwindcss": "^3.4.1", "typescript": "^5" } } { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./src/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } /** @type {import('next').NextConfig} */ const nextConfig = { // Optional: Add any specific Next.js configurations here }; export default nextConfig; import type { Config } from "tailwindcss"; const config: Config = { content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: {}, }, plugins: [], }; export default config; /** @type {import('postcss-load-config').Config} */ const config = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; export default config; // This is your Prisma schema file, // learn more about it in the docs: https://pris.ly/d/prisma-schema generator client { provider = "prisma-client-js" } datasource db { provider = "mongodb" url = env("DATABASE_URL") } model Invoice { id String @id @default(auto()) @map("_id") @db.ObjectId invoiceNumber String @unique clientName String clientEmail String? items Json // Store items as a JSON array: [{ description: string, quantity: number, price: number }] totalAmount Float createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } # Replace with your MongoDB connection string # Example for local MongoDB running in Docker: mongodb://mongo:27017/invoiceapp?authSource=admin # Make sure the database name ('invoiceapp' in the example) exists DATABASE_URL="mongodb://admin:password@mongo:27017/invoiceapp?authSource=admin" import { PrismaClient } from '@prisma/client'; // PrismaClient is attached to the `global` object in development to prevent // exhausting your database connection limit. // // Learn more: // https://pris.ly/d/help/next-js-best-practices const globalForPrisma = global as unknown as { prisma: PrismaClient | undefined }; export const prisma = globalForPrisma.prisma ?? new PrismaClient({ // log: ['query'], // Uncomment to see Prisma queries in console }); if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma; export default prisma; import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "Invoice App", description: "Create and manage invoices", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return (

{children}

); } @tailwind base; @tailwind components; @tailwind utilities; body { @apply bg-gray-50; } import InvoiceCreator from '@/components/InvoiceCreator'; export default function Home() { return (

Create Invoice

{/* You could add a list of existing invoices here */}

); } import { NextRequest, NextResponse } from 'next/server'; import prisma from '@/lib/prisma'; import { z } from 'zod'; // Define Zod schema for validation const InvoiceItemSchema = z.object({ description: z.string().min(1, "Description cannot be empty"), quantity: z.number().min(1, "Quantity must be at least 1"), price: z.number().min(0, "Price cannot be negative"), }); const CreateInvoiceSchema = z.object({ invoiceNumber: z.string().min(1, "Invoice number is required"), clientName: z.string().min(1, "Client name is required"), clientEmail: z.string().email("Invalid email address").optional().or(z.literal('')), items: z.array(InvoiceItemSchema).min(1, "At least one item is required"), }); export async function POST(req: NextRequest) { try { const body = await req.json(); // Validate input const validationResult = CreateInvoiceSchema.safeParse(body); if (!validationResult.success) { return NextResponse.json({ error: 'Invalid input', details: validationResult.error.flatten() }, { status: 400 }); } const { invoiceNumber, clientName, clientEmail, items } = validationResult.data; // Calculate total amount const totalAmount = items.reduce((sum, item) => sum + item.quantity * item.price, 0); // Check for duplicate invoice number const existingInvoice = await prisma.invoice.findUnique({ where: { invoiceNumber }, }); if (existingInvoice) { return NextResponse.json({ error: `Invoice number ${invoiceNumber} already exists.` }, { status: 409 }); // 409 Conflict } // Create invoice in database const newInvoice = await prisma.invoice.create({ data: { invoiceNumber, clientName, clientEmail: clientEmail || null, // Store null if empty string items: items as any, // Prisma expects Json type totalAmount, }, }); return NextResponse.json(newInvoice, { status: 201 }); } catch (error) { console.error("Failed to create invoice:", error); // Handle potential Prisma errors or other issues if (error instanceof z.ZodError) { // Should be caught by safeParse, but good practice return NextResponse.json({ error: 'Validation failed', details: error.flatten() }, { status: 400 }); } // Consider more specific error handling for Prisma errors if needed return NextResponse.json({ error: 'Failed to create invoice' }, { status: 500 }); } } // Optional: GET handler to fetch invoices export async function GET(req: NextRequest) { try { // Example: Fetch all invoices, sorted by creation date const invoices = await prisma.invoice.findMany({ orderBy: { createdAt: 'desc', }, }); return NextResponse.json(invoices, { status: 200 }); } catch (error) { console.error("Failed to fetch invoices:", error); return NextResponse.json({ error: 'Failed to fetch invoices' }, { status: 500 }); } } 'use client'; import React, { useState, useEffect } from 'react'; import { PDFDownloadLink, PDFViewer } from '@react-pdf/renderer'; import InvoiceDocument from './InvoiceDocument'; // We'll create this next interface InvoiceItem { description: string; quantity: number; price: number; } interface InvoiceData { id?: string; // Optional ID if fetched/saved invoiceNumber: string; clientName: string; clientEmail?: string; items: InvoiceItem[]; totalAmount?: number; // Calculated createdAt?: Date; } const InvoiceCreator: React.FC = () => { const [invoiceNumber, setInvoiceNumber] = useState(''); const [clientName, setClientName] = useState(''); const [clientEmail, setClientEmail] = useState(''); const [items, setItems] = useState([{ description: '', quantity: 1, price: 0 }]); const [isClient, setIsClient] = useState(false); const [showPdfPreview, setShowPdfPreview] = useState(false); const [createdInvoice, setCreatedInvoice] = useState(null); const [error, setError] = useState(null); const [isLoading, setIsLoading] = useState(false); // Ensure PDF components only render on the client useEffect(() => { setIsClient(true); // Generate a default invoice number (e.g., based on date) const now = new Date(); const defaultInvoiceNumber = `INV-${now.getFullYear()}${(now.getMonth() + 1).toString().padStart(2, '0')}${now.getDate().toString().padStart(2, '0')}-${now.getHours().toString().padStart(2, '0')}${now.getMinutes().toString().padStart(2, '0')}`; setInvoiceNumber(defaultInvoiceNumber); }, []); const handleItemChange = (index: number, field: keyof InvoiceItem, value: string | number) => { const newItems = [...items]; if (field === 'quantity' || field === 'price') { newItems[index][field] = Number(value) >= 0 ? Number(value) : 0; // Ensure non-negative numbers } else { newItems[index][field] = value as string; } setItems(newItems); }; const addItem = () => { setItems([...items, { description: '', quantity: 1, price: 0 }]); }; const removeItem = (index: number) => { if (items.length > 1) { // Keep at least one item row const newItems = items.filter((_, i) => i !== index); setItems(newItems); } }; const calculateTotal = () => { return items.reduce((sum, item) => sum + item.quantity * item.price, 0); }; const handleSubmit = async (event: React.FormEvent) => { event.preventDefault(); setError(null); setCreatedInvoice(null); setShowPdfPreview(false); setIsLoading(true); const invoiceData: Omit = { invoiceNumber, clientName, clientEmail, items, }; try { const response = await fetch('/api/invoices', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(invoiceData), }); const result = await response.json(); if (!response.ok) { // Handle specific errors (like duplicate invoice number) const errorMessage = result.error || `HTTP error! status: ${response.status}`; setError(errorMessage + (result.details ? ` Details: ${JSON.stringify(result.details)}` : '')); throw new Error(errorMessage); } console.log('Invoice created:', result); setCreatedInvoice({ ...result, items: result.items as InvoiceItem[] }); // Store created invoice data setShowPdfPreview(true); // Show preview after successful creation // Optionally reset form here or provide feedback // setInvoiceNumber(''); setClientName(''); setClientEmail(''); setItems([{ description: '', quantity: 1, price: 0 }]); } catch (err: any) { console.error('Failed to create invoice:', err); if (!error) { // Avoid overwriting specific API errors setError(err.message || 'An unexpected error occurred.'); } } finally { setIsLoading(false); } }; const currentInvoiceData: InvoiceData = { invoiceNumber, clientName, clientEmail, items, totalAmount: calculateTotal(), createdAt: new Date(), // Use current date for preview/download before saving }; return (

{/* Invoice Header */}

Invoice Number setInvoiceNumber(e.target.value)} required className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />

{/* Placeholder for Date - usually set on creation */} Date

{/* Client Info */}

Client Information

Client Name setClientName(e.target.value)} required className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />

Client Email (Optional) setClientEmail(e.target.value)} className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />

{/* Items Table */}

Items

{items.map((item, index) => ( ))}

Description	Quantity	Price	Total	Remove
handleItemChange(index, 'description', e.target.value)} required className="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />	handleItemChange(index, 'quantity', e.target.value)} required className="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />	handleItemChange(index, 'price', e.target.value)} required className="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />	{(item.quantity * item.price).toFixed(2)}	{items.length > 1 && ( )}

{/* Total */}

Total: ${calculateTotal().toFixed(2)}

{/* Error Message */} {error && (

Error: {error}

)} {/* Actions */}

{/* PDF Download Link - Only shown after successful creation */} {isClient && createdInvoice && ( } fileName={`invoice-${createdInvoice.invoiceNumber}.pdf`} className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" > {({ blob, url, loading, error }) => loading ? 'Loading document...' : 'Download PDF' } )}

{/* PDF Preview - Only shown after successful creation */} {isClient && showPdfPreview && createdInvoice && (

PDF Preview

)}

); }; export default InvoiceCreator; 'use client'; // Needs to run in the browser for @react-pdf/renderer import React from 'react'; import { Page, Text, View, Document, StyleSheet, Font } from '@react-pdf/renderer'; // Define InvoiceItem and InvoiceData interfaces matching the backend/frontend structure interface InvoiceItem { description: string; quantity: number; price: number; } interface InvoiceData { id?: string; invoiceNumber: string; clientName: string; clientEmail?: string | null; // Allow null from Prisma items: InvoiceItem[]; totalAmount?: number; // Use calculated total if available, otherwise calculate again createdAt?: Date | string; // Allow string if passed from API without Date object revival } // Register fonts if needed (example using Roboto) // Make sure to have the font files available (e.g., in public/fonts) // Font.register({ // family: 'Roboto', // fonts: [ // { src: '/fonts/Roboto-Regular.ttf' }, // path relative to public folder // { src: '/fonts/Roboto-Bold.ttf', fontWeight: 'bold' }, // ], // }); // Create styles const styles = StyleSheet.create({ page: { // fontFamily: 'Roboto', // Use registered font fontSize: 11, paddingTop: 30, paddingLeft: 60, paddingRight: 60, paddingBottom: 30, lineHeight: 1.5, flexDirection: 'column', }, header: { fontSize: 24, textAlign: 'center', marginBottom: 20, // fontWeight: 'bold', // Use if font supports it color: '#333', }, section: { marginBottom: 10, }, invoiceInfoContainer: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20, }, clientInfoContainer: { marginBottom: 20, borderTop: '1pt solid #eee', paddingTop: 10, }, infoText: { fontSize: 10, color: '#555', }, label: { fontWeight: 'bold', // Use number like 700 if font requires color: '#333', }, table: { // display: 'table', // Removed as it's default for View width: 'auto', borderStyle: 'solid', borderWidth: 1, borderRightWidth: 0, borderBottomWidth: 0, borderColor: '#d1d5db', // gray-300 marginBottom: 20, }, tableRow: { flexDirection: 'row', backgroundColor: '#fff', // white }, tableHeader: { flexDirection: 'row', backgroundColor: '#f9fafb', // gray-50 borderBottomWidth: 1, borderBottomColor: '#d1d5db', // gray-300 }, tableColHeader: { // width: '20%', // Adjust widths as needed borderStyle: 'solid', borderWidth: 1, borderLeftWidth: 0, borderTopWidth: 0, borderColor: '#d1d5db', // gray-300 padding: 5, textAlign: 'left', fontSize: 9, // fontWeight: 'bold', // Use number like 700 if font requires textTransform: 'uppercase', color: '#374151', // gray-700 }, tableCol: { // width: '20%', // Adjust widths as needed borderStyle: 'solid', borderWidth: 1, borderLeftWidth: 0, borderTopWidth: 0, borderColor: '#d1d5db', // gray-300 padding: 5, fontSize: 10, }, descriptionCol: { width: '40%' }, qtyCol: { width: '15%', textAlign: 'right' }, priceCol: { width: '20%', textAlign: 'right' }, totalCol: { width: '25%', textAlign: 'right' }, headerQtyCol: { width: '15%', textAlign: 'left'}, headerPriceCol: { width: '20%', textAlign: 'left'}, headerTotalCol: { width: '25%', textAlign: 'left'}, totalSection: { flexDirection: 'row', justifyContent: 'flex-end', marginTop: 10, borderTopWidth: 1, borderTopColor: '#eee', paddingTop: 5, }, totalLabel: { fontSize: 12, // fontWeight: 'bold', // Use number like 700 if font requires marginRight: 10, }, totalValue: { fontSize: 14, // fontWeight: 'bold', // Use number like 700 if font requires }, footer: { position: 'absolute', bottom: 30, left: 60, right: 60, textAlign: 'center', fontSize: 8, color: 'grey', }, }); interface InvoiceDocumentProps { invoice: InvoiceData; } const InvoiceDocument: React.FC = ({ invoice }) => { const formatDate = (dateInput: Date | string | undefined): string => { if (!dateInput) return 'N/A'; try { const date = typeof dateInput === 'string' ? new Date(dateInput) : dateInput; return date.toLocaleDateString(); } catch (e) { return 'Invalid Date'; } }; const formatCurrency = (amount: number | undefined): string => { if (typeof amount !== 'number') return 'N/A'; return `$${amount.toFixed(2)}`; }; // Calculate total amount if not provided const totalAmount = invoice.totalAmount ?? invoice.items.reduce((sum, item) => sum + item.quantity * item.price, 0); return ( {/* Header */} INVOICE {/* Invoice Info & Client Info */} Invoice Number: {invoice.invoiceNumber} Date: {formatDate(invoice.createdAt)} {/* Add Your Company Info Here */} Your Company Name 123 Your Street Your City, ST 12345 your.email@example.com Bill To: {invoice.clientName} {invoice.clientEmail && {invoice.clientEmail}} {/* Add more client address details if needed */} {/* Items Table */} {/* Table Header */} Description Qty Unit Price Total {/* Table Body */} {invoice.items.map((item, index) => ( {item.description} {item.quantity} {formatCurrency(item.price)} {formatCurrency(item.quantity * item.price)} ))} {/* Total */} TOTAL: {formatCurrency(totalAmount)} {/* Footer */} Thank you for your business! ); } export default InvoiceDocument; # 1. Base image FROM node:20-alpine AS base # 2. Builder stage FROM base AS builder WORKDIR /app # Install dependencies COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./ # Use npm ci for production builds if using package-lock.json RUN npm install --frozen-lockfile # Copy Prisma schema COPY prisma ./prisma/ # Copy application code COPY . . # Generate Prisma client (needed for build) RUN npx prisma generate # Build Next.js app # Set NEXT_TELEMETRY_DISABLED to avoid telemetry during build ENV NEXT_TELEMETRY_DISABLED 1 RUN npm run build # 3. Production stage FROM base AS runner WORKDIR /app # Set NODE_ENV to production ENV NODE_ENV production # Set NEXT_TELEMETRY_DISABLED to avoid telemetry in production ENV NEXT_TELEMETRY_DISABLED 1 # Install production dependencies only COPY --from=builder /app/package.json ./package.json # Use --omit=dev for npm v7+ or --production for older versions RUN npm install --omit=dev --frozen-lockfile # Copy Prisma schema and generated client (needed at runtime) COPY --from=builder /app/prisma ./prisma/ COPY --from=builder /app/node_modules/.prisma ./node_modules/.prisma # Copy built assets COPY --from=builder /app/public ./public COPY --from=builder --chown=node:node /app/.next/standalone ./ COPY --from=builder --chown=node:node /app/.next/static ./.next/static # Set user to non-root USER node # Expose port EXPOSE 3000 # Set host and port (important for Docker) ENV PORT 3000 ENV HOSTNAME "0.0.0.0" # Start the app using the standalone output CMD ["node", "server.js"] version: '3.8' services: app: build: context: . dockerfile: Dockerfile container_name: nextjs_invoice_app ports: - "3000:3000" # Map host port 3000 to container port 3000 depends_on: - mongo environment: # Pass the database URL to the Next.js app container # Make sure 'mongo' matches the service name below # Use the credentials defined for the mongo service DATABASE_URL: "mongodb://admin:password@mongo:27017/invoiceapp?authSource=admin" # NEXT_PUBLIC_ variables can be added here if needed volumes: # Mount code for development (optional, comment out for production-like build) # - .:/app # Exclude node_modules and .next from being overwritten by the volume mount # - /app/node_modules # - /app/.next # If you uncomment the volume mounts above, run `npm install` inside the container # or use the devcontainer setup. - ./src:/app/src # Mount only src for faster hot-reloading if needed - ./public:/app/public - ./prisma:/app/prisma - ./package.json:/app/package.json - ./tsconfig.json:/app/tsconfig.json - ./next.config.mjs:/app/next.config.mjs - ./tailwind.config.ts:/app/tailwind.config.ts - ./postcss.config.mjs:/app/postcss.config.mjs # command: npm run dev # Use this for development with hot-reloading networks: - invoice-network mongo: image: mongo:latest container_name: mongo_db ports: - "27017:27017" # Map host port 27017 to container port 27017 (optional, for external tools) environment: MONGO_INITDB_ROOT_USERNAME: admin MONGO_INITDB_ROOT_PASSWORD: password # MONGO_INITDB_DATABASE: invoiceapp # DB will be created on first connection volumes: - mongo-data:/data/db # Persist MongoDB data networks: - invoice-network volumes: mongo-data: # Define the named volume for MongoDB data networks: invoice-network: # Define the network driver: bridge Dockerfile .dockerignore node_modules npm-debug.log README.md .next .git .gitignore # Add anything else you don't want copied into the Docker image # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # Dependencies /node_modules /.pnp .pnp.js # Testing /coverage # Next.js build output /.next/ /out/ # Prisma /prisma/migrations/* !/prisma/migrations/migration_lock.toml # Keep lock file if needed, but often excluded too /prisma/generated-client # Usually generated on install/build # Production /build # Misc .DS_Store *.pem # Logs npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* # Local env files .env*.local .env # Editor directories and files .idea .vscode/* !.vscode/settings.json !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json *.sublime-workspace # Optional: Lockfiles (if you generate them locally and don't want to commit) # package-lock.json # yarn.lock # pnpm-lock.yaml // For format details, see https://aka.ms/devcontainer.json. For config options, see the // README at: https://github.com/devcontainers/templates/tree/main/src/docker-compose { "name": "Next.js Invoice App (Docker Compose)", "dockerComposeFile": ["../docker-compose.yml"], // Relative path to docker-compose.yml "service": "app", // The name of the service in docker-compose.yml to attach VS Code to "workspaceFolder": "/app", // The working directory inside the container // Features to add to the dev container. More info: https://containers.dev/features. // "features": {}, // Use 'forwardPorts' to make a list of ports inside the container available locally. "forwardPorts": [3000, 27017], // Forward Next.js app and MongoDB ports // Use 'postCreateCommand' to run commands after the container is created. "postCreateCommand": "npm install", // Install dependencies inside the container after creation // Configure tool-specific properties. "customizations": { // Configure properties specific to VS Code. "vscode": { // Add the IDs of extensions you want installed when the container is created. "extensions": [ "dbaeumer.vscode-eslint", // ESLint "esbenp.prettier-vscode", // Prettier "prisma.prisma", // Prisma syntax highlighting, formatting, etc. "bradlc.vscode-tailwindcss", // Tailwind CSS IntelliSense "ms-azuretools.vscode-docker" // Docker extension ], "settings": { // Optional: VS Code settings specific to this project "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "[prisma]": { "editor.defaultFormatter": "prisma.prisma" }, "files.eol": "\n" // Ensure consistent line endings } } } // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. // "remoteUser": "root" } **To run this project using Docker and VS Code:** 1. **Prerequisites:** Make sure you have Docker, Docker Compose, and VS Code with the "Dev Containers" extension installed. 2. **Save Files:** Save all the files above into a project directory structure as specified by the `filePath`. 3. **Open in Dev Container:** Open the project folder in VS Code. VS Code should detect the `.devcontainer/devcontainer.json` file and prompt you to "Reopen in Container". Click it. 4. **Build & Start:** Docker Compose will build the images and start the `app` (Next.js) and `mongo` services. The `postCreateCommand` (`npm install`) will run inside the `app` container. 5. **Database Setup:** The MongoDB container will start, and the `DATABASE_URL` in `.env` (and passed to the `app` container via `docker-compose.yml`) points the Next.js app to it. Prisma will connect to this database. The database `invoiceapp` will be created automatically when Prisma first connects. 6. **Run Prisma Migrate (Initial):** Although MongoDB doesn't use traditional migrations like SQL, you might run `npx prisma db push` inside the container's terminal (Terminal > New Terminal in VS Code) once to sync your schema with the database initially if needed (though often not strictly required for MongoDB schema changes handled by Prisma). 7. **Start Development Server:** In the VS Code terminal (which is now inside the container), run: bash npm run dev 8. **Access Application:** Open your browser and navigate to `http://localhost:3000`. You should see the invoice creation page. Now you can create invoices using the form. The data will be saved to the MongoDB database running in the Docker container, and you can preview/download the PDF.