129 lines
4.5 KiB
TypeScript
129 lines
4.5 KiB
TypeScript
import type { LoaderFunction } from "remix";
|
|
import { useLoaderData, Link, useCatch, redirect } from "remix";
|
|
import type { Expense, User } from "@prisma/client";
|
|
import { db } from "~/utils/db.server";
|
|
import { getUser } from "~/utils/session.server";
|
|
import Group from "~/icons/Group";
|
|
|
|
type LoaderData = { lastExpenses: (Expense & { user: User })[]; user: User };
|
|
|
|
export const loader: LoaderFunction = async ({ request }) => {
|
|
const user = await getUser(request);
|
|
if (!user) {
|
|
return redirect("/login");
|
|
}
|
|
const lastExpenses = await db.expense.findMany({
|
|
include: {
|
|
user: true,
|
|
},
|
|
take: 6,
|
|
orderBy: { createdAt: "desc" },
|
|
where: { teamId: user.teamId },
|
|
});
|
|
|
|
const data: LoaderData = { lastExpenses, user };
|
|
return data;
|
|
};
|
|
|
|
export default function JokesIndexRoute() {
|
|
const data = useLoaderData<LoaderData>();
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<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>
|
|
<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("it", {
|
|
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="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 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 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 lg:mr-2 w-6 h-6 stroke-current rotate-45"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
></path>
|
|
</svg>
|
|
<span className="block w-full mt-2 lg:mt-0 lg:w-auto lg:inline-block">
|
|
New
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<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 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>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function CatchBoundary() {
|
|
const caught = useCatch();
|
|
|
|
if (caught.status === 404) {
|
|
return (
|
|
<div className="error-container">There are no expenses to display.</div>
|
|
);
|
|
}
|
|
throw new Error(`Unexpected caught response with status: ${caught.status}`);
|
|
}
|
|
|
|
export function ErrorBoundary() {
|
|
return <div className="error-container">I did a whoopsies.</div>;
|
|
}
|