+
+)
+
+export default page
diff --git a/nextjs/src/app/credentials/connections/issuance/page.tsx b/nextjs/src/app/credentials/connections/issuance/page.tsx
new file mode 100644
index 000000000..86e0da8f5
--- /dev/null
+++ b/nextjs/src/app/credentials/connections/issuance/page.tsx
@@ -0,0 +1,6 @@
+import IssueCred from '@/features/organization/connectionIssuance/components/Issuance'
+import React from 'react'
+
+const page = (): React.JSX.Element =>
+
+)
+
+export default page
diff --git a/nextjs/src/app/credentials/issue/schemas/page.tsx b/nextjs/src/app/credentials/issue/schemas/page.tsx
new file mode 100644
index 000000000..54a1ab98e
--- /dev/null
+++ b/nextjs/src/app/credentials/issue/schemas/page.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import SchemaSelection from '@/features/schemas/components/SchemaSelection'
+
+const page = (): React.JSX.Element =>
+
+)
+
+export default page
diff --git a/nextjs/src/app/developers-setting/page.tsx b/nextjs/src/app/developers-setting/page.tsx
new file mode 100644
index 000000000..25b162654
--- /dev/null
+++ b/nextjs/src/app/developers-setting/page.tsx
@@ -0,0 +1,10 @@
+import DevelopersSetting from '@/features/profile/components/DevelopersSetting'
+import React from 'react'
+
+const page = (): React.JSX.Element => (
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/globals.css b/nextjs/src/app/globals.css
new file mode 100644
index 000000000..87f20a32d
--- /dev/null
+++ b/nextjs/src/app/globals.css
@@ -0,0 +1,384 @@
+@import 'tailwindcss';
+
+@import 'tw-animate-css';
+
+@import './theme.css';
+
+:root {
+ --background: #ffffff;
+ --foreground: #111826;
+ --card: #ffffff;
+ --card-foreground: #111826;
+ --popover: #ffffff;
+ --popover-foreground: #111826;
+ --primary: #f6d308;
+ --primary-foreground: #000000;
+ --secondary: #f5f5f5;
+ --secondary-foreground: #364050;
+ --muted: #f5f5f5;
+ --muted-foreground: #6c727e;
+ --accent: #fbf3c6;
+ --accent-foreground: #000000;
+ --destructive: #df2224;
+ --destructive-foreground: #ffffff;
+ --border: #e4e8ef;
+ --input: #e4e8ef;
+ --ring: #f6d308;
+ --chart-1: #fff185;
+ --chart-2: #f0b100;
+ --chart-3: #c18400;
+ --chart-4: #894a00;
+ --chart-5: #733e0a;
+ --sidebar: #f2f2f2;
+ --sidebar-foreground: #111826;
+ --sidebar-primary: #c18400;
+ --sidebar-primary-foreground: #ffffff;
+ --sidebar-accent: #fbf3c6;
+ --sidebar-accent-foreground: #000000;
+ --sidebar-border: #e4e8ef;
+ --sidebar-ring: #f6d308;
+ --font-sans: Inter, sans-serif;
+ --font-serif: Source Serif 4, serif;
+ --font-mono: IBM Plex Mono, monospace;
+ --radius: 0.375rem;
+ --shadow-2xs: 2px 2px 4px 0px hsl(196 83% 10% / 0.07);
+ --shadow-xs: 2px 2px 4px 0px hsl(196 83% 10% / 0.07);
+ --shadow-sm: 2px 2px 4px 0px hsl(196 83% 10% / 0.15),
+ 2px 1px 2px -1px hsl(196 83% 10% / 0.15);
+ --shadow: 2px 2px 4px 0px hsl(196 83% 10% / 0.15),
+ 2px 1px 2px -1px hsl(196 83% 10% / 0.15);
+ --shadow-md: 2px 2px 4px 0px hsl(196 83% 10% / 0.15),
+ 2px 2px 4px -1px hsl(196 83% 10% / 0.15);
+ --shadow-lg: 2px 2px 4px 0px hsl(196 83% 10% / 0.15),
+ 2px 4px 6px -1px hsl(196 83% 10% / 0.15);
+ --shadow-xl: 2px 2px 4px 0px hsl(196 83% 10% / 0.15),
+ 2px 8px 10px -1px hsl(196 83% 10% / 0.15);
+ --shadow-2xl: 2px 2px 4px 0px hsl(196 83% 10% / 0.38);
+}
+
+.dark {
+ --background: #1c2433;
+ --foreground: #e4e8ef;
+ --card: #252e3d;
+ --card-foreground: #e4e8ef;
+ --popover: #252e3d;
+ --popover-foreground: #e4e8ef;
+ --primary: #0265fd;
+ --primary-foreground: #ffffff;
+ --secondary: #2f3b50;
+ --secondary-foreground: #e4e8ef;
+ --muted: #252e3d;
+ --muted-foreground: #9ba2ae;
+ --accent: #2b354a;
+ --accent-foreground: #e4e8ef;
+ --destructive: #f14444;
+ --destructive-foreground: #ffffff;
+ --border: #2f3b50;
+ --input: #2f3b50;
+ --ring: #0265fd;
+ --chart-1: #0265fd;
+ --chart-2: #0152cb;
+ --chart-3: #4c9bff;
+ --chart-4: #0d49a5;
+ --chart-5: #162a4e;
+ --sidebar: #1c2433;
+ --sidebar-foreground: #e4e8ef;
+ --sidebar-primary: #0265fd;
+ --sidebar-primary-foreground: #ffffff;
+ --sidebar-accent: #2b354a;
+ --sidebar-accent-foreground: #e4e8ef;
+ --sidebar-border: #2f3b50;
+ --sidebar-ring: #0265fd;
+ --font-sans: Inter, sans-serif;
+ --font-serif: Source Serif 4, serif;
+ --font-mono: JetBrains Mono, monospace;
+ --radius: 0.375rem;
+ --shadow-2xs: 2px 2px 4px 0px hsl(196 83% 10% / 0.07);
+ --shadow-xs: 2px 2px 4px 0px hsl(196 83% 10% / 0.07);
+ --shadow-sm: 2px 2px 4px 0px hsl(196 83% 10% / 0.15),
+ 2px 1px 2px -1px hsl(196 83% 10% / 0.15);
+ --shadow: 2px 2px 4px 0px hsl(196 83% 10% / 0.15),
+ 2px 1px 2px -1px hsl(196 83% 10% / 0.15);
+ --shadow-md: 2px 2px 4px 0px hsl(196 83% 10% / 0.15),
+ 2px 2px 4px -1px hsl(196 83% 10% / 0.15);
+ --shadow-lg: 2px 2px 4px 0px hsl(196 83% 10% / 0.15),
+ 2px 4px 6px -1px hsl(196 83% 10% / 0.15);
+ --shadow-xl: 2px 2px 4px 0px hsl(196 83% 10% / 0.15),
+ 2px 8px 10px -1px hsl(196 83% 10% / 0.15);
+ --shadow-2xl: 2px 2px 4px 0px hsl(196 83% 10% / 0.38);
+}
+
+/* stylelint-disable-next-line at-rule-no-unknown */
+@theme inline {
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-destructive-foreground: var(--destructive-foreground);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
+
+ --font-sans: var(--font-sans);
+ --font-mono: var(--font-mono);
+ --font-serif: var(--font-serif);
+
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+
+ --shadow-2xs: var(--shadow-2xs);
+ --shadow-xs: var(--shadow-xs);
+ --shadow-sm: var(--shadow-sm);
+ --shadow: var(--shadow);
+ --shadow-md: var(--shadow-md);
+ --shadow-lg: var(--shadow-lg);
+ --shadow-xl: var(--shadow-xl);
+ --shadow-2xl: var(--shadow-2xl);
+}
+
+/* Cursor pointer globally for buttons */
+button:not(:disabled),
+[role='button']:not(:disabled),
+a[href] {
+ cursor: pointer;
+}
+
+.bg-success {
+ background-color: var(--success);
+ color: white;
+}
+
+.bg-warning {
+ background-color: #facc15;
+}
+
+.bg-error {
+ background-color: var(--error);
+ color: white;
+}
+
+.text-success {
+ color: var(--success-text);
+}
+
+.green-text {
+ color: #339b59;
+}
+
+.text-error {
+ color: var(--error-text);
+}
+
+ul.timelinestatic > li:before {
+ content: counter(step);
+ counter-increment: step;
+ display: inline-block;
+ position: absolute;
+ border-radius: 50%;
+ left: 9px;
+ font-size: 20px;
+ padding: 0.5rem 0;
+ z-index: 1;
+ vertical-align: middle;
+ text-align: center;
+ width: 45px;
+ font-weight: bold;
+ height: 45px;
+ color: #000000;
+ background: var(--primary);
+}
+
+ul.timelinestatic {
+ list-style-type: none;
+ position: relative;
+ counter-reset: step;
+}
+
+ul.timelinestatic:before {
+ content: ' ';
+ background: var(--primary);
+ display: inline-block;
+ position: absolute;
+ left: 29px;
+ width: 6px;
+ height: 90%;
+ z-index: 1;
+}
+
+ul.timelinestatic > li:last-child {
+ height: auto;
+}
+
+ul.timelinestatic > li {
+ margin-left: 64px;
+ padding-left: 20px;
+ height: 100px;
+}
+
+.text-revocable-yes {
+ color: var(--color-revocable-yes, #1d4ed8);
+}
+
+.text-revocable-no {
+ color: var(--color-revocable-no, #06b6d4);
+}
+
+.badges-warning {
+ background-color: #ffedd5;
+}
+
+.badges-success {
+ background-color: #dcfce7;
+}
+
+.badges-error {
+ background-color: #fee2e2;
+}
+
+.badges-secondary {
+ background-color: #7dd3fc;
+}
+
+* {
+ border-color: var(--color-border);
+}
+
+.status-pending {
+ background-color: #ffedd5;
+ color: #c2410c;
+}
+
+.status-accepted {
+ background-color: #dcfce7;
+ color: #065f46;
+}
+
+.status-rejected {
+ background-color: #fee2e2;
+ color: #b91c1c;
+}
+
+.success-alert {
+ background-color: #dcfce7;
+ color: #008236;
+}
+
+.failure-alert {
+ background-color: #ffe2e2;
+ color: #e7000b;
+}
+
+.success-alert div {
+ color: #008236;
+}
+
+.failure-alert div {
+ color: #e7000b;
+}
+
+.animate-text {
+ animation: text 3s linear infinite;
+}
+
+.scrollbar-thin {
+ scrollbar-width: thin;
+ scrollbar-color: var(--color-border) transparent;
+
+ &::-webkit-scrollbar {
+ width: 8px;
+ }
+}
+
+/* Avatar background colors */
+.bg-avatar-1 {
+ background-color: #fceaea;
+}
+.bg-avatar-2 {
+ background-color: #eeecfe;
+}
+.bg-avatar-3 {
+ background-color: #f0f0f1;
+}
+.bg-avatar-4 {
+ background-color: #e5f8ed;
+}
+.bg-avatar-5 {
+ background-color: #fdf3e8;
+}
+.bg-avatar-6 {
+ background-color: #e0f9fd;
+}
+.bg-avatar-7 {
+ background-color: #f5e8ff;
+}
+.bg-avatar-8 {
+ background-color: #e6f7ff;
+}
+
+/* Avatar text colors */
+.text-avatar-1 {
+ color: #ea5455;
+} /* matching or contrasting color */
+.text-avatar-2 {
+ color: #b8b2f7;
+}
+.text-avatar-3 {
+ color: #b0b3b9;
+}
+.text-avatar-4 {
+ color: #82ddaa;
+}
+.text-avatar-5 {
+ color: #f4a651;
+}
+.text-avatar-6 {
+ color: #76ddef;
+}
+.text-avatar-7 {
+ color: #dfa3f5;
+}
+.text-avatar-8 {
+ color: #339af0;
+}
+
+.url-link {
+ color: initial;
+ cursor: pointer;
+ transition: color 0.2s ease;
+}
+
+.url-link:hover {
+ color: #0265fd !important;
+ text-decoration: underline;
+}
+
+a,
+button {
+ cursor: pointer;
+}
diff --git a/nextjs/src/app/invitations/page.tsx b/nextjs/src/app/invitations/page.tsx
new file mode 100644
index 000000000..de4ad0f9f
--- /dev/null
+++ b/nextjs/src/app/invitations/page.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReceivedInvitations from '@/features/invitations/components/receivedInvitations'
+
+const page = (): React.JSX.Element => (
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/layout.tsx b/nextjs/src/app/layout.tsx
new file mode 100644
index 000000000..df68d1c18
--- /dev/null
+++ b/nextjs/src/app/layout.tsx
@@ -0,0 +1,105 @@
+import './globals.css'
+import './theme.css'
+
+import type { Metadata, Viewport } from 'next'
+
+import { FaviconUpdater } from '@/components/FaviconUpdater'
+import { Session as NextAuthSession } from 'next-auth'
+import NextTopLoader from 'nextjs-toploader'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
+import PageLayout from '@/components/PageLayout'
+import Providers from '@/components/layout/providers'
+import React from 'react'
+import { SessionManager } from '@/features/components/SessionManager'
+import StoreProvider from './StoreProvider'
+import { Toaster } from '@/components/ui/sonner'
+import { authOptions } from '@/utils/authOptions'
+import { cn } from '@/lib/utils'
+import { cookies } from 'next/headers'
+import { fontVariables } from '@/lib/font'
+import { getServerSession } from 'next-auth/next'
+
+// Create a new type extending Session to guarantee expires is defined
+type SessionWithExpires = NextAuthSession & { expires: string }
+
+const META_THEME_COLORS = {
+ light: '#ffffff',
+ dark: '#09090b',
+}
+
+export const metadata: Metadata = {
+ title: 'CREDEBL - Studio',
+ description: 'CREDEBL - Studio with Next.js and Shadcn',
+}
+
+export const viewport: Viewport = {
+ themeColor: META_THEME_COLORS.light,
+}
+
+export default async function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}): Promise
+
+ 404
+
+
+ )
+}
diff --git a/nextjs/src/app/organizations/page.tsx b/nextjs/src/app/organizations/page.tsx
new file mode 100644
index 000000000..835685c2a
--- /dev/null
+++ b/nextjs/src/app/organizations/page.tsx
@@ -0,0 +1,10 @@
+import { OrganizationList } from '@/features/organization/components/OrganizationList'
+import React from 'react'
+
+const page = (): React.JSX.Element => (
+ + Something's missing +
++ Sorry, the page you are looking for doesn't exist or has been + moved. +
+
+
+
+
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/page.tsx b/nextjs/src/app/page.tsx
new file mode 100644
index 000000000..035029805
--- /dev/null
+++ b/nextjs/src/app/page.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import { redirect } from 'next/navigation'
+
+export default function Home(): void {
+ redirect('/sign-in')
+}
diff --git a/nextjs/src/app/profile/page.tsx b/nextjs/src/app/profile/page.tsx
new file mode 100644
index 000000000..8e41ae8e1
--- /dev/null
+++ b/nextjs/src/app/profile/page.tsx
@@ -0,0 +1,11 @@
+import PageContainer from '@/components/layout/page-container'
+import React from 'react'
+import UserProfile from '@/features/profile/components/UserProfile'
+
+const page = (): React.JSX.Element => (
+
+
+ )
+}
+
+export default PasswordSuggestionBox
diff --git a/nextjs/src/app/reset-password/ResetPassword.tsx b/nextjs/src/app/reset-password/ResetPassword.tsx
new file mode 100644
index 000000000..b2ed98163
--- /dev/null
+++ b/nextjs/src/app/reset-password/ResetPassword.tsx
@@ -0,0 +1,303 @@
+'use client'
+
+import 'react-toastify/dist/ReactToastify.css'
+
+import * as yup from 'yup'
+
+import {
+ CredeblLogoHeight,
+ CredeblLogoWidth,
+ apiStatusCodes,
+ passwordRegex,
+} from '@/config/CommonConstant'
+import { Eye, EyeOff } from 'lucide-react'
+import { Form, Formik } from 'formik'
+import { JSX, useState } from 'react'
+import { ToastContainer, toast } from 'react-toastify'
+import { passwordEncryption, resetPassword } from '../api/Auth'
+import { useAppDispatch, useAppSelector } from '@/lib/hooks'
+import { useRouter, useSearchParams } from 'next/navigation'
+
+import { AxiosResponse } from 'axios'
+import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
+import Footer from '@/components/Footer'
+import Image from 'next/image'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import PasswordSuggestionBox from './PasswordSuggestionBox'
+import { RootState } from '@/lib/store'
+import { SubmitIcon } from '@/config/svgs/ResetPassword'
+import { pathRoutes } from '@/config/pathRoutes'
+import { setToken } from '@/lib/authSlice'
+import { useTheme } from 'next-themes'
+import { useThemeConfig } from '@/components/active-theme'
+
+interface passwordValues {
+ password: string
+ confirmPassword: string
+}
+
+const ResetPassword = (): JSX.Element => {
+ const [loading, setLoading] = useState
+ {show === true ? (
+ <>
+ {restrictedChar ? (
+ <>
+
+
+
+
+
+ ) : (
+ <>
+ {matchedValue && (
+
+ Password must contains :
+
+
+ {minChar ?
+
+ {capsAlpha ?
+
+ {smallAlpha ?
+
+ {number ?
+
+ {splChar ?
+
+ {matchedValue.length > 1
+ ? 'Following characters are not allowed: '
+ : 'Following character is not allowed: '}
+
+ + {matchedValue + .filter((c, index) => matchedValue.indexOf(c) === index) + .join(' ')} + +
+ )}
+
+ )}
+
+ ) : (
+
+ )}
+ + + {matchedValue + .filter((c, index) => matchedValue.indexOf(c) === index) + .join(' ')} + +
+
+ )
+}
+
+export default ResetPassword
diff --git a/nextjs/src/app/reset-password/page.tsx b/nextjs/src/app/reset-password/page.tsx
new file mode 100644
index 000000000..af45944c6
--- /dev/null
+++ b/nextjs/src/app/reset-password/page.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import ResetPassword from './ResetPassword'
+
+const page = (): React.JSX.Element =>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ {
+ submit(values)
+ }}
+ >
+ {(formikHandlers): JSX.Element => (
+
+ )}
+
+
+
+
+
+
+ Reset Password
+
+
+ Please set new password
+
+
+//
+// );
+// }
+type Params = Promise<{ schemaId: string }>
+
+export default async function SchemaPage({
+ params,
+}: {
+ params: Params
+}): Promise
+
+ )
+}
diff --git a/nextjs/src/app/schemas/create/page.tsx b/nextjs/src/app/schemas/create/page.tsx
new file mode 100644
index 000000000..3ac56169f
--- /dev/null
+++ b/nextjs/src/app/schemas/create/page.tsx
@@ -0,0 +1,13 @@
+import CreateSchema from '@/features/schemas/components/Create'
+import PageContainer from '@/components/layout/page-container'
+import React from 'react'
+
+const page = (): React.JSX.Element => (
+
+
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/schemas/page.tsx b/nextjs/src/app/schemas/page.tsx
new file mode 100644
index 000000000..43728a9de
--- /dev/null
+++ b/nextjs/src/app/schemas/page.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import SchemaSelection from '@/features/schemas/components/SchemaSelection'
+
+const page = (): React.JSX.Element => (
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/sign-in/page.tsx b/nextjs/src/app/sign-in/page.tsx
new file mode 100644
index 000000000..702db56cb
--- /dev/null
+++ b/nextjs/src/app/sign-in/page.tsx
@@ -0,0 +1,12 @@
+import { Metadata } from 'next'
+import React from 'react'
+import SignInPage from '@/features/components/sigin-view'
+
+export const metadata: Metadata = {
+ title: 'Authentication | Sign In',
+ description: 'Sign In page for authentication.',
+}
+
+export default function Page(): React.JSX.Element {
+ return
+
+)
+
+export default page
diff --git a/nextjs/src/app/verification/verify-credentials/email/schemas/attributes/page.tsx b/nextjs/src/app/verification/verify-credentials/email/schemas/attributes/page.tsx
new file mode 100644
index 000000000..27d280941
--- /dev/null
+++ b/nextjs/src/app/verification/verify-credentials/email/schemas/attributes/page.tsx
@@ -0,0 +1,10 @@
+import EmailAttributesSelection from '@/features/verification/components/EmailAttributesSelection'
+import React from 'react'
+
+const page = (): React.JSX.Element => (
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/verification/verify-credentials/email/schemas/attributes/verification-email/page.tsx b/nextjs/src/app/verification/verify-credentials/email/schemas/attributes/verification-email/page.tsx
new file mode 100644
index 000000000..9efa691c7
--- /dev/null
+++ b/nextjs/src/app/verification/verify-credentials/email/schemas/attributes/verification-email/page.tsx
@@ -0,0 +1,10 @@
+import EmailVerification from '@/features/verification/components/EmailVerification'
+import React from 'react'
+
+const page = (): React.JSX.Element => (
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/verification/verify-credentials/email/schemas/cred-defs/attributes/page.tsx b/nextjs/src/app/verification/verify-credentials/email/schemas/cred-defs/attributes/page.tsx
new file mode 100644
index 000000000..27d280941
--- /dev/null
+++ b/nextjs/src/app/verification/verify-credentials/email/schemas/cred-defs/attributes/page.tsx
@@ -0,0 +1,10 @@
+import EmailAttributesSelection from '@/features/verification/components/EmailAttributesSelection'
+import React from 'react'
+
+const page = (): React.JSX.Element => (
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/verification/verify-credentials/email/schemas/cred-defs/attributes/verification-email/page.tsx b/nextjs/src/app/verification/verify-credentials/email/schemas/cred-defs/attributes/verification-email/page.tsx
new file mode 100644
index 000000000..9efa691c7
--- /dev/null
+++ b/nextjs/src/app/verification/verify-credentials/email/schemas/cred-defs/attributes/verification-email/page.tsx
@@ -0,0 +1,10 @@
+import EmailVerification from '@/features/verification/components/EmailVerification'
+import React from 'react'
+
+const page = (): React.JSX.Element => (
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/verification/verify-credentials/email/schemas/cred-defs/page.tsx b/nextjs/src/app/verification/verify-credentials/email/schemas/cred-defs/page.tsx
new file mode 100644
index 000000000..330fc87c5
--- /dev/null
+++ b/nextjs/src/app/verification/verify-credentials/email/schemas/cred-defs/page.tsx
@@ -0,0 +1,10 @@
+import EmailCredDefSelection from '@/features/verification/components/EmailCredDefSelection'
+import React from 'react'
+
+const page = (): React.JSX.Element => (
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/verification/verify-credentials/email/schemas/page.tsx b/nextjs/src/app/verification/verify-credentials/email/schemas/page.tsx
new file mode 100644
index 000000000..789db0cb5
--- /dev/null
+++ b/nextjs/src/app/verification/verify-credentials/email/schemas/page.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import VerificationSchemasList from '@/features/verification/components/VerificationSchemasList'
+
+const page = (): React.JSX.Element => (
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/verification/verify-credentials/page.tsx b/nextjs/src/app/verification/verify-credentials/page.tsx
new file mode 100644
index 000000000..274bd8ccb
--- /dev/null
+++ b/nextjs/src/app/verification/verify-credentials/page.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import SelectionDashboardData from '@/components/SelectionDashboardData'
+
+const page = (): React.JSX.Element => (
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/verification/verify-credentials/schema/attributes/page.tsx b/nextjs/src/app/verification/verify-credentials/schema/attributes/page.tsx
new file mode 100644
index 000000000..27d280941
--- /dev/null
+++ b/nextjs/src/app/verification/verify-credentials/schema/attributes/page.tsx
@@ -0,0 +1,10 @@
+import EmailAttributesSelection from '@/features/verification/components/EmailAttributesSelection'
+import React from 'react'
+
+const page = (): React.JSX.Element => (
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/verification/verify-credentials/schema/attributes/verification-email/page.tsx b/nextjs/src/app/verification/verify-credentials/schema/attributes/verification-email/page.tsx
new file mode 100644
index 000000000..d80f69400
--- /dev/null
+++ b/nextjs/src/app/verification/verify-credentials/schema/attributes/verification-email/page.tsx
@@ -0,0 +1,9 @@
+import EmailVerification from '@/features/verification/components/EmailVerification'
+import React from 'react'
+
+const page = (): React.JSX.Element => (
+
+
+)
+export default page
diff --git a/nextjs/src/app/verification/verify-credentials/schema/cred-defs/attributes/page.tsx b/nextjs/src/app/verification/verify-credentials/schema/cred-defs/attributes/page.tsx
new file mode 100644
index 000000000..27d280941
--- /dev/null
+++ b/nextjs/src/app/verification/verify-credentials/schema/cred-defs/attributes/page.tsx
@@ -0,0 +1,10 @@
+import EmailAttributesSelection from '@/features/verification/components/EmailAttributesSelection'
+import React from 'react'
+
+const page = (): React.JSX.Element => (
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/verification/verify-credentials/schema/cred-defs/attributes/verification-email/page.tsx b/nextjs/src/app/verification/verify-credentials/schema/cred-defs/attributes/verification-email/page.tsx
new file mode 100644
index 000000000..9efa691c7
--- /dev/null
+++ b/nextjs/src/app/verification/verify-credentials/schema/cred-defs/attributes/verification-email/page.tsx
@@ -0,0 +1,10 @@
+import EmailVerification from '@/features/verification/components/EmailVerification'
+import React from 'react'
+
+const page = (): React.JSX.Element => (
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/verification/verify-credentials/schema/cred-defs/page.tsx b/nextjs/src/app/verification/verify-credentials/schema/cred-defs/page.tsx
new file mode 100644
index 000000000..330fc87c5
--- /dev/null
+++ b/nextjs/src/app/verification/verify-credentials/schema/cred-defs/page.tsx
@@ -0,0 +1,10 @@
+import EmailCredDefSelection from '@/features/verification/components/EmailCredDefSelection'
+import React from 'react'
+
+const page = (): React.JSX.Element => (
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/verification/verify-credentials/schema/page.tsx b/nextjs/src/app/verification/verify-credentials/schema/page.tsx
new file mode 100644
index 000000000..789db0cb5
--- /dev/null
+++ b/nextjs/src/app/verification/verify-credentials/schema/page.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import VerificationSchemasList from '@/features/verification/components/VerificationSchemasList'
+
+const page = (): React.JSX.Element => (
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/verification/verify-credentials/schemas/connections/page.tsx b/nextjs/src/app/verification/verify-credentials/schemas/connections/page.tsx
new file mode 100644
index 000000000..ffbb5118b
--- /dev/null
+++ b/nextjs/src/app/verification/verify-credentials/schemas/connections/page.tsx
@@ -0,0 +1,10 @@
+import Connections from '@/features/verification/components/Connections'
+import React from 'react'
+
+const page = (): React.JSX.Element => (
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/verification/verify-credentials/schemas/cred-defs/connections/page.tsx b/nextjs/src/app/verification/verify-credentials/schemas/cred-defs/connections/page.tsx
new file mode 100644
index 000000000..ffbb5118b
--- /dev/null
+++ b/nextjs/src/app/verification/verify-credentials/schemas/cred-defs/connections/page.tsx
@@ -0,0 +1,10 @@
+import Connections from '@/features/verification/components/Connections'
+import React from 'react'
+
+const page = (): React.JSX.Element => (
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/verification/verify-credentials/schemas/cred-defs/page.tsx b/nextjs/src/app/verification/verify-credentials/schemas/cred-defs/page.tsx
new file mode 100644
index 000000000..355257cf6
--- /dev/null
+++ b/nextjs/src/app/verification/verify-credentials/schemas/cred-defs/page.tsx
@@ -0,0 +1,9 @@
+import CredDefSelection from '@/features/verification/components/CredDefSelection'
+import React from 'react'
+
+const page = (): React.JSX.Element => (
+
+
+)
+export default page
diff --git a/nextjs/src/app/verification/verify-credentials/schemas/page.tsx b/nextjs/src/app/verification/verify-credentials/schemas/page.tsx
new file mode 100644
index 000000000..789db0cb5
--- /dev/null
+++ b/nextjs/src/app/verification/verify-credentials/schemas/page.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import VerificationSchemasList from '@/features/verification/components/VerificationSchemasList'
+
+const page = (): React.JSX.Element => (
+
+
+)
+
+export default page
diff --git a/nextjs/src/app/verify-email-success/page.tsx b/nextjs/src/app/verify-email-success/page.tsx
new file mode 100644
index 000000000..7911fb324
--- /dev/null
+++ b/nextjs/src/app/verify-email-success/page.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import VerifyEmailPage from '@/features/components/VerifyEmail'
+
+const page = (): React.JSX.Element => (
+
+
+)
+
+export default page
diff --git a/nextjs/src/common/enums.ts b/nextjs/src/common/enums.ts
new file mode 100644
index 000000000..76f71c34c
--- /dev/null
+++ b/nextjs/src/common/enums.ts
@@ -0,0 +1,106 @@
+// we are using enums from this file still EsLint is giving issues. For now disabling eslint rule for this file.
+
+export enum DidMethod {
+ INDY = 'did:indy',
+ KEY = 'did:key',
+ WEB = 'did:web',
+ POLYGON = 'did:polygon',
+}
+
+export enum Network {
+ TESTNET = 'testnet',
+ MAINNET = 'mainnet',
+}
+export enum PolygonNetworks {
+ TESTNET = 'Polygon Testnet',
+ MAINNET = 'Polygon Mainnet',
+}
+
+export enum CommonConstants {
+ BALANCELIMIT = 0.01,
+}
+
+export enum Ledgers {
+ INDY = 'indy',
+ POLYGON = 'polygon',
+ NO_LEDGER = 'noLedger',
+}
+
+export enum DataType {
+ NUMBER = 'number',
+ INTEGER = 'integer',
+ STRING = 'string',
+ DATE_TIME = 'datetime-local',
+ ARRAY = 'array',
+}
+
+export enum Features {
+ SEND_INVITATION = 'send_invitations',
+ CREATE_ORG = 'create_org',
+ CRETAE_SCHEMA = 'create_schema',
+ ISSUANCE = 'issuance',
+ VERIFICATION = 'verification',
+}
+
+export enum SchemaTypes {
+ schema_INDY = 'indy',
+ schema_W3C = 'w3c',
+}
+
+export enum SchemaType {
+ INDY = 'indy',
+ W3C = 'json',
+}
+
+export enum SchemaTypeValue {
+ INDY = 'indy',
+ POLYGON = 'polygon',
+ NO_LEDGER = 'no_ledger',
+}
+
+export enum Roles {
+ OWNER = 'owner',
+ ADMIN = 'admin',
+ ISSUER = 'issuer',
+ VERIFIER = 'verifier',
+ MEMBER = 'member',
+}
+
+export enum OrganizationRoles {
+ organizationMember = 'member',
+ organizationOwner = 'owner',
+ organizationIssuer = 'issuer',
+ organizationVerifier = 'verifier',
+ organizationAdmin = 'admin',
+}
+
+export enum IssueCredential {
+ proposalSent = 'proposal-sent',
+ proposalReceived = 'proposal-received',
+ offerSent = 'offer-sent',
+ offerReceived = 'offer-received',
+ declined = 'decliend',
+ requestSent = 'request-sent',
+ requestReceived = 'request-received',
+ credentialIssued = 'credential-issued',
+ credentialReceived = 'credential-received',
+ done = 'done',
+ abandoned = 'abandoned',
+}
+export enum IssueCredentialUserText {
+ offerSent = 'Offered',
+ done = 'Accepted',
+ abandoned = 'Declined',
+ received = 'Pending',
+ proposalReceived = 'Proposal Received',
+ credIssued = 'Credential Issued',
+}
+
+export enum CredentialType {
+ INDY = 'indy',
+ JSONLD = 'jsonld',
+}
+export enum ProofType {
+ polygon = 'EcdsaSecp256k1Signature2019',
+ no_ledger = 'Ed25519Signature2018',
+}
diff --git a/nextjs/src/common/interface.ts b/nextjs/src/common/interface.ts
new file mode 100644
index 000000000..f7fc953ab
--- /dev/null
+++ b/nextjs/src/common/interface.ts
@@ -0,0 +1,28 @@
+export interface IAttribute {
+ attributeName: string
+ schemaDataType: string
+ displayName: string
+ isRequired: boolean
+}
+
+export interface ISchemaData {
+ schemaId: string
+ schemaName: string
+ attributes: IAttribute[]
+}
+
+export interface ICustomCheckboxProps {
+ isSelectedSchema: boolean
+ showCheckbox: boolean
+ isVerificationUsingEmail?: boolean
+ onChange: (checked: boolean, schemaData?: ISchemaData) => void
+ schemaData?: ISchemaData
+}
+
+export interface IAlertComponent {
+ message: string | null
+ type: string
+ viewButton?: boolean
+ path?: string
+ onAlertClose: () => void
+}
diff --git a/nextjs/src/components/AlertComponent.tsx b/nextjs/src/components/AlertComponent.tsx
new file mode 100644
index 000000000..9452128cd
--- /dev/null
+++ b/nextjs/src/components/AlertComponent.tsx
@@ -0,0 +1,74 @@
+import { IAlertComponent } from '@/common/interface'
+import React from 'react'
+
+export const AlertComponent = ({
+ message,
+ type,
+ viewButton,
+ onAlertClose,
+ path = '',
+}: IAlertComponent): React.JSX.Element | boolean => {
+ const getAlertClass = (): string => {
+ switch (type) {
+ case 'warning':
+ return 'text-foreground badges-warning'
+ case 'failure':
+ return 'text-foreground badges-error'
+ case 'success':
+ return 'text-foreground badges-success'
+ default:
+ return 'text-foreground bg-muted'
+ }
+ }
+
+ return (
+ message !== null && (
+
+
+ )
+ )
+}
diff --git a/nextjs/src/components/BackButton.tsx b/nextjs/src/components/BackButton.tsx
new file mode 100644
index 000000000..0cf3c74ec
--- /dev/null
+++ b/nextjs/src/components/BackButton.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import { JSX, useState } from 'react'
+import { ArrowLeft } from 'lucide-react'
+import { Button } from './ui/button'
+import Loader from './Loader'
+import { useRouter } from 'next/navigation'
+
+interface BackButtonProps {
+ path?: string
+}
+
+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 (
+
+ )
+}
+
+export default BackButton
diff --git a/nextjs/src/components/CredentialDefinitionCard.tsx b/nextjs/src/components/CredentialDefinitionCard.tsx
new file mode 100644
index 000000000..29b31e189
--- /dev/null
+++ b/nextjs/src/components/CredentialDefinitionCard.tsx
@@ -0,0 +1,125 @@
+import { Button } from '../components/ui/button'
+import { Card } from '../components/ui/card'
+import CopyDid from '@/config/CopyDid'
+import React from 'react'
+import { Roles } from '@/common/enums'
+import { pathRoutes } from '@/config/pathRoutes'
+import { setSchemaDetails } from '@/lib/schemaStorageSlice'
+import { useAppDispatch } from '@/lib/hooks'
+import { useRouter } from 'next/navigation'
+
+interface IProps {
+ credDeffName: string
+ userRoles?: string[]
+ credentialDefinitionId: string
+ schemaId: string
+ revocable: boolean
+ schemaName?: string
+ schemaVersion?: string
+ attributes?: string[]
+ onClickCallback: (schemaId: string, credentialDefinitionId: string) => void
+}
+
+const CredentialDefinitionCard = (props: IProps): React.ReactElement => {
+ const router = useRouter()
+ const dispatch = useAppDispatch()
+
+ const redirectToIssuance = async (): Promise
+
+
+
+
+
+
+
+
+ {message}
+ {viewButton && (
+
+ View more...
+
+ )}
+
+
+
+
+ + {props.credDeffName} +
+
+
+
+
+
+
+ ID:
+
+
+
+
+ Schema ID:
+
+
+
+
+
+ Revocable:{' '}
+
+ {props?.revocable ? 'Yes' : 'No'}
+
+
+
+ {loading ? (
+
+)
+
+export default DataTable
diff --git a/nextjs/src/components/DataTable/interface.ts b/nextjs/src/components/DataTable/interface.ts
new file mode 100644
index 000000000..cfefdbd55
--- /dev/null
+++ b/nextjs/src/components/DataTable/interface.ts
@@ -0,0 +1,49 @@
+import type { ChangeEvent, JSX } from 'react'
+
+export interface TableHeader {
+ columnName: string
+ subColumnName?: string
+ width?: string
+}
+
+export interface Data {
+ handleChange?(value: string): void
+ inputType?: string
+ data: string | JSX.Element
+ subData?: string
+}
+export interface IDataTableData {
+ header: TableHeader[]
+ searchValue?: string
+ data: ITableData[]
+ loading: boolean
+ onInputChange: (e: ChangeEvent) => void
+ isSearch: boolean
+ isRefresh: boolean
+ isSort: boolean
+ isHeader: boolean
+ message: string
+ refresh: () => void
+ currentPage: number
+ onPageChange: (page: number) => void
+ totalPages: number
+ searchSortByValue?: (value: string) => void
+ callback?: (clickId: string | null | undefined) => void
+ displaySelect?: boolean
+ showBtn?: boolean
+ isPagination?: boolean
+ discription: string
+ noExtraHeight?: boolean
+ pageInfo?: {
+ totalItem: number | undefined
+ nextPage: number | undefined
+ lastPage: number | undefined
+ }
+
+ sortOrder?: string
+ itemPerPage?: number
+}
+export interface ITableData {
+ clickId?: string | null
+ data: Data[]
+}
diff --git a/nextjs/src/components/DateTooltip.tsx b/nextjs/src/components/DateTooltip.tsx
new file mode 100644
index 000000000..8ff6e0e54
--- /dev/null
+++ b/nextjs/src/components/DateTooltip.tsx
@@ -0,0 +1,36 @@
+'use client'
+
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from '@/components/ui/tooltip'
+import React from 'react'
+import { format } from 'date-fns'
+
+interface DateProps {
+ date: string
+ id?: string
+ children: React.ReactNode
+}
+
+const DateTooltip = ({ date, children }: DateProps): React.ReactElement => {
+ if (!date) {
+ return <>{children}
+ }
+
+ const updatedDate = new Date(date)
+ const formattedDate = format(updatedDate, 'MMM dd, yyyy, h:mm a')
+
+ return (
+
+
+ ) : (
+
+
+ )}
+
+
+
+
+
+
+
+ |
+ {ele.columnName}
+ {ele.subColumnName && (
+
+ {ele.subColumnName}
+
+ )}
+ |
+ ))}
+ {(displaySelect || showBtn) && (
+ + Action + | + )} +
|---|---|
|
+ {cell.data}
+ {cell.subData && (
+
+ {cell.subData}
+
+ )}
+ |
+ ),
+ )}
+ {(displaySelect || showBtn) && (
+ + {showBtn && ( + + )} + | + )} +
| + Empty data + | +
+
+)
diff --git a/nextjs/src/components/EmptyMessage.tsx b/nextjs/src/components/EmptyMessage.tsx
new file mode 100644
index 000000000..ddb49d247
--- /dev/null
+++ b/nextjs/src/components/EmptyMessage.tsx
@@ -0,0 +1,48 @@
+import { Button } from './ui/button'
+import React from 'react'
+
+interface EmptyStateProps {
+ title: string
+ description?: string
+ height?: string
+ buttonContent?: string
+ svgComponent?: React.ReactNode
+ onClick?: () => void
+ buttonIcon?: React.ReactNode
+ disabled?: boolean
+}
+
+export const EmptyMessage = ({
+ title,
+ description,
+ height = '300px',
+ buttonContent,
+ svgComponent,
+ onClick,
+ buttonIcon,
+ disabled = false,
+}: EmptyStateProps): React.JSX.Element => (
+ {message}
+{description}
+ {buttonContent && ( +
+ {svgComponent &&
+)
diff --git a/nextjs/src/components/FaviconUpdater.tsx b/nextjs/src/components/FaviconUpdater.tsx
new file mode 100644
index 000000000..84349cd20
--- /dev/null
+++ b/nextjs/src/components/FaviconUpdater.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+import { JSX, useEffect } from 'react'
+
+export function FaviconUpdater(): JSX.Element | null {
+ useEffect(() => {
+ const getCookieValue = (name: string): string | undefined => {
+ const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`))
+ return match?.[2]
+ }
+
+ const updateFaviconAndTitle = (): void => {
+ const theme = getCookieValue('active_theme') || 'credebl'
+
+ document
+ .querySelectorAll("link[rel~='icon']")
+ .forEach((el) => el.remove())
+
+ const link = document.createElement('link')
+ link.rel = 'icon'
+ link.type = 'image/x-icon'
+ link.href =
+ theme === 'sovio' ? '/favicon-sovio.ico' : '/favicon-credebl.ico'
+ document.head.appendChild(link)
+
+ document.title =
+ theme === 'sovio'
+ ? 'SOVIO - Self-Sovereign Identity platform-V2.0.0'
+ : 'CREDEBL - Studio'
+ }
+
+ updateFaviconAndTitle()
+
+ const handleThemeChange = (): void => {
+ updateFaviconAndTitle()
+ }
+
+ window.addEventListener('themeChanged', handleThemeChange)
+
+ return () => {
+ window.removeEventListener('themeChanged', handleThemeChange)
+ }
+ }, [])
+
+ return null
+}
diff --git a/nextjs/src/components/Footer.tsx b/nextjs/src/components/Footer.tsx
new file mode 100644
index 000000000..d2fe08ef7
--- /dev/null
+++ b/nextjs/src/components/Footer.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+interface IFooter {
+ fixed?: boolean
+}
+
+const Footer: React.FC{svgComponent}
}
+
+ {title}
+ + {description && ( +{description}
+ )} + + {buttonContent && onClick && ( + + )} +
+
+
+)
+
+export default Loader
diff --git a/nextjs/src/components/Modal.tsx b/nextjs/src/components/Modal.tsx
new file mode 100644
index 000000000..cc6adec87
--- /dev/null
+++ b/nextjs/src/components/Modal.tsx
@@ -0,0 +1,131 @@
+'use client'
+
+import * as React from 'react'
+import { type VariantProps, cva } from 'class-variance-authority'
+import { Button } from './ui/button'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+const modalVariants = cva(
+ 'relative mx-auto my-auto flex flex-col rounded-lg border bg-background shadow-lg transition-all',
+ {
+ variants: {
+ size: {
+ default: 'max-w-md w-full max-h-[85vh]',
+ sm: 'max-w-sm w-full max-h-[85vh]',
+ lg: 'max-w-lg w-full max-h-[85vh]',
+ xl: 'max-w-xl w-full max-h-[85vh]',
+ full: 'max-w-[95vw] w-full max-h-[90vh]',
+ auto: 'max-w-[95vw] max-h-[90vh]',
+ },
+ },
+ defaultVariants: {
+ size: 'auto',
+ },
+ },
+)
+
+export interface ModalProps
+ extends React.HTMLAttributes
+
+ )
+}
diff --git a/nextjs/src/components/PageLayout.tsx b/nextjs/src/components/PageLayout.tsx
new file mode 100644
index 000000000..ea1fa5a3b
--- /dev/null
+++ b/nextjs/src/components/PageLayout.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import React, { ReactNode } from 'react'
+import { SidebarInset, SidebarProvider } from './ui/sidebar'
+
+import AppSidebar from './layout/app-sidebar'
+import Header from './layout/header'
+import KBar from './kbar'
+import { usePathname } from 'next/navigation'
+
+interface PageLayoutProps {
+ children: ReactNode
+}
+
+const PageLayout: React.FC
+
+
+ {children}
+
+
+
+)
+
+export default SearchInput
diff --git a/nextjs/src/components/SearchableSelect.tsx b/nextjs/src/components/SearchableSelect.tsx
new file mode 100644
index 000000000..b9e647f4c
--- /dev/null
+++ b/nextjs/src/components/SearchableSelect.tsx
@@ -0,0 +1,144 @@
+'use client'
+
+import * as React from 'react'
+
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from '@/components/ui/command'
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@/components/ui/popover'
+
+import { Button } from '@/components/ui/button'
+import { ChevronDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+export type Option = {
+ clear?: boolean
+ value: string
+ label: string
+ id: string
+ schemaName: string
+ schemaIdentifier?: string
+ schemaVersion: string
+ schemaId: string
+ credentialId: string
+}
+
+interface SearchableSelectProps {
+ options: Option[]
+ value?: string
+ clear?: boolean
+ onValueChange?: (value: Option) => void
+ placeholder?: string
+ emptyMessage?: string
+ className?: string
+ disabled?: boolean
+ onSearchChange?: (searchValue: string) => void
+ enableInternalSearch?: boolean
+}
+
+export function SearchableSelect({
+ options,
+ value,
+ onValueChange,
+ placeholder = 'Select an option',
+ emptyMessage = 'No results found.',
+ disabled = false,
+ clear = undefined,
+ onSearchChange,
+ enableInternalSearch = true,
+}: SearchableSelectProps): React.JSX.Element {
+ const [open, setOpen] = React.useState(false)
+ const [selected, setSelected] = React.useState
+
+
+
+
+
+