Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 30x 540x 540x 540x 540x 540x 540x 540x | import { useTranslation } from "react-i18next";
import { PageHeader } from "~app/components/page-header";
import { EmailVerificationCard } from "~app/features/email-verification/email-verification-card";
import { useDefaultLimit } from "~app/hooks/use-default-limit";
import { getPathHooks } from "~app/utils/navigation";
import { Icon } from "~components/icons";
import { ButtonLink } from "~components/link";
import { FilterButton } from "./filter-button";
import { Receipts } from "./receipts";
export const ReceiptsScreen = () => {
const { useQueryState, useDefaultedQueryState } = getPathHooks(
"/_protected/receipts/",
);
const sortState = useQueryState("sort");
const filtersState = useQueryState("filters");
const limitState = useDefaultedQueryState("limit", useDefaultLimit());
const offsetState = useQueryState("offset");
const { t } = useTranslation("receipts");
return (
<>
<PageHeader
startContent={<Icon name="receipt" className="size-9" />}
aside={
<>
<FilterButton filtersState={filtersState} sortState={sortState} />
<ButtonLink
color="primary"
to="/receipts/add"
title={t("list.addButton")}
variant="bordered"
isIconOnly
>
<Icon name="add" className="size-6" />
</ButtonLink>
</>
}
>
{t("list.header")}
</PageHeader>
<EmailVerificationCard />
<Receipts
filtersState={filtersState}
sort={sortState[0]}
limitState={limitState}
offsetState={offsetState}
/>
</>
);
};
|