Skip to content

Commit

Permalink
feat: show user loans (#179)
Browse files Browse the repository at this point in the history
  • Loading branch information
@siddhart1o1
siddhart1o1 authored Jul 11, 2024
1 parent d0f7b8b commit 60f3d50
Show file tree
Hide file tree
Showing 7 changed files with 529 additions and 239 deletions.
246 changes: 75 additions & 171 deletions apps/customer-portal/app/loan/[loan-id]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,51 @@
"use client"
import { LoanIcon } from "@/components/icons"
import { Alert } from "@/components/primitive/alert"
import {
Key,
KeyValueCell,
KeyValueGroup,
Value,
} from "@/components/primitive/aligned-key-value"
import { Button } from "@/components/primitive/button"
import {
Card,
CardContent,
CardFooter,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/primitive/card"
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/primitive/table"

import { getLoan } from "@/lib/graphql/query/get-loan-details"
import { currencyConverter, formatCurrency, formatDate } from "@/lib/utils"

type Props = {
params: {
"loan-id": string
}
}

export default function LoanDetailsPage({ params }: Props) {
export default async function LoanDetailsPage({ params }: Props) {
const { "loan-id": loanId } = params
console.log(loanId)
const getLoanResponse = await getLoan({
variables: {
id: loanId,
},
})

if (getLoanResponse instanceof Error) {
return (
<main className="max-w-[70rem] m-auto mt-10">
<Card>
<CardHeader>
<CardTitle>ERROR!</CardTitle>
<CardDescription>Something went wrong</CardDescription>
</CardHeader>
<CardContent>
<Alert variant="destructive">{getLoanResponse.message}</Alert>
</CardContent>
</Card>
</main>
)
}

return (
<main className="max-w-[70rem] m-auto mt-10">
Expand All @@ -47,188 +61,78 @@ export default function LoanDetailsPage({ params }: Props) {
<CardContent className="ml-8 gap-4 flex flex-col mt-2">
<div className="flex justify-between">
<div>
<p className="text-sm">Fixed Rate Loan</p>
<p className="font-semibold text-lg">Loan #123456789 </p>
<p className="text-sm">Details</p>
<p className="font-semibold text-lg">
Loan #{getLoanResponse.loan?.loanId}
</p>
</div>
<div className="text-right">
<p className="text-sm">Refresh Print Export</p>
<p className="font-semibold text-lg">October 31, 2024</p>
<p className="font-semibold text-lg">
{formatDate(getLoanResponse.loan?.startDate)}
</p>
</div>
</div>
<div className="flex gap-4 w-full">
<LoanOverviewCard />
<CollateralValueToLoanCard />
<LoanOverviewCard
details={[
{
key: "Collateral",
value: formatCurrency({
amount: getLoanResponse.loan?.balance.collateral.btcBalance,
currency: "SATS",
}),
},
{
key: "interest Incurred",
value: formatCurrency({
amount: currencyConverter.centsToUsd(
getLoanResponse.loan?.balance.interestIncurred.usdBalance,
),
currency: "USD",
}),
},
{
key: "Outstanding",
value: formatCurrency({
amount: currencyConverter.centsToUsd(
getLoanResponse.loan?.balance.outstanding.usdBalance,
),
currency: "USD",
}),
},
]}
/>
</div>
<LoanContractTerms />
</CardContent>
<LoanDetailsTable />
</Card>
</main>
)
}

const CollateralValueToLoanCard = () => {
const collateralValues = [
{
key: "Collateral Value",
value: "$100,000",
},
{
key: "Loan Amount",
value: "$100,000",
},
{
key: "APR",
value: "$100,000",
},
{
key: "Interest Accrued",
value: "$100,000",
},
{
key: "Balance (Principal + Interest)",
value: "$100,000",
},
]

return (
<Card variant="secondary" className="w-1/2">
<CardHeader>
<CardTitle>Collateral Value to Loan (CVL)</CardTitle>
</CardHeader>
<CardContent className="flex flex-col text-sm">
<KeyValueGroup>
{collateralValues.map(({ key, value }) => (
<KeyValueCell className="p-0.5 px-3 hover:bg-primary-foreground" key={key}>
<Key className="text-textColor-primary">{key}</Key>
<Value>{value}</Value>
</KeyValueCell>
))}
</KeyValueGroup>
</CardContent>
<CardFooter>
<Button>Top Up Collateral</Button>
</CardFooter>
</Card>
)
}

const LoanOverviewCard = () => {
const loanOverview = [
{
key: "Loan amount",
value: "$100,000",
},
{
key: "APR",
value: "$100,000",
},
{
key: "Interest accrued",
value: "$100,000",
},
{
key: "Duration",
value: "6 months",
},
{
key: "Balance (Principal + Interest)",
value: "$100,000",
},
]

const LoanOverviewCard = ({
details,
}: {
details: {
key: string
value: string | number
}[]
}) => {
return (
<Card variant="secondary" className="w-1/2">
<Card variant="secondary" className="w-full">
<CardHeader>
<CardTitle>Loan Overview</CardTitle>
</CardHeader>
<CardContent className="flex flex-col text-sm">
<CardContent className="flex flex-col text-md">
<KeyValueGroup>
{loanOverview.map(({ key, value }) => (
{details.map(({ key, value }) => (
<KeyValueCell className="p-0.5 px-3 hover:bg-primary-foreground" key={key}>
<Key className="text-textColor-primary">{key}</Key>
<Key className="text-textColor-primary text-md">{key}</Key>
<Value>{value}</Value>
</KeyValueCell>
))}
</KeyValueGroup>
</CardContent>
<CardFooter>
<Button>Make a Payment</Button>
</CardFooter>
</Card>
)
}

const LoanContractTerms = () => {
return (
<Card>
<CardHeader>
<CardTitle>Loan Contract Terms</CardTitle>
</CardHeader>
<CardContent>
<ul className="list-disc pl-5">
<li>Interest Rate: 5% (fixed for 6 month term)</li>
<li>
Interest Accrual: Monthly Payment Schedule: Full repayment upon term end
</li>
<li>Early Repayment Penalty: None Loan Disbursement Time: Within 24 to 48</li>
<li>hours after approval</li>
</ul>
</CardContent>
<CardContent>
<p className="mb-2">Collateral Value to Loan (CVL) Details.</p>
<ul className="list-disc pl-5">
<li>Target CVL: 150%</li>
<li>Margin Call: 120%</li>
<li>Loan Liquidation: 105%</li>
</ul>
<p className="mt-6">For questions or support, contact [email protected]</p>
</CardContent>
</Card>
)
}

const LoanDetailsTable = () => {
return (
<CardContent>
<Table className="w-11/12 m-auto mb-20 mt-6">
<TableHeader>
<TableRow>
<TableHead>Date</TableHead>
<TableHead>Description</TableHead>
<TableHead>Transaction ID</TableHead>
<TableHead>Amount (BTC)</TableHead>
<TableHead>USD Value</TableHead>
<TableHead className="text-right">Entry</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>2021-09-01</TableCell>
<TableCell>Loan Disbursement</TableCell>
<TableCell>0x1234</TableCell>
<TableCell>0.1</TableCell>
<TableCell>$1000</TableCell>
<TableCell className="text-right"> -$165.00</TableCell>
</TableRow>
<TableRow>
<TableCell>2021-09-01</TableCell>
<TableCell>Loan Disbursement</TableCell>
<TableCell>0x1234</TableCell>
<TableCell>0.1</TableCell>
<TableCell>$1000</TableCell>
<TableCell className="text-right"> -$165.00</TableCell>
</TableRow>
<TableRow>
<TableCell>2021-09-01</TableCell>
<TableCell>Loan Disbursement</TableCell>
<TableCell>0x1234</TableCell>
<TableCell>0.1</TableCell>
<TableCell>$1000</TableCell>
<TableCell className="text-right"> -$165.00</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
)
}
Loading

0 comments on commit 60f3d50

Please sign in to comment.