blyzer/fasto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add loading animation to tenant creation button
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m10s
Details

Browse Source 
- Implemented isSaving state in SuperAdmin to provide visual feedback during organization creation and updates.
This commit is contained in:
Cauê Faleiros
2026-03-10 15:10:44 -03:00
parent ab35cf9126
commit ee3b9f4ce6
1 changed files with 41 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
pages/SuperAdmin.tsx
View File

@@ -1,9 +1,8 @@
import React, { useState, useMemo } from 'react';
import {
Building2, Users, MessageSquare, Plus, Search,
Edit, Trash2, ChevronDown, ChevronUp, ChevronsUpDown, X, CheckCircle2
} from 'lucide-react';
import { getTenants, createTenant, deleteTenant, updateTenant } from '../services/dataService';
Edit, Trash2, ChevronDown, ChevronUp, ChevronsUpDown, X, CheckCircle2, Loader2
} from 'lucide-react';import { getTenants, createTenant, deleteTenant, updateTenant } from '../services/dataService';
import { Tenant } from '../types';
import { DateRangePicker } from '../components/DateRangePicker';
import { KPICard } from '../components/KPICard';
@@ -93,17 +92,20 @@ export const SuperAdmin: React.FC = () => {
const [successMessage, setSuccessMessage] = useState('');
const [errorMessage, setErrorMessage] = useState('');
const [isSaving, setIsSaving] = useState(false);
const handleSaveTenant = async (e: React.FormEvent) => {
e.preventDefault();
setErrorMessage('');
setSuccessMessage('');
setIsSaving(true);
const form = e.target as HTMLFormElement;
const name = (form.elements.namedItem('name') as HTMLInputElement).value;
const slug = (form.elements.namedItem('slug') as HTMLInputElement).value;
const admin_email = (form.elements.namedItem('admin_email') as HTMLInputElement).value;
const status = (form.elements.namedItem('status') as HTMLSelectElement).value;
try {
if (editingTenant) {
const success = await updateTenant(editingTenant.id, { name, slug, admin_email, status });
if (success) {
@@ -113,9 +115,11 @@ export const SuperAdmin: React.FC = () => {
setIsModalOpen(false);
setSuccessMessage('');
setEditingTenant(null);
setIsSaving(false);
}, 2000);
} else {
setErrorMessage('Erro ao atualizar organização.');
setIsSaving(false);
}
} else {
const result = await createTenant({ name, slug, admin_email, status });
@@ -125,11 +129,17 @@ export const SuperAdmin: React.FC = () => {
setTimeout(() => {
setIsModalOpen(false);
setSuccessMessage('');
setIsSaving(false);
}, 3000);
} else {
setErrorMessage(result.message || 'Erro ao salvar organização.');
setIsSaving(false);
}
}
} catch (err) {
setErrorMessage('Ocorreu um erro inesperado.');
setIsSaving(false);
}
};
const SortIcon = ({ column }: { column: keyof Tenant }) => {
@@ -282,7 +292,9 @@ export const SuperAdmin: React.FC = () => {
</div>
<div className="pt-4 flex justify-end gap-3 border-t dark:border-dark-border mt-6">
<button type="button" onClick={() => setIsModalOpen(false)} className="px-4 py-2 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg text-sm font-medium transition-colors">Cancelar</button>
<button type="submit" className="px-4 py-2 bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 rounded-lg text-sm font-bold hover:opacity-90 transition-all shadow-sm">{editingTenant ? 'Salvar Alterações' : 'Criar Organização'}</button>
<button type="submit" disabled={isSaving} className="px-4 py-2 bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 rounded-lg text-sm font-bold flex items-center gap-2 hover:opacity-90 transition-all shadow-sm disabled:opacity-70">
{isSaving ? <Loader2 className="animate-spin" size={16} /> : (editingTenant ? 'Salvar Alterações' : 'Criar Organização')}
</button>
</div>
</form>
</div>