body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
h1 {
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}

Simple Invoice Application

const app = Vue.createApp({
data() {
return {
invoices: [
{ id: 1, customerName: ‘John Doe’, totalAmount: 100.00, status: ‘Paid’ },
{ id: 2, customerName: ‘Jane Smith’, totalAmount: 150.00, status: ‘Pending’ },
{ id: 3, customerName: ‘Bob Johnson’, totalAmount: 75.00, status: ‘Paid’ }
]
}
},
methods: {
viewInvoice(id) {
// Implement logic to view the selected invoice
alert(`Viewing invoice ${id}`);
}
}
});
app.mount(‘#app’);