Filter categories

apps/dashboard/src/app/[locale]/(app)/@dashboard/(root)/transactions/page.tsx

@@ -23,7 +23,6 @@ export default async function Transactions({
   searchParams: { [key: string]: string | string[] | undefined };
 }) {
   // TODO: Check if there are transactions instead
-
   const [bankConnections, categories] = await Promise.all([
     getBankConnectionsByTeamId(),
     getCategories(),

apps/dashboard/src/components/charts/spending-category-list.tsx

@@ -30,7 +30,7 @@ export function SpendingCategoryList({ categories, period }) {
                   <Link
                     className="flex items-center"
                     href={`/transactions?filter=${JSON.stringify({
-                      categories: [{ slug: category, name: "Cat" }],
+                      categories: [category],
                       date: { from: period?.from, to: period?.to },
                     })}`}
                   >

apps/dashboard/src/components/filter.tsx

@@ -34,9 +34,10 @@ type SelectedOption = {
   value: string;
 };
 
-type Option = {
+type Option<TVal> = {
   id: string;
   label?: string;
+  renderLabel?: (value: TVal) => React.ReactNode;
   translationKey?: string;
   from?: Date;
   to?: Date;
@@ -57,9 +58,10 @@ type Section = {
 
 type Props = {
   sections: Section[];
+  categories: any;
 };
 
-export function Filter({ sections }: Props) {
+export function Filter({ sections, categories }: Props) {
   const t = useI18n();
   const searchParams = useSearchParams();
   const pathname = usePathname();
@@ -233,12 +235,7 @@ export function Filter({ sections }: Props) {
         if (filter.length) {
           const option = section?.options?.find((o) => o.id === filter.at(0));
 
-          // Category
-          if (filter.at(0)?.name) {
-            return filter.at(0)?.name;
-          }
-
-          return option?.translationKey
+          return option.renderLabel?.(option) ?? option?.translationKey
             ? t(option?.translationKey)
             : option?.label;
         }

apps/dashboard/src/components/tables/transactions/filters.tsx

@@ -122,6 +122,7 @@ export function transactionSections(categories) {
       label: "Categories",
       icon: Archive,
       type: SectionType.checkbox,
+      renderLabel: (value) => value.name,
       options: categories.map((category) => ({
         id: category.slug,
         label: category.name,

apps/dashboard/src/components/tables/transactions/index.tsx

@@ -23,17 +23,12 @@ export async function Table({ filter, page, sort, noAccounts, query }: Props) {
     cookies().get(Cookies.TransactionsColumns)?.value || "[]"
   );
 
-  const formatedFilters = {
-    ...filter,
-    categories: filter?.categories?.map((category) => category.slug),
-  };
-
   // NOTE: When we have a filter we want to show all results so users can select
   // And handle all in once (export etc)
   const transactions = await getTransactions({
     to: hasFilters ? maxItems : pageSize,
     from: 0,
-    filter: formatedFilters,
+    filter,
     sort,
     searchQuery: query,
   });
@@ -46,7 +41,7 @@ export async function Table({ filter, page, sort, noAccounts, query }: Props) {
     return getTransactions({
       to,
       from: from + 1,
-      filter: formatedFilters,
+      filter,
       sort,
       searchQuery: query,
     });