mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-02-22 18:22:00 +00:00
i701
e815da495a
- Introduced createPayment action for handling payment creation. - Added PaymentsTable component for displaying payment records with pagination. - Implemented new PaymentPage for viewing individual payment details and associated devices. - Refactored DeviceCartDrawer to integrate payment creation and device selection. - Enhanced DevicesToPay component to display devices based on payment status. - Updated PriceCalculator component for better user input handling. - Introduced NumberInput component for consistent number input across forms. - Modified Prisma schema to include new fields for payments and devices. - Improved overall user experience with responsive design adjustments and new UI elements.
68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import {
|
||
Table,
|
||
TableBody,
|
||
TableCaption,
|
||
TableCell,
|
||
TableFooter,
|
||
TableRow,
|
||
} from "@/components/ui/table"
|
||
import type { BillFormula, Prisma } from "@prisma/client"
|
||
import React from 'react'
|
||
|
||
|
||
type PaymentWithDevices = Prisma.PaymentGetPayload<{
|
||
include: {
|
||
devices: true
|
||
}
|
||
}>
|
||
|
||
export default function DevicesToPay({ billFormula, payment }: { billFormula?: BillFormula, payment?: PaymentWithDevices }) {
|
||
const devices = payment?.devices
|
||
if (devices?.length === 0) {
|
||
return null
|
||
}
|
||
const baseAmount = billFormula?.baseAmount ?? 100
|
||
const discountPercentage = billFormula?.discountPercentage ?? 75
|
||
// 100+(n−1)×75
|
||
const total = baseAmount + (devices?.length ?? 1 - 1) * discountPercentage
|
||
return (
|
||
<div className='w-full'>
|
||
<div className='p-2 flex flex-col gap-2'>
|
||
<h3 className='title-bg my-1 font-semibold text-lg'>
|
||
{!payment?.paid ? 'Devices to pay' : 'Devices Paid'}
|
||
</h3>
|
||
<div className="flex flex-col gap-2">
|
||
{devices?.map((device) => (
|
||
<div key={device.id} className="bg-muted border rounded p-2 flex gap-2 items-center">
|
||
<div className="flex flex-col">
|
||
<div className="text-sm font-medium">{device.name}</div>
|
||
<div className="text-xs text-muted-foreground">
|
||
{device.mac}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className='m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded'>
|
||
<Table>
|
||
<TableCaption>Please send the following amount to the payment address</TableCaption>
|
||
<TableBody>
|
||
<TableRow>
|
||
<TableCell>Total Devices</TableCell>
|
||
<TableCell className="text-right">{devices?.length}</TableCell>
|
||
</TableRow>
|
||
</TableBody>
|
||
<TableFooter>
|
||
<TableRow>
|
||
<TableCell colSpan={1}>Total</TableCell>
|
||
<TableCell className="text-right">{total.toFixed(2)}</TableCell>
|
||
</TableRow>
|
||
</TableFooter>
|
||
</Table>
|
||
</div>
|
||
</div>
|
||
|
||
)
|
||
}
|