Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added expense detail page #16

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

added expense detail page #16

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f2b65f0
added expense detail page
marvelalexius May 26, 2024
421db03
removed unused codes, changed expense detail title, and added todo
marvelalexius May 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 16 additions & 14 deletions app/components/card-expense.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,21 +34,23 @@ export function CardExpense({
<ul>
{expenses.map((expense) => (
<li className="my-2" key={expense.transaction_code}>
<div className="flex justify-between">
<h3 className="text-lg font-medium">{expense.description}</h3>
<h3 className="text-lg font-medium">
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(expense.idr_amount.toNumber())}
</h3>
</div>
<a href={`/expenses/123`}>
marvelalexius marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm, kenapa ga langsung pake transaction_code? atau dto nya belum final ya?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that's the question, masih unclear posisinya, but I think I'll change it to transaction_code langsung

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I'd also prefer this to be a /expenses/${expense.transaction_code}

<div className="flex justify-between">
<h3 className="text-lg font-medium">{expense.description}</h3>
<h3 className="text-lg font-medium">
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The currency won't always be IDR though

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, what should I use then? Should I use original_currency or do we have an env for deciding which currency to show?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should show both original currency and IDR currency though. The original transaction won't always be in IDR, but people who see this site mostly will come from Indonesia. So there's that.

}).format(expense.idr_amount.toNumber())}
</h3>
</div>

<p className="text-sm font-light">Category: {expense.category}</p>
<p className="text-sm font-light">
To: {expense.payout.recipient_name} -{" "}
{expense.timestamp.toDateString()}
</p>
<p className="text-sm font-light">Category: {expense.category}</p>
<p className="text-sm font-light">
To: {expense.payout.recipient_name} -{" "}
{expense.timestamp.toDateString()}
</p>
</a>
<Separator className="my-2" />
</li>
))}
Expand Down
36 changes: 36 additions & 0 deletions app/components/ui/badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "~/lib/utils"

const badgeVariants = cva(
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)

export interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
return (
<div className={cn(badgeVariants({ variant }), className)} {...props} />
)
}

export { Badge, badgeVariants }
112 changes: 112 additions & 0 deletions app/routes/expenses_.$expenseId.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import Navbar from "~/components/navbar";
import ExpenseSidebar from "~/components/expense-sidebar";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle
} from "~/components/ui/card";
import { Separator } from "~/components/ui/separator";
import { AccountEntry } from "~/dto/accountEntry";
import Decimal from "decimal.js";
import { Badge } from "~/components/ui/badge";

const expense: AccountEntry = {
transaction_code: "EXP-001",
description: "Sponsorship to Volar.js",
category: "server",
timestamp: new Date("2024-05-08"),
original_amount: new Decimal(5000),
original_currency: "usd",
idr_amount: new Decimal(70000),
type: "expense",
payout: {
recipient_name: "Volar.js",
method: "paypal",
},
}

const Index = () => {
return (
<div>
<Navbar />
<div className="container mx-auto px-4 py-8">
<h1 className="font-semibold text-2xl">Invoice #201775 to <a href="/">vue</a></h1>
<div className="flex space-x-8 mt-6">
<div className="flex-grow">
<Card>
<CardHeader>
<CardTitle className="mb-2">
{expense.description}
</CardTitle>
<CardDescription className="flex flex-col">
<div className="flex mb-2">
<Badge className="bg-gray-200 text-slate-900">{expense.type}</Badge>
<Separator orientation='vertical' className="bg-red mx-2" decorative />
<div className="flex gap-2">
<Badge className="bg-gray-300 text-slate-900">{expense.transaction_code}</Badge>
<Badge className="bg-gray-200 text-gray-600">{expense.category}</Badge>
</div>
</div>
<span>{expense.timestamp.toLocaleDateString()}</span>
</CardDescription>
</CardHeader>
<CardContent>
<div className="mb-4">
<h2 className="mb-2">Invoice Items</h2>
<Separator className="mb-8" />
<div className="mb-4 flex items-center">
<div className="grow">
<p className="mb-2">{expense.description}</p>
<span className="text-xs">Date: {expense.timestamp.toLocaleDateString()}</span>
</div>
<h3>
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(expense.idr_amount.toNumber())}
</h3>
</div>
<Separator />
<div className="flex m-4 w-full">
<div className="ml-auto mr-4 flex">
<h2 className="mr-6 font-bold text-lg">Total Amount</h2>
<h2 className="font-bold text-lg">
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(expense.idr_amount.toNumber())}
Comment on lines +76 to +79
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

kenapa ga di buat utility fungsi sendiri ya? jadi kalo misal ada yang perlu disesuaikan tinggal di satu tempat

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right, will do it later

</h2>
</div>
</div>
</div>
<div>
<h2 className="mb-2">Additional Information</h2>
<Separator className="mb-8" />
<div className="flex gap-4">
<Card className="w-3/12 border-0 bg-slate-50">
<CardHeader>
<h2 className="mb-2 text-gray-600">Paid To</h2>
</CardHeader>
<CardContent>
<h4>{expense.payout.recipient_name}</h4>
<h4 className="pt-2 capitalize">{expense.payout.method}</h4>
</CardContent>
</Card>
</div>
</div>
</CardContent>
{/* <CardFooter>
<ButtonLink to="#" name={footer} />
</CardFooter> */}
</Card>
</div>
<ExpenseSidebar />
</div>
</div>
</div>
);
};

export default Index;
Loading