Interface
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data β all from the browser, and deployed in milliseconds.
Viewing readonly version of main branch: v14View latest version
A colorful and attractive daily expense tracking application for a fueling station with three branches selling diesel and petrol.
- Track daily expenses across 3 branches
- Separate tracking for diesel and petrol sales
- Colorful, modern UI with gradients and animations
- Real-time expense management
- Daily, weekly, and monthly summaries
- Responsive design
βββ backend/
β βββ database/
β β βββ migrations.ts # Database schema
β β βββ queries.ts # Database operations
β βββ routes/
β β βββ expenses.ts # Expense API routes
β βββ index.ts # Main server entry point
βββ frontend/
β βββ components/
β β βββ App.tsx # Main application component
β β βββ ExpenseForm.tsx # Add expense form
β β βββ ExpenseList.tsx # Display expenses
β β βββ Dashboard.tsx # Summary dashboard
β βββ index.html # Main HTML template
β βββ index.tsx # Frontend entry point
β βββ style.css # Custom styles
βββ shared/
βββ types.ts # Shared TypeScript types
- Backend: Hono.js with SQLite database
- Frontend: React with TypeScript
- Styling: TailwindCSS with custom gradients
- Icons: Lucide React icons
β The application is now ready and fully functional!
- β Colorful, modern UI with gradients and animations
- β Track expenses across 3 branches (Branch A, B, C)
- β Support for Diesel and Petrol fuel types
- β 10 expense categories including Fuel Purchase, Equipment Maintenance, Staff Wages, etc.
- β Real-time dashboard with today/week/month summaries
- β Beautiful glass-effect cards with branch-specific gradients
- β Add new expenses with form validation
- β View and filter expense list
- β Delete expenses with confirmation
- β Responsive design for mobile and desktop
- β SQLite database with proper indexing
- β RESTful API endpoints
- Dashboard: View summaries, fuel type breakdown, branch totals, and recent expenses
- Add Expense: Fill out the colorful form to add new expenses
- View Expenses: Browse all expenses with filtering options
The application features a beautiful purple gradient background with colorful cards for each branch and fuel type, making it both functional and visually appealing!