Skip to content

Instantly share code, notes, and snippets.

@03balogun

03balogun/expense-report.tsx

Last active November 28, 2024 12:44
Show Gist options
  • Save 03balogun/2c44dc2848248e39925488cf82557270 to your computer and use it in GitHub Desktop.
Save 03balogun/2c44dc2848248e39925488cf82557270 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
expense-report.tsx
// components/reports/Report.tsx
import {Document, Page, Font} from "@react-pdf/renderer";
import {PImage, PLink, PText, PView} from "@/components/pdf-ui";
Font.register({
family: "Work Sans",
fonts: [
{
src: `${BASE_CDN_URL}/Work_Sans/WorkSans-Regular.ttf`,
fontWeight: 400,
},
{
src: `${BASE_CDN_URL}/Work_Sans/WorkSans-Medium.ttf`,
fontWeight: 500,
}
],
});
export const Report = ({record}: ReportProps) => {
return <Document>
<Page size="A4" style={{
fontFamily: "Work Sans",
fontSize: 16,
color: 'rgb(31 41 55)',
padding: 24,
}}>
{/* HEADER */}
<PView className={'flex flex-row justify-between items-center mb-6'}>
<PView className={'flex flex-row items-center'}>
<PImage className={'h-10 w-10'}
src="https://res.cloudinary.com/trackfundx/image/upload/v1723306722/expense-ai-logo.png"
cache/>
<PView className={'ml-3'}>
<PText className={'font-semibold text-gray-800'}>Expense AI -
Report</PText>
<PText className={'text-xs text-gray-600'}>Generated on <PText
className={'font-medium'}>{record.currentDate}</PText> at <PText
className={'font-medium'}>{record.currentTime}</PText> via <PLink
className={'text-blue-800'}
href="https://expenseai.app?utm=expense-report"><PText className={'underline'}
>https://expenseai.app</PText></PLink></PText>
</PView>
</PView>
<PView className={'text-right'}>
<PText className={'font-semibold text-gray-800'}>{record.user.name}</PText>
<PText className={'text-xs'}>
<PLink className={'text-blue-800'} href="mailto:{{email}}">
{record.user.email}
</PLink>
</PText>
</PView>
</PView>
// ...
</Page>
</Document>
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment