fix: organization dashboard issue

nextjs/src/features/auth/components/user-auth-form.tsx

@@ -2,14 +2,7 @@
 
 import * as z from 'zod'
 
-import {
-  Eye,
-  EyeOff,
-  KeyRound,
-  Loader2,
-  LockKeyhole,
-  Mail,
-} from 'lucide-react'
+import { Eye, EyeOff, KeyRound, Loader2, LockKeyhole, Mail } from 'lucide-react'
 import {
   Form,
   FormControl,

nextjs/src/features/dashboard/components/OrganizationCardList.tsx

@@ -146,9 +146,7 @@ const OrganizationCardList = (): React.JSX.Element => {
                 >
                   <button
                     className="flex min-w-0 items-center gap-3 hover:cursor-pointer"
-                    onClick={() =>
-                      route.push(`/organizations/dashboard/${org.id}`)
-                    }
+                    onClick={() => route.push(`/organizations/${org.id}`)}
                   >
                     <div className="flex-shrink-0">
                       {org.logoUrl ? (
@@ -254,9 +252,7 @@ const OrganizationCardList = (): React.JSX.Element => {
                               }
                               hasWallet
                                 ? route.push('/organizations/schemas/create')
-                                : route.push(
-                                    `/organizations/dashboard/${org.id}`,
-                                  )
+                                : route.push(`/organizations/${org.id}`)
                             }}
                             disabled={!isAdmin}
                             className="rounded-md p-1"
@@ -282,7 +278,7 @@ const OrganizationCardList = (): React.JSX.Element => {
                               if (hasWallet) {
                                 route.push('/organizations/schemas')
                               } else {
-                                route.push(`/organizations/dashboard/${org.id}`)
+                                route.push(`/organizations/${org.id}`)
                               }
                             }}
                             className="rounded-md p-1"
@@ -305,7 +301,7 @@ const OrganizationCardList = (): React.JSX.Element => {
                             if (hasWallet) {
                               route.push('/organizations/credentials')
                             } else {
-                              route.push(`/organizations/dashboard/${org.id}`)
+                              route.push(`/organizations/${org.id}`)
                             }
                           }}
                         >
@@ -326,7 +322,7 @@ const OrganizationCardList = (): React.JSX.Element => {
                             if (hasWallet) {
                               route.push('/organizations/verification')
                             } else {
-                              route.push(`/organizations/dashboard/${org.id}`)
+                              route.push(`/organizations/${org.id}`)
                             }
                           }}
                         >

nextjs/src/features/organization/components/DeleteOrganizationCard.tsx

