Openstatus www.openstatus.dev
6
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: improve status report layout (#559)

* chore: improve status report layout

* chore: remove return

authored by

Maximilian Kaske and committed by
GitHub
310ff3b4 6546cf12

+318 -218
+3 -1
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-pages/[id]/layout.tsx
··· 49 49 description={page.description} 50 50 actions={ 51 51 <Button variant="outline" asChild> 52 - <Link href={`https://${page.slug}.openstatus.dev`}>Visit</Link> 52 + <Link target="_blank" href={`https://${page.slug}.openstatus.dev`}> 53 + Visit 54 + </Link> 53 55 </Button> 54 56 } 55 57 />
+32
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/(overview)/layout.tsx
··· 1 + import * as React from "react"; 2 + import Link from "next/link"; 3 + 4 + import { Button } from "@openstatus/ui"; 5 + 6 + import { Header } from "@/components/dashboard/header"; 7 + import { HelpCallout } from "@/components/dashboard/help-callout"; 8 + import { api } from "@/trpc/server"; 9 + 10 + export default async function Layout({ 11 + children, 12 + }: { 13 + children: React.ReactNode; 14 + }) { 15 + return ( 16 + <div className="grid min-h-full grid-cols-1 grid-rows-[auto,1fr,auto] gap-6 md:grid-cols-2 md:gap-8"> 17 + <Header 18 + title="Status Reports" 19 + description="Overview of all your status reports and updates." 20 + actions={ 21 + <Button asChild> 22 + <Link href="./status-reports/new">Create</Link> 23 + </Button> 24 + } 25 + /> 26 + <div className="col-span-full">{children}</div> 27 + <div className="mt-8 md:mt-12"> 28 + <HelpCallout /> 29 + </div> 30 + </div> 31 + ); 32 + }
+5
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/(overview)/loading.tsx
··· 1 + import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton"; 2 + 3 + export default function Loading() { 4 + return <DataTableSkeleton />; 5 + }
+29
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/(overview)/page.tsx
··· 1 + import * as React from "react"; 2 + import Link from "next/link"; 3 + 4 + import { Button } from "@openstatus/ui"; 5 + 6 + import { EmptyState } from "@/components/dashboard/empty-state"; 7 + import { columns } from "@/components/data-table/status-report/columns"; 8 + import { DataTable } from "@/components/data-table/status-report/data-table"; 9 + import { api } from "@/trpc/server"; 10 + 11 + export default async function MonitorPage() { 12 + const reports = await api.statusReport.getStatusReportByWorkspace.query(); 13 + 14 + if (reports?.length === 0) 15 + return ( 16 + <EmptyState 17 + icon="siren" 18 + title="No status reports" 19 + description="Create your first status report" 20 + action={ 21 + <Button asChild> 22 + <Link href="./status-reports/new">Create</Link> 23 + </Button> 24 + } 25 + /> 26 + ); 27 + 28 + return <DataTable columns={columns} data={reports} />; 29 + }
-20
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/[id]/_components/empty-state.tsx
··· 1 - import Link from "next/link"; 2 - 3 - import { Button } from "@openstatus/ui"; 4 - 5 - import { EmptyState as DefaultEmptyState } from "@/components/dashboard/empty-state"; 6 - 7 - export function EmptyState({ id }: { id: string }) { 8 - return ( 9 - <DefaultEmptyState 10 - icon="megaphone" 11 - title="No status report updates" 12 - description="Create your first update" 13 - action={ 14 - <Button asChild> 15 - <Link href={`./${id}/update/edit`}>Create</Link> 16 - </Button> 17 - } 18 - /> 19 - ); 20 - }
+20
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/[id]/_components/status-update-button.tsx
··· 1 + "use client"; 2 + 3 + import Link from "next/link"; 4 + import { usePathname } from "next/navigation"; 5 + 6 + import { Button } from "@openstatus/ui"; 7 + 8 + export function StatusUpdateButton() { 9 + const pathname = usePathname(); 10 + 11 + if (pathname.endsWith("/update/edit")) { 12 + return <Button disabled>Status Update</Button>; 13 + } 14 + 15 + return ( 16 + <Button asChild> 17 + <Link href="./update/edit">Status Update</Link> 18 + </Button> 19 + ); 20 + }
+5
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/[id]/edit/loading.tsx
··· 1 + import { SkeletonForm } from "@/components/forms/skeleton-form"; 2 + 3 + export default function Loading() { 4 + return <SkeletonForm />; 5 + }
+36
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/[id]/edit/page.tsx
··· 1 + import { StatusReportForm } from "@/components/forms/status-report-form"; 2 + import { api } from "@/trpc/server"; 3 + 4 + export default async function EditPage({ 5 + params, 6 + }: { 7 + params: { workspaceSlug: string; id: string }; 8 + }) { 9 + const statusUpdate = await api.statusReport.getStatusReportById.query({ 10 + id: parseInt(params.id), 11 + }); 12 + 13 + const monitors = await api.monitor.getMonitorsByWorkspace.query(); 14 + 15 + const pages = await api.page.getPagesByWorkspace.query(); 16 + 17 + return ( 18 + <StatusReportForm 19 + monitors={monitors} 20 + pages={pages} 21 + defaultValues={ 22 + // TODO: we should move the mapping to the trpc layer 23 + // so we don't have to do this in the UI 24 + // it should be something like defaultValues={statusReport} 25 + { 26 + ...statusUpdate, 27 + monitors: statusUpdate?.monitorsToStatusReports.map( 28 + ({ monitorId }) => monitorId, 29 + ), 30 + pages: statusUpdate?.pagesToStatusReports.map(({ pageId }) => pageId), 31 + message: "", 32 + } 33 + } 34 + /> 35 + ); 36 + }
+45
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/[id]/layout.tsx
··· 1 + import { notFound } from "next/navigation"; 2 + 3 + import { Header } from "@/components/dashboard/header"; 4 + import { Navbar } from "@/components/dashboard/navbar"; 5 + import { api } from "@/trpc/server"; 6 + import { StatusUpdateButton } from "./_components/status-update-button"; 7 + 8 + export default async function Layout({ 9 + children, 10 + params, 11 + }: { 12 + children: React.ReactNode; 13 + params: { workspaceSlug: string; id: string }; 14 + }) { 15 + const id = params.id; 16 + 17 + const statusReport = await api.statusReport.getStatusReportById.query({ 18 + id: Number(id), 19 + }); 20 + 21 + if (!statusReport) { 22 + return notFound(); 23 + } 24 + 25 + const navigation = [ 26 + { 27 + label: "Overview", 28 + href: `/app/${params.workspaceSlug}/status-reports/${id}/overview`, 29 + segment: "overview", 30 + }, 31 + { 32 + label: "Settings", 33 + href: `/app/${params.workspaceSlug}/status-reports/${id}/edit`, 34 + segment: "edit", 35 + }, 36 + ]; 37 + 38 + return ( 39 + <div className="grid grid-cols-1 gap-6 md:gap-8"> 40 + <Header title={statusReport.title} actions={<StatusUpdateButton />} /> 41 + <Navbar className="col-span-full" navigation={navigation} /> 42 + {children} 43 + </div> 44 + ); 45 + }
-31
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/[id]/loading.tsx
··· 1 - import { Separator, Skeleton } from "@openstatus/ui"; 2 - 3 - import { Header } from "@/components/dashboard/header"; 4 - 5 - export default function Loading() { 6 - return ( 7 - <div className="grid gap-6 md:grid-cols-1 md:gap-8"> 8 - <div className="col-span-full flex w-full justify-between"> 9 - <Header.Skeleton withDescription={false}> 10 - <Skeleton className="h-9 w-20" /> 11 - </Header.Skeleton> 12 - </div> 13 - <div className="col-span-full flex flex-col gap-6"> 14 - <div className="grid grid-cols-5 gap-3 text-sm"> 15 - <Skeleton className="col-start-1 h-5 max-w-[100px]" /> 16 - <Skeleton className="col-span-4 h-5 w-full max-w-[200px]" /> 17 - <Skeleton className="col-start-1 h-5 max-w-[100px]" /> 18 - <Skeleton className="col-span-4 h-5 w-full max-w-[100px]" /> 19 - <Skeleton className="col-start-1 h-5 max-w-[100px]" /> 20 - <div className="col-span-4 flex gap-2"> 21 - <Skeleton className="h-5 w-full max-w-[60px]" /> 22 - <Skeleton className="h-5 w-full max-w-[60px]" /> 23 - </div> 24 - </div> 25 - <Separator /> 26 - <Skeleton className="h-48 w-full" /> 27 - <Skeleton className="h-48 w-full" /> 28 - </div> 29 - </div> 30 - ); 31 - }
+22
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/[id]/overview/loading.tsx
··· 1 + import { Separator, Skeleton } from "@openstatus/ui"; 2 + 3 + export default function Loading() { 4 + return ( 5 + <div className="col-span-full flex flex-col gap-6"> 6 + <div className="grid grid-cols-5 gap-3 text-sm"> 7 + <Skeleton className="col-start-1 h-5 max-w-[100px]" /> 8 + <Skeleton className="col-span-4 h-5 w-full max-w-[200px]" /> 9 + <Skeleton className="col-start-1 h-5 max-w-[100px]" /> 10 + <Skeleton className="col-span-4 h-5 w-full max-w-[100px]" /> 11 + <Skeleton className="col-start-1 h-5 max-w-[100px]" /> 12 + <div className="col-span-4 flex gap-2"> 13 + <Skeleton className="h-5 w-full max-w-[60px]" /> 14 + <Skeleton className="h-5 w-full max-w-[60px]" /> 15 + </div> 16 + </div> 17 + <Separator /> 18 + <Skeleton className="h-48 w-full" /> 19 + <Skeleton className="h-48 w-full" /> 20 + </div> 21 + ); 22 + }
+46
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/[id]/overview/page.tsx
··· 1 + import * as React from "react"; 2 + import Link from "next/link"; 3 + import { notFound } from "next/navigation"; 4 + 5 + import { Button, Separator } from "@openstatus/ui"; 6 + 7 + import { EmptyState } from "@/components/dashboard/empty-state"; 8 + import { Events } from "@/components/status-update/events"; 9 + import { Summary } from "@/components/status-update/summary"; 10 + import { api } from "@/trpc/server"; 11 + 12 + export default async function OverviewPage({ 13 + params, 14 + }: { 15 + params: { workspaceSlug: string; id: string }; 16 + }) { 17 + const report = await api.statusReport.getStatusReportById.query({ 18 + id: parseInt(params.id), 19 + }); 20 + 21 + if (!report) return notFound(); 22 + 23 + const monitors = report.monitorsToStatusReports.map(({ monitor }) => monitor); 24 + 25 + return ( 26 + <> 27 + <Summary report={report} monitors={monitors} /> 28 + <Separator /> 29 + {report.statusReportUpdates.length > 0 ? ( 30 + <Events statusReportUpdates={report.statusReportUpdates} editable /> 31 + ) : ( 32 + <EmptyState 33 + icon="megaphone" 34 + title="No status report updates" 35 + description="Create your first update" 36 + action={ 37 + <Button asChild> 38 + {/* TODO: check if correct */} 39 + <Link href={`./${params.id}/update/edit`}>Create</Link> 40 + </Button> 41 + } 42 + /> 43 + )} 44 + </> 45 + ); 46 + }
+3 -42
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/[id]/page.tsx
··· 1 - import * as React from "react"; 2 - import Link from "next/link"; 3 - import { notFound } from "next/navigation"; 4 - 5 - import { Button, Separator } from "@openstatus/ui"; 1 + import { redirect } from "next/navigation"; 6 2 7 - import { Header } from "@/components/dashboard/header"; 8 - import { Events } from "@/components/status-update/events"; 9 - import { Summary } from "@/components/status-update/summary"; 10 - import { api } from "@/trpc/server"; 11 - import { EmptyState } from "./_components/empty-state"; 12 - import Loading from "./loading"; 13 - 14 - export default async function StatusReportsPage({ 3 + export default function Page({ 15 4 params, 16 5 }: { 17 6 params: { workspaceSlug: string; id: string }; 18 7 }) { 19 - const report = await api.statusReport.getStatusReportById.query({ 20 - id: parseInt(params.id), 21 - }); 22 - 23 - if (!report) return notFound(); 24 - 25 - const monitors = report.monitorsToStatusReports.map(({ monitor }) => monitor); 26 - 27 - return ( 28 - <div className="grid min-h-full grid-cols-1 grid-rows-[auto,1fr,auto] gap-6 md:grid-cols-1 md:gap-8"> 29 - <Header 30 - title={report.title} 31 - actions={ 32 - <Button asChild> 33 - <Link href={`./${params.id}/update/edit`}>Update</Link> 34 - </Button> 35 - } 36 - /> 37 - <div className="col-span-full flex flex-col gap-6"> 38 - <Summary report={report} monitors={monitors} /> 39 - <Separator /> 40 - {report.statusReportUpdates.length > 0 ? ( 41 - <Events statusReportUpdates={report.statusReportUpdates} editable /> 42 - ) : ( 43 - <EmptyState id={params.id} /> 44 - )} 45 - </div> 46 - </div> 47 - ); 8 + return redirect(`./${params.id}/overview`); 48 9 }
+1 -15
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/[id]/update/edit/loading.tsx
··· 1 - import { Skeleton } from "@openstatus/ui"; 2 - 3 - import { Header } from "@/components/dashboard/header"; 4 1 import { SkeletonForm } from "@/components/forms/skeleton-form"; 5 2 6 3 export default function Loading() { 7 - return ( 8 - <div className="grid gap-6 md:grid-cols-2 md:gap-8"> 9 - <div className="col-span-full flex w-full justify-between"> 10 - <Header.Skeleton> 11 - <Skeleton className="h-9 w-20" /> 12 - </Header.Skeleton> 13 - </div> 14 - <div className="col-span-full"> 15 - <SkeletonForm /> 16 - </div> 17 - </div> 18 - ); 4 + return <SkeletonForm />; 19 5 }
+5 -13
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/[id]/update/edit/page.tsx
··· 1 1 import { notFound } from "next/navigation"; 2 2 import * as z from "zod"; 3 3 4 - import { Header } from "@/components/dashboard/header"; 5 4 import { StatusReportUpdateForm } from "@/components/forms/status-report-update-form"; 6 5 import { api } from "@/trpc/server"; 7 6 ··· 34 33 : undefined; 35 34 36 35 return ( 37 - <div className="grid gap-6 md:grid-cols-2 md:gap-8"> 38 - <Header 39 - title="Status Report Update" 40 - description="Create a public update for your incident" 41 - /> 42 - <div className="col-span-full"> 43 - <StatusReportUpdateForm 44 - statusReportId={parseInt(params.id)} 45 - defaultValues={data || undefined} 46 - /> 47 - </div> 48 - </div> 36 + <StatusReportUpdateForm 37 + statusReportId={parseInt(params.id)} 38 + defaultValues={data || undefined} 39 + nextUrl={"../overview"} 40 + /> 49 41 ); 50 42 }
+2
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/_components/delete-status-update.tsx
··· 1 + // TODO: move to components folder as not being used in any page.tsx or layout.tsx 2 + 1 3 "use client"; 2 4 3 5 import * as React from "react";
-20
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/_components/empty-state.tsx
··· 1 - import Link from "next/link"; 2 - 3 - import { Button } from "@openstatus/ui"; 4 - 5 - import { EmptyState as DefaultEmptyState } from "@/components/dashboard/empty-state"; 6 - 7 - export function EmptyState() { 8 - return ( 9 - <DefaultEmptyState 10 - icon="siren" 11 - title="No status reports" 12 - description="Create your first status report" 13 - action={ 14 - <Button asChild> 15 - <Link href="./status-reports/edit">Create</Link> 16 - </Button> 17 - } 18 - /> 19 - ); 20 - }
-19
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/loading.tsx
··· 1 - import { Skeleton } from "@openstatus/ui"; 2 - 3 - import { Header } from "@/components/dashboard/header"; 4 - import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton"; 5 - 6 - export default function Loading() { 7 - return ( 8 - <div className="grid gap-6 md:grid-cols-1 md:gap-8"> 9 - <div className="col-span-full flex w-full justify-between"> 10 - <Header.Skeleton> 11 - <Skeleton className="h-9 w-20" /> 12 - </Header.Skeleton> 13 - </div> 14 - <div className="col-span-full w-full"> 15 - <DataTableSkeleton /> 16 - </div> 17 - </div> 18 - ); 19 - }
+17
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/new/layout.tsx
··· 1 + import { Header } from "@/components/dashboard/header"; 2 + 3 + export default async function Layout({ 4 + children, 5 + }: { 6 + children: React.ReactNode; 7 + }) { 8 + return ( 9 + <div className="grid gap-6 md:grid-cols-2 md:gap-8"> 10 + <Header 11 + title="Status Report" 12 + description="Create a public report for your incident." 13 + /> 14 + <div className="col-span-full">{children}</div> 15 + </div> 16 + ); 17 + }
+5
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/new/loading.tsx
··· 1 + import { SkeletonForm } from "@/components/forms/skeleton-form"; 2 + 3 + export default function Loading() { 4 + return <SkeletonForm />; 5 + }
+14
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/new/page.tsx
··· 1 + import { StatusReportForm } from "@/components/forms/status-report-form"; 2 + import { api } from "@/trpc/server"; 3 + 4 + export default async function NewPage({ 5 + params, 6 + }: { 7 + params: { workspaceSlug: string }; 8 + }) { 9 + const monitors = await api.monitor.getMonitorsByWorkspace.query(); 10 + 11 + const pages = await api.page.getPagesByWorkspace.query(); 12 + 13 + return <StatusReportForm monitors={monitors} pages={pages} nextUrl={"./"} />; 14 + }
-44
apps/web/src/app/app/[workspaceSlug]/(dashboard)/status-reports/page.tsx
··· 1 - import * as React from "react"; 2 - import Link from "next/link"; 3 - 4 - import { Button } from "@openstatus/ui"; 5 - 6 - import { Header } from "@/components/dashboard/header"; 7 - import { HelpCallout } from "@/components/dashboard/help-callout"; 8 - import { columns } from "@/components/data-table/status-report/columns"; 9 - import { DataTable } from "@/components/data-table/status-report/data-table"; 10 - import { api } from "@/trpc/server"; 11 - import { EmptyState } from "./_components/empty-state"; 12 - 13 - export default async function StatusReportsPage({ 14 - params, 15 - }: { 16 - params: { workspaceSlug: string }; 17 - }) { 18 - const reports = await api.statusReport.getStatusReportByWorkspace.query(); 19 - return ( 20 - <div className="grid min-h-full grid-cols-1 grid-rows-[auto,1fr,auto] gap-6 md:grid-cols-1 md:gap-8"> 21 - <Header 22 - title="Status Reports" 23 - description="Overview of all your status reports and updates." 24 - actions={ 25 - <Button asChild> 26 - <Link href="./status-reports/edit">Create</Link> 27 - </Button> 28 - } 29 - /> 30 - {Boolean(reports?.length) ? ( 31 - <div className="col-span-full"> 32 - <DataTable columns={columns} data={reports} /> 33 - </div> 34 - ) : ( 35 - <div className="col-span-full"> 36 - <EmptyState /> 37 - </div> 38 - )} 39 - <div className="mt-8 md:mt-12"> 40 - <HelpCallout /> 41 - </div> 42 - </div> 43 - ); 44 - }
+5 -3
apps/web/src/components/dashboard/header.tsx
··· 15 15 return ( 16 16 <div 17 17 className={cn( 18 - "col-span-full mr-12 flex items-start justify-between lg:mr-0", 18 + "col-span-full mr-12 flex items-start justify-between gap-1 lg:mr-0", 19 19 className, 20 20 )} 21 21 > 22 - <div className="flex w-full flex-col gap-1"> 22 + <div className="flex flex-col gap-1"> 23 23 <h1 className="font-cal text-3xl">{title}</h1> 24 24 {description ? ( 25 25 <p className="text-muted-foreground">{description}</p> 26 26 ) : null} 27 27 </div> 28 28 {actions ? ( 29 - <div className="flex flex-1 items-center gap-2">{actions}</div> 29 + <div className="flex flex-1 items-center justify-end gap-2"> 30 + {actions} 31 + </div> 30 32 ) : null} 31 33 </div> 32 34 );
+4 -1
apps/web/src/components/data-table/status-report/columns.tsx
··· 21 21 cell: ({ row }) => { 22 22 const id = row.original.id; 23 23 return ( 24 - <Link href={`./status-reports/${id}`} className="hover:underline"> 24 + <Link 25 + href={`./status-reports/${id}/overview`} 26 + className="hover:underline" 27 + > 25 28 <span className="truncate">{row.getValue("title")}</span> 26 29 </Link> 27 30 );
+2 -2
apps/web/src/components/data-table/status-report/data-table-row-actions.tsx
··· 70 70 </Button> 71 71 </DropdownMenuTrigger> 72 72 <DropdownMenuContent align="end"> 73 - <Link href={`./status-reports/edit?id=${statusReport.id}`}> 73 + <Link href={`./status-reports/${statusReport.id}/edit`}> 74 74 <DropdownMenuItem>Edit</DropdownMenuItem> 75 75 </Link> 76 - <Link href={`./status-reports/${statusReport.id}`}> 76 + <Link href={`./status-reports/${statusReport.id}/overview`}> 77 77 <DropdownMenuItem>View</DropdownMenuItem> 78 78 </Link> 79 79 <AlertDialogTrigger asChild>
+11 -2
apps/web/src/components/forms/status-report-form.tsx
··· 52 52 defaultValues?: InsertStatusReport; 53 53 monitors?: Monitor[]; 54 54 pages?: Page[]; 55 + nextUrl?: string; 55 56 } 56 57 57 - export function StatusReportForm({ defaultValues, monitors, pages }: Props) { 58 + export function StatusReportForm({ 59 + defaultValues, 60 + monitors, 61 + pages, 62 + nextUrl, 63 + }: Props) { 58 64 const form = useForm<InsertStatusReport>({ 59 65 resolver: zodResolver(insertStatusReportSchema), 60 66 defaultValues: defaultValues ··· 101 107 }); 102 108 } 103 109 } 104 - toast("saved"); 110 + if (nextUrl) { 111 + router.push(nextUrl); 112 + } 105 113 router.refresh(); 114 + toast("saved"); 106 115 } catch { 107 116 toast("error"); 108 117 }
+5 -2
apps/web/src/components/forms/status-report-update-form.tsx
··· 40 40 interface Props { 41 41 defaultValues?: InsertStatusReportUpdate; 42 42 statusReportId: number; 43 + nextUrl?: string; 43 44 } 44 45 45 46 export function StatusReportUpdateForm({ 46 47 defaultValues, 47 48 statusReportId, 49 + nextUrl, 48 50 }: Props) { 49 51 const form = useForm<InsertStatusReportUpdate>({ 50 52 resolver: zodResolver(insertStatusReportUpdateSchema), ··· 69 71 await api.statusReport.createStatusReportUpdate.mutate({ ...props }); 70 72 } 71 73 toast("saved"); 74 + if (nextUrl) { 75 + router.push(nextUrl); 76 + } 72 77 router.refresh(); 73 - // TODO: temporary solution, we might wanna use a server-action with redirect 74 - router.push("../"); 75 78 } catch { 76 79 toast("error"); 77 80 }
+1 -3
apps/web/src/components/status-update/events.tsx
··· 68 68 variant="outline" 69 69 className="h-7 w-7 p-0" 70 70 onClick={() => { 71 - router.push( 72 - `./${update.statusReportId}/update/edit?statusUpdate=${update.id}`, 73 - ); 71 + router.push(`./update/edit?statusUpdate=${update.id}`); 74 72 }} 75 73 > 76 74 <Icons.pencil className="h-4 w-4" />