added data table, formatter

revert context on __root beforeLoad
refactor project structure
refactor role badge
dynamic nav menu

src/components/sidebar/router-breadcrumb.tsx

@@ -0,0 +1,65 @@
+import { AnyRouteMatch, Link, useMatches } from '@tanstack/react-router'
+import { Fragment } from 'react/jsx-runtime'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '../ui/breadcrumb'
+
+export type BreadcrumbValue =
+  | string
+  | string[]
+  | ((match: AnyRouteMatch) => string | string[])
+
+const RouterBreadcrumb = () => {
+  const matches = useMatches()
+
+  const breadcrumbs = matches.flatMap((match) => {
+    const staticData = match.staticData;
+    if (!staticData?.breadcrumb) return [];
+
+    const breadcrumbValue =
+      typeof staticData.breadcrumb === 'function'
+        ? staticData.breadcrumb(match)
+        : staticData.breadcrumb;
+
+    const items = Array.isArray(breadcrumbValue)
+      ? breadcrumbValue
+      : [breadcrumbValue];
+
+    return items.map((item) => ({
+      label: item,
+      path: match.pathname,
+    }));
+  });
+
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        {breadcrumbs.map((crumb, index) => {
+          const isLast = index === breadcrumbs.length - 1
+
+          return (
+            <Fragment key={`${crumb.path}-${index}`}>
+              <BreadcrumbItem>
+                {isLast ? (
+                  <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
+                ) : (
+                  <BreadcrumbLink asChild>
+                    <Link to={crumb.path}>{crumb.label}</Link>
+                  </BreadcrumbLink>
+                )}
+              </BreadcrumbItem>
+              {!isLast && <BreadcrumbSeparator />}
+            </Fragment>
+          )
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
+
+export default RouterBreadcrumb