feat(dashboard): add reports

apps/dashboard/src/app/[locale]/(app)/(sidebar)/articles/page.tsx

@@ -2,18 +2,18 @@ import { Metadata } from "next";
 
 import { ArticlesFeed } from "#dashboard/components/articles-feed";
 import { PageLayout } from "#dashboard/components/shell/page-layout";
-import { HydrateClient, batchPrefetch, trpc } from "#dashboard/trpc/server";
+import { HydrateClient, prefetch, trpc } from "#dashboard/trpc/server";
 
 export const metadata: Metadata = {
   title: "Articles | Basango Dashboard",
 };
 
 export default function Page() {
-  batchPrefetch([trpc.articles.list.infiniteQueryOptions({ limit: 12 })]);
+  prefetch(trpc.articles.list.infiniteQueryOptions({ limit: 12 }));
 
   return (
     <HydrateClient>
-      <PageLayout leading="Track crawled content and trends" title="Articles">
+      <PageLayout title="Articles">
         <ArticlesFeed />
       </PageLayout>
     </HydrateClient>

apps/dashboard/src/app/[locale]/(app)/(sidebar)/dashboard/page.tsx

@@ -2,6 +2,7 @@ import { Metadata } from "next";
 
 import { PublicationGraphChart } from "#dashboard/components/charts/articles/publication-graph-chart";
 import { SourceDistributionChart } from "#dashboard/components/charts/articles/source-distribution-chart";
+import { DashboardOverviewCard } from "#dashboard/components/dashboard-overview-card";
 import { PageLayout } from "#dashboard/components/shell/page-layout";
 import { HydrateClient, batchPrefetch, trpc } from "#dashboard/trpc/server";
 
@@ -11,15 +12,17 @@ export const metadata: Metadata = {
 
 export default async function Page() {
   batchPrefetch([
+    trpc.reports.getDashboardOverview.queryOptions(),
     trpc.articles.getPublications.queryOptions({}),
     trpc.articles.getSourceDistribution.queryOptions({ limit: 8 }),
   ]);
 
   return (
     <HydrateClient>
-      <PageLayout leading="Keep track of article volume and source coverage" title="Dashboard">
+      <PageLayout title="Dashboard">
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-4">
-          <div className="lg:col-span-3">
+          <div className="lg:col-span-3 gap-4 flex flex-col">
+            <DashboardOverviewCard />
             <PublicationGraphChart />
           </div>
           <SourceDistributionChart />

apps/dashboard/src/app/[locale]/(app)/(sidebar)/layout.tsx

@@ -1,6 +1,5 @@
 import { SidebarInset, SidebarProvider } from "@basango/ui/components/sidebar";
 
-import { PageHeader } from "#dashboard/components/shell/page-header";
 import { AppSidebar } from "#dashboard/components/sidebar/app-sidebar";
 import { HydrateClient } from "#dashboard/trpc/server";
 
@@ -10,10 +9,7 @@ export default async function Layout({ children }: { children: React.ReactNode }
       <SidebarProvider>
         <AppSidebar />
 
-        <SidebarInset>
-          <PageHeader />
-          {children}
-        </SidebarInset>
+        <SidebarInset>{children}</SidebarInset>
       </SidebarProvider>
     </HydrateClient>
   );

apps/dashboard/src/app/[locale]/(app)/(sidebar)/sources/[id]/page.tsx

@@ -27,7 +27,7 @@ export default async function Page({ params }: { params: Promise<{ id: string }>
 
   return (
     <HydrateClient>
-      <PageLayout leading={source.description ?? "No description available"} title={source.name}>
+      <PageLayout title={source.name}>
         <Tabs className="space-y-4" defaultValue="overview">
           <TabsList>
             <TabsTrigger value="overview">Overview</TabsTrigger>

apps/dashboard/src/app/[locale]/(app)/(sidebar)/sources/page.tsx

@@ -23,8 +23,8 @@ export default async function Page() {
 
   return (
     <HydrateClient>
-      <PageLayout leading="Manage your news sources" title="Sources">
-        <div className="mb-6 flex justify-end">
+      <PageLayout title="Sources">
+        <div className="flex justify-end">
           <Link href="?createSource=true">
             <Button type="button">
               <PlusIcon className="mr-2 size-4" />

apps/dashboard/src/app/[locale]/(public)/login/page.tsx

@@ -10,9 +10,9 @@ export default function Page() {
           </div>
         </div>
       </div>
-      <div className="bg-muted relative hidden lg:block">
+      <div className="relative hidden lg:block">
         <img
-          alt="verification placeholder"
+          alt="Login background"
           className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
           src="https://images.pexels.com/photos/30690932/pexels-photo-30690932.jpeg"
         />