Fix/wallet creation refresh issue (#1079)

* Managed state for the wallet creation steps

Signed-off-by: alokmore-awts <alok.more@ayanworks.com>

* minor ui fixes and text changes

Signed-off-by: alokmore-awts <alok.more@ayanworks.com>

* enum added in common enums file

Signed-off-by: alokmore-awts <alok.more@ayanworks.com>

* Added loaders to all the buttons

Signed-off-by: alokmore-awts <alok.more@ayanworks.com>

* sonarcube issues resolved

Signed-off-by: alokmore-awts <alok.more@ayanworks.com>

* Resolved issues of sonarqube

Signed-off-by: alokmore-awts <alok.more@ayanworks.com>

* Resolved issues of sonarqube

Signed-off-by: alokmore-awts <alok.more@ayanworks.com>

* Sonarqube issues resolved

Signed-off-by: alokmore-awts <alok.more@ayanworks.com>

* Added loaders for remaining components

Signed-off-by: alokmore-awts <alok.more@ayanworks.com>

* resolved comments of ellipsis bot

Signed-off-by: alokmore-awts <alok.more@ayanworks.com>

* Minor changes done

Signed-off-by: alokmore-awts <alok.more@ayanworks.com>

* moved interfaces in common file

Signed-off-by: alokmore-awts <alok.more@ayanworks.com>

---------

Signed-off-by: alokmore-awts <alok.more@ayanworks.com>

Author: alokmore-awts

nextjs/src/app/reset-password/ResetPassword.tsx

@@ -122,7 +122,7 @@ const ResetPassword = (): JSX.Element => {
                 <div className="flex w-full justify-center">
                   <Card className="relative z-10 w-full max-w-lg overflow-hidden rounded-xl border p-8 shadow-xl transition-transform duration-300 lg:max-w-md">
                     <div className="flex w-full flex-col gap-4 lg:mt-8">
-                      <div className="text-custom-900 dark:text-custom-100 font-inter flex justify-center text-center text-3xl leading-10 font-bold">
+                      <div className="font-inter flex justify-center text-center text-3xl leading-10 font-bold">
                         Reset Password
                       </div>
                       <div className="font-inter h-5.061 text-muted-foreground flex w-full flex-shrink-0 flex-col items-center justify-center text-base leading-5 font-medium">

nextjs/src/components/AlertComponent.tsx

@@ -36,7 +36,7 @@ export const AlertComponent = ({
               <div className="flex w-full flex-wrap items-center justify-between">
                 <div>{message}</div>
                 {viewButton && (
-                  <div className="text-primary-700 mr-2 flex justify-end text-right text-base md:w-32 lg:w-48">
+                  <div className="mr-2 flex justify-end text-right text-base md:w-32 lg:w-48">
                     <a href={path}>View more... </a>
                   </div>
                 )}

nextjs/src/components/BackButton.tsx

@@ -1,8 +1,9 @@
 'use client'
 
+import { JSX, useState } from 'react'
 import { ArrowLeft } from 'lucide-react'
 import { Button } from './ui/button'
-import { JSX } from 'react'
+import Loader from './Loader'
 import { useRouter } from 'next/navigation'
 
 interface BackButtonProps {
@@ -11,23 +12,34 @@ interface BackButtonProps {
 
 const BackButton = ({ path }: BackButtonProps): JSX.Element => {
   const router = useRouter()
+  const [isLoading, setIsLoading] = useState(false)
 
   const handleClick = (): void => {
+    setIsLoading(true)
     if (path) {
       router.push(path)
     } else {
       router.back()
     }
+
+    setTimeout(() => setIsLoading(false), 2000)
   }
 
   return (
     <Button
       variant="default"
       onClick={handleClick}
+      disabled={isLoading}
       className="mb-4 flex items-center gap-2 rounded-md px-4 py-2 transition-colors"
     >
-      <ArrowLeft size={18} />
-      Back
+      {isLoading ? (
+        <Loader size={20} />
+      ) : (
+        <>
+          <ArrowLeft size={18} />
+          Back
+        </>
+      )}
     </Button>
   )
 }

nextjs/src/components/EmptyListComponent.tsx

@@ -14,10 +14,8 @@ export const EmptyListMessage = ({
   <div
     className={`flex ${noExtraHeight ? '' : 'mt-20 mb-16'} flex-col items-center justify-start`}
   >
-    <p className="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
-      {message}
-    </p>
-    <p className="mb-4 text-lg text-gray-900 dark:text-white">{description}</p>
+    <p className="mb-4 text-2xl font-bold dark:text-white">{message}</p>
+    <p className="mb-4 text-lg dark:text-white">{description}</p>
     {buttonContent && (
       <RoleViewButton
         buttonTitle={buttonContent}

nextjs/src/components/RoleViewButton.tsx

@@ -2,6 +2,7 @@ import { Features, Roles } from '@/common/enums'
 import { JSX, ReactElement } from 'react'
 
 import { Button } from './ui/button'
+import Loader from './Loader'
 import { useAppSelector } from '@/lib/hooks'
 
 interface RoleViewButtonProps {
@@ -13,6 +14,7 @@ interface RoleViewButtonProps {
   isOutline?: boolean
   isPadding?: boolean
   disabled?: boolean
+  loading?: boolean
 }
 
 const RoleViewButton = ({
@@ -23,6 +25,7 @@ const RoleViewButton = ({
   feature,
   isOutline,
   disabled,
+  loading,
 }: RoleViewButtonProps): JSX.Element => {
   const roles = useAppSelector(
     (state) => state.organization.orgInfo?.roles || [],
@@ -59,6 +62,7 @@ const RoleViewButton = ({
       onClick={isRoleAccess() ? onClickEvent : undefined}
       disabled={disabled || !isRoleAccess()}
     >
+      {loading && <Loader size={20} />}
       {svgComponent}
       {buttonTitle}
     </Button>

nextjs/src/components/layout/app-sidebar.tsx

@@ -1,5 +1,4 @@
 'use client'
-
 import {
   Collapsible,
   CollapsibleContent,
@@ -22,6 +21,7 @@ import {
 import { currentPageNumber, itemPerPage } from '@/config/CommonConstant'
 import { setOrgId, setOrgInfo } from '@/lib/orgSlice'
 import { useAppDispatch, useAppSelector } from '@/lib/hooks'
+import { usePathname, useRouter } from 'next/navigation'
 
 import { IconChevronRight } from '@tabler/icons-react'
 import { Icons } from '../icons'
@@ -32,11 +32,11 @@ import { Organization } from '@/features/dashboard/type/organization'
 import { getOrganizations } from '@/app/api/organization'
 import { navItems } from '@/constants/data'
 import { setSidebarCollapsed } from '@/lib/sidebarSlice'
-import { usePathname } from 'next/navigation'
 import { useTheme } from 'next-themes'
 import { useThemeConfig } from '../active-theme'
 
 export default function AppSidebar(): React.JSX.Element {
+  const router = useRouter()
   const pathname = usePathname()
 
   const { activeTheme } = useThemeConfig()
@@ -124,7 +124,11 @@ export default function AppSidebar(): React.JSX.Element {
   return (
     <Sidebar collapsible="icon">
       <SidebarHeader className="group" data-collapsed>
-        <div className="relative transition-all duration-300">
+        <button
+          onClick={() => router.push('/dashboard')}
+          className="focus-visible:ring-primary relative cursor-pointer rounded transition-all duration-300 focus:outline-none focus-visible:ring-2"
+          aria-label="Go to dashboard"
+        >
           {isCollapsed ? (
             <div className="h-[40px] w-[150px] overflow-hidden">
               <Image
@@ -146,7 +150,7 @@ export default function AppSidebar(): React.JSX.Element {
               />
             </div>
           )}
-        </div>
+        </button>
       </SidebarHeader>
 
       <SidebarContent className="overflow-x-hidden">

nextjs/src/features/common/enum.ts

@@ -169,3 +169,22 @@ export enum ProofRequestState {
   done = 'done',
   abandoned = 'abandoned',
 }
+
+export enum AgentType {
+  SHARED = 'shared',
+  DEDICATED = 'dedicated',
+}
+
+// Define wallet spinup status enum
+export enum WalletSpinupStatus {
+  NOT_STARTED = 'not_started',
+  AGENT_CONFIG_SET = 'agent_config_set',
+  AGENT_SPINUP_INITIATED = 'agent_spinup_initiated',
+  AGENT_SPINUP_COMPLETED = 'agent_spinup_completed',
+  DID_PUBLISH_INITIATED = 'did_publish_initiated',
+  DID_PUBLISH_COMPLETED = 'did_publish_completed',
+  INVITATION_CREATION_STARTED = 'invitation_creation_started',
+  INVITATION_CREATION_SUCCESS = 'invitation_creation_success',
+  COMPLETED = 'completed',
+  FAILED = 'failed',
+}

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

@@ -2,7 +2,7 @@
 
 import * as z from 'zod'
 
-import { Eye, EyeOff, KeyRound, Loader2, LockKeyhole, Mail } from 'lucide-react'
+import { Eye, EyeOff, KeyRound, LockKeyhole, Mail } from 'lucide-react'
 import {
   Form,
   FormControl,
@@ -26,6 +26,7 @@ import { Button } from '@/components/ui/button'
 import { Icons } from '@/config/svgs/Auth'
 import { Input } from '@/components/ui/input'
 import Link from 'next/link'
+import Loader from '@/components/Loader'
 import { apiStatusCodes } from '@/config/CommonConstant'
 import { generateAuthenticationOption } from '@/app/api/Fido'
 import { setProfile } from '@/lib/profileSlice'
@@ -422,7 +423,7 @@ export default function SignInViewPage(): React.JSX.Element {
               disabled={loading}
               className="w-full text-xs md:text-sm"
             >
-              {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {loading && <Loader />}
               {isPasswordTab ? 'Sign in' : 'Continue with passkey'}
             </Button>
 

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

@@ -29,6 +29,7 @@ import { currentPageNumber, itemPerPage } from '@/config/CommonConstant'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import Link from 'next/link'
+import Loader from '@/components/Loader'
 import { Organisation } from '../type/organization'
 import { OrganizationRoles } from '@/common/enums'
 import { Plus } from 'lucide-react'
@@ -46,6 +47,7 @@ const OrganizationCardList = (): React.JSX.Element => {
   const [currentPage] = useState(currentPageNumber)
   const [pageSize] = useState(itemPerPage)
   const [searchTerm] = useState('')
+  const [isCreatingOrg, setIsCreatingOrg] = useState(false)
 
   const fetchOrganizations = async (): Promise<void> => {
     try {
@@ -91,10 +93,20 @@ const OrganizationCardList = (): React.JSX.Element => {
           <CardDescription>Manage your organizations</CardDescription>
         </div>
         <Button
-          onClick={() => route.push('/organizations/create-organization')}
-          // className="text-primary-foreground bg-primary"
+          onClick={() => {
+            setIsCreatingOrg(true)
+            route.push('/organizations/create-organization')
+          }}
+          disabled={isCreatingOrg}
         >
-          <Plus className="h-4 w-4" /> New Organization
+          {isCreatingOrg ? (
+            <Loader />
+          ) : (
+            <>
+              <Plus className="mr-2 h-4 w-4" />
+              New Organization
+            </>
+          )}
         </Button>
       </CardHeader>
 

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

@@ -27,6 +27,29 @@ export interface UserActivity {
   deletedAt: Date | string
 }
 
+// 👇 Helper function to convert date to "Created X ago"
+const getTimeAgo = (dateStr: string): string => {
+  const date = new Date(dateStr)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+
+  const seconds = Math.floor(diffMs / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+
+  if (seconds < 60) {
+    return 'Created just now'
+  }
+  if (minutes < 60) {
+    return `Created ${minutes} minute${minutes > 1 ? 's' : ''} ago`
+  }
+  if (hours < 24) {
+    return `Created ${hours} hour${hours > 1 ? 's' : ''} ago`
+  }
+  return `Created ${days} day${days > 1 ? 's' : ''} ago`
+}
+
 const RecentActivity = (): React.JSX.Element => {
   const [activityList, setActivityList] = useState<UserActivity[]>([])
   const [loading, setLoading] = useState(true)
@@ -64,16 +87,19 @@ const RecentActivity = (): React.JSX.Element => {
           <div key={index} className="flex gap-3">
             <div className="relative mt-1">
               <div className="flex h-2 w-2 items-center justify-center">
-                <div className="absolute h-2 w-2 rounded-full" />
+                <div className="bg-primary absolute h-2 w-2 rounded-full" />
               </div>
-              <div className="ml-1 h-full w-px" />
+              <div className="bg-muted ml-1 h-full w-px" />
             </div>
             <div className="space-y-1">
               <div className="max-w-[400px] truncate font-medium">
                 {activity.action || 'Performed an action'}
               </div>
-              <div className="text-muted-foreground">
-                {new Date(activity.createDateTime).toLocaleString()}
+              {/* <div className="max-w-full font-medium break-words">
+                {activity.action || 'Performed an action'}
+              </div> */}
+              <div className="text-muted-foreground text-sm italic">
+                {getTimeAgo(activity.createDateTime)}
               </div>
             </div>
           </div>