add the Create Member Credentials page and handle the create credentials type form

src/pages/access/member-credentials/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useMemberCredentials';

src/pages/access/member-credentials/hooks/useMemberCredentials.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+
+type AccessType = 'Pin Credentials' | 'Secret Auth' | 'APIKey' | 'Web Credentials' | 'OTM Tpay';
+
+interface MemberCredentials {
+  accessType: AccessType | null;
+  username: string;
+  credential: string;
+  confirmCredential: string;
+}
+
+export const useMemberCredentials = () => {
+  const [memberCredentials, setMemberCredentials] = useState<MemberCredentials>({
+    accessType: null,
+    username: '',
+    credential: '',
+    confirmCredential: ''
+  });
+  const [error, setError] = useState<string | null>(null);
+
+  const handleChange = (key: keyof MemberCredentials, value: string) => {
+    setMemberCredentials((prevCredentials) => ({ ...prevCredentials, [key]: value }));
+  };
+
+  const handleSubmit = () => {
+    setError(null);
+
+    if (memberCredentials.username === '' || memberCredentials.credential === '') {
+      setError('Please fill in all fields');
+      return;
+    }
+
+    if (memberCredentials.credential !== memberCredentials.confirmCredential) {
+      setError('Credentials do not match');
+      return;
+    }
+
+    console.log('Data Submitted: ', memberCredentials);
+  };
+
+  return { memberCredentials, handleChange, handleSubmit, error };
+};