web: added the base for the web project

apps/web/src/pages/[organization]/[project]/[dashboard].tsx

@@ -0,0 +1,51 @@
+import { ReportLineChart } from "@/components/report/chart/ReportLineChart";
+import { MainLayout } from "@/components/layouts/MainLayout";
+import { Container } from "@/components/Container";
+import { api } from "@/utils/api";
+import Link from "next/link";
+import { PageTitle } from "@/components/PageTitle";
+import { useOrganizationParams } from "@/hooks/useOrganizationParams";
+import { Suspense } from "react";
+import { createServerSideProps } from "@/server/getServerSideProps";
+
+export const getServerSideProps = createServerSideProps()
+
+export default function Dashboard() {
+  const params = useOrganizationParams();
+
+  const query = api.report.list.useQuery({
+    projectSlug: params.project,
+    dashboardSlug: params.dashboard,
+  });
+  
+  const dashboard = query.data?.dashboard ?? null;
+  const reports = query.data?.reports ?? [];
+
+  return (
+    <MainLayout>
+      <Container>
+        <Suspense fallback="Loading">
+          <PageTitle>{dashboard?.name}</PageTitle>
+          <div className="grid grid-cols-2 gap-4">
+            {reports.map((report) => (
+              <div
+                className="rounded-md border border-border bg-white shadow"
+                key={report.id}
+              >
+                <Link
+                  href={`/${params.organization}/reports/${report.id}`}
+                  className="block border-b border-border p-4 font-medium leading-none hover:underline"
+                >
+                  {report.name}
+                </Link>
+                <div className="p-4 pl-2">
+                  <ReportLineChart {...report} showTable={false} />
+                </div>
+              </div>
+            ))}
+          </div>
+        </Suspense>
+      </Container>
+    </MainLayout>
+  );
+}

apps/web/src/pages/[organization]/[project]/index.tsx

@@ -0,0 +1,41 @@
+import { MainLayout } from "@/components/layouts/MainLayout";
+import { Container } from "@/components/Container";
+import { api } from "@/utils/api";
+import Link from "next/link";
+import { PageTitle } from "@/components/PageTitle";
+import { Card } from "@/components/Card";
+import { useOrganizationParams } from "@/hooks/useOrganizationParams";
+import { createServerSideProps } from "@/server/getServerSideProps";
+
+export const getServerSideProps = createServerSideProps()
+
+export default function Home() {
+  const params = useOrganizationParams();
+  const query = api.dashboard.list.useQuery({
+    organizationSlug: params.organization,
+    projectSlug: params.project,
+  }, {
+    enabled: Boolean(params.organization && params.project),
+  });
+  const dashboards = query.data ?? [];
+
+  return (
+    <MainLayout>
+      <Container>
+        <PageTitle>Dashboards</PageTitle>
+        <div className="grid grid-cols-2 gap-4">
+          {dashboards.map((item) => (
+            <Card key={item.id}>
+            <Link
+              href={`/${params.organization}/${params.project}/${item.slug}`}
+              className="block p-4 font-medium leading-none hover:underline"
+            >
+              {item.name}
+            </Link>
+          </Card>
+          ))}
+        </div>
+      </Container>
+    </MainLayout>
+  );
+}