feat: add quicklinks for status reports (#1148)

apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-pages/(overview)/_components/status-report-button.tsx

···
+import { cn } from "@/lib/utils";
+import type { Page } from "@openstatus/db/src/schema";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@openstatus/ui/src/components/alert";
+import { buttonVariants } from "@openstatus/ui/src/components/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@openstatus/ui/src/components/dropdown-menu";
+import { ChevronDown, Megaphone } from "lucide-react";
+import Link from "next/link";
+
+export function StatusReportButton({ pages }: { pages: Page[] }) {
+  return (
+    <Alert className="max-w-xl">
+      <AlertTitle>Status Reports</AlertTitle>
+      <AlertDescription>
+        Start a new report. If you want to update your users about a current
+        report, please hover the <em>Last Report</em> column and click on{" "}
+        <em>Go to report</em>.
+      </AlertDescription>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          className={cn(
+            buttonVariants({ size: "sm", variant: "secondary" }),
+            "mt-2",
+          )}
+        >
+          <Megaphone className="h-4 w-4 mr-1 pb-0.5" />
+          New Status Report
+          <span className="h-8 w-px bg-background mx-2" />
+          <ChevronDown className="h-4 w-4" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuLabel>Select Page</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {pages.map((page) => (
+            <Link key={page.id} href={`./status-pages/${page.id}/reports/new`}>
+              <DropdownMenuItem>{page.title}</DropdownMenuItem>
+            </Link>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </Alert>
+  );
+}

apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-pages/(overview)/page.tsx

···
 import { columns } from "@/components/data-table/status-page/columns";
 import { DataTable } from "@/components/data-table/status-page/data-table";
 import { api } from "@/trpc/server";
+import { StatusReportButton } from "./_components/status-report-button";
 
 export default async function MonitorPage() {
   const pages = await api.page.getPagesByWorkspace.query();
···
     );
   }
   const isLimitReached = await api.page.isPageLimitReached.query();
+
   return (
     <>
       <DataTable columns={columns} data={pages} />
       {isLimitReached ? <Limit /> : null}
+      <StatusReportButton pages={pages} />
     </>
   );
 }

apps/web/src/components/data-table/notification/data-table-row-actions.tsx

···
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@openstatus/ui";
 
···
           <Link href={`./notifications/${notification.id}/edit`}>
             <DropdownMenuItem>Edit</DropdownMenuItem>
           </Link>
+          <DropdownMenuSeparator />
           <AlertDialogTrigger asChild>
             <DropdownMenuItem className="text-destructive focus:bg-destructive focus:text-background">
               Delete

apps/web/src/components/data-table/status-page/columns.tsx

···
 import Link from "next/link";
 import * as z from "zod";
 
-import type { Maintenance, Page } from "@openstatus/db/src/schema";
+import type {
+  Maintenance,
+  Page,
+  StatusReport,
+  StatusReportUpdate,
+} from "@openstatus/db/src/schema";
 import {
   Tooltip,
   TooltipContent,
···
   TooltipTrigger,
 } from "@openstatus/ui";
 
+import { formatDate } from "@/lib/utils";
 import { ArrowUpRight, Check } from "lucide-react";
 import { DataTableBadges } from "../data-table-badges";
 import { DataTableRowActions } from "./data-table-row-actions";
···
   Page & {
     monitorsToPages: { monitor: { name: string } }[];
     maintenancesToPages: Maintenance[]; // we get only the active maintenances!
+    statusReports: (StatusReport & {
+      statusReportUpdates: StatusReportUpdate[];
+    })[];
   }
 >[] = [
   {
···
         <DataTableBadges
           names={monitors.map((monitor) => monitor.monitor.name)}
         />
+      );
+    },
+  },
+  {
+    accessorKey: "statusReports",
+    header: "Last Report",
+    cell: ({ row }) => {
+      const lastReport = row.original.statusReports?.[0];
+
+      if (!lastReport) {
+        return <span className="text-muted-foreground/50">-</span>;
+      }
+
+      const date =
+        lastReport.statusReportUpdates?.[0].date || lastReport.updatedAt;
+
+      return (
+        <div className="group relative">
+          <span className="group-hover:text-muted-foreground/70">
+            {formatDate(date)}
+          </span>
+          <div className="absolute -inset-x-2 -inset-y-1 invisible group-hover:visible backdrop-blur-sm flex items-center px-2 py-1">
+            <Link
+              href={`./status-pages/${row.original.id}/reports/${lastReport.id}`}
+              className="hover:underline"
+            >
+              Go to report
+            </Link>
+          </div>
+        </div>
       );
     },
   },

apps/web/src/components/data-table/status-page/data-table-row-actions.tsx

···
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@openstatus/ui";
 
···
           >
             <DropdownMenuItem>Visit</DropdownMenuItem>
           </Link>
+          <DropdownMenuSeparator />
+          <Link href={`./status-pages/${page.id}/reports/new`}>
+            <DropdownMenuItem>Create Report</DropdownMenuItem>
+          </Link>
+          <DropdownMenuSeparator />
           <AlertDialogTrigger asChild>
             <DropdownMenuItem className="text-destructive focus:bg-destructive focus:text-background">
               Delete

packages/api/src/router/page.ts

···
             gte(maintenance.to, new Date()),
           ),
         },
+        statusReports: {
+          orderBy: (reports, { desc }) => desc(reports.updatedAt),
+          with: {
+            statusReportUpdates: {
+              orderBy: (updates, { desc }) => desc(updates.date),
+            },
+          },
+        },
       },
     });
+    console.log(allPages.map((page) => page.statusReports));
     return z.array(selectPageSchemaWithMonitorsRelation).parse(allPages);
   }),
 

packages/db/src/schema/pages/page.ts

···
 
 import { maintenance } from "../maintenances";
 import { monitorsToPages } from "../monitors";
+import { statusReport } from "../status_reports";
 import { workspace } from "../workspaces";
 
 export const page = sqliteTable("page", {
···
 export const pageRelations = relations(page, ({ many, one }) => ({
   monitorsToPages: many(monitorsToPages),
   maintenancesToPages: many(maintenance),
+  statusReports: many(statusReport),
   workspace: one(workspace, {
     fields: [page.workspaceId],
     references: [workspace.id],

packages/db/src/schema/shared.ts

···
     }),
   ),
   maintenancesToPages: selectMaintenanceSchema.array().default([]),
+  statusReports: selectStatusReportSchema
+    .extend({ statusReportUpdates: selectStatusReportUpdateSchema.array() })
+    .array()
+    .default([]),
 });
 
 export const selectPublicPageSchemaWithRelation = selectPageSchema

packages/db/src/schema/status_reports/validation.ts

···
   {
     status: statusReportStatusSchema,
   },
-);
+).extend({
+  date: z.coerce.date().optional().default(new Date()),
+});
 
 export const insertStatusReportSchema = createInsertSchema(statusReport, {
   status: statusReportStatusSchema,
 })
   .extend({
-    date: z.date().optional().default(new Date()),
+    date: z.coerce.date().optional().default(new Date()),
     /**
      * relationship to monitors and pages
      */

packages/emails/src/client.tsx

···
   public async sendFollowUp(req: { to: string }) {
     if (process.env.NODE_ENV === "development") return;
 
-    const html = await render(<FollowUpEmail />);
     try {
+      const html = await render(<FollowUpEmail />);
       const result = await this.client.emails.send({
         from: "Thibault Le Ouay Ducasse <[e-mail]>",
         subject: "How's it going with OpenStatus?",