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

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

@ -16,7 +16,7 @@ export const loader: LoaderFunction = async ({ request }) => {
include: {
user: true,
},
take: 25,
take: 6,
orderBy: { createdAt: "desc" },
where: { teamId: user.teamId },
});
@ -30,44 +30,57 @@ export default function JokesIndexRoute() {
return (
<div className="grid grid-cols-2 gap-4 p-4">
<div className="card shadow-lg compact side bg-base-100">
<div className="flex-column items-center card-body">
<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 !py-6">
<h2 className="card-title">Last expenses</h2>
{data.lastExpenses?.map((exp) => (
<div className="flex w-full items-center mb-2" key={exp.id}>
<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]}
</div>
<div className="font-bold w-16 ml-2 text-right">
<span
className={`${
exp.amount > 0 ? "text-error" : "text-success"
}`}
>
{-exp.amount} €
</span>
</div>
<div className="grow ml-3">{exp.description}</div>
</div>
))}
<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) => (
<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">
{exp.user.icon ?? exp.user.username[0]}
</div>
<div className="font-bold w-16 ml-2 text-right">
<span
className={`${
exp.amount > 0 ? "text-error" : "text-success"
}`}
>
{-exp.amount} €
</span>
</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>
</li>
))}
</ul>
<Link to="list" className="btn">
<span>See all</span>
</Link>
</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">
<h2 className="card-title">Who needs to pay who</h2>
</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">
<Link to="new" className="btn btn-primary">
<Link
to="new"
className="btn btn-primary flex-wrap py-3 h-auto w-full"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
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
stroke-linecap="round"
@ -76,15 +89,22 @@ export default function JokesIndexRoute() {
d="M6 18L18 6M6 6l12 12"
></path>
</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>
</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">
<Link to="new" className="btn btn-primary">
<Group className="inline-block mr-2 w-6 h-6 stroke-current" />
<span className="hidden lg:inline-block">Trasfer</span>
<Link
to="new"
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>
</div>
</div>