65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
import CreateRandomInvoiceContainer from '@/app/dashboard/components/client/create-random-invoice/create-random-invoice';
|
|
import latestInvoicesController from '@/app/dashboard/components/server/latest-invoices/latest-invoices-controller';
|
|
import { ArrowPathIcon } from '@heroicons/react/24/outline';
|
|
import clsx from 'clsx';
|
|
import Image from 'next/image';
|
|
|
|
export default async function LatestInvoices() {
|
|
const latestInvoices = await latestInvoicesController();
|
|
|
|
const invoices = latestInvoices.map((invoice, i) => {
|
|
return (
|
|
<div
|
|
key={invoice.id}
|
|
className={clsx(
|
|
'flex flex-row items-center justify-between py-4',
|
|
{
|
|
'border-t': i !== 0,
|
|
},
|
|
)}
|
|
>
|
|
<div className="flex items-center">
|
|
<Image
|
|
src={invoice.customerImageUrl}
|
|
alt={`${invoice.customerName}'s profile picture`}
|
|
className="mr-4 rounded-full"
|
|
width={32}
|
|
height={32}
|
|
/>
|
|
<div className="min-w-0">
|
|
<p className="truncate text-sm font-semibold md:text-base">
|
|
{invoice.customerName}
|
|
</p>
|
|
<p className="hidden text-sm text-gray-500 sm:block">
|
|
{invoice.customerEmail}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p
|
|
className="truncate text-sm font-medium md:text-base"
|
|
>
|
|
{invoice.invoicesAmount}
|
|
</p>
|
|
</div>
|
|
);
|
|
})
|
|
return (
|
|
<div className="flex w-full flex-col md:col-span-4">
|
|
<h2 className="mb-4 text-xl md:text-2xl">
|
|
Latest Invoices
|
|
</h2>
|
|
<div className="flex grow flex-col max-h-[66.5vh] justify-between rounded-xl bg-gray-50 p-4">
|
|
|
|
<div className="bg-white px-6 h-full overflow-y-auto">
|
|
{invoices}
|
|
</div>
|
|
<div className="flex items-end mt-auto pb-2 pt-6">
|
|
<ArrowPathIcon className="h-5 w-5 text-gray-500" />
|
|
<h3 className="ml-2 text-sm text-gray-500 ">Updated just now</h3>
|
|
</div>
|
|
<CreateRandomInvoiceContainer />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|