fix: dashboard build

karrioapi · Feb 1, 2025 · 59ebce8 · 59ebce8
1 parent 27bf1d6
commit 59ebce8
Show file tree

Hide file tree

Showing 21 changed files with 154 additions and 123 deletions.
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -47,7 +47,7 @@ jobs:
           npm install -g corepack
           mkdir -p ~/.volta/bin
           corepack enable --install-directory ~/.volta/bin
-          npm install
       - name: Test Build
         run: |
+          npm ci
           npm run build -w apps/dashboard
diff --git a/apps/dashboard/src/app/(base)/[domain]/api/images/[name]/route.ts b/apps/dashboard/src/app/(base)/[domain]/api/images/[name]/route.ts
@@ -3,9 +3,9 @@ import { NextRequest } from "next/server";
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { name: string } },
+  { params }: { params: Promise<{ name: string }> },
 ) {
-  const { name } = params;
+  const { name } = await params;
   const searchParams = request.nextUrl.searchParams;
   const isIcon = name.includes("_icon");
   const [_name, ..._] = name.replace(isIcon ? "_icon" : "_logo", "").split(".");

diff --git a/apps/dashboard/src/app/api/images/[name]/route.ts b/apps/dashboard/src/app/api/images/[name]/route.ts
@@ -3,9 +3,9 @@ import { NextRequest } from "next/server";
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { name: string } },
+  { params }: { params: Promise<{ name: string }> },
 ) {
-  const { name } = params;
+  const { name } = await params;
   const searchParams = request.nextUrl.searchParams;
   const isIcon = name.includes("_icon");
   const [_name, ..._] = name.replace(isIcon ? "_icon" : "_logo", "").split(".");

diff --git a/ee/apps/platform/next-env.d.ts b/ee/apps/platform/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/ee/packages/console/modules/auth/invites/index.tsx b/ee/packages/console/modules/auth/invites/index.tsx
@@ -5,10 +5,12 @@ import { trpc } from "@karrio/console/trpc/client";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
-export default function InvitePage({ params }: { params: { token: string } }) {
+export default async function InvitePage({ params }: { params: Promise<{ token: string }> }) {
+  const query = await params;
   const router = useRouter();
   const { toast } = useToast();
   const acceptInvitation = trpc.organizations.acceptInvitation.useMutation({
+
     onSuccess: (org) => {
       toast({
         title: "Welcome!",
@@ -27,8 +29,9 @@ export default function InvitePage({ params }: { params: { token: string } }) {
   });
 
   useEffect(() => {
-    acceptInvitation.mutate({ token: params.token });
-  }, [params.token]);
+    acceptInvitation.mutate({ token: query.token });
+  }, [query.token]);
+
 
   return (
     <div className="flex min-h-screen items-center justify-center">

diff --git a/ee/packages/console/modules/organizations/billing/index.tsx b/ee/packages/console/modules/organizations/billing/index.tsx
@@ -62,21 +62,22 @@ const stripePromise = loadStripe(
   process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!,
 );
 
-export default function BillingPage({ params }: { params: { orgId: string } }) {
+export default async function BillingPagePage({ params }: { params: Promise<{ orgId: string }>}){
+  const query = await params;
   const { toast } = useToast();
   const router = useRouter();
   const utils = trpc.useUtils();
   const { data: subscription } = trpc.billing.getSubscription.useQuery({
-    orgId: params.orgId,
+    orgId: query.orgId,
   });
   const { data: billingInfo } = trpc.billing.getBillingInfo.useQuery({
-    orgId: params.orgId,
+    orgId: query.orgId,
   });
   const { data: currentPlan } = trpc.billing.getPlan.useQuery({
-    orgId: params.orgId,
+    orgId: query.orgId,
   });
   const { data: invoices } = trpc.billing.getInvoices.useQuery({
-    orgId: params.orgId,
+    orgId: query.orgId,
   });
   const updateBilling = trpc.billing.updateBillingInfo.useMutation();
   const createSetupIntent = trpc.billing.createSetupIntent.useMutation();
@@ -98,7 +99,7 @@ export default function BillingPage({ params }: { params: { orgId: string } }) {
 
   const [isMounted, setIsMounted] = useState(false);
   const { data: paymentMethods } = trpc.billing.getPaymentMethods.useQuery({
-    orgId: params.orgId,
+    orgId: query.orgId,
   });
   const setDefaultPaymentMethod =
     trpc.billing.setDefaultPaymentMethod.useMutation();
@@ -207,7 +208,7 @@ export default function BillingPage({ params }: { params: { orgId: string } }) {
   const handleUpdateBilling = async () => {
     try {
       await updateBilling.mutateAsync({
-        orgId: params.orgId,
+        orgId: query.orgId,
         email: billingEmail,
         address: billingAddress,
       });
@@ -228,7 +229,7 @@ export default function BillingPage({ params }: { params: { orgId: string } }) {
   const handleUpdateTaxId = async () => {
     try {
       await updateBilling.mutateAsync({
-        orgId: params.orgId,
+        orgId: query.orgId,
         taxId: {
           type: taxIdType,
           value: taxIdNumber,
@@ -251,7 +252,7 @@ export default function BillingPage({ params }: { params: { orgId: string } }) {
   const handleAddCard = async () => {
     try {
       const setupIntent = await createSetupIntent.mutateAsync({
-        orgId: params.orgId,
+        orgId: query.orgId,
       });
 
       setSetupIntentSecret(setupIntent.setupIntent);
@@ -268,7 +269,7 @@ export default function BillingPage({ params }: { params: { orgId: string } }) {
   const handleSetDefaultPaymentMethod = async (paymentMethodId: string) => {
     try {
       await setDefaultPaymentMethod.mutateAsync({
-        orgId: params.orgId,
+        orgId: query.orgId,
         paymentMethodId,
       });
       toast({
@@ -288,7 +289,7 @@ export default function BillingPage({ params }: { params: { orgId: string } }) {
   const handleDeletePaymentMethod = async (paymentMethodId: string) => {
     try {
       await deletePaymentMethod.mutateAsync({
-        orgId: params.orgId,
+        orgId: query.orgId,
         paymentMethodId,
       });
     } catch (error) {
@@ -313,7 +314,7 @@ export default function BillingPage({ params }: { params: { orgId: string } }) {
 
     try {
       await createSubscription.mutateAsync({
-        orgId: params.orgId,
+        orgId: query.orgId,
         priceId: selectedPlan,
       });
     } catch (error: any) {
@@ -465,7 +466,7 @@ export default function BillingPage({ params }: { params: { orgId: string } }) {
                               onValueChange={async (value) => {
                                 try {
                                   await retrySubscriptionPayment.mutateAsync({
-                                    orgId: params.orgId,
+                                    orgId: query.orgId,
                                     paymentMethodId: value,
                                   });
                                   utils.billing.getSubscription.invalidate();
@@ -581,7 +582,7 @@ export default function BillingPage({ params }: { params: { orgId: string } }) {
                           variant="outline"
                           onClick={() =>
                             reactivateSubscription.mutateAsync({
-                              orgId: params.orgId,
+                              orgId: query.orgId,
                             })
                           }
                           disabled={reactivateSubscription.status === "loading"}
@@ -965,7 +966,7 @@ export default function BillingPage({ params }: { params: { orgId: string } }) {
 
           <Elements stripe={stripePromise}>
             <PaymentMethodForm
-              orgId={params.orgId}
+              orgId={query.orgId}
               onSuccess={() => {
                 refreshAllResources();
                 setShowPaymentForm(false);
@@ -1014,7 +1015,7 @@ export default function BillingPage({ params }: { params: { orgId: string } }) {
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
               onClick={() => {
                 cancelSubscription.mutateAsync({
-                  orgId: params.orgId,
+                  orgId: query.orgId,
                 });
                 setShowCancelDialog(false);
               }}

diff --git a/ee/packages/console/modules/organizations/settings/index.tsx b/ee/packages/console/modules/organizations/settings/index.tsx
@@ -11,9 +11,9 @@ import {
 } from "@karrio/insiders/components/ui/card";
 import { Alert, AlertDescription } from "@karrio/insiders/components/ui/alert";
 import { Button } from "@karrio/insiders/components/ui/button";
+import { UserPlus, Trash2, AlertCircle } from "lucide-react";
 import { Input } from "@karrio/insiders/components/ui/input";
 import { useToast } from "@karrio/insiders/hooks/use-toast";
-import { UserPlus, Trash2, AlertCircle } from "lucide-react";
 import { useSession } from "next-auth/react";
 import { useState } from "react";
 import {
@@ -28,21 +28,24 @@ import {
 } from "@karrio/insiders/components/ui/alert-dialog";
 import { useRouter } from "next/navigation";
 
-export default function SettingsPage({
+export default async function SettingsPage({
   params,
 }: {
-  params: { orgId: string };
+  params: Promise<{ orgId: string }>;
 }) {
   const { toast } = useToast();
   const router = useRouter();
   const utils = trpc.useContext();
   const { data: session } = useSession();
+  const { orgId } = await params;
   const { data: organization } = trpc.organizations.get.useQuery({
-    orgId: params.orgId,
+    orgId,
   });
   const { data: members } = trpc.organizations.getMembers.useQuery({
-    orgId: params.orgId,
+    orgId,
   });
+
+
   const currentUser = members?.find(
     (member) => member.user.email === session?.user?.email,
   );
@@ -172,11 +175,9 @@ export default function SettingsPage({
                         />
                         <Button
                           onClick={() =>
-                            updateOrg.mutateAsync({
-                              orgId: params.orgId,
-                              name: orgName,
-                            })
+                            updateOrg.mutateAsync({ orgId, name: orgName })
                           }
+
                           disabled={
                             !isOwner ||
                             !orgName ||
@@ -241,10 +242,11 @@ export default function SettingsPage({
                                 size="icon"
                                 onClick={() =>
                                   removeMember.mutateAsync({
-                                    orgId: params.orgId,
+                                    orgId,
                                     userId: member.userId,
                                   })
                                 }
+
                               >
                                 <Trash2 className="h-4 w-4 text-destructive" />
                               </Button>
@@ -266,11 +268,12 @@ export default function SettingsPage({
                       <Button
                         onClick={() => {
                           inviteMember.mutateAsync({
-                            orgId: params.orgId,
+                            orgId,
                             email: newMemberEmail,
                           });
                           setNewMemberEmail("");
                         }}
+
                         disabled={!isOwner || !newMemberEmail}
                         className="gap-2"
                       >
@@ -334,11 +337,10 @@ export default function SettingsPage({
             <AlertDialogAction
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
               onClick={() => {
-                deleteOrganization.mutateAsync({
-                  orgId: params.orgId,
-                });
+                deleteOrganization.mutateAsync({ orgId });
                 setShowDeleteDialog(false);
               }}
+
             >
               Delete
             </AlertDialogAction>

diff --git a/ee/packages/console/modules/projects/dashboard/index.tsx b/ee/packages/console/modules/projects/dashboard/index.tsx
@@ -42,25 +42,30 @@ interface DataPoint {
   failed: number;
 }
 
-export default function DashboardPage({
+export default async function DashboardPage({
   params,
 }: {
-  params: { orgId: string; projectId: string };
+  params: Promise<{ orgId: string; projectId: string }>;
 }) {
+  const { orgId, projectId } = await params;
   const utils = trpc.useContext();
   const { data: currentProject, isLoading: isProjectLoading } =
+
+
     trpc.projects.get.useQuery({
-      id: params.projectId,
-      orgId: params.orgId,
+      id: projectId,
+      orgId: orgId,
     });
+
   const { data: tenant, isLoading: isTenantLoading } =
     trpc.projects.tenant.get.useQuery(
-      { projectId: params.projectId },
+      { projectId: projectId },
       {
-        enabled: Boolean(params.projectId),
+        enabled: Boolean(projectId),
         refetchInterval: currentProject?.status !== "ACTIVE" ? 30000 : false,
       },
     );
+
   const checkTenantHealth = trpc.projects.checkTenantHealth.useMutation({
     onSuccess: () => {
       utils.projects.get.invalidate();
@@ -94,12 +99,14 @@ export default function DashboardPage({
 
   const usageStats = trpc.projects.tenant.getUsageStats.useQuery(
     {
-      projectId: params.projectId,
+      projectId: projectId,
       filter: dateFilter,
     },
+
     {
-      enabled: Boolean(params.projectId) && currentProject?.status === "ACTIVE",
+      enabled: Boolean(projectId) && currentProject?.status === "ACTIVE",
     },
+
   );
 
   React.useEffect(() => {
@@ -109,9 +116,10 @@ export default function DashboardPage({
   }, [tenant]);
 
   // Handle loading and error states
-  if (!params.projectId) {
+  if (!projectId) {
     return (
       <div className="flex flex-col items-center justify-center h-[50vh]">
+
         <h2 className="text-xl font-semibold">No Project Selected</h2>
         <p className="text-muted-foreground">
           Please select a project to view its dashboard
@@ -472,9 +480,10 @@ export default function DashboardPage({
                       <Button
                         onClick={() => {
                           retryDeployment.mutate({
-                            projectId: params.projectId,
+                            projectId: projectId,
                           });
                         }}
+
                         disabled={retryDeployment.status === "loading"}
                       >
                         {retryDeployment.status === "loading" ? (
@@ -504,9 +513,10 @@ export default function DashboardPage({
                     <Button
                       onClick={() => {
                         checkTenantHealth.mutate({
-                          projectId: params.projectId,
+                          projectId: projectId,
                         });
                       }}
+
                       disabled={checkTenantHealth.status === "loading"}
                     >
                       Check Tenant Health

diff --git a/ee/packages/console/modules/projects/index.tsx b/ee/packages/console/modules/projects/index.tsx
@@ -1,13 +1,13 @@
 "use client";
 
 import { DashboardHeader } from "@karrio/console/components/dashboard-header";
-import { Search, Plus, Building2, ChevronDown } from "lucide-react";
 import { Button } from "@karrio/insiders/components/ui/button";
 import { Input } from "@karrio/insiders/components/ui/input";
 import { Card } from "@karrio/insiders/components/ui/card";
-import { trpc } from "@karrio/console/trpc/client";
+import { ChevronRight, Search, Plus } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
-import { ChevronRight } from "lucide-react";
+import { trpc } from "@karrio/console/trpc/client";
+
 
 export default function Dashboard() {
   const params = useParams();