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

src/pages/access/member-credentials/MemberCredential.tsx

@@ -1,11 +0,0 @@
-const MemberCredential = () => {
-  return (
-    <div>
-      <div className="container mx-auto p-5">
-        <h1 className="text-xl font-medium leading-none text-gray-900">Member Credential</h1>
-      </div>
-    </div>
-  );
-};
-
-export default MemberCredential;

src/pages/access/member-credentials/MemberCredentials.tsx

@@ -0,0 +1,21 @@
+import MemberCredentialsForm from './blocks/MemberCredentialsForm';
+import { useMemberCredentials } from './hooks';
+
+const MemberCredentials = () => {
+  const { error, memberCredentials, handleChange, handleSubmit } = useMemberCredentials();
+  return (
+    <div>
+      <div className="container mx-auto p-5">
+        <h1 className="text-xl font-medium leading-none text-gray-900">Member Credential</h1>
+        <MemberCredentialsForm
+          form={memberCredentials}
+          error={error}
+          onChange={handleChange}
+          onSubmit={handleSubmit}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MemberCredentials;

src/pages/access/member-credentials/blocks/MemberCredentialsForm.tsx

@@ -0,0 +1,97 @@
+import { Alert } from '@/components';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+
+interface MemberCredentials {
+  accessType: string | null;
+  username: string;
+  credential: string;
+  confirmCredential: string;
+}
+
+interface Props {
+  form: MemberCredentials;
+  error: string | null;
+  onChange: (key: keyof MemberCredentials, value: string) => void;
+  onSubmit: () => void;
+}
+
+const MemberCredentialsForm = ({ form, error, onChange, onSubmit }: Props) => {
+  return (
+    <div className="max-w-md mx-auto bg-white p-6 rounded-lg shadow-md">
+      <h2 className="text-xl font-bold mb-4">Create Member Credentials</h2>
+
+      {error && (
+        <Alert variant="danger" className="mb-5">
+          {error}
+        </Alert>
+      )}
+
+      <div className="space-y-4">
+        {/* Access Type */}
+        <div>
+          <label>
+            <span className="text-red-500">*</span>Access Type
+          </label>
+          <Select onValueChange={(value) => onChange('accessType', value)}>
+            <SelectTrigger>
+              <SelectValue placeholder="Select Access Type" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="Pin Credentials">Pin Credentials</SelectItem>
+              <SelectItem value="Secret Auth">Secret Auth</SelectItem>
+              <SelectItem value="APIkey">APIkey</SelectItem>
+              <SelectItem value="Web Credentials">Web Credentials</SelectItem>
+              <SelectItem value="OTM Tpay">OTM Tpay</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Username */}
+        <div>
+          <label>
+            <span className="text-red-500">*</span>Username
+          </label>
+          <Input value={form.username} onChange={(e) => onChange('username', e.target.value)} />
+        </div>
+
+        {/* Credentials */}
+        <div>
+          <label>
+            <span className="text-red-500">*</span>Credentials
+          </label>
+          <Input
+            type="password"
+            value={form.credential}
+            onChange={(e) => onChange('credential', e.target.value)}
+          />
+        </div>
+
+        {/* Confirm Credentials */}
+        <div>
+          <label>
+            <span className="text-red-500">*</span>Confirm Credentials
+          </label>
+          <Input
+            type="password"
+            value={form.confirmCredential}
+            onChange={(e) => onChange('confirmCredential', e.target.value)}
+          />
+        </div>
+
+        <Button className="w-full" onClick={onSubmit}>
+          Create Account
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default MemberCredentialsForm;

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 };
+};