Amba Checkout

A frontend-only checkout system similar to Stripe checkout with transaction review capabilities and admin interface for flagging suspicious accounts.

Features

Multi-step Checkout Flow
- Fund request form
- Account type selection (Business/Personal)
- Transaction confirmation
- Status display
Admin Interface
- Dashboard with statistics
- Transaction management
- Suspicious transaction review
- Account flagging/unflagging
Design
- Clean, modern UI
- Mobile responsive
- Green primary color theme matching provided design

Tech Stack

React 18
TypeScript
Vite
Tailwind CSS
React Router
React Hook Form
React Icons
Zustand (for state management)

Getting Started

Installation

npm install

Development

npm run dev

The app will be available at http://localhost:5173

Build

npm run build

Preview Production Build

npm run preview

Project Structure

src/
├── components/
│   ├── checkout/          # Checkout flow components
│   ├── admin/             # Admin interface components
│   ├── layout/            # Layout components
│   └── ui/                # Reusable UI components
├── contexts/              # React contexts
├── pages/                  # Page components
├── types/                  # TypeScript types
└── utils/                  # Utility functions (API client)

API Integration

The project includes a mock API client in src/utils/api.ts. When the backend is ready, update the API_BASE_URL environment variable and replace the mock implementations with real API calls.

Set the environment variable:

VITE_API_BASE_URL=http://your-backend-url/api

Routes

/ - Checkout flow
/admin - Admin dashboard
/admin/transactions - Transaction list
/admin/suspicious - Suspicious transactions review
/admin/accounts - Account management

Development Notes

All components are mobile responsive
Mock data is used for development (backend is separate)
The design matches the provided account selection screen with green theme
Transaction statuses: pending, approved, rejected, suspicious

2.2 KiB Raw Blame History