Feature/rename db columns

apps/api/src/index.ts

@@ -33,10 +33,10 @@ const startServer = async () => {
     fastify.register(profileRouter, { prefix: '/profile' });
     fastify.register(liveRouter, { prefix: '/live' });
     fastify.register(miscRouter, { prefix: '/misc' });
-    fastify.setErrorHandler((error, request, reply) => {
+    fastify.setErrorHandler((error) => {
       fastify.log.error(error);
     });
-    fastify.get('/', (request, reply) => {
+    fastify.get('/', (_request, reply) => {
       reply.send({ name: 'openpanel sdk api' });
     });
     // fastify.get('/health-check', async (request, reply) => {

apps/api/src/utils/auth.ts

@@ -89,5 +89,5 @@ export async function validateSdkRequest(
     }
   }
 
-  return client.project_id;
+  return client.projectId;
 }

apps/dashboard/package.json

@@ -71,7 +71,7 @@
     "next-themes": "^0.2.1",
     "nuqs": "^1.16.1",
     "prisma-error-enum": "^0.1.3",
-    "pushmodal": "^0.0.8",
+    "pushmodal": "^1.0.0",
     "ramda": "^0.29.1",
     "random-animal-name": "^0.1.1",
     "react": "18.2.0",

apps/dashboard/src/app/(app)/[organizationId]/[projectId]/dashboards/[dashboardId]/list-reports.tsx → apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/[dashboardId]/list-reports.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { StickyBelowHeader } from '@/app/(app)/[organizationId]/[projectId]/layout-sticky-below-header';
+import { StickyBelowHeader } from '@/app/(app)/[organizationSlug]/[projectId]/layout-sticky-below-header';
 import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
 import { LazyChart } from '@/components/report/chart/LazyChart';
 import { Button } from '@/components/ui/button';
@@ -12,10 +12,12 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { useAppParams } from '@/hooks/useAppParams';
+import { api, handleError } from '@/trpc/client';
 import { cn } from '@/utils/cn';
 import { ChevronRight, MoreHorizontal, PlusIcon, Trash } from 'lucide-react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
 
 import {
   getDefaultIntervalByDates,
@@ -33,7 +35,13 @@ export function ListReports({ reports }: ListReportsProps) {
   const router = useRouter();
   const params = useAppParams<{ dashboardId: string }>();
   const { range, startDate, endDate } = useOverviewOptions();
-
+  const deletion = api.report.delete.useMutation({
+    onError: handleError,
+    onSuccess() {
+      router.refresh();
+      toast('Report deleted');
+    },
+  });
   return (
     <>
       <StickyBelowHeader className="flex items-center justify-between p-4">
@@ -42,7 +50,7 @@ export function ListReports({ reports }: ListReportsProps) {
           icon={PlusIcon}
           onClick={() => {
             router.push(
-              `/${params.organizationId}/${
+              `/${params.organizationSlug}/${
                 params.projectId
               }/reports?${new URLSearchParams({
                 dashboardId: params.dashboardId,
@@ -60,7 +68,7 @@ export function ListReports({ reports }: ListReportsProps) {
           return (
             <div className="card" key={report.id}>
               <Link
-                href={`/${params.organizationId}/${params.projectId}/reports/${report.id}`}
+                href={`/${params.organizationSlug}/${params.projectId}/reports/${report.id}`}
                 className="flex items-center justify-between border-b border-border p-4 leading-none [&_svg]:hover:opacity-100"
                 shallow
               >
@@ -95,10 +103,10 @@ export function ListReports({ reports }: ListReportsProps) {
                         <DropdownMenuItem
                           className="text-destructive"
                           onClick={(event) => {
-                            // event.stopPropagation();
-                            // deletion.mutate({
-                            //   reportId: report.id,
-                            // });
+                            event.stopPropagation();
+                            deletion.mutate({
+                              reportId: report.id,
+                            });
                           }}
                         >
                           <Trash size={16} className="mr-2" />

apps/dashboard/src/app/(app)/[organizationId]/[projectId]/dashboards/[dashboardId]/page.tsx → apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/[dashboardId]/page.tsx

@@ -1,4 +1,4 @@
-import PageLayout from '@/app/(app)/[organizationId]/[projectId]/page-layout';
+import PageLayout from '@/app/(app)/[organizationSlug]/[projectId]/page-layout';
 import { notFound } from 'next/navigation';
 
 import { getDashboardById, getReportsByDashboardId } from '@openpanel/db';
@@ -7,14 +7,14 @@ import { ListReports } from './list-reports';
 
 interface PageProps {
   params: {
-    organizationId: string;
+    organizationSlug: string;
     projectId: string;
     dashboardId: string;
   };
 }
 
 export default async function Page({
-  params: { organizationId, projectId, dashboardId },
+  params: { organizationSlug, projectId, dashboardId },
 }: PageProps) {
   const [dashboard, reports] = await Promise.all([
     getDashboardById(dashboardId, projectId),
@@ -26,7 +26,7 @@ export default async function Page({
   }
 
   return (
-    <PageLayout title={dashboard.name} organizationSlug={organizationId}>
+    <PageLayout title={dashboard.name} organizationSlug={organizationSlug}>
       <ListReports reports={reports} />
     </PageLayout>
   );

apps/dashboard/src/app/(app)/[organizationId]/[projectId]/dashboards/list-dashboards.tsx → apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/list-dashboards.tsx

@@ -20,7 +20,7 @@ interface ListDashboardsProps {
 export function ListDashboards({ dashboards }: ListDashboardsProps) {
   const router = useRouter();
   const params = useAppParams();
-  const { organizationId, projectId } = params;
+  const { organizationSlug, projectId } = params;
   const deletion = api.dashboard.delete.useMutation({
     onError: (error, variables) => {
       return handleErrorToastOptions({
@@ -65,8 +65,8 @@ export function ListDashboards({ dashboards }: ListDashboardsProps) {
           <Card key={item.id} hover>
             <div>
               <Link
-                href={`/${organizationId}/${projectId}/dashboards/${item.id}`}
-                className="block flex flex-col p-4"
+                href={`/${organizationSlug}/${projectId}/dashboards/${item.id}`}
+                className="flex flex-col p-4"
               >
                 <span className="font-medium">{item.name}</span>
               </Link>

apps/dashboard/src/app/(app)/[organizationId]/[projectId]/dashboards/page.tsx → apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/page.tsx

@@ -1,4 +1,4 @@
-import PageLayout from '@/app/(app)/[organizationId]/[projectId]/page-layout';
+import PageLayout from '@/app/(app)/[organizationSlug]/[projectId]/page-layout';
 
 import { getDashboardsByProjectId } from '@openpanel/db';
 
@@ -8,17 +8,17 @@ import { ListDashboards } from './list-dashboards';
 interface PageProps {
   params: {
     projectId: string;
-    organizationId: string;
+    organizationSlug: string;
   };
 }
 
 export default async function Page({
-  params: { projectId, organizationId },
+  params: { projectId, organizationSlug },
 }: PageProps) {
   const dashboards = await getDashboardsByProjectId(projectId);
 
   return (
-    <PageLayout title="Dashboards" organizationSlug={organizationId}>
+    <PageLayout title="Dashboards" organizationSlug={organizationSlug}>
       {dashboards.length > 0 && <HeaderDashboards />}
       <ListDashboards dashboards={dashboards} />
     </PageLayout>

apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/event-conversions-list/index.tsx → apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-conversions-list/index.tsx

@@ -1,4 +1,3 @@
-import { Widget } from '@/components/widget';
 import { escape } from 'sqlstring';
 
 import { db, getEvents } from '@openpanel/db';
@@ -12,7 +11,7 @@ interface Props {
 export default async function EventConversionsListServer({ projectId }: Props) {
   const conversions = await db.eventMeta.findMany({
     where: {
-      project_id: projectId,
+      projectId,
       conversion: true,
     },
   });

apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/event-list-item.tsx → apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list-item.tsx

@@ -15,7 +15,7 @@ import { EventIcon } from './event-icon';
 type EventListItemProps = IServiceCreateEventPayload;
 
 export function EventListItem(props: EventListItemProps) {
-  const { organizationId, projectId } = useAppParams();
+  const { organizationSlug, projectId } = useAppParams();
   const { createdAt, name, path, duration, meta, profile } = props;
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
 
@@ -77,7 +77,7 @@ export function EventListItem(props: EventListItemProps) {
               onClick={(e) => {
                 e.stopPropagation();
               }}
-              href={`/${organizationId}/${projectId}/profiles/${profile?.id}`}
+              href={`/${organizationSlug}/${projectId}/profiles/${profile?.id}`}
               className="max-w-[80px] overflow-hidden text-ellipsis whitespace-nowrap text-sm text-muted-foreground hover:underline"
             >
               {profile?.firstName} {profile?.lastName}

apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/page.tsx → apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/page.tsx

@@ -1,4 +1,4 @@
-import PageLayout from '@/app/(app)/[organizationId]/[projectId]/page-layout';
+import PageLayout from '@/app/(app)/[organizationSlug]/[projectId]/page-layout';
 import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
 import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
 import {
@@ -17,7 +17,7 @@ import { EventList } from './event-list';
 interface PageProps {
   params: {
     projectId: string;
-    organizationId: string;
+    organizationSlug: string;
   };
   searchParams: {
     events?: string;
@@ -31,7 +31,7 @@ const nuqsOptions = {
 };
 
 export default async function Page({
-  params: { projectId, organizationId },
+  params: { projectId, organizationSlug },
   searchParams,
 }: PageProps) {
   const filters =
@@ -56,7 +56,7 @@ export default async function Page({
   ]);
 
   return (
-    <PageLayout title="Events" organizationSlug={organizationId}>
+    <PageLayout title="Events" organizationSlug={organizationSlug}>
       <StickyBelowHeader className="flex justify-between p-4">
         <OverviewFiltersDrawer
           mode="events"

apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout-menu.tsx → apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-menu.tsx

@@ -83,49 +83,49 @@ export default function LayoutMenu({ dashboards }: LayoutMenuProps) {
       <LinkWithIcon
         icon={WallpaperIcon}
         label="Overview"
-        href={`/${params.organizationId}/${projectId}`}
+        href={`/${params.organizationSlug}/${projectId}`}
       />
       <LinkWithIcon
         icon={LayoutPanelTopIcon}
         label="Dashboards"
-        href={`/${params.organizationId}/${projectId}/dashboards`}
+        href={`/${params.organizationSlug}/${projectId}/dashboards`}
       />
       <LinkWithIcon
         icon={GanttChartIcon}
         label="Events"
-        href={`/${params.organizationId}/${projectId}/events`}
+        href={`/${params.organizationSlug}/${projectId}/events`}
       />
       <LinkWithIcon
         icon={UsersIcon}
         label="Profiles"
-        href={`/${params.organizationId}/${projectId}/profiles`}
+        href={`/${params.organizationSlug}/${projectId}/profiles`}
       />
       <LinkWithIcon
         icon={CogIcon}
         label="Settings"
-        href={`/${params.organizationId}/${projectId}/settings/organization`}
+        href={`/${params.organizationSlug}/${projectId}/settings/organization`}
       />
       {pathname?.includes('/settings/') && (
         <div className="flex flex-col gap-1 pl-7">
           <LinkWithIcon
             icon={BuildingIcon}
             label="Organization"
-            href={`/${params.organizationId}/${projectId}/settings/organization`}
+            href={`/${params.organizationSlug}/${projectId}/settings/organization`}
           />
           <LinkWithIcon
             icon={WarehouseIcon}
             label="Projects"
-            href={`/${params.organizationId}/${projectId}/settings/projects`}
+            href={`/${params.organizationSlug}/${projectId}/settings/projects`}
           />
           <LinkWithIcon
             icon={UserIcon}
             label="Profile (yours)"
-            href={`/${params.organizationId}/${projectId}/settings/profile`}
+            href={`/${params.organizationSlug}/${projectId}/settings/profile`}
           />
           <LinkWithIcon
             icon={BookmarkIcon}
             label="References"
-            href={`/${params.organizationId}/${projectId}/settings/references`}
+            href={`/${params.organizationSlug}/${projectId}/settings/references`}
           />
         </div>
       )}
@@ -145,7 +145,7 @@ export default function LayoutMenu({ dashboards }: LayoutMenuProps) {
                     </span>
                   </div>
                 }
-                href={`/${item.organization_slug}/${item.project_id}/dashboards/${item.id}`}
+                href={`/${item.organizationSlug}/${item.projectId}/dashboards/${item.id}`}
               />
             ))}
           </div>

apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout-organization-selector.tsx → apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-organization-selector.tsx

@@ -18,7 +18,7 @@ export default function LayoutOrganizationSelector({
   const router = useRouter();
 
   const organization = organizations.find(
-    (item) => item.slug === params.organizationId
+    (item) => item.slug === params.organizationSlug
   );
 
   if (!organization) {

apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout-project-selector.tsx → apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-project-selector.tsx

@@ -13,7 +13,7 @@ export default function LayoutProjectSelector({
   projects,
 }: LayoutProjectSelectorProps) {
   const router = useRouter();
-  const { organizationId, projectId } = useAppParams();
+  const { organizationSlug, projectId } = useAppParams();
   const pathname = usePathname() || '';
 
   return (
@@ -24,12 +24,12 @@ export default function LayoutProjectSelector({
         className="w-auto min-w-0 max-sm:max-w-[100px]"
         placeholder={'Select project'}
         onChange={(value) => {
-          if (organizationId && projectId) {
+          if (organizationSlug && projectId) {
             const split = pathname.replace(projectId, value).split('/');
             // slicing here will remove everything after /{orgId}/{projectId}/dashboards [slice here] /xxx/xxx/xxx
             router.push(split.slice(0, 4).join('/'));
           } else {
-            router.push(`/${organizationId}/${value}`);
+            router.push(`/${organizationSlug}/${value}`);
           }
         }}
         value={projectId}

apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout-sidebar.tsx → apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-sidebar.tsx

@@ -17,13 +17,13 @@ import LayoutOrganizationSelector from './layout-organization-selector';
 interface LayoutSidebarProps {
   organizations: IServiceOrganization[];
   dashboards: IServiceDashboards;
-  organizationId: string;
+  organizationSlug: string;
   projectId: string;
 }
 export function LayoutSidebar({
   organizations,
   dashboards,
-  organizationId,
+  organizationSlug,
   projectId,
 }: LayoutSidebarProps) {
   const [active, setActive] = useState(false);
@@ -69,7 +69,7 @@ export function LayoutSidebar({
           <div className="flex flex-col gap-2 bg-background p-4 pt-0">
             <Link
               className={cn('flex gap-2', buttonVariants())}
-              href={`/${organizationId}/${projectId}/reports`}
+              href={`/${organizationSlug}/${projectId}/reports`}
             >
               <PlusIcon size={16} />
               Create a report