feat: implement category history widget and loading state for category history page

components/sidebar/nav-link.tsx

@@ -6,6 +6,7 @@ import {
   RiDashboardLine,
   RiFundsLine,
   RiGroupLine,
+  RiLineChartLine,
   RiPriceTag3Line,
   RiSettingsLine,
   RiSparklingLine,
@@ -19,6 +20,7 @@ export type SidebarSubItem = {
   avatarUrl?: string | null;
   isShared?: boolean;
   key?: string;
+  icon?: RemixiconComponentType;
 };
 
 export type SidebarItem = {
@@ -65,6 +67,8 @@ export function createSidebarNavData(pagadores: PagadorLike[]): SidebarNavData {
       a.title.localeCompare(b.title, "pt-BR", { sensitivity: "base" })
     );
 
+  const pagadorItemsWithHistory: SidebarSubItem[] = pagadorItems;
+
   return {
     navMain: [
       {
@@ -114,12 +118,20 @@ export function createSidebarNavData(pagadores: PagadorLike[]): SidebarNavData {
             title: "Pagadores",
             url: "/pagadores",
             icon: RiGroupLine,
-            items: pagadorItems,
+            items: pagadorItemsWithHistory,
           },
           {
             title: "Categorias",
             url: "/categorias",
             icon: RiPriceTag3Line,
+            items: [
+              {
+                title: "Histórico",
+                url: "/categorias/historico",
+                key: "historico-categorias",
+                icon: RiLineChartLine,
+              },
+            ],
           },
         ],
       },

components/sidebar/nav-main.tsx

@@ -39,6 +39,7 @@ type NavItem = {
     avatarUrl?: string | null;
     isShared?: boolean;
     key?: string;
+    icon?: RemixiconComponentType;
   }[];
 };
 
@@ -158,7 +159,9 @@ export function NavMain({ sections }: { sections: NavSection[] }) {
                                         href={buildHrefWithPeriod(subItem.url)}
                                         className="flex items-center gap-2"
                                       >
-                                        {subItem.avatarUrl !== undefined ? (
+                                        {subItem.icon ? (
+                                          <subItem.icon className="size-4" />
+                                        ) : subItem.avatarUrl !== undefined ? (
                                           <Avatar className="size-5 border border-border/60 bg-background">
                                             <AvatarImage
                                               src={avatarSrc}