# AI Prompt: Generate Booking Financial Management Module

**Context:**
I need to implement a "Booking Financial Management" module in my frontend application. This module handles the calculation of booking costs, tracking of payments (deposits, balances), and application of promotions.

Please use the following API specifications and Data Structures to generate the necessary frontend code (API services, Types/Interfaces, and UI Components).

---

## 1. Data Structures (TypeScript Interfaces)

```typescript
// Payment Types
type PaymentType = 'deposit' | 'balance' | 'full' | 'other';
type PaymentStatus = 'paid' | 'pending' | 'cancelled';

export interface BookingPayment {
  id: number;
  booking_id: number;
  traveler_id?: number | null;
  amount: number; // Decimal string or number
  payment_date: string; // YYYY-MM-DD
  payment_type: PaymentType;
  transaction_type: 'payment' | 'refund';
  related_transaction_id?: number | null;
  remark?: string;
  status: PaymentStatus;
  created_at: string;
  updated_at: string;
}

export interface BookingDiscount {
  id: number;
  booking_id: number;
  traveler_id?: number | null;
  promotion_id?: number | null; // null => manual/custom discount
  name: string;
  applies_to: 'booking' | 'traveler';
  discount_type: 'amount' | 'percentage';
  discount_value: number;
  discount_amount: number;
  remark?: string;
  created_at: string;
  updated_at: string;
}

export interface ConfirmedAddon {
  id: number;
  title: string;
  final_cost: number;
  status: string;
}

export interface FinancialSummary {
  base_price_per_person: number;
  traveler_count: number;
  total_base_price: number;
  addons_total: number;
  discounts_total: number;
  total_receivable: number; // (Base + Addons - Discounts)
  total_paid: number;
  balance_due: number;
  payment_status: 'unpaid' | 'deposit_paid' | 'partially_paid' | 'fully_paid';
  currency: string;
  details: {
    payments: BookingPayment[];
    refunds: BookingPayment[]; // transaction_type='refund'
    discounts: BookingDiscount[];
    confirmed_addons: ConfirmedAddon[];
  };
}
```

## 2. API Endpoints

**Base URL:** `/api`

### A. Get Financial Summary
- **Endpoint:** `GET /bookings/{bookingId}/financial-summary`
- **Response:** `{ data: FinancialSummary }`

### B. Add Payment
- **Endpoint:** `POST /bookings/{bookingId}/payments`
- **Payload:**
  ```json
  {
    "traveler_id": 123,
    "amount": 30000,
    "payment_date": "2025-12-01",
    "payment_type": "deposit", // 'deposit', 'balance', 'full', 'other'
    "status": "paid", // 'paid', 'pending', 'cancelled'
    "remark": "Optional remark"
  }
  ```
- **Response:** `{ data: BookingPayment }`

### C. Update Payment
- **Endpoint:** `PUT /bookings/{bookingId}/payments/{paymentId}`
- **Payload:** (Same as Add Payment, all fields optional)
- **Response:** `{ data: BookingPayment }`

### D. Delete Payment
- **Endpoint:** `DELETE /bookings/{bookingId}/payments/{paymentId}`
- **Response:** `200 OK`

### E. Add Refund
- **Endpoint:** `POST /bookings/{bookingId}/refunds`
- **Notes:**
  - Refund can be **booking-level** (`traveler_id` omitted/null) or **traveler-level** (`traveler_id` set).
  - `related_transaction_id` is **optional** (use it only if the refund is linked to a specific payment transaction).
- **Payload:**
  ```json
  {
    "traveler_id": 123,
    "amount": 5000,
    "payment_date": "2025-12-10",
    "payment_type": "other",
    "status": "paid",
    "remark": "Refund for cancelled add-on",
    "related_transaction_id": 88
  }
  ```
- **Response:** `{ data: BookingPayment }` (returned `transaction_type` will be `"refund"`)

### F. Update Refund
- **Endpoint:** `PUT /bookings/{bookingId}/refunds/{refundId}`
- **Payload:** (Same as Add Refund, all fields optional)
- **Response:** `{ data: BookingPayment }`

### G. Delete Refund
- **Endpoint:** `DELETE /bookings/{bookingId}/refunds/{refundId}`
- **Response:** `200 OK`

### H. Add Discount
- **Endpoint:** `POST /bookings/{bookingId}/discounts`
- **Payload (promotion-based):** `{ "promotion_id": 5 }`
- **Payload (manual):** `{ "name": "Goodwill", "discount_type": "amount", "discount_value": 1000, "traveler_id": 123 }`
- **Response:** `{ data: BookingDiscount }` (Reload summary after this)

### I. Delete Discount
- **Endpoint:** `DELETE /bookings/{bookingId}/discounts/{discountId}`
- **Response:** `200 OK` (Reload summary after this)

---

## 3. Functional Requirements & UI Flow

Please generate a component (e.g., `BookingFinancials`) that implements the following:

1.  **Summary Card**:
    *   Display the breakdown:
        *   `Base Price` x `Travelers` = `Total Base`
        *   `+ Add-ons Total`
        *   `- Promotions Total`
        *   `= Total Receivable`
    *   Display `Total Paid` and `Balance Due`.
    *   Show a status badge based on `payment_status` (e.g., Green for Fully Paid, Yellow for Deposit Paid).

2.  **Payment List**:
    *   Table showing Date, Type, Amount, Status, Remark.
    *   Actions: Edit, Delete.

3.  **Add/Edit Payment Modal**:
    *   Form with fields: Amount, Date, Type (Select), Status (Select), Remark.
    *   On submit, call the API and refresh the summary.

4.  **Refund List**:
    *   Table showing Date, Amount, Status, Remark.
    *   Optional columns: Traveler, Related Payment Transaction ID.
    *   Actions: Edit, Delete.

5.  **Add/Edit Refund Modal**:
    *   Form with fields: Traveler (optional), Amount, Date, Type (Select), Status (Select), Remark, Related Payment (optional).
    *   On submit, call the API and refresh the summary.

6.  **Discounts Section**:
    *   List currently applied discounts (Name + Discount Amount).
    *   "Remove" button for each discount (by `discountId`).
    *   "Add Discount" action:
        * Promotion-based: input Promotion ID
        * Manual: name + type + value (+ optional traveler_id)

7.  **Logic**:
    *   Refetch the "Financial Summary" whenever a payment/refund is added/updated/deleted or a discount is added/deleted to ensure totals are correct.
    *   `total_paid` is **net paid**: (sum of paid payments) - (sum of paid refunds).

---

## 4. Tech Stack Implementation
*(Customize this section based on your specific project, e.g., React + React Query, Vue + Pinia, etc.)*

Please implement this using:
- **Framework:** [Insert Framework, e.g., React / Vue]
- **State Management:** [Insert Lib, e.g., React Query / TanStack Query / Pinia]
- **UI Library:** [Insert Lib, e.g., Tailwind CSS / Material UI / Ant Design]