feat(dashboard): list sources with statistics

2025-11-13 11:25:07 +02:00
parent 8cc40fde67
commit 6503980cbc
24 changed files with 1016 additions and 373 deletions
@@ -0,0 +1,54 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@basango/ui/components/breadcrumb";
+import { Separator } from "@basango/ui/components/separator";
+//import { LanguageSelector, ThemeSelector } from "@/components/ui/shared/settings";
+import { SidebarTrigger } from "@basango/ui/components/sidebar";
+
+export function PageHeader() {
+  return (
+    <header className="flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+      <div className="flex items-center gap-2 px-4">
+        <SidebarTrigger className="-ml-1" />
+        <Separator className="mr-2 data-[orientation=vertical]:h-4" orientation="vertical" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem className="hidden md:block">
+              <BreadcrumbLink href="#">Building Your Application</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator className="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+    </header>
+  );
+}
+
+//  <header className="border-b flex h-16 shrink-0 items-center justify-between gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+//       <div className="flex items-center gap-2 px-4">
+//         <SidebarTrigger className="-ml-1" />
+//         <Separator className="mr-2 data-[orientation=vertical]:h-4" orientation="vertical" />
+//         <Breadcrumb>
+//           <BreadcrumbList>
+//             <BreadcrumbItem className="hidden md:block">
+//               <Button className="cursor-pointer" onClick={() => navigate(-1)} variant="ghost">
+//                 <ArrowLeftIcon />
+//                 <span>{t("ui.shared.shell.page_header.go_back")}</span>
+//               </Button>
+//             </BreadcrumbItem>
+//           </BreadcrumbList>
+//         </Breadcrumb>
+//       </div>
+//       <div className="flex items-center gap-2 px-4">
+//         <LanguageSelector />
+//         <ThemeSelector />
+//       </div>
+//     </header>
@@ -0,0 +1,31 @@
+import React from "react";
+
+interface PageProps {
+  children: React.ReactNode;
+  title?: string | React.ReactNode;
+  leading?: string | React.ReactNode;
+}
+
+export const PageLayout = (props: React.PropsWithChildren<PageProps>) => {
+  const { title, leading, children } = props;
+
+  return (
+    <div className="flex flex-1 flex-col gap-4 p-4">
+      <div className="container mx-auto">
+        {title && (
+          <div className="mb-8 flex items-center justify-between space-y-4">
+            <div>
+              <h1 className="scroll-m-20 text-2xl font-extrabold tracking-tight text-balance flex items-center gap-2 justify-start">
+                {title}
+              </h1>
+              {leading && (
+                <p className="text-muted-foreground text-lg wrap-break-words">{leading}</p>
+              )}
+            </div>
+          </div>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,97 @@
+import { Skeleton } from "@basango/ui/components/skeleton";
+
+type Props = {
+  dashboard?: boolean;
+  details?: boolean;
+};
+
+const DashboardSkeleton = () => {
+  return (
+    <div className="flex flex-1 flex-col gap-4 p-4">
+      <div className="container mx-auto space-y-10">
+        <div className="space-y-2 mt-4">
+          <Skeleton className="h-8 w-[250px]" />
+          <Skeleton className="h-4 w-[550px]" />
+        </div>
+        <div className="space-y-2 mt-4">
+          <div className="grid grid-cols-3 gap-4">
+            <Skeleton className="h-[400px] w-full" />
+            <Skeleton className="h-[400px] w-full" />
+            <Skeleton className="h-[400px] w-full" />
+          </div>
+        </div>
+        <div className="space-y-2 mt-4">
+          <Skeleton className="h-[500px] w-full" />
+        </div>
+        <div className="mb-8 flex items-center justify-between space-y-6"></div>
+      </div>
+    </div>
+  );
+};
+
+const ListSkeleton = () => {
+  return (
+    <div className="flex flex-1 flex-col gap-4 p-4">
+      <div className="container mx-auto space-y-10">
+        <div className="space-y-2 mt-4">
+          <Skeleton className="h-8 w-[250px]" />
+          <Skeleton className="h-4 w-[550px]" />
+        </div>
+        <div className="space-y-2 mt-4">
+          <div className="space-y-2 mt-4 flex justify-between">
+            <div className="flex justify-between gap-4">
+              <Skeleton className="h-9 w-[380px]" />
+              <Skeleton className="h-9 w-[150px]" />
+            </div>
+            <Skeleton className="h-9 w-[150px]" />
+          </div>
+          <Skeleton className="h-[500px] w-full" />
+        </div>
+        <div className="mb-8 flex items-center justify-between space-y-6"></div>
+      </div>
+    </div>
+  );
+};
+
+const DetailsSkeleton = () => {
+  return (
+    <div className="flex flex-1 flex-col gap-4 p-4">
+      <div className="container mx-auto space-y-10">
+        <div className="space-y-2 mt-4">
+          <Skeleton className="h-8 w-[250px]" />
+          <Skeleton className="h-4 w-[550px]" />
+        </div>
+        <div className="space-y-2 mt-4">
+          <div className="space-y-2 mt-4 flex justify-between">
+            <div className="flex justify-between gap-4">
+              <Skeleton className="h-9 w-[380px]" />
+            </div>
+            <div className="flex justify-between gap-2">
+              <Skeleton className="h-9 w-[150px]" />
+              <Skeleton className="h-9 w-[150px]" />
+              <Skeleton className="h-9 w-[150px]" />
+            </div>
+          </div>
+          <Skeleton className="h-1 w-full mt-4" />
+          <Skeleton className="h-[100px] w-[700px] my-8" />
+          <div className="space-y-4">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <div className="grid grid-cols-3 gap-4" key={index}>
+                <Skeleton className="h-8 w-full" />
+                <Skeleton className="h-8 w-full" />
+                <Skeleton className="h-8 w-full" />
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="mb-8 flex items-center justify-between space-y-6"></div>
+      </div>
+    </div>
+  );
+};
+
+export const PageSkeleton = (props: Props) => {
+  if (props.dashboard) return <DashboardSkeleton />;
+  if (props.details) return <DetailsSkeleton />;
+  return <ListSkeleton />;
+};