Skip to content
codexa

Web apps · React

Team expenses

Collect team expense claims, approve them and see what is still waiting to be reimbursed.

Use this templateRemix
Team expenses starter, as built from its own files
Starter screenshot captured from this template's own build at 1440×900. It shows the template as it ships, not output generated from a prompt.

What you get

An expense tracker for a small team: log claims with category, amount and date, approve or reject them, and keep an eye on what is still owed. The categories, people and sample claims live in src/app.ts.

Files

Exactly what is copied into a new project: 12 files, nothing generated.

Raw data: GET /api/v1/templates/app-team-expenses

Explorer 12

src/app.ts
src/app.ts
import type { AppSpec } from "./types"; /** Everything this app shows. Edit freely. */export const app: AppSpec = {  "brand": "Receipts",  "icon": "chart",  "storageKey": "receipts-expenses-v1",  "entity": {    "singular": "Expense",    "plural": "Expenses"  },  "title": "Expenses",  "subtitle": "October claims for the London studio",  "currency": "£",  "titleKey": "description",  "statusKey": "status",  "tones": {    "Submitted": "accent",    "Approved": "warn",    "Reimbursed": "good",    "Rejected": "bad"  },  "views": [    "table",    "board"  ],  "fields": [    {      "key": "description",      "label": "Description",      "type": "text",      "required": true    },    {      "key": "person",      "label": "Submitted by",      "type": "select",      "options": [        "Chloe",        "Ben",        "Imran",        "Sofia"      ]    },    {      "key": "category",      "label": "Category",      "type": "select",      "options": [        "Travel",        "Meals",        "Software",        "Equipment",        "Office"      ]    },    {      "key": "amount",      "label": "Amount",      "type": "money",      "required": true    },    {      "key": "date",      "label": "Date",      "type": "date"    },    {      "key": "status",      "label": "Status",      "type": "select",      "options": [        "Submitted",        "Approved",        "Reimbursed",        "Rejected"      ]    },    {      "key": "notes",      "label": "Notes",      "type": "longtext",      "hideInTable": true    }  ],  "summary": [    {      "label": "Claims",      "kind": "count"    },    {      "label": "Awaiting approval",      "kind": "sum",      "field": "amount",      "status": "Submitted"    },    {      "label": "Approved, unpaid",      "kind": "sum",      "field": "amount",      "status": "Approved"    },    {      "label": "Reimbursed",      "kind": "sum",      "field": "amount",      "status": "Reimbursed"    }  ],  "seed": [    {      "description": "Train to Manchester client workshop",      "person": "Chloe",      "category": "Travel",      "amount": 148.6,      "date": "2026-10-06",      "status": "Reimbursed",      "notes": "Return, off-peak."    },    {      "description": "Team lunch after launch",      "person": "Ben",      "category": "Meals",      "amount": 212.4,      "date": "2026-10-09",      "status": "Approved",      "notes": "8 people."    },    {      "description": "Figma seats, October",      "person": "Sofia",      "category": "Software",      "amount": 90,      "date": "2026-10-01",      "status": "Reimbursed",      "notes": ""    },    {      "description": "USB-C dock for new hire",      "person": "Imran",      "category": "Equipment",      "amount": 129.99,      "date": "2026-10-14",      "status": "Submitted",      "notes": "For Jas, starts Nov 3."    },    {      "description": "Taxi from Heathrow",      "person": "Chloe",      "category": "Travel",      "amount": 64.2,      "date": "2026-10-18",      "status": "Submitted",      "notes": ""    },    {      "description": "Printer paper and toner",      "person": "Ben",      "category": "Office",      "amount": 58.75,      "date": "2026-10-21",      "status": "Approved",      "notes": ""    },    {      "description": "Conference dinner, Berlin",      "person": "Imran",      "category": "Meals",      "amount": 96.3,      "date": "2026-10-23",      "status": "Rejected",      "notes": "Covered by the conference ticket."    },    {      "description": "Stock photo licence",      "person": "Sofia",      "category": "Software",      "amount": 45,      "date": "2026-10-26",      "status": "Submitted",      "notes": "Homepage hero image."    }  ]};

Remix

Remix this template

Describe what to change and the agent starts from Team expenses's files. The box is already started for you: finish “Start from Team expenses and …”

Agent ready

Creates a free account first; your idea is carried over.

Dependencies

Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.

  • react^19.1.0
  • react-dom^19.1.0
  • vite^6.3.0
  • @vitejs/plugin-react^4.4.0
  • tailwindcss^4.1.0
  • @tailwindcss/vite^4.1.0
  • typescript^5.8.0

How it runs

Framework
Vite + React + TypeScript
Dev command
npm run dev
Build command
npm run build
Output directory
dist
Port
5173
Entry route
/

Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.

Keep browsing

All templates

Build on Team expenses

Create a free account, start from this template, and ask the AI agent to turn it into your app.

Use this templateAll templates