102 lines
2.2 KiB
Markdown
102 lines
2.2 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### Development
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
The app will be available at `http://localhost:5173`
|
|
|
|
### Build
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
### Preview Production Build
|
|
|
|
```bash
|
|
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
|
|
|