ok

src/pages/CreateClerk.js

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import { createClerks } from '../helpers/userHelpers'; // Adjust the import path as needed
+
+const CreateClerk = ({ shopId }) => {
+  const [email, setEmail] = useState('');
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setLoading(true);
+    setMessage('');
+
+    // Basic validation
+    if (!email || !username || !password) {
+      setMessage('All fields are required');
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const create = await createClerks(shopId, email, username, password);
+
+      if(create) setMessage('Clerk created successfully');
+      else setMessage('failed')
+    } catch (error) {
+      setMessage('Error creating clerk');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={styles.container}>
+      <h2 style={styles.header}>Create Clerk</h2>
+      <form onSubmit={handleSubmit} style={styles.form}>
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          style={styles.input}
+        />
+        <input
+          type="text"
+          placeholder="Username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          style={styles.input}
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          style={styles.input}
+        />
+        <button type="submit" style={styles.button} disabled={loading}>
+          {loading ? 'Creating...' : 'Create Clerk'}
+        </button>
+        {message && <p style={styles.message}>{message}</p>}
+      </form>
+    </div>
+  );
+};
+
+// Basic styling to make it mobile-friendly
+const styles = {
+  container: {
+    width: '100%',
+    maxWidth: '400px',
+    margin: '0 auto',
+    padding: '20px',
+    boxSizing: 'border-box',
+  },
+  header: {
+    textAlign: 'center',
+    marginBottom: '20px',
+  },
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '15px',
+  },
+  input: {
+    padding: '10px',
+    fontSize: '16px',
+    borderRadius: '5px',
+    border: '1px solid #ccc',
+    width: '100%',
+    boxSizing: 'border-box',
+  },
+  button: {
+    padding: '10px',
+    fontSize: '16px',
+    borderRadius: '5px',
+    border: 'none',
+    backgroundColor: '#28a745',
+    color: 'white',
+    cursor: 'pointer',
+  },
+  message: {
+    textAlign: 'center',
+    color: 'red',
+    marginTop: '10px',
+  },
+};
+
+export default CreateClerk;