ok

src/pages/CreateClerk.js

@@ -2,7 +2,6 @@ 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);
@@ -14,17 +13,17 @@ const CreateClerk = ({ shopId }) => {
     setMessage('');
 
     // Basic validation
-    if (!email || !username || !password) {
-      setMessage('All fields are required');
+    if (!username || !password) {
+      setMessage('Username and password are required');
       setLoading(false);
       return;
     }
 
     try {
-      const create = await createClerks(shopId, email, username, password);
+      const create = await createClerks(shopId, username, password);
 
-      if(create) setMessage('Clerk created successfully');
-      else setMessage('failed')
+      if (create) setMessage('Clerk created successfully');
+      else setMessage('Failed to create clerk');
     } catch (error) {
       setMessage('Error creating clerk');
     } finally {
@@ -36,13 +35,6 @@ const CreateClerk = ({ shopId }) => {
     <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"
@@ -60,24 +52,33 @@ const CreateClerk = ({ shopId }) => {
         <button type="submit" style={styles.button} disabled={loading}>
           {loading ? 'Creating...' : 'Create Clerk'}
         </button>
-        {message && <p style={styles.message}>{message}</p>}
+        {message && (
+          <p style={{ ...styles.message, color: message.includes('success') ? 'green' : 'red' }}>
+            {message}
+          </p>
+        )}
       </form>
     </div>
   );
 };
 
-// Basic styling to make it mobile-friendly
+// Basic styling to make it mobile-friendly with a white background
 const styles = {
   container: {
+    backgroundColor: '#fff',
     width: '100%',
-    maxWidth: '400px',
+    maxWidth: '350px',
     margin: '0 auto',
     padding: '20px',
+    boxShadow: '0 4px 10px rgba(0, 0, 0, 0.1)',
+    borderRadius: '8px',
     boxSizing: 'border-box',
   },
   header: {
     textAlign: 'center',
     marginBottom: '20px',
+    fontSize: '20px',
+    color: '#333',
   },
   form: {
     display: 'flex',
@@ -85,25 +86,26 @@ const styles = {
     gap: '15px',
   },
   input: {
-    padding: '10px',
+    padding: '12px',
     fontSize: '16px',
-    borderRadius: '5px',
+    borderRadius: '8px',
     border: '1px solid #ccc',
     width: '100%',
     boxSizing: 'border-box',
+    backgroundColor: '#f9f9f9',
   },
   button: {
-    padding: '10px',
+    padding: '12px',
     fontSize: '16px',
-    borderRadius: '5px',
+    borderRadius: '8px',
     border: 'none',
     backgroundColor: '#28a745',
     color: 'white',
     cursor: 'pointer',
+    width: '100%',
   },
   message: {
     textAlign: 'center',
-    color: 'red',
     marginTop: '10px',
   },
 };