Update

flowinquiry · haiphucnguyen · Dec 14, 2024 · Dec 13, 2024 · Dec 13, 2024 · Dec 13, 2024
commit c4f638ef0050b5753e000a3c77015e4fa1b53142
diff --git a/src/app/account/reset/finish/page.tsx b/src/app/account/reset/finish/page.tsx
@@ -195,10 +195,12 @@ function ActivationContent() {
   );
 }
 
-export default function Page() {
+const Page = () => {
   return (
     <Suspense fallback={<p>Loading...</p>}>
       <ActivationContent />
     </Suspense>
   );
-}
+};
+
+export default Page;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -16,11 +16,11 @@ export const metadata: Metadata = {
   description: "Flexwork dashboard",
 };
 
-export default async function RootLayout({
+const RootLayout = async ({
   children,
 }: Readonly<{
   children: React.ReactNode;
-}>) {
+}>) => {
   return (
     <html suppressHydrationWarning={true} lang="en">
       <head>
@@ -40,4 +40,6 @@ export default async function RootLayout({
       </body>
     </html>
   );
-}
+};
+
+export default RootLayout;
diff --git a/src/app/portal/dashboard/page.tsx b/src/app/portal/dashboard/page.tsx
@@ -4,7 +4,7 @@ import UserNotifications from "@/components/dashboard/notifications-user";
 import TeamUnresolvedTicketsPriorityDistributionChart from "@/components/dashboard/team-unresolved-tickets-priority-distribution";
 import UserTeamsOverdueTickets from "@/components/dashboard/user-requests-overdue";
 
-export default function Home() {
+const Page = () => {
   return (
     <ContentLayout title="Dashboard">
       <h1 className="text-2xl mb-4">Dashboard</h1>
@@ -27,4 +27,6 @@ export default function Home() {
       </div>
     </ContentLayout>
   );
-}
+};
+
+export default Page;
diff --git a/src/app/portal/error.tsx b/src/app/portal/error.tsx
@@ -4,13 +4,13 @@ import { useEffect } from "react";
 
 import { Button } from "@/components/ui/button";
 
-export default function Error({
+const Error = ({
   error,
   reset,
 }: {
   error: Error & { digest?: string };
   reset: () => void;
-}) {
+}) => {
   useEffect(() => {
     // Log the error to an error reporting service
     console.error(error);
@@ -29,4 +29,6 @@ export default function Error({
       </Button>
     </div>
   );
-}
+};
+
+export default Error;
diff --git a/src/app/portal/layout.tsx b/src/app/portal/layout.tsx
@@ -5,7 +5,7 @@ import { auth } from "@/auth";
 import AdminPanelLayout from "@/components/admin-panel/admin-panel-layout";
 import { PermissionsProvider } from "@/providers/permissions-provider";
 
-const MainLayout = async ({ children }: { children: React.ReactNode }) => {
+const Layout = async ({ children }: { children: React.ReactNode }) => {
   const session = await auth();
   if (!session) {
     console.log("No session is detected. Redirect to login page");
@@ -21,4 +21,4 @@ const MainLayout = async ({ children }: { children: React.ReactNode }) => {
   );
 };
 
-export default MainLayout;
+export default Layout;
diff --git a/src/app/portal/not-found.tsx b/src/app/portal/not-found.tsx
@@ -6,8 +6,9 @@ import React from "react";
 
 import { Button } from "@/components/ui/button";
 
-export default function NotFound() {
+const NotFound = () => {
   const router = useRouter();
+
   return (
     <main className="flex h-full flex-col items-center justify-center gap-2">
       <FrownIcon className="w-10 text-gray-400" />
@@ -21,4 +22,6 @@ export default function NotFound() {
       </Button>
     </main>
   );
-}
+};
+
+export default NotFound;
diff --git a/src/app/portal/page.tsx b/src/app/portal/page.tsx
@@ -1,7 +1,7 @@
 import { redirect } from "next/navigation";
 
-export default function Home() {
-  // Load the user authority permission
-
+const Page = () => {
   redirect("/portal/dashboard");
-}
+};
+
+export default Page;
diff --git a/src/app/portal/profile/page.tsx b/src/app/portal/profile/page.tsx
@@ -6,12 +6,12 @@ const breadcrumbItems = [
   { title: "Profile", link: "/portal/profile" },
 ];
 
-const ProfilePage = () => {
+const Page = () => {
   return (
     <SimpleContentView title="Profile" breadcrumbItems={breadcrumbItems}>
       <ProfileForm />
     </SimpleContentView>
   );
 };
 
-export default ProfilePage;
+export default Page;
diff --git a/src/app/portal/settings/authorities/layout.tsx b/src/app/portal/settings/authorities/layout.tsx
@@ -2,14 +2,12 @@ import React from "react";
 
 import { ResourceProvider } from "@/providers/resource-provider";
 
-export default function TeamsLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
     <ResourceProvider resourceId="Authorities">
       <div>{children}</div>
     </ResourceProvider>
   );
-}
+};
+
+export default Layout;
diff --git a/src/app/portal/settings/workflows/layout.tsx b/src/app/portal/settings/workflows/layout.tsx
@@ -2,14 +2,12 @@ import React from "react";
 
 import { ResourceProvider } from "@/providers/resource-provider";
 
-export default function WorkflowsLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
     <ResourceProvider resourceId="Workflows">
       <div>{children}</div>
     </ResourceProvider>
   );
-}
+};
+
+export default Layout;
diff --git a/src/app/portal/teams/[teamId]/edit/page.tsx b/src/app/portal/teams/[teamId]/edit/page.tsx
@@ -2,9 +2,7 @@ import { SimpleContentView } from "@/components/admin-panel/simple-content-view"
 import { TeamForm } from "@/components/teams/team-form";
 import { deobfuscateToNumber } from "@/lib/endecode";
 
-export default async function Page(props: {
-  params: Promise<{ teamId: string | "new" }>;
-}) {
+const Page = async (props: { params: Promise<{ teamId: string | "new" }> }) => {
   const params = await props.params;
   const teamId =
     params.teamId !== "new" ? deobfuscateToNumber(params.teamId) : undefined;
@@ -14,4 +12,6 @@ export default async function Page(props: {
       <TeamForm teamId={teamId} />
     </SimpleContentView>
   );
-}
+};
+
+export default Page;
diff --git a/src/app/portal/teams/[teamId]/layout.tsx b/src/app/portal/teams/[teamId]/layout.tsx
@@ -5,16 +5,19 @@ import { deobfuscateToNumber } from "@/lib/endecode";
 import { TeamProvider } from "@/providers/team-provider";
 import { UserTeamRoleProvider } from "@/providers/user-team-role-provider";
 
-export default async function TeamsLayout(props: {
+const Layout = async ({
+  children,
+  params,
+}: {
   children: React.ReactNode;
   params: Promise<{ teamId: string }>;
-}) {
-  const params = await props.params;
-
-  const { children } = props;
+}) => {
+  const resolvedParams = await params;
 
   const teamIdNum =
-    params.teamId === "new" ? null : deobfuscateToNumber(params.teamId);
+    resolvedParams.teamId === "new"
+      ? null
+      : deobfuscateToNumber(resolvedParams.teamId);
 
   if (teamIdNum == null) {
     return children;
@@ -27,4 +30,6 @@ export default async function TeamsLayout(props: {
       <UserTeamRoleProvider teamId={teamIdNum}>{children}</UserTeamRoleProvider>
     </TeamProvider>
   );
-}
+};
+
+export default Layout;
diff --git a/src/app/portal/teams/[teamId]/requests/[requestId]/edit/page.tsx b/src/app/portal/teams/[teamId]/requests/[requestId]/edit/page.tsx
@@ -5,9 +5,9 @@ import TeamNavLayout from "@/components/teams/team-nav";
 import { TeamRequestForm } from "@/components/teams/team-requests-form";
 import { deobfuscateToNumber } from "@/lib/endecode";
 
-export default async function Page(props: {
+const Page = async (props: {
   params: Promise<{ teamId: string; requestId: string }>;
-}) {
+}) => {
   const params = await props.params;
   const teamRequestId = deobfuscateToNumber(params.requestId);
 
@@ -18,4 +18,6 @@ export default async function Page(props: {
       </TeamNavLayout>
     </ContentLayout>
   );
-}
+};
+
+export default Page;
diff --git a/src/app/portal/users/[userId]/edit/page.tsx b/src/app/portal/users/[userId]/edit/page.tsx
@@ -1,16 +1,23 @@
 import { SimpleContentView } from "@/components/admin-panel/simple-content-view";
 import { UserForm } from "@/components/users/user-form";
+import { deobfuscateToNumber } from "@/lib/endecode";
 
-const breadcrumbItems = [
-  { title: "Dashboard", link: "/portal" },
-  { title: "Users", link: "/portal/users" },
-  { title: "Create", link: "/portal/users/edit/new" },
-];
+const Page = async (props: { params: Promise<{ userId: string | "new" }> }) => {
+  const params = await props.params;
+  const userId =
+    params.userId !== "new" ? deobfuscateToNumber(params.userId) : undefined;
+
+  const breadcrumbItems = [
+    { title: "Dashboard", link: "/portal" },
+    { title: "Users", link: "/portal/users" },
+    { title: "Create", link: "/portal/users/edit/new" },
+  ];
 
-export default function Page() {
   return (
     <SimpleContentView title="Users" breadcrumbItems={breadcrumbItems}>
-      <UserForm initialData={null} key={null} />
+      <UserForm userId={userId} />
     </SimpleContentView>
   );
-}
+};
+
+export default Page;
diff --git a/src/app/portal/users/layout.tsx b/src/app/portal/users/layout.tsx
@@ -2,14 +2,12 @@ import React from "react";
 
 import { ResourceProvider } from "@/providers/resource-provider";
 
-export default function TeamsLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+const TeamsLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <ResourceProvider resourceId="Users">
       <div>{children}</div>
     </ResourceProvider>
   );
-}
+};
+
+export default TeamsLayout;
diff --git a/src/components/authorities/authority-form.tsx b/src/components/authorities/authority-form.tsx
@@ -25,8 +25,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Textarea } from "@/components/ui/textarea";
 import { Spinner } from "@/components/ui/spinner";
+import { Textarea } from "@/components/ui/textarea";
 import {
   batchSavePermissions,
   createAuthority,
@@ -50,9 +50,13 @@ type FormData = z.infer<typeof formSchema>;
 
 const permissionOptions = ["NONE", "READ", "WRITE", "ACCESS"];
 
-const AuthorityForm = ({ authorityId }: { authorityId: string }) => {
+const AuthorityForm = ({
+  authorityId,
+}: {
+  authorityId: string | undefined;
+}) => {
   const router = useRouter();
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(!!authorityId); // Only show loading if authorityId is present
   const [error, setError] = useState<string | null>(null);
   const [authorityResourcePermissions, setAuthorityResourcePermissions] =
     useState<Array<AuthorityResourcePermissionDTO>>([]);
@@ -75,6 +79,8 @@ const AuthorityForm = ({ authorityId }: { authorityId: string }) => {
 
   useEffect(() => {
     async function fetchAuthorityAndPermissions() {
+      if (!authorityId) return; // Skip fetching if authorityId is undefined
+
       try {
         const fetchedAuthority = await findAuthorityByName(authorityId);
 
@@ -142,7 +148,7 @@ const AuthorityForm = ({ authorityId }: { authorityId: string }) => {
   if (loading) {
     return (
       <div className="flex justify-center items-center h-full">
-        <Spinner /> {/* Display a spinner while loading */}
+        <Spinner>Loading data...</Spinner>
       </div>
     );
   }
@@ -221,7 +227,7 @@ const AuthorityForm = ({ authorityId }: { authorityId: string }) => {
                           <FormControl>
                             <Select
                               onValueChange={field.onChange}
-                              defaultValue={field.value || "NONE"}
+                              value={field.value ?? "NONE"}
                               disabled={isSystemRole}
                             >
                               <SelectTrigger>

diff --git a/src/components/forms/profile-form.tsx b/src/components/forms/profile-form.tsx
@@ -29,9 +29,9 @@ import { useImageCropper } from "@/hooks/use-image-cropper";
 import { findUserById } from "@/lib/actions/users.action";
 import { apiClient } from "@/lib/api-client";
 import { obfuscate } from "@/lib/endecode";
-import { userSchema } from "@/types/users";
+import { UserTypeSchema } from "@/types/users";
 
-const userSchemaWithFile = userSchema.extend({
+const userSchemaWithFile = UserTypeSchema.extend({
   file: z.any().optional(), // Add file as an optional field of any type
 });