@xeplr/ui-account 1.0.0 → 1.0.1

package/src/designs/TenantSample.jsx

@@ -1,182 +0,0 @@
-import './admin.css';
-
-export default function TenantSample({
-  tenants, users, loading, error, saving, editingItem, editForm,
-  activeTab, setActiveTab, search, setSearch, label, labels,
-  startAdd, startEdit, cancelEdit, updateField, handleSave, handleDelete,
-  handleAssignUser, isUserAssignedTenant, reload, level
-}) {
-  return (
-    <div className="xeplr-admin-container">
-      <div className="xeplr-admin-header">
-        <h2>{labels} Management</h2>
-        <div style={{ display: 'flex', gap: '8px' }}>
-          {activeTab === 'tenants' && (
-            <button type="button" onClick={startAdd} className="xeplr-admin-btn-primary" disabled={saving || editingItem === '__new__'}>
-              + Add {label}
-            </button>
-          )}
-          <button type="button" onClick={reload} className="xeplr-admin-btn-secondary">Refresh</button>
-        </div>
-      </div>
-
-      <div className="xeplr-admin-tabs" role="tablist">
-        <button role="tab" className={'xeplr-admin-tab' + (activeTab === 'tenants' ? ' xeplr-admin-tab-active' : '')} onClick={function() { setActiveTab('tenants'); setSearch(''); }}>
-          {labels}
-        </button>
-        <button role="tab" className={'xeplr-admin-tab' + (activeTab === 'users' ? ' xeplr-admin-tab-active' : '')} onClick={function() { setActiveTab('users'); setSearch(''); }}>
-          Assign Users
-        </button>
-      </div>
-
-      <div className="xeplr-admin-toolbar">
-        <input type="text" placeholder={'Search ' + (activeTab === 'tenants' ? labels.toLowerCase() : 'users') + '...'} value={search} onChange={function(e) { setSearch(e.target.value); }} className="xeplr-admin-search" />
-      </div>
-
-      {error && <div className="xeplr-admin-alert xeplr-admin-alert-error">{error}</div>}
-
-      {loading ? (
-        <div className="xeplr-admin-loading">Loading...</div>
-      ) : activeTab === 'tenants' ? (
-        renderTenantList(tenants, editingItem, editForm, saving, label, startEdit, cancelEdit, updateField, handleSave, handleDelete)
-      ) : (
-        renderUserAssignment(users, tenants, search, handleAssignUser, isUserAssignedTenant, label)
-      )}
-    </div>
-  );
-}
-
-function renderTenantList(tenants, editingItem, editForm, saving, label, startEdit, cancelEdit, updateField, handleSave, handleDelete) {
-  return (
-    <div className="xeplr-admin-matrix-wrapper">
-      <table className="xeplr-admin-matrix xeplr-admin-master-table">
-        <thead>
-          <tr>
-            <th className="xeplr-admin-sticky-col">Name</th>
-            <th>Code</th>
-            <th>Description</th>
-            <th className="xeplr-admin-actions-col">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {editingItem === '__new__' && (
-            <tr className="xeplr-admin-editing-row">
-              <td className="xeplr-admin-sticky-col">
-                <input type="text" className="xeplr-admin-inline-input" value={editForm.name || ''} onChange={function(e) { updateField('name', e.target.value); }} placeholder={label + ' name'} autoFocus />
-              </td>
-              <td>
-                <input type="text" className="xeplr-admin-inline-input xeplr-admin-group-input" value={editForm.code || ''} onChange={function(e) { updateField('code', e.target.value); }} placeholder="Short code" />
-              </td>
-              <td>
-                <input type="text" className="xeplr-admin-inline-input" value={editForm.description || ''} onChange={function(e) { updateField('description', e.target.value); }} placeholder="Description" />
-              </td>
-              <td className="xeplr-admin-actions-col">
-                <div className="xeplr-admin-action-btns">
-                  <button onClick={handleSave} disabled={saving} className="xeplr-admin-btn-save" title="Save">{'\u2713'}</button>
-                  <button onClick={cancelEdit} className="xeplr-admin-btn-cancel" title="Cancel">{'\u2715'}</button>
-                </div>
-              </td>
-            </tr>
-          )}
-          {tenants.length === 0 && editingItem !== '__new__' ? (
-            <tr><td colSpan="4" className="xeplr-admin-empty">No {label.toLowerCase()}s found</td></tr>
-          ) : (
-            tenants.map(function(t) {
-              var isEditing = editingItem === t.id;
-              return (
-                <tr key={t.id} className={isEditing ? 'xeplr-admin-editing-row' : ''}>
-                  <td className="xeplr-admin-sticky-col">
-                    {isEditing ? (
-                      <input type="text" className="xeplr-admin-inline-input" value={editForm.name || ''} onChange={function(e) { updateField('name', e.target.value); }} />
-                    ) : (
-                      <span className="xeplr-admin-item-name">{t.name}</span>
-                    )}
-                  </td>
-                  <td>
-                    {isEditing ? (
-                      <input type="text" className="xeplr-admin-inline-input xeplr-admin-group-input" value={editForm.code || ''} onChange={function(e) { updateField('code', e.target.value); }} />
-                    ) : (
-                      t.code ? <span className="xeplr-admin-group-tag">{t.code}</span> : '\u2014'
-                    )}
-                  </td>
-                  <td>
-                    {isEditing ? (
-                      <input type="text" className="xeplr-admin-inline-input" value={editForm.description || ''} onChange={function(e) { updateField('description', e.target.value); }} />
-                    ) : (
-                      t.description || '\u2014'
-                    )}
-                  </td>
-                  <td className="xeplr-admin-actions-col">
-                    <div className="xeplr-admin-action-btns">
-                      {isEditing ? (
-                        <>
-                          <button onClick={handleSave} className="xeplr-admin-btn-save" title="Save">{'\u2713'}</button>
-                          <button onClick={cancelEdit} className="xeplr-admin-btn-cancel" title="Cancel">{'\u2715'}</button>
-                        </>
-                      ) : (
-                        <>
-                          <button onClick={function() { startEdit(t); }} className="xeplr-admin-btn-edit" title="Edit" disabled={editingItem !== null}>{'\u270E'}</button>
-                          <button onClick={function() { if (confirm('Delete this ' + label.toLowerCase() + '?')) handleDelete(t.id); }} className="xeplr-admin-btn-delete" title="Delete" disabled={editingItem !== null}>{'\u2715'}</button>
-                        </>
-                      )}
-                    </div>
-                  </td>
-                </tr>
-              );
-            })
-          )}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-function renderUserAssignment(users, tenants, search, handleAssignUser, isUserAssignedTenant, label) {
-  var q = search ? search.toLowerCase() : '';
-  var filtered = users.filter(function(u) {
-    if (!q) return true;
-    return (u.name && u.name.toLowerCase().includes(q)) || (u.email && u.email.toLowerCase().includes(q));
-  });
-
-  return (
-    <div className="xeplr-admin-matrix-wrapper">
-      <table className="xeplr-admin-matrix" role="grid">
-        <thead>
-          <tr>
-            <th className="xeplr-admin-sticky-col">User</th>
-            {tenants.map(function(t) {
-              return <th key={t.id} className="xeplr-admin-role-header">{t.name}</th>;
-            })}
-          </tr>
-        </thead>
-        <tbody>
-          {filtered.length === 0 ? (
-            <tr><td colSpan={tenants.length + 1} className="xeplr-admin-empty">No users found</td></tr>
-          ) : (
-            filtered.map(function(u) {
-              return (
-                <tr key={u.id}>
-                  <td className="xeplr-admin-sticky-col" style={{ lineHeight: '1.3' }}>
-                    <div className="xeplr-admin-user-name">{u.name || '\u2014'}</div>
-                    <div className="xeplr-admin-user-email">{u.email}</div>
-                  </td>
-                  {tenants.map(function(t) {
-                    var assigned = isUserAssignedTenant(u, t.id);
-                    return (
-                      <td key={t.id} className="xeplr-admin-cell">
-                        <label className="xeplr-admin-toggle">
-                          <input type="checkbox" checked={assigned} onChange={function() { handleAssignUser(u.id, t.id, assigned); }} />
-                          <span className="xeplr-admin-checkmark" />
-                        </label>
-                      </td>
-                    );
-                  })}
-                </tr>
-              );
-            })
-          )}
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/src/useTenantController.js

@@ -1,146 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import { getTenants, saveTenant, deleteTenant, getUsers, assignUserTenant } from './adminApi.js';
-
-export function useTenantController(options = {}) {
-  var [tenants, setTenants] = useState([]);
-  var [users, setUsers] = useState([]);
-  var [loading, setLoading] = useState(true);
-  var [error, setError] = useState('');
-  var [saving, setSaving] = useState(false);
-  var [editingItem, setEditingItem] = useState(null);
-  var [editForm, setEditForm] = useState({});
-  var [activeTab, setActiveTab] = useState('tenants');
-  var [search, setSearch] = useState('');
-
-  var level = options.level || 1;
-  var label = options.label || 'Company';
-  var labels = options.labels || 'Companies';
-
-  useEffect(function() {
-    loadData();
-  }, []);
-
-  async function loadData() {
-    setLoading(true);
-    setError('');
-    try {
-      var [tenantData, userData] = await Promise.all([
-        getTenants(level),
-        getUsers()
-      ]);
-      setTenants(tenantData);
-      setUsers(userData);
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  var filteredTenants = tenants.filter(function(t) {
-    if (!search) return true;
-    var q = search.toLowerCase();
-    return (t.name && t.name.toLowerCase().includes(q)) ||
-           (t.code && t.code.toLowerCase().includes(q));
-  });
-
-  function startAdd() {
-    setEditForm({ name: '', code: '', description: '' });
-    setEditingItem('__new__');
-  }
-
-  function startEdit(item) {
-    setEditForm({ name: item.name, code: item.code || '', description: item.description || '' });
-    setEditingItem(item.id);
-  }
-
-  function cancelEdit() {
-    setEditingItem(null);
-    setEditForm({});
-  }
-
-  function updateField(key, value) {
-    setEditForm(function(prev) { var next = { ...prev }; next[key] = value; return next; });
-  }
-
-  async function handleSave() {
-    setSaving(true);
-    setError('');
-    try {
-      var data = { ...editForm, level: level };
-      if (editingItem !== '__new__') data.id = editingItem;
-      var result = await saveTenant(data);
-      if (editingItem === '__new__') {
-        data.id = result.id;
-        setTenants(function(prev) { return prev.concat([data]); });
-      } else {
-        setTenants(function(prev) {
-          return prev.map(function(t) { return t.id === editingItem ? { ...t, ...data } : t; });
-        });
-      }
-      setEditingItem(null);
-      setEditForm({});
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  async function handleDelete(id) {
-    setSaving(true);
-    setError('');
-    try {
-      await deleteTenant(id);
-      setTenants(function(prev) { return prev.filter(function(t) { return t.id !== id; }); });
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  async function handleAssignUser(userId, tenantId, currentlyAssigned) {
-    setError('');
-    try {
-      await assignUserTenant({ userId, tenantId, assign: !currentlyAssigned });
-      // Reload to get fresh user-tenant mappings
-      var userData = await getUsers();
-      setUsers(userData);
-    } catch (err) {
-      setError(err.message);
-    }
-  }
-
-  function isUserAssignedTenant(user, tenantId) {
-    return user.tenants && user.tenants.some(function(t) { return t.id === tenantId; });
-  }
-
-  var reload = useCallback(function() { loadData(); }, []);
-
-  return {
-    tenants: filteredTenants,
-    users,
-    loading,
-    error,
-    saving,
-    editingItem,
-    editForm,
-    activeTab,
-    setActiveTab,
-    search,
-    setSearch,
-    level,
-    label,
-    labels,
-    startAdd,
-    startEdit,
-    cancelEdit,
-    updateField,
-    handleSave,
-    handleDelete,
-    handleAssignUser,
-    isUserAssignedTenant,
-    reload,
-  };
-}

package/src/useTenantPickerController.js

@@ -1,97 +0,0 @@
-import { useState, useEffect } from 'react';
-import { getMyTenants, logoutUser } from './api.js';
-import { clearAuth } from './token.js';
-
-var STORAGE_KEY = 'xeplr:activeTenant';
-var COUNT_KEY = 'xeplr:tenantCount';
-
-/**
- * Get the currently selected tenant from localStorage.
- */
-export function getActiveTenant() {
-  try {
-    var raw = localStorage.getItem(STORAGE_KEY);
-    return raw ? JSON.parse(raw) : null;
-  } catch (e) {
-    return null;
-  }
-}
-
-/**
- * Set the active tenant in localStorage.
- */
-export function setActiveTenant(tenant) {
-  if (tenant) {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(tenant));
-  } else {
-    localStorage.removeItem(STORAGE_KEY);
-  }
-}
-
-/**
- * Clear the active tenant (on logout).
- */
-export function clearActiveTenant() {
-  localStorage.removeItem(STORAGE_KEY);
-  localStorage.removeItem(COUNT_KEY);
-}
-
-/**
- * Check if the user has multiple tenants (show switch option).
- */
-export function hasMultipleTenants() {
-  try {
-    return parseInt(localStorage.getItem(COUNT_KEY) || '0') > 1;
-  } catch (e) {
-    return false;
-  }
-}
-
-/**
- * Controller for the tenant picker screen shown after login.
- */
-export function useTenantPickerController(options = {}) {
-  var [tenants, setTenants] = useState([]);
-  var [loading, setLoading] = useState(true);
-  var [error, setError] = useState('');
-  var level = options.level || 1;
-  var label = options.label || 'Company';
-
-  useEffect(function() {
-    setLoading(true);
-    getMyTenants()
-      .then(function(data) {
-        setTenants(data);
-        try { localStorage.setItem(COUNT_KEY, String(data.length)); } catch(e) {}
-        // Auto-select if only one tenant
-        if (data.length === 1) {
-          setActiveTenant(data[0]);
-          if (options.onSelect) options.onSelect(data[0]);
-        }
-      })
-      .catch(function(err) { setError(err.message); })
-      .finally(function() { setLoading(false); });
-  }, [level]);
-
-  function handleSelect(tenant) {
-    setActiveTenant(tenant);
-    if (options.onSelect) options.onSelect(tenant);
-  }
-
-  function handleLogout() {
-    clearActiveTenant();
-    logoutUser();
-    clearAuth();
-    if (options.onLogout) options.onLogout();
-    else window.location.href = '/login';
-  }
-
-  return {
-    tenants,
-    loading,
-    error,
-    label,
-    handleSelect,
-    onLogout: handleLogout
-  };
-}