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

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;