@@ -8,10 +8,10 @@ import {
 
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
+import { DeleteIcon } from '@/config/svgs/DeleteIcon'
 import React from 'react'
-// components/organization/delete-organization-card.tsx
-import { Trash2 } from 'lucide-react'
 
+// components/organization/delete-organization-card.tsx
 interface DeleteOrganizationCardProps {
   title?: string
   description?: string
@@ -47,9 +47,13 @@ export function DeleteOrganizationCard({
             size="icon"
             onClick={onDeleteClick}
             disabled={isButtonDisabled}
-            className={isButtonDisabled ? 'cursor-not-allowed opacity-50' : ''}
+            className={
+              isButtonDisabled
+                ? 'cursor-not-allowed bg-transparent opacity-50 hover:bg-transparent'
+                : 'bg-transparent hover:bg-transparent'
+            }
           >
-            <Trash2 className="h-5 w-5" />
+            <DeleteIcon />
           </Button>
         </div>
       </CardHeader>

nextjs/src/features/organization/components/OrganizationList.tsx

@@ -111,7 +111,7 @@ export const OrganizationList = (): React.JSX.Element => {
       )
     }
 
-    router.push(`/organizations/dashboard/${orgId}`)
+    router.push(`/organizations/${orgId}`)
   }
   const handleCreateOrg = (): void => {
     router.push('organizations/create-organization')
@@ -145,7 +145,7 @@ export const OrganizationList = (): React.JSX.Element => {
 
       <div className="mx-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
         {loading ? (
-           <div className="mb-4 col-span-full grid place-items-center min-h-[50vh] w-full">
+          <div className="col-span-full mb-4 grid min-h-[50vh] w-full place-items-center">
             <Loader />
           </div>
         ) : organizationsList.length > 0 ? (

nextjs/src/features/passkey/AddPasskey.tsx

@@ -15,29 +15,34 @@ import {
   verifyRegistration,
 } from '@/app/api/Fido'
 
+import { AlertComponent } from '@/components/AlertComponent'
 import { Button } from '@/components/ui/button'
 import DeviceDetails from './DeviceDetails'
 import { Devices } from '../auth/components/UserInfoForm'
 import PasskeyAddDevice from './PassKeyAddDevice'
 import PasskeyAlert from './PasskeyAlert'
-import { RootState } from '@/lib/store'
 import { apiStatusCodes } from '@/config/CommonConstant'
 import { startRegistration } from '@simplewebauthn/browser'
-import { useSelector } from 'react-redux'
 
 interface RegistrationOptionInterface {
   userName: string | null
   deviceFlag: boolean
 }
 
+interface AddPasskeyProps {
+  email?: string
+}
+
 interface AlertResponseType {
   type: 'success' | 'error'
   message: string
 }
 
-const AddPasskey = (): React.JSX.Element => {
+const AddPasskey = ({
+  email: userEmail,
+}: AddPasskeyProps = {}): React.JSX.Element => {
   const [error, setError] = useState('')
-  const [loader, setLoader] = useState(true)
+  const [loader, setLoader] = useState(false)
   const [OrgUserEmail, setOrgUserEmail] = useState<string>('')
   const [deviceList, setDeviceListData] = useState<IDeviceData[]>([])
   const [addSuccess, setAddSuccess] = useState<string | null>(null)
@@ -49,8 +54,6 @@ const AddPasskey = (): React.JSX.Element => {
   const [openModel, setOpenModel] = useState<boolean>(false)
   const [, setErrMsg] = useState<string | null>(null)
 
-  const userEmail = useSelector((state: RootState) => state.profile.email)
-
   const showFidoError = (error: unknown): void => {
     const err = error as AxiosError
     if (
@@ -240,6 +243,32 @@ const AddPasskey = (): React.JSX.Element => {
     <div className="h-full">
       {(addSuccess || addFailure || error) && (
         <div className="p-2">
+          {addSuccess && (
+            <div className="w-full" role="alert">
+              <AlertComponent
+                message={addSuccess}
+                type={'success'}
+                onAlertClose={() => {
+                  if (addSuccess) {
+                    setAddSuccess(null)
+                  }
+                }}
+              />
+            </div>
+          )}
+          {addFailure && (
+            <div className="w-full" role="alert">
+              <AlertComponent
+                message={addFailure}
+                type={'failure'}
+                onAlertClose={() => {
+                  if (addFailure) {
+                    setAddFailure(null)
+                  }
+                }}
+              />
+            </div>
+          )}
           <Alert variant={addSuccess ? 'default' : 'destructive'}>
             <AlertDescription>
               {addSuccess || addFailure || error}

nextjs/src/features/passkey/DeleteModal.tsx

@@ -9,9 +9,9 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
-import { Trash2, X } from 'lucide-react'
 
 import { Button } from '@/components/ui/button'
+import { X } from 'lucide-react'
 
 interface DeleteModalProps {
   openModal: boolean
@@ -55,10 +55,6 @@ const DeleteModal = ({
         </div>
       </DialogHeader>
 
-      <div className="flex justify-center">
-        <Trash2 className="h-12 w-12 text-gray-400 dark:text-gray-500" />
-      </div>
-
       <DialogFooter className="mt-4 flex justify-center gap-4">
         <Button variant="outline" onClick={() => closeModal(false)}>
           No, cancel

nextjs/src/features/passkey/EditModal.tsx

@@ -11,6 +11,7 @@ import {
 import { Field, Form, Formik } from 'formik'
 
 import { Button } from '@/components/ui/button'
+import { CheckCircle } from 'lucide-react'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { useRef } from 'react'
@@ -85,23 +86,7 @@ const EditModal = (props: {
                     No, cancel
                   </Button>
                   <Button type="submit">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="20"
-                      height="20"
-                      fill="none"
-                      viewBox="0 0 25 25"
-                      className="mr-2"
-                    >
-                      <path
-                        fill="#fff"
-                        d="M22.758 5.366a.833.833 0 0 0-1.366.95 10.826 10.826 0 0 1-5.647 16.518 10.838 10.838 0 0 1-12.909-5.438 10.825 10.825 0 0 1-1.17-4.89 10.893 10.893 0 0 1 7.742-10.38.835.835 0 1 0-.475-1.6 12.5 12.5 0 0 0-8.74 9.792 12.49 12.49 0 0 0 4.834 12.2A12.502 12.502 0 0 0 25 12.505a12.417 12.417 0 0 0-2.242-7.139Z"
-                      />
-                      <path
-                        fill="#fff"
-                        d="M15.59 2.13a10.786 10.786 0 0 1 3.575 1.875.834.834 0 0 0 1.033-1.308A12.419 12.419 0 0 0 16.032.531a.835.835 0 0 0-.476 1.6h.034Zm-3.684-.69a.958.958 0 0 0 .275.174.784.784 0 0 0 .634 0 .966.966 0 0 0 .275-.175.83.83 0 0 0 .242-.591.875.875 0 0 0-.242-.592.833.833 0 0 0-.758-.241.542.542 0 0 0-.15.05.617.617 0 0 0-.15.075l-.126.1a.833.833 0 0 0-.175.275.833.833 0 0 0 0 .65c.043.1.102.193.175.274Zm-6.75 9.92a.95.95 0 0 0 0 1.35l4.767 4.798a.95.95 0 0 0 1.35 0l8.567-8.605a.969.969 0 1 0-1.35-1.391l-7.9 7.897-4.083-4.049a.959.959 0 0 0-1.35 0Z"
-                      />
-                    </svg>
+                    <CheckCircle className="h-16 w-16" />
                     Submit
                   </Button>
                 </div>

nextjs/src/features/profile/components/EditUserProfile.tsx

@@ -223,7 +223,7 @@ export default function EditUserProfile({
                       value={formik.values.firstName}
                       onChange={formik.handleChange}
                       onBlur={formik.handleBlur}
-                      className="w-full rounded-md p-2"
+                      className="w-3xl rounded-md p-2"
                     />
                     {formik.errors.firstName && formik.touched.firstName && (
                       <div className="mt-1 text-sm">
@@ -243,7 +243,7 @@ export default function EditUserProfile({
                       value={formik.values.lastName}
                       onChange={formik.handleChange}
                       onBlur={formik.handleBlur}
-                      className="w-full rounded-md p-2"
+                      className="w-3xl rounded-md p-2"
                     />
                     {formik.errors.lastName && formik.touched.lastName && (
                       <div className="mt-1 text-sm">
@@ -270,4 +270,4 @@ export default function EditUserProfile({
       </div>
     </Card>
   )
-}
+}

nextjs/src/features/profile/components/UserProfile.tsx

@@ -15,6 +15,7 @@ export default function UserProfile(): React.JSX.Element {
   const token = useAppSelector((state) => state.auth.token)
 
   const [isEditProfileOpen, setIsEditProfileOpen] = useState(false)
+  const [userEmail, setUserEmail] = useState('')
   const [prePopulatedUserProfile, setPrePopulatedUserProfile] =
     useState<IUserProfile | null>(null)
   const [activeTab, setActiveTab] = useState<'profile' | 'passkey'>('profile')
@@ -31,6 +32,7 @@ export default function UserProfile(): React.JSX.Element {
           response?.data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS
         ) {
           setPrePopulatedUserProfile(response.data.data)
+          setUserEmail(response.data.data.email)
         }
       } catch (error) {
         // eslint-disable-next-line no-console
@@ -91,7 +93,7 @@ export default function UserProfile(): React.JSX.Element {
             )}
           </>
         ) : (
-          <AddPasskey />
+          <AddPasskey email={userEmail} />
         )}
       </div>
     </div>

nextjs/src/features/verification/components/VerificationSchemasList.tsx

@@ -358,7 +358,9 @@ const VerificationSchemasList = (): JSX.Element => {
                     feature={Features.CRETAE_SCHEMA}
                     svgComponent={createSchemaButtonTitle.svg}
                     onClickEvent={() => {
-                      route.push(`${pathRoutes.organizations.dashboard}`)
+                      route.push(
+                        `${pathRoutes.organizations}/${organizationId}`,
+                      )
                     }}
                   />
                 )}