- {u.status==='active' ? (
-
- ) : u.status==='suspended' ? (
-
+
+
+
+ {u.status === 'active' ? (
+
+ ) : u.status === 'suspended' ? (
+
) : null}
-
+
)}
@@ -163,49 +90,208 @@ function UserRow({ u, onUpdated }) {
);
}
-function CreateUserForm({ userPass, onCreated, isMobile, onIF, onIB }) {
+// ── User Form (create / edit) ─────────────────────────────────────────────────
+function UserForm({ user, userPass, onDone, onCancel, isMobile, onIF, onIB }) {
const toast = useToast();
- const [form, setForm] = useState({ name:'', email:'', password:'', role:'member' });
- const [saving, setSaving] = useState(false);
- const set = k => v => setForm(f => ({ ...f, [k]: v }));
- const handle = async () => {
- if (!form.name.trim() || !form.email.trim()) return toast('Name and email are required', 'error');
- if (!isValidEmail(form.email)) return toast('Invalid email address', 'error');
- if (!/\S+\s+\S+/.test(form.name.trim())) return toast('Name must be two words (First Last)', 'error');
- setSaving(true);
- try { await api.createUser(form); toast('User created', 'success'); setForm({ name:'', email:'', password:'', role:'member' }); onCreated(); }
- catch(e) { toast(e.message, 'error'); }
- finally { setSaving(false); }
+ const isEdit = !!user;
+
+ const [firstName, setFirstName] = useState(user?.first_name || '');
+ const [lastName, setLastName] = useState(user?.last_name || '');
+ const [email, setEmail] = useState(user?.email || '');
+ const [phone, setPhone] = useState(user?.phone || '');
+ const [role, setRole] = useState(user?.role || 'member');
+ const [isMinor, setIsMinor] = useState(!!user?.is_minor);
+ const [password, setPassword] = useState('');
+ const [pwEnabled, setPwEnabled] = useState(!isEdit);
+ const [saving, setSaving] = useState(false);
+
+ const fmtLastLogin = (ts) => {
+ if (!ts) return 'Never';
+ const d = new Date(ts); const today = new Date(); today.setHours(0,0,0,0);
+ const yesterday = new Date(today); yesterday.setDate(yesterday.getDate() - 1);
+ const dd = new Date(d); dd.setHours(0,0,0,0);
+ if (dd >= today) return 'Today';
+ if (dd >= yesterday) return 'Yesterday';
+ return dd.toISOString().slice(0, 10);
};
+
+ const handleSubmit = async () => {
+ if (!isEdit && (!email.trim() || !isValidEmail(email.trim())))
+ return toast('Valid email address required', 'error');
+ if (!firstName.trim()) return toast('First name is required', 'error');
+ if (!lastName.trim()) return toast('Last name is required', 'error');
+ if (!isValidPhone(phone)) return toast('Invalid phone number', 'error');
+ if (!['member', 'admin', 'manager'].includes(role)) return toast('Role is required', 'error');
+ if (!isEdit && (!password || password.length < 6))
+ return toast('Password must be at least 6 characters', 'error');
+ if (isEdit && pwEnabled && (!password || password.length < 6))
+ return toast('New password must be at least 6 characters', 'error');
+
+ setSaving(true);
+ try {
+ if (isEdit) {
+ await api.updateUser(user.id, {
+ firstName: firstName.trim(),
+ lastName: lastName.trim(),
+ phone: phone.trim(),
+ isMinor,
+ role,
+ ...(pwEnabled && password ? { password } : {}),
+ });
+ toast('User updated', 'success');
+ } else {
+ await api.createUser({
+ firstName: firstName.trim(),
+ lastName: lastName.trim(),
+ email: email.trim(),
+ phone: phone.trim(),
+ isMinor,
+ role,
+ password,
+ });
+ toast('User created', 'success');
+ }
+ onDone();
+ } catch (e) {
+ toast(e.message, 'error');
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ const colGrid = isMobile ? '1fr' : '1fr 1fr';
+ const lbl = (text, required, note) => (
+
+ );
+
return (
-
-
-
-
-
set('name')(e.target.value)} onFocus={onIF} onBlur={onIB} />
+
+
+ {/* Back + title */}
+
+
+
+ {isEdit ? 'Edit User' : 'Create User'}
+
+
+
+ {/* Row 1: Login (email) — full width */}
+
+ {lbl('Login (email)', !isEdit)}
+ setEmail(e.target.value)}
+ disabled={isEdit}
+ style={{ width:'100%', ...(isEdit ? { opacity:0.6, cursor:'not-allowed' } : {}) }}
+ autoComplete="new-password" onFocus={onIF} onBlur={onIB} />
+
+
+ {/* Row 2: First Name + Last Name */}
+
+
+ {lbl('First Name', true)}
+ setFirstName(e.target.value)}
+ autoComplete="new-password" autoCapitalize="words" onFocus={onIF} onBlur={onIB} />
-
-
-
set('email')(e.target.value)} onFocus={onIF} onBlur={onIB} />
+
+ {lbl('Last Name', true)}
+ setLastName(e.target.value)}
+ autoComplete="new-password" autoCapitalize="words" onFocus={onIF} onBlur={onIB} />
-
-
- set('password')(e.target.value)} onFocus={onIF} onBlur={onIB} />
+
+
+ {/* Row 3: Phone + Role */}
+
+
+ {lbl('Phone', false, '(optional)')}
+ setPhone(e.target.value)}
+ autoComplete="new-password" onFocus={onIF} onBlur={onIB} />
-
-
-
-
User must change password on first login. Duplicate names get a number suffix.
-
+
+ {/* Row 4: Is minor */}
+
+
+
+
+ {/* Row 5: Password */}
+
+ {lbl('Password',
+ (!isEdit) || (isEdit && pwEnabled),
+ isEdit && !pwEnabled ? '(not changing — click Reset Password to set a new one)' :
+ !isEdit ? `(blank = ${userPass})` : null
+ )}
+
+
setPassword(e.target.value)}
+ placeholder={isEdit && !pwEnabled ? '••••••••' : 'Min 6 characters'}
+ disabled={!pwEnabled}
+ autoComplete="new-password"
+ onFocus={onIF} onBlur={onIB}
+ />
+
+
+
+ {/* Row 6: Buttons */}
+
+
+ {isEdit && !pwEnabled && (
+
+ )}
+ {isEdit && pwEnabled && (
+
+ )}
+
+
+
+ {/* Row 7 (edit only): Last login + must change password */}
+ {isEdit && (
+
+ Last Login: {fmtLastLogin(user.last_online)}
+ {!!user.must_change_password && (
+ ⚠ Must change password
+ )}
+
+ )}
);
}
+// ── Bulk Import Form ──────────────────────────────────────────────────────────
function BulkImportForm({ userPass, onCreated }) {
const toast = useToast();
const fileRef = useRef(null);
@@ -278,12 +364,13 @@ function BulkImportForm({ userPass, onCreated }) {
// ── Main page ─────────────────────────────────────────────────────────────────
export default function UserManagerPage({ isMobile = false, onProfile, onHelp, onAbout }) {
- const [users, setUsers] = useState([]);
- const [loading, setLoading] = useState(true);
- const [loadError, setLoadError] = useState('');
- const [search, setSearch] = useState('');
- const [tab, setTab] = useState('users');
- const [userPass, setUserPass] = useState('user@1234');
+ const [users, setUsers] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [loadError, setLoadError] = useState('');
+ const [search, setSearch] = useState('');
+ const [view, setView] = useState('list'); // 'list' | 'create' | 'edit' | 'bulk'
+ const [editUser, setEditUser] = useState(null);
+ const [userPass, setUserPass] = useState('user@1234');
const [inputFocused, setInputFocused] = useState(false);
const onIF = () => setInputFocused(true);
const onIB = () => setInputFocused(false);
@@ -308,35 +395,39 @@ export default function UserManagerPage({ isMobile = false, onProfile, onHelp, o
)
.sort((a, b) => a.name.localeCompare(b.name));
- // ── Nav item helper (matches Schedule page style) ─────────────────────────
- const navItem = (label, key) => (
-