rename organizationId -> organizationSlug

2024-04-08 21:49:00 +02:00
parent 097ea18320
commit 19b0e509e0
37 changed files with 109 additions and 128 deletions
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/dashboards/[dashboardId]/list-reports.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/dashboards/[dashboardId]/list-reports.tsx
@@ -42,7 +42,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 +60,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
              >
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/dashboards/[dashboardId]/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/dashboards/[dashboardId]/page.tsx
@@ -14,7 +14,7 @@ interface PageProps {
 }

 export default async function Page({
-  params: { organizationId, projectId, dashboardId },
+  params: { organizationId: 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>
  );
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/dashboards/list-dashboards.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[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>
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/dashboards/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/dashboards/page.tsx
@@ -13,12 +13,12 @@ interface PageProps {
 }

 export default async function Page({
-  params: { projectId, organizationId },
+  params: { projectId, organizationId: 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>
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/event-list-item.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[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}
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/page.tsx
@@ -31,7 +31,7 @@ const nuqsOptions = {
 };

 export default async function Page({
-  params: { projectId, organizationId },
+  params: { projectId, organizationId: 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"
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout-menu.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[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>
      )}
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout-organization-selector.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[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) {
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout-project-selector.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[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}
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout-sidebar.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[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
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout.tsx
@@ -18,15 +18,15 @@ interface AppLayoutProps {

 export default async function AppLayout({
  children,
-  params: { organizationId, projectId },
+  params: { organizationId: organizationSlug, projectId },
 }: AppLayoutProps) {
  const [organizations, projects, dashboards] = await Promise.all([
    getCurrentOrganizations(),
-    getCurrentProjects(organizationId),
+    getCurrentProjects(organizationSlug),
    getDashboardsByProjectId(projectId),
  ]);

-  if (!organizations.find((item) => item.slug === organizationId)) {
+  if (!organizations.find((item) => item.slug === organizationSlug)) {
    return (
      <FullPageEmptyState
        title="Could not find organization"
@@ -51,7 +51,7 @@ export default async function AppLayout({
  return (
    <div id="dashboard">
      <LayoutSidebar
-        {...{ organizationId, projectId, organizations, dashboards }}
+        {...{ organizationSlug, projectId, organizations, dashboards }}
      />
      <div className="transition-all lg:pl-72">{children}</div>
    </div>
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/page.tsx
@@ -24,12 +24,12 @@ interface PageProps {
 }

 export default async function Page({
-  params: { organizationId, projectId },
+  params: { organizationId: organizationSlug, projectId },
 }: PageProps) {
  const share = await getShareByProjectId(projectId);

  return (
-    <PageLayout title="Overview" organizationSlug={organizationId}>
+    <PageLayout title="Overview" organizationSlug={organizationSlug}>
      <StickyBelowHeader>
        <div className="flex justify-between gap-2 p-4">
          <div className="flex gap-2">
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/profiles/[profileId]/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/profiles/[profileId]/page.tsx
@@ -41,7 +41,7 @@ interface PageProps {
 }

 export default async function Page({
-  params: { projectId, profileId, organizationId },
+  params: { projectId, profileId, organizationId: organizationSlug },
  searchParams,
 }: PageProps) {
  const eventListOptions: GetEventListOptions = {
@@ -125,7 +125,7 @@ export default async function Page({

  return (
    <PageLayout
-      organizationSlug={organizationId}
+      organizationSlug={organizationSlug}
      title={
        <div className="flex items-center gap-2">
          <ProfileAvatar {...profile} size="sm" className="hidden sm:block" />
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/profiles/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/profiles/page.tsx
@@ -25,11 +25,11 @@ const nuqsOptions = {
 };

 export default function Page({
-  params: { organizationId, projectId },
+  params: { organizationId: organizationSlug, projectId },
  searchParams: { cursor, f },
 }: PageProps) {
  return (
-    <PageLayout title="Profiles" organizationSlug={organizationId}>
+    <PageLayout title="Profiles" organizationSlug={organizationSlug}>
      {/* <StickyBelowHeader className="flex justify-between p-4">
        <OverviewFiltersDrawer
          projectId={projectId}
@@ -53,7 +53,7 @@ export default function Page({
          <ProfileLastSeenServer projectId={projectId} />
          <ProfileTopServer
            projectId={projectId}
-            organizationId={organizationId}
+            organizationSlug={organizationSlug}
          />
        </div>
      </div>
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/profiles/profile-list/profile-list.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/profiles/profile-list/profile-list.tsx
@@ -21,7 +21,7 @@ interface ProfileListProps {
  count: number;
 }
 export function ProfileList({ data, count }: ProfileListProps) {
-  const { organizationId, projectId } = useAppParams();
+  const { organizationSlug, projectId } = useAppParams();
  const { cursor, setCursor } = useCursor();
  return (
    <Widget>
@@ -46,7 +46,7 @@ export function ProfileList({ data, count }: ProfileListProps) {
                render(profile) {
                  return (
                    <Link
-                      href={`/${organizationId}/${projectId}/profiles/${profile.id}`}
+                      href={`/${organizationSlug}/${projectId}/profiles/${profile.id}`}
                      className="flex items-center gap-2 font-medium"
                    >
                      <ProfileAvatar size="sm" {...profile} />
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/profiles/profile-top/index.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/profiles/profile-top/index.tsx
@@ -10,11 +10,11 @@ import { chQuery, getProfiles } from '@openpanel/db';

 interface Props {
  projectId: string;
-  organizationId: string;
+  organizationSlug: string;
 }

 export default async function ProfileTopServer({
-  organizationId,
+  organizationSlug,
  projectId,
 }: Props) {
  // Days since last event from users
@@ -44,7 +44,7 @@ export default async function ProfileTopServer({
            render(profile) {
              return (
                <Link
-                  href={`/${organizationId}/${projectId}/profiles/${profile.id}`}
+                  href={`/${organizationSlug}/${projectId}/profiles/${profile.id}`}
                  className="flex items-center gap-2 font-medium"
                >
                  <ProfileAvatar size="sm" {...profile} />
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/reports/[reportId]/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/reports/[reportId]/page.tsx
@@ -15,7 +15,7 @@ interface PageProps {
 }

 export default async function Page({
-  params: { reportId, organizationId },
+  params: { reportId, organizationId: organizationSlug },
 }: PageProps) {
  const report = await getReportById(reportId);

@@ -25,7 +25,7 @@ export default async function Page({

  return (
    <PageLayout
-      organizationSlug={organizationId}
+      organizationSlug={organizationSlug}
      title={
        <div className="flex cursor-pointer items-center gap-2">
          {report.name}
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/reports/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/reports/page.tsx
@@ -10,10 +10,12 @@ interface PageProps {
  };
 }

-export default function Page({ params: { organizationId } }: PageProps) {
+export default function Page({
+  params: { organizationId: organizationSlug },
+}: PageProps) {
  return (
    <PageLayout
-      organizationSlug={organizationId}
+      organizationSlug={organizationSlug}
      title={
        <div className="flex cursor-pointer items-center gap-2">
          Unnamed report
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/settings/organization/invites/create-invite.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/settings/organization/invites/create-invite.tsx
@@ -33,7 +33,7 @@ interface Props {

 export default function CreateInvite({ projects }: Props) {
  const router = useRouter();
-  const { organizationId: organizationSlug } = useAppParams();
+  const { organizationSlug } = useAppParams();

  const { register, handleSubmit, formState, reset, control } = useForm<IForm>({
    resolver: zodResolver(zInviteUser),
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/settings/profile/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/settings/profile/page.tsx
@@ -11,12 +11,14 @@ interface PageProps {
    organizationId: string;
  };
 }
-export default async function Page({ params: { organizationId } }: PageProps) {
+export default async function Page({
+  params: { organizationId: organizationSlug },
+}: PageProps) {
  const { userId } = auth();
  const profile = await getUserById(userId!);

  return (
-    <PageLayout title={profile.lastName} organizationSlug={organizationId}>
+    <PageLayout title={profile.lastName} organizationSlug={organizationSlug}>
      <div className="flex flex-col gap-4 p-4">
        <EditProfile profile={profile} />
        <Logout />
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/settings/projects/list-projects.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/settings/projects/list-projects.tsx
@@ -24,7 +24,7 @@ interface ListProjectsProps {
  clients: IServiceClientWithProject[];
 }
 export default function ListProjects({ projects, clients }: ListProjectsProps) {
-  const organizationId = useAppParams().organizationId;
+  const { organizationSlug } = useAppParams();
  return (
    <>
      <StickyBelowHeader>
@@ -34,7 +34,7 @@ export default function ListProjects({ projects, clients }: ListProjectsProps) {
            icon={PlusIcon}
            onClick={() =>
              pushModal('AddProject', {
-                organizationId,
+                organizationSlug,
              })
            }
          >
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/settings/projects/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/settings/projects/page.tsx
@@ -1,7 +1,7 @@
 import PageLayout from '@/app/(app)/[organizationId]/[projectId]/page-layout';

 import {
-  getClientsByOrganizationId,
+  getClientsByOrganizationSlug,
  getProjectsByOrganizationSlug,
 } from '@openpanel/db';

@@ -13,14 +13,16 @@ interface PageProps {
  };
 }

-export default async function Page({ params: { organizationId } }: PageProps) {
+export default async function Page({
+  params: { organizationId: organizationSlug },
+}: PageProps) {
  const [projects, clients] = await Promise.all([
-    getProjectsByOrganizationSlug(organizationId),
-    getClientsByOrganizationId(organizationId),
+    getProjectsByOrganizationSlug(organizationSlug),
+    getClientsByOrganizationSlug(organizationSlug),
  ]);

  return (
-    <PageLayout title="Projects" organizationSlug={organizationId}>
+    <PageLayout title="Projects" organizationSlug={organizationSlug}>
      <ListProjects projects={projects} clients={clients} />
    </PageLayout>
  );
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/settings/references/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/settings/references/page.tsx
@@ -12,7 +12,7 @@ interface PageProps {
 }

 export default async function Page({
-  params: { organizationId, projectId },
+  params: { organizationId: organizationSlug, projectId },
 }: PageProps) {
  const references = await getReferences({
    where: {
@@ -23,7 +23,7 @@ export default async function Page({
  });

  return (
-    <PageLayout title="References" organizationSlug={organizationId}>
+    <PageLayout title="References" organizationSlug={organizationSlug}>
      <ListReferences data={references} />
    </PageLayout>
  );
--- a/apps/dashboard/src/app/(app)/[organizationId]/create-project.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/create-project.tsx
@@ -36,7 +36,7 @@ export function CreateProject() {
  const onSubmit: SubmitHandler<IForm> = (values) => {
    mutation.mutate({
      name: values.name,
-      organizationId: params.organizationId,
+      organizationSlug: params.organizationSlug,
    });
  };

--- a/apps/dashboard/src/app/(app)/[organizationId]/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/page.tsx
@@ -16,10 +16,12 @@ interface PageProps {
  };
 }

-export default async function Page({ params: { organizationId } }: PageProps) {
+export default async function Page({
+  params: { organizationId: organizationSlug },
+}: PageProps) {
  const [organization, projects] = await Promise.all([
-    getOrganizationBySlug(organizationId),
-    getCurrentProjects(organizationId),
+    getOrganizationBySlug(organizationSlug),
+    getCurrentProjects(organizationSlug),
  ]);

  if (!organization) {
@@ -55,7 +57,7 @@ export default async function Page({ params: { organizationId } }: PageProps) {
  }

  if (projects.length === 1 && projects[0]) {
-    return redirect(`/${organizationId}/${projects[0].id}`);
+    return redirect(`/${organizationSlug}/${projects[0].id}`);
  }

  return (
--- a/apps/dashboard/src/components/overview/overview-share.tsx
+++ b/apps/dashboard/src/components/overview/overview-share.tsx
@@ -58,9 +58,8 @@ export function OverviewShare({ data }: OverviewShareProps) {
            <DropdownMenuItem
              onClick={() => {
                mutation.mutate({
+                  ...data,
                  public: false,
-                  projectId: data?.projectId,
-                  organizationId: data?.organizationSlug,
                  password: null,
                });
              }}
--- a/apps/dashboard/src/hooks/useAppParams.ts
+++ b/apps/dashboard/src/hooks/useAppParams.ts
@@ -1,16 +1,19 @@
 import { useParams } from 'next/navigation';

-// eslint-disable-next-line
-type AppParams = {
+type AppParamsIn = {
  organizationId: string;
  projectId: string;
 };
+type AppParamsOut = {
+  organizationSlug: string;
+  projectId: string;
+};

 export function useAppParams<T>() {
-  const params = useParams<T & AppParams>();
+  const params = useParams<T & AppParamsIn>();
  return {
    ...(params ?? {}),
-    organizationId: params?.organizationId,
+    organizationSlug: params?.organizationId,
    projectId: params?.projectId,
-  } as T & AppParams;
+  } as T & AppParamsOut;
 }
--- a/apps/dashboard/src/modals/AddClient.tsx
+++ b/apps/dashboard/src/modals/AddClient.tsx
@@ -43,7 +43,7 @@ interface Props {
  projectId: string;
 }
 export default function AddClient(props: Props) {
-  const { organizationId, projectId } = useAppParams();
+  const { organizationSlug, projectId } = useAppParams();
  const router = useRouter();
  const form = useForm<IForm>({
    resolver: zodResolver(validation),
@@ -62,14 +62,14 @@ export default function AddClient(props: Props) {
    },
  });
  const query = api.project.list.useQuery({
-    organizationId,
+    organizationSlug,
  });
  const onSubmit: SubmitHandler<IForm> = (values) => {
    mutation.mutate({
      name: values.name,
      cors: values.tab === 'website' ? values.cors : null,
      projectId: values.projectId,
-      organizationId,
+      organizationSlug,
    });
  };

--- a/apps/dashboard/src/modals/AddDashboard.tsx
+++ b/apps/dashboard/src/modals/AddDashboard.tsx
@@ -19,7 +19,7 @@ const validator = z.object({
 type IForm = z.infer<typeof validator>;

 export default function AddDashboard() {
-  const { projectId, organizationId: organizationSlug } = useAppParams();
+  const { projectId, organizationSlug } = useAppParams();
  const router = useRouter();

  const { register, handleSubmit, formState } = useForm<IForm>({
--- a/apps/dashboard/src/modals/AddProject.tsx
+++ b/apps/dashboard/src/modals/AddProject.tsx
@@ -17,9 +17,9 @@ const validator = z.object({

 type IForm = z.infer<typeof validator>;
 interface AddProjectProps {
-  organizationId: string;
+  organizationSlug: string;
 }
-export default function AddProject({ organizationId }: AddProjectProps) {
+export default function AddProject({ organizationSlug }: AddProjectProps) {
  const router = useRouter();
  const mutation = api.project.create.useMutation({
    onError: handleError,
@@ -45,7 +45,7 @@ export default function AddProject({ organizationId }: AddProjectProps) {
        onSubmit={handleSubmit((values) => {
          mutation.mutate({
            ...values,
-            organizationId,
+            organizationSlug,
          });
        })}
      >
--- a/apps/dashboard/src/modals/SaveReport.tsx
+++ b/apps/dashboard/src/modals/SaveReport.tsx
@@ -30,7 +30,7 @@ type IForm = z.infer<typeof validator>;

 export default function SaveReport({ report }: SaveReportProps) {
  const router = useRouter();
-  const { organizationId: organizationSlug, projectId } = useAppParams();
+  const { organizationSlug, projectId } = useAppParams();
  const searchParams = useSearchParams();
  const dashboardId = searchParams?.get('dashboardId') ?? undefined;

--- a/apps/dashboard/src/modals/ShareOverviewModal.tsx
+++ b/apps/dashboard/src/modals/ShareOverviewModal.tsx
@@ -20,16 +20,16 @@ const validator = zShareOverview;
 type IForm = z.infer<typeof validator>;

 export default function ShareOverviewModal() {
-  const { projectId, organizationId: organizationSlug } = useAppParams();
+  const { projectId, organizationSlug } = useAppParams();
  const router = useRouter();

-  const { register, handleSubmit, formState, control } = useForm<IForm>({
+  const { register, handleSubmit, control } = useForm<IForm>({
    resolver: zodResolver(validator),
    defaultValues: {
      public: true,
      password: '',
      projectId,
-      organizationId: organizationSlug,
+      organizationSlug,
    },
  });

--- a/apps/dashboard/src/trpc/api/routers/client.ts
+++ b/apps/dashboard/src/trpc/api/routers/client.ts
@@ -6,35 +6,6 @@ import { hashPassword, stripTrailingSlash } from '@openpanel/common';
 import { db } from '@openpanel/db';

 export const clientRouter = createTRPCRouter({
-  list: protectedProcedure
-    .input(
-      z.object({
-        organizationId: z.string(),
-      })
-    )
-    .query(async ({ input: { organizationId } }) => {
-      return db.client.findMany({
-        where: {
-          organizationSlug: organizationId,
-        },
-        include: {
-          project: true,
-        },
-      });
-    }),
-  get: protectedProcedure
-    .input(
-      z.object({
-        id: z.string(),
-      })
-    )
-    .query(({ input }) => {
-      return db.client.findUniqueOrThrow({
-        where: {
-          id: input.id,
-        },
-      });
-    }),
  update: protectedProcedure
    .input(
      z.object({
@@ -59,7 +30,7 @@ export const clientRouter = createTRPCRouter({
      z.object({
        name: z.string(),
        projectId: z.string(),
-        organizationId: z.string(),
+        organizationSlug: z.string(),
        cors: z.string().nullable(),
      })
    )
@@ -67,7 +38,7 @@ export const clientRouter = createTRPCRouter({
      const secret = randomUUID();
      const client = await db.client.create({
        data: {
-          organizationSlug: input.organizationId,
+          organizationSlug: input.organizationSlug,
          projectId: input.projectId,
          name: input.name,
          secret: input.cors ? null : await hashPassword(secret),
--- a/apps/dashboard/src/trpc/api/routers/project.ts
+++ b/apps/dashboard/src/trpc/api/routers/project.ts
@@ -8,12 +8,12 @@ export const projectRouter = createTRPCRouter({
  list: protectedProcedure
    .input(
      z.object({
-        organizationId: z.string().nullable(),
+        organizationSlug: z.string().nullable(),
      })
    )
-    .query(async ({ input: { organizationId } }) => {
-      if (organizationId === null) return [];
-      return getProjectsByOrganizationSlug(organizationId);
+    .query(async ({ input: { organizationSlug } }) => {
+      if (organizationSlug === null) return [];
+      return getProjectsByOrganizationSlug(organizationSlug);
    }),

  update: protectedProcedure
@@ -37,15 +37,15 @@ export const projectRouter = createTRPCRouter({
    .input(
      z.object({
        name: z.string().min(1),
-        organizationId: z.string(),
+        organizationSlug: z.string(),
      })
    )
-    .mutation(async ({ input }) => {
+    .mutation(async ({ input: { name, organizationSlug } }) => {
      return db.project.create({
        data: {
-          id: await getId('project', input.name),
-          organizationSlug: input.organizationId,
-          name: input.name,
+          id: await getId('project', name),
+          organizationSlug: organizationSlug,
+          name: name,
        },
      });
    }),
--- a/apps/dashboard/src/trpc/api/routers/share.ts
+++ b/apps/dashboard/src/trpc/api/routers/share.ts
@@ -16,7 +16,7 @@ export const shareRouter = createTRPCRouter({
        },
        create: {
          id: uid.rnd(),
-          organizationSlug: input.organizationId,
+          organizationSlug: input.organizationSlug,
          projectId: input.projectId,
          public: input.public,
          password: input.password || null,
--- a/packages/db/src/services/clients.service.ts
+++ b/packages/db/src/services/clients.service.ts
@@ -8,10 +8,10 @@ export type IServiceClientWithProject = Prisma.ClientGetPayload<{
  };
 }>;

-export async function getClientsByOrganizationId(organizationId: string) {
+export async function getClientsByOrganizationSlug(organizationSlug: string) {
  return db.client.findMany({
    where: {
-      organizationSlug: organizationId,
+      organizationSlug,
    },
    include: {
      project: true,
--- a/packages/validation/src/index.ts
+++ b/packages/validation/src/index.ts
@@ -85,7 +85,7 @@ export const zInviteUser = z.object({
 });

 export const zShareOverview = z.object({
-  organizationId: z.string(),
+  organizationSlug: z.string(),
  projectId: z.string(),
  password: z.string().nullable(),
  public: z.boolean(),