sarlink-portal/components/devices-to-pay.tsx

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>

  )
}