soleprint/examples/fixture-invoicing/frontend/src/views/InvoiceDetail.vue

<template>
  <div v-if="invoice">
    <h2>
      Invoice {{ invoice.number }}
      <span :class="['status', invoice.status]">{{ invoice.status }}</span>
    </h2>
    <p class="muted">
      Customer: <strong>{{ invoice.customer.name }}</strong> ({{ invoice.customer.email }})
      · Issued {{ invoice.issued_at?.slice(0, 10) }}
      <span v-if="invoice.due_at"> · Due {{ invoice.due_at.slice(0, 10) }}</span>
    </p>

    <div class="card">
      <h3>Line items</h3>
      <table v-if="invoice.line_items.length">
        <thead>
          <tr>
            <th>Description</th>
            <th>Qty</th>
            <th>Unit price</th>
            <th>Total</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="li in invoice.line_items" :key="li.id">
            <td>{{ li.description }}</td>
            <td>{{ li.quantity }}</td>
            <td>${{ li.unit_price }}</td>
            <td>${{ (li.quantity * li.unit_price).toFixed(2) }}</td>
            <td><button class="ghost" @click="removeLine(li.id)">Remove</button></td>
          </tr>
        </tbody>
      </table>
      <p v-else class="muted">No line items.</p>

      <div class="actions" style="margin-top: 12px;">
        <input v-model="lineDraft.description" placeholder="Description" />
        <input type="number" v-model.number="lineDraft.quantity" style="width: 80px;" />
        <input type="number" step="0.01" v-model.number="lineDraft.unit_price" style="width: 120px;" />
        <button @click="addLine" :disabled="!lineDraft.description">Add line</button>
      </div>
    </div>

    <div class="card">
      <h3>Payments</h3>
      <table v-if="invoice.payments.length">
        <thead>
          <tr>
            <th>Amount</th>
            <th>Method</th>
            <th>Paid at</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="p in invoice.payments" :key="p.id">
            <td>${{ p.amount }}</td>
            <td>{{ p.method }}</td>
            <td>{{ p.paid_at?.slice(0, 10) }}</td>
            <td><button class="ghost" @click="removePayment(p.id)">Remove</button></td>
          </tr>
        </tbody>
      </table>
      <p v-else class="muted">No payments.</p>

      <div class="actions" style="margin-top: 12px;">
        <input type="number" step="0.01" v-model.number="payDraft.amount" placeholder="Amount" />
        <select v-model="payDraft.method">
          <option value="cash">cash</option>
          <option value="card">card</option>
          <option value="transfer">transfer</option>
        </select>
        <button @click="addPayment" :disabled="!payDraft.amount">Record payment</button>
      </div>
    </div>

    <p class="muted">
      Total billed: <strong>${{ totalBilled.toFixed(2) }}</strong>
      · Total paid: <strong>${{ totalPaid.toFixed(2) }}</strong>
      · Balance: <strong>${{ (totalBilled - totalPaid).toFixed(2) }}</strong>
    </p>
  </div>
  <p v-else class="muted">Loading…</p>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from "vue";
import { api } from "../api.js";

const props = defineProps({ id: { type: [String, Number], required: true } });

const invoice = ref(null);
const lineDraft = reactive({ description: "", quantity: 1, unit_price: 0 });
const payDraft = reactive({ amount: 0, method: "cash" });

const totalBilled = computed(() =>
  (invoice.value?.line_items || []).reduce(
    (sum, li) => sum + Number(li.quantity) * Number(li.unit_price), 0
  )
);
const totalPaid = computed(() =>
  (invoice.value?.payments || []).reduce(
    (sum, p) => sum + Number(p.amount), 0
  )
);

async function load() {
  invoice.value = await api.getInvoice(props.id);
}

async function addLine() {
  await api.addLineItem(props.id, { ...lineDraft });
  lineDraft.description = "";
  lineDraft.quantity = 1;
  lineDraft.unit_price = 0;
  await load();
}

async function removeLine(id) {
  await api.deleteLineItem(id);
  await load();
}

async function addPayment() {
  await api.recordPayment(props.id, { ...payDraft });
  payDraft.amount = 0;
  await load();
}

async function removePayment(id) {
  await api.deletePayment(id);
  await load();
}

watch(() => props.id, load);
onMounted(load);
</script>

<style scoped>
.actions input, .actions select {
  padding: 8px 10px;
  border: 1px solid #334;
  border-radius: 4px;
  background: #0d1b2a;
  color: var(--text);
}
</style>