107 lines
4.3 KiB
HTML
107 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" class="h-full bg-gray-100">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Invoices | Restaurant Management</title>
|
||
<script type="module" src="src/main.js" defer></script>
|
||
</head>
|
||
<body class="h-full flex items-center justify-center p-4">
|
||
|
||
<div x-data="invoiceApp()" class="w-full max-w-2xl bg-white shadow-lg rounded-lg overflow-hidden font-mono">
|
||
|
||
<!-- Create Invoice -->
|
||
<div class="p-6 space-y-4">
|
||
<div class="flex justify-between">
|
||
<h2 class="text-2xl font-semibold">Create Invoice</h2>
|
||
<button
|
||
type="button"
|
||
@click="openMain()"
|
||
class="bg-red-400 text-white px-4 py-2 rounded hover:bg-red-500"
|
||
>Close Manager</button>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<select x-model="selectedId" class="flex-1 border rounded p-2">
|
||
<option value="" disabled>Select item…</option>
|
||
<template x-for="item in menu" :key="item.id">
|
||
<option :value="item.id"
|
||
x-text="item.name + ' ($' + Number(item.price).toFixed(2) + ')'"></option>
|
||
</template>
|
||
</select>
|
||
<input type="number" x-model.number="quantity" min="1" placeholder="Qty"
|
||
class="w-20 border rounded p-2" />
|
||
<button @click="addLine()"
|
||
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
|
||
Add
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Invoice Lines & Total -->
|
||
<template x-if="lines.length">
|
||
<div class="space-y-2 border-t pt-4">
|
||
<template x-for="(line, idx) in lines" :key="idx">
|
||
<div class="flex justify-between">
|
||
<span x-text="line.name + ' × ' + line.qty"></span>
|
||
<span x-text="'$' + (line.price * line.qty).toFixed(2)"></span>
|
||
</div>
|
||
</template>
|
||
<div class="flex justify-between font-semibold">
|
||
<span>Total:</span>
|
||
<span x-text="'$' + total.toFixed(2)"></span>
|
||
</div>
|
||
<button @click="saveInvoice()"
|
||
class="w-full bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
|
||
Save Invoice
|
||
</button>
|
||
</div>
|
||
</template>
|
||
<template x-if="!lines.length">
|
||
<p class="text-gray-500">No items added.</p>
|
||
</template>
|
||
</div>
|
||
|
||
<!-- Invoice List -->
|
||
<div class="bg-gray-50 p-6 border-t space-y-4 max-h-[400px] overflow-auto">
|
||
<h2 class="text-2xl font-semibold">Invoices</h2>
|
||
|
||
<template x-if="invoices.length">
|
||
<template x-for="inv in invoices" :key="inv.id">
|
||
<div class="border rounded p-4 bg-white space-y-2">
|
||
<div class="flex justify-between items-center">
|
||
<span>Invoice #<span x-text="inv.id"></span></span>
|
||
<div class="space-x-2">
|
||
<button @click="printInvoice(inv)"
|
||
class="text-green-600 hover:underline text-sm">
|
||
Print
|
||
</button>
|
||
<button @click="deleteInvoice(inv.id)"
|
||
class="text-red-500 hover:underline text-sm">
|
||
Delete
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-1 mb-2">
|
||
<template x-for="line in inv.lines" :key="line.id">
|
||
<div class="flex justify-between text-sm">
|
||
<span x-text="line.name + ' × ' + line.quantity"></span>
|
||
<span x-text="'$' + (line.price * line.quantity).toFixed(2)"></span>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div class="flex justify-between font-medium">
|
||
<span>Total:</span>
|
||
<span x-text="'$' + inv.total.toFixed(2)"></span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
|
||
<template x-if="!invoices.length">
|
||
<p class="text-gray-500">No invoices yet.</p>
|
||
</template>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|