chore: synchronize local fixes to gitea
This commit is contained in:
612
src/client/pages/AdminDashboard.tsx
Normal file
612
src/client/pages/AdminDashboard.tsx
Normal file
@@ -0,0 +1,612 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { useUser, useOrganization } from '@clerk/clerk-react';
|
||||
import { Shield, UserCheck, UserX, Users, Search, RefreshCw, Crown, Eye, User as UserIcon, Upload, Info, Image as ImageIcon, Box, Database } from 'lucide-react';
|
||||
import { clsx } from 'clsx';
|
||||
import type { AppUser, UserRole } from '../types';
|
||||
import { useAuth } from '../context/useAuth';
|
||||
import api from '../services/api';
|
||||
import { GeometrySettings } from '../components/admin/GeometrySettings';
|
||||
import { BackupRestore } from '../components/admin/BackupRestore';
|
||||
|
||||
const roleLabels: Record<UserRole, { label: string; color: string; icon: React.ReactNode }> = {
|
||||
admin: { label: 'Administrador', color: 'bg-amber-500/20 text-amber-400 border-amber-500/30', icon: <Crown size={14} /> },
|
||||
user: { label: 'Usuário', color: 'bg-primary/20 text-primary border-primary/30', icon: <UserIcon size={14} /> },
|
||||
guest: { label: 'Convidado', color: 'bg-gray-500/20 text-gray-400 border-gray-500/30', icon: <Eye size={14} /> },
|
||||
};
|
||||
|
||||
export const AdminDashboard: React.FC = () => {
|
||||
const { user } = useUser();
|
||||
const { organization } = useOrganization();
|
||||
const { isAdmin } = useAuth();
|
||||
const [users, setUsers] = useState<AppUser[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [filterRole, setFilterRole] = useState<UserRole | 'all'>('all');
|
||||
const [actionLoading, setActionLoading] = useState<string | null>(null);
|
||||
const [activeTab, setActiveTab] = useState<'users' | 'organization' | 'settings' | 'stock' | 'backup'>('users');
|
||||
const [logoLoading, setLogoLoading] = useState(false);
|
||||
|
||||
const fetchUsers = useCallback(async () => {
|
||||
if (!user || !organization?.id) return;
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const response = await api.get('/users');
|
||||
setUsers(response.data.map((u: AppUser) => ({ ...u, id: u._id || u.id })));
|
||||
} catch (error) {
|
||||
console.error('Error fetching users:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [user, organization?.id]);
|
||||
|
||||
const syncOrganizationMembers = useCallback(async () => {
|
||||
if (!organization) return;
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
|
||||
// Fetch ALL members from Clerk (handle pagination)
|
||||
console.log('Fetching members from Clerk organization:', organization.id);
|
||||
let allMembers: any[] = [];
|
||||
let hasMore = true;
|
||||
|
||||
// Fetch all pages
|
||||
while (hasMore) {
|
||||
const clerkMembers = await organization.getMemberships();
|
||||
console.log(`Fetched members:`, clerkMembers.data.length);
|
||||
|
||||
if (clerkMembers.data.length === 0) {
|
||||
hasMore = false;
|
||||
} else {
|
||||
allMembers = clerkMembers.data;
|
||||
hasMore = false; // Clerk retorna todos de uma vez normalmente
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Total Clerk members fetched:', allMembers.length, allMembers);
|
||||
|
||||
// Get current users from database
|
||||
const currentUsersResponse = await api.get('/users');
|
||||
const currentUsers = currentUsersResponse.data;
|
||||
console.log('Current users in database:', currentUsers.length, currentUsers);
|
||||
|
||||
// Create a Set of Clerk user IDs for fast lookup
|
||||
const clerkUserIds = new Set(
|
||||
allMembers
|
||||
.map(m => m.publicUserData?.userId)
|
||||
.filter(id => id != null)
|
||||
);
|
||||
|
||||
console.log('Clerk user IDs:', Array.from(clerkUserIds));
|
||||
|
||||
// Step 1: Add/Update users from Clerk
|
||||
for (const membership of allMembers) {
|
||||
const clerkUser = membership.publicUserData;
|
||||
console.log('Processing membership:', membership);
|
||||
console.log('Public user data:', clerkUser);
|
||||
|
||||
if (clerkUser) {
|
||||
const syncData = {
|
||||
clerkId: clerkUser.userId,
|
||||
email: clerkUser.identifier || '',
|
||||
name: `${clerkUser.firstName || ''} ${clerkUser.lastName || ''}`.trim() || clerkUser.identifier || 'Usuário',
|
||||
organizationId: organization.id,
|
||||
clerkRole: membership.role
|
||||
};
|
||||
|
||||
console.log('Syncing user:', syncData);
|
||||
|
||||
try {
|
||||
const response = await api.post('/users/sync', syncData);
|
||||
console.log('Sync success for', clerkUser.userId, ':', response.data);
|
||||
} catch (syncError) {
|
||||
console.error('Error syncing member:', clerkUser.userId, syncError);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Step 2: Remove users from database that don't exist in Clerk anymore
|
||||
let removedCount = 0;
|
||||
for (const dbUser of currentUsers) {
|
||||
const clerkUserId = dbUser.clerkUserId || dbUser.clerkId;
|
||||
if (!clerkUserIds.has(clerkUserId)) {
|
||||
console.log(`User ${dbUser.name} (${clerkUserId}) is in DB but not in Clerk - removing...`);
|
||||
try {
|
||||
await api.delete(`/users/${dbUser._id}`);
|
||||
console.log(`Removed user ${dbUser.name} from database`);
|
||||
removedCount++;
|
||||
} catch (deleteError) {
|
||||
console.error(`Error removing user ${dbUser.name}:`, deleteError);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reload users after sync
|
||||
console.log('Reloading users from database...');
|
||||
await fetchUsers();
|
||||
|
||||
const message = `Sincronização concluída!\n✅ ${allMembers.length} membros atualizados\n${removedCount > 0 ? `🗑️ ${removedCount} membros removidos` : ''}`;
|
||||
alert(message);
|
||||
} catch (error) {
|
||||
console.error('Error syncing organization members:', error);
|
||||
alert('Erro ao sincronizar membros. Verifique o console para mais detalhes.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [organization, fetchUsers]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
}, [fetchUsers]);
|
||||
|
||||
const handleRoleChange = async (userId: string, newRole: UserRole) => {
|
||||
if (!user) return;
|
||||
|
||||
setActionLoading(userId);
|
||||
try {
|
||||
const response = await api.patch(`/users/${userId}/role`, { role: newRole });
|
||||
const updated = response.data;
|
||||
setUsers(users.map(u => u.id === userId ? { ...updated, id: updated._id || updated.id } : u));
|
||||
} catch (error: unknown) {
|
||||
const err = error as { response?: { data?: { error?: string } } };
|
||||
console.error('Error updating role:', error);
|
||||
alert(err.response?.data?.error || 'Erro ao atualizar role');
|
||||
} finally {
|
||||
setActionLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleBan = async (userId: string, isBanned: boolean) => {
|
||||
if (!user) return;
|
||||
|
||||
setActionLoading(userId);
|
||||
try {
|
||||
const response = await api.patch(`/users/${userId}/ban`, { isBanned });
|
||||
const updated = response.data;
|
||||
setUsers(users.map(u => u.id === userId ? { ...updated, id: updated._id || updated.id } : u));
|
||||
} catch (error: unknown) {
|
||||
const err = error as { response?: { data?: { error?: string } } };
|
||||
console.error('Error toggling ban:', error);
|
||||
alert(err.response?.data?.error || 'Erro ao alterar status');
|
||||
} finally {
|
||||
setActionLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredUsers = users.filter(u => {
|
||||
const matchesSearch = u.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
u.email.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
const matchesRole = filterRole === 'all' || u.role === filterRole;
|
||||
return matchesSearch && matchesRole;
|
||||
});
|
||||
|
||||
const handleLogoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file || !organization) return;
|
||||
|
||||
// Validations
|
||||
const validTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/svg+xml'];
|
||||
if (!validTypes.includes(file.type)) {
|
||||
alert('Por favor, selecione uma imagem PNG, JPG ou SVG.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (file.size > 500 * 1024) {
|
||||
alert('O arquivo deve ter no máximo 500KB.');
|
||||
return;
|
||||
}
|
||||
|
||||
setLogoLoading(true);
|
||||
try {
|
||||
await organization.setLogo({ file });
|
||||
alert('Logo atualizado com sucesso!');
|
||||
} catch (error) {
|
||||
console.error('Error uploading logo:', error);
|
||||
alert('Erro ao atualizar o logo.');
|
||||
} finally {
|
||||
setLogoLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isAdmin()) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-[60vh] gap-4">
|
||||
<Shield size={64} className="text-error/50" />
|
||||
<h1 className="text-2xl font-bold text-text-main">Acesso Negado</h1>
|
||||
<p className="text-text-muted">Você não tem permissão para acessar esta página.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-black text-text-main tracking-tight flex items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center shadow-lg shadow-amber-500/30">
|
||||
<Shield size={24} className="text-white" />
|
||||
</div>
|
||||
Administração
|
||||
</h1>
|
||||
<p className="text-text-muted mt-2">Configurações globais e gerenciamento de usuários</p>
|
||||
</div>
|
||||
{activeTab === 'users' && (
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={syncOrganizationMembers}
|
||||
disabled={isLoading}
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-primary hover:bg-primary-dark text-white border border-primary-dark rounded-xl font-semibold transition-all disabled:opacity-50"
|
||||
>
|
||||
<Users size={18} className={isLoading ? 'animate-spin' : ''} />
|
||||
Sincronizar Clerk
|
||||
</button>
|
||||
<button
|
||||
onClick={fetchUsers}
|
||||
disabled={isLoading}
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-surface hover:bg-surface-hover border border-border/40 rounded-xl text-text-main font-semibold transition-all disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw size={18} className={isLoading ? 'animate-spin' : ''} />
|
||||
Atualizar
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tabs Navigation */}
|
||||
<div className="flex p-1 bg-surface-soft rounded-xl border border-border/40 w-fit">
|
||||
<button
|
||||
onClick={() => setActiveTab('users')}
|
||||
className={clsx(
|
||||
"flex items-center gap-2 px-6 py-2.5 text-sm font-bold rounded-lg transition-all",
|
||||
activeTab === 'users'
|
||||
? "bg-surface text-primary shadow-sm border border-border/40"
|
||||
: "text-text-muted hover:text-text-main hover:bg-surface-hover"
|
||||
)}
|
||||
>
|
||||
<Users size={16} />
|
||||
Usuários
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('organization')}
|
||||
className={clsx(
|
||||
"flex items-center gap-2 px-6 py-2.5 text-sm font-bold rounded-lg transition-all",
|
||||
activeTab === 'organization'
|
||||
? "bg-surface text-primary shadow-sm border border-border/40"
|
||||
: "text-text-muted hover:text-text-main hover:bg-surface-hover"
|
||||
)}
|
||||
>
|
||||
<Upload size={16} />
|
||||
Organização
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('settings')}
|
||||
className={clsx(
|
||||
"flex items-center gap-2 px-6 py-2.5 text-sm font-bold rounded-lg transition-all",
|
||||
activeTab === 'settings'
|
||||
? "bg-surface text-primary shadow-sm border border-border/40"
|
||||
: "text-text-muted hover:text-text-main hover:bg-surface-hover"
|
||||
)}
|
||||
>
|
||||
<Box size={16} />
|
||||
Geometrias
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('backup')}
|
||||
className={clsx(
|
||||
"flex items-center gap-2 px-6 py-2.5 text-sm font-bold rounded-lg transition-all",
|
||||
activeTab === 'backup'
|
||||
? "bg-surface text-primary shadow-sm border border-border/40"
|
||||
: "text-text-muted hover:text-text-main hover:bg-surface-hover"
|
||||
)}
|
||||
>
|
||||
<Database size={16} />
|
||||
Backup
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{activeTab === 'users' ? (
|
||||
<>
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
<div className="bg-surface rounded-2xl p-5 border border-border/40">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-primary/20 flex items-center justify-center">
|
||||
<Users size={20} className="text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-black text-text-main">{users.length}</p>
|
||||
<p className="text-xs text-text-muted font-medium">Total</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-surface rounded-2xl p-5 border border-border/40">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-amber-500/20 flex items-center justify-center">
|
||||
<Crown size={20} className="text-amber-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-black text-text-main">{users.filter(u => u.role === 'admin').length}</p>
|
||||
<p className="text-xs text-text-muted font-medium">Admins</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-surface rounded-2xl p-5 border border-border/40">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-green-500/20 flex items-center justify-center">
|
||||
<UserCheck size={20} className="text-green-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-black text-text-main">{users.filter(u => u.role === 'user').length}</p>
|
||||
<p className="text-xs text-text-muted font-medium">Usuários</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-surface rounded-2xl p-5 border border-border/40">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-red-500/20 flex items-center justify-center">
|
||||
<UserX size={20} className="text-red-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-black text-text-main">{users.filter(u => u.isBanned).length}</p>
|
||||
<p className="text-xs text-text-muted font-medium">Banidos</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<div className="relative flex-1">
|
||||
<Search size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-text-muted" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar por nome ou email..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-12 pr-4 py-3 bg-surface border border-border/40 rounded-xl text-text-main placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
value={filterRole}
|
||||
onChange={(e) => setFilterRole(e.target.value as UserRole | 'all')}
|
||||
aria-label="Filtrar por role"
|
||||
className="px-4 py-3 bg-surface border border-border/40 rounded-xl text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
|
||||
>
|
||||
<option value="all">Todos os Roles</option>
|
||||
<option value="admin">Administradores</option>
|
||||
<option value="user">Usuários</option>
|
||||
<option value="guest">Convidados</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Users Table */}
|
||||
<div className="bg-surface rounded-2xl border border-border/40 overflow-hidden">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<RefreshCw size={32} className="animate-spin text-primary" />
|
||||
</div>
|
||||
) : filteredUsers.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-text-muted">
|
||||
<Users size={48} className="mb-4 opacity-50" />
|
||||
<p>Nenhum usuário encontrado</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-border/40 bg-surface-soft">
|
||||
<th className="text-left px-6 py-4 text-xs font-bold text-text-muted uppercase tracking-wider">Usuário</th>
|
||||
<th className="text-left px-6 py-4 text-xs font-bold text-text-muted uppercase tracking-wider">Email</th>
|
||||
<th className="text-left px-6 py-4 text-xs font-bold text-text-muted uppercase tracking-wider">Role</th>
|
||||
<th className="text-left px-6 py-4 text-xs font-bold text-text-muted uppercase tracking-wider">Status</th>
|
||||
<th className="text-right px-6 py-4 text-xs font-bold text-text-muted uppercase tracking-wider">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border/40">
|
||||
{filteredUsers.map((u) => {
|
||||
const roleInfo = roleLabels[u.role];
|
||||
const isCurrentUser = u.clerkId === user?.id;
|
||||
const isActionDisabled = actionLoading === u.id;
|
||||
|
||||
return (
|
||||
<tr key={u.id} className={`hover:bg-surface-hover transition-colors ${u.isBanned ? 'opacity-60' : ''}`}>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold">
|
||||
{u.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-text-main">{u.name}</p>
|
||||
{isCurrentUser && (
|
||||
<span className="text-xs text-primary font-medium">(Você)</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-text-secondary">{u.email}</td>
|
||||
<td className="px-6 py-4">
|
||||
<select
|
||||
value={u.role}
|
||||
onChange={(e) => handleRoleChange(u.id, e.target.value as UserRole)}
|
||||
disabled={isCurrentUser || isActionDisabled || u.isBanned}
|
||||
aria-label={`Alterar role de ${u.name}`}
|
||||
className={`px-3 py-1.5 rounded-lg border text-sm font-semibold transition-all ${roleInfo.color} disabled:opacity-50 disabled:cursor-not-allowed bg-transparent`}
|
||||
>
|
||||
<option value="guest">Convidado</option>
|
||||
<option value="user">Usuário</option>
|
||||
<option value="admin">Administrador</option>
|
||||
</select>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
{u.isBanned ? (
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg bg-red-500/20 text-red-400 border border-red-500/30 text-sm font-semibold">
|
||||
<UserX size={14} />
|
||||
Banido
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg bg-green-500/20 text-green-400 border border-green-500/30 text-sm font-semibold">
|
||||
<UserCheck size={14} />
|
||||
Ativo
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
{!isCurrentUser && u.role !== 'admin' && (
|
||||
<button
|
||||
onClick={() => handleToggleBan(u.id, !u.isBanned)}
|
||||
disabled={isActionDisabled}
|
||||
className={`px-4 py-2 rounded-xl text-sm font-semibold transition-all ${u.isBanned
|
||||
? 'bg-green-500/20 text-green-400 hover:bg-green-500/30'
|
||||
: 'bg-red-500/20 text-red-400 hover:bg-red-500/30'
|
||||
} disabled:opacity-50`}
|
||||
>
|
||||
{isActionDisabled ? (
|
||||
<RefreshCw size={16} className="animate-spin" />
|
||||
) : u.isBanned ? (
|
||||
'Desbanir'
|
||||
) : (
|
||||
'Banir'
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : activeTab === 'organization' ? (
|
||||
<div className="space-y-6 animate-in fade-in slide-in-from-left-4 duration-300">
|
||||
{/* Organization Settings Panel */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div className="bg-surface rounded-2xl p-6 border border-border/40 space-y-6">
|
||||
<div className="flex items-center gap-3 pb-4 border-b border-border/20">
|
||||
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
|
||||
<Upload size={20} className="text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-text-main">Identidade Visual</h2>
|
||||
<p className="text-xs text-text-muted">Gerencie o logo da sua organização</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-6 py-4">
|
||||
{organization?.imageUrl ? (
|
||||
<div className="relative group">
|
||||
<div className="w-32 h-32 rounded-2xl border-2 border-primary/20 p-2 bg-white overflow-hidden shadow-xl">
|
||||
<img
|
||||
src={organization.imageUrl}
|
||||
alt={organization.name}
|
||||
className="w-full h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute -bottom-2 -right-2 bg-primary text-white p-2 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<ImageIcon size={14} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-32 h-32 rounded-2xl border-2 border-dashed border-border/40 flex flex-col items-center justify-center bg-surface-soft text-text-muted gap-2">
|
||||
<ImageIcon size={32} className="opacity-20" />
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest">Sem Logo</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="w-full space-y-4">
|
||||
<label className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-border/40 rounded-2xl cursor-pointer hover:bg-surface-hover hover:border-primary/50 transition-all group">
|
||||
<div className="flex flex-col items-center justify-center pt-5 pb-6">
|
||||
<Upload className="w-8 h-8 text-text-muted group-hover:text-primary transition-colors mb-2" />
|
||||
<p className="text-sm text-text-main font-bold">Clique para alterar o logo</p>
|
||||
<p className="text-xs text-text-muted">ou arraste e solte o arquivo</p>
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
className="hidden"
|
||||
accept="image/png,image/jpeg,image/jpg,image/svg+xml"
|
||||
onChange={handleLogoUpload}
|
||||
disabled={logoLoading}
|
||||
/>
|
||||
</label>
|
||||
|
||||
{logoLoading && (
|
||||
<div className="flex items-center justify-center gap-2 text-primary font-bold animate-pulse">
|
||||
<RefreshCw size={16} className="animate-spin" />
|
||||
<span>Enviando logo...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-surface rounded-2xl p-6 border border-border/40 space-y-6">
|
||||
<div className="flex items-center gap-3 pb-4 border-b border-border/20">
|
||||
<div className="w-10 h-10 rounded-xl bg-amber-500/10 flex items-center justify-center">
|
||||
<Info size={20} className="text-amber-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-text-main">Requisitos & Dicas</h2>
|
||||
<p className="text-xs text-text-muted">Regras para um visual impecável</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="p-4 bg-surface-soft rounded-xl border border-border/20">
|
||||
<h3 className="text-sm font-bold text-text-main flex items-center gap-2 mb-2">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-primary"></div>
|
||||
Formatos Suportados
|
||||
</h3>
|
||||
<p className="text-xs text-text-muted leading-relaxed">
|
||||
Aceitamos arquivos nos formatos <strong>PNG, JPG ou SVG</strong>. O formato SVG é recomendado para máxima nitidez em qualquer tamanho.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-surface-soft rounded-xl border border-border/20">
|
||||
<h3 className="text-sm font-bold text-text-main flex items-center gap-2 mb-2">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-amber-500"></div>
|
||||
Dimensões Recomendadas
|
||||
</h3>
|
||||
<p className="text-xs text-text-muted leading-relaxed">
|
||||
Recomendamos uma imagem quadrada de no mínimo <strong>512x512 pixels</strong>. Logos horizontais podem não aparecer corretamente em todas as áreas.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-surface-soft rounded-xl border border-border/20">
|
||||
<h3 className="text-sm font-bold text-text-main flex items-center gap-2 mb-2">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-red-500"></div>
|
||||
Limite de Tamanho
|
||||
</h3>
|
||||
<p className="text-xs text-text-muted leading-relaxed">
|
||||
O arquivo não deve ultrapassar <strong>500 KB</strong>. Arquivos maiores serão rejeitados automaticamente para garantir rapidez no carregamento.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : activeTab === 'settings' ? (
|
||||
<GeometrySettings />
|
||||
) : activeTab === 'backup' ? (
|
||||
<BackupRestore />
|
||||
) : (
|
||||
// Lazily load or direct render StockDashboard (Need to import it)
|
||||
<div className="bg-surface rounded-2xl border border-border/40 p-6">
|
||||
<div className="text-center py-10">
|
||||
<h2 className="text-xl font-bold text-text-main">Gestão de Estoque</h2>
|
||||
<p className="text-text-muted mt-2">Acesse a nova página dedicada ao controle de estoque.</p>
|
||||
<a
|
||||
href="/stock"
|
||||
className="mt-6 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
|
||||
>
|
||||
Ir para Estoque
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user