nzambello/explit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: expenses ui

Browse source
This commit is contained in:
Nicola Zambello 2022-02-14 11:49:10 +01:00
parent f566bdc8a9
commit 66f09a8150
1 changed files with 49 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
app/routes/expenses/index.tsx
View file

@ -16,7 +16,7 @@ export const loader: LoaderFunction = async ({ request }) => {
include: { include: {
user: true, user: true,
}, },
take: 25, take: 6,
orderBy: { createdAt: "desc" }, orderBy: { createdAt: "desc" },
where: { teamId: user.teamId }, where: { teamId: user.teamId },
}); });
@ -30,11 +30,12 @@ export default function JokesIndexRoute() {
return ( return (
<div className="grid grid-cols-2 gap-4 p-4"> <div className="grid grid-cols-2 gap-4 p-4">
<div className="card shadow-lg compact side bg-base-100"> <div className="col-span-2 md:col-span-1 card shadow-lg compact side bg-base-100 order-last md:order-none">
<div className="flex-column items-center card-body"> <div className="flex-column items-center card-body !py-6">
<h2 className="card-title">Last expenses</h2> <h2 className="card-title">Last expenses</h2>
<ul className="list-none shadow-inner w-full rounded-lg p-4 my-4 mx-0 max-h-48 overflow-x-scroll">
{data.lastExpenses?.map((exp) => ( {data.lastExpenses?.map((exp) => (
<div className="flex w-full items-center mb-2" key={exp.id}> <li className="flex w-full items-center mb-3" key={exp.id}>
<div className="rounded-full w-10 h-10 inline-flex justify-center items-center bg-white text-3xl"> <div className="rounded-full w-10 h-10 inline-flex justify-center items-center bg-white text-3xl">
{exp.user.icon ?? exp.user.username[0]} {exp.user.icon ?? exp.user.username[0]}
</div> </div>
@ -47,27 +48,39 @@ export default function JokesIndexRoute() {
{-exp.amount} € {-exp.amount} €
</span> </span>
</div> </div>
<div className="grow ml-3">{exp.description}</div> <div className="grow ml-3 flex flex-col justify-center items-start">
<span className="text-xs opacity-50">
{new Intl.DateTimeFormat("en", {
dateStyle: "short",
timeStyle: "short",
}).format(new Date(exp.createdAt))}
</span>
<span className="font-bold">{exp.description}</span>
</div> </div>
</li>
))} ))}
</ul>
<Link to="list" className="btn"> <Link to="list" className="btn">
<span>See all</span> <span>See all</span>
</Link> </Link>
</div> </div>
</div> </div>
<div className="card shadow-lg compact side bg-base-100"> <div className="col-span-2 md:col-span-1 card shadow-lg compact side bg-base-100">
<div className="flex-row items-center space-x-4 card-body"> <div className="flex-row items-center space-x-4 card-body">
<h2 className="card-title">Who needs to pay who</h2> <h2 className="card-title">Who needs to pay who</h2>
</div> </div>
</div> </div>
<div className="card shadow-lg compact side bg-base-100"> <div className="card shadow-lg compact side md:bg-base-100 order-first md:order-none">
<div className="flex-row items-center justify-center space-x-4 card-body"> <div className="flex-row items-center justify-center space-x-4 card-body">
<Link to="new" className="btn btn-primary"> <Link
to="new"
className="btn btn-primary flex-wrap py-3 h-auto w-full"
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
className="inline-block mr-2 w-6 h-6 stroke-current rotate-45" className="inline-block lg:mr-2 w-6 h-6 stroke-current rotate-45"
> >
<path <path
stroke-linecap="round" stroke-linecap="round"
@ -76,15 +89,22 @@ export default function JokesIndexRoute() {
d="M6 18L18 6M6 6l12 12" d="M6 18L18 6M6 6l12 12"
></path> ></path>
</svg> </svg>
<span className="hidden lg:inline-block">Add an expense</span> <span className="block w-full mt-2 lg:mt-0 lg:w-auto lg:inline-block">
New expense
</span>
</Link> </Link>
</div> </div>
</div> </div>
<div className="card shadow-lg compact side bg-base-100"> <div className="card shadow-lg compact side md:bg-base-100 order-first md:order-none">
<div className="flex-row items-center justify-center space-x-4 card-body"> <div className="flex-row items-center justify-center space-x-4 card-body">
<Link to="new" className="btn btn-primary"> <Link
<Group className="inline-block mr-2 w-6 h-6 stroke-current" /> to="new"
<span className="hidden lg:inline-block">Trasfer</span> className="btn btn-primary flex-wrap py-3 h-auto w-full"
>
<Group className="inline-block lg:mr-2 w-6 h-6 stroke-current" />
<span className="block w-full mt-2 lg:mt-0 lg:w-auto lg:inline-block">
Trasfer
</span>
</Link> </Link>
</div> </div>
</div> </div>