Improve users and purchase needs UI

src/pages/AdminUsers.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState, type FormEvent } from 'react';
 import {
+  AlertTriangle,
   AtSign,
   Check,
   Copy,
@@ -8,10 +9,13 @@ import {
   Loader2,
   Mail,
   Plus,
+  RefreshCw,
   Search,
-  Shield,
   Trash2,
   User as UserIcon,
+  UserCheck,
+  UserPlus,
+  UserX,
   X
 } from 'lucide-react';
 import { createUser, deleteUser as deleteManagedUser, fetchUsers, updateUser } from '../dataService';
@@ -31,25 +35,30 @@ const statusOptions: Array<{ key: StatusFilter; label: string }> = [
   { key: 'inactive', label: 'Inativos' }
 ];
 
-const formatDateTime = (value: string) => {
-  const date = new Date(value);
-  if (!value || Number.isNaN(date.getTime())) return '-';
-
-  return new Intl.DateTimeFormat('pt-BR', {
-    day: '2-digit',
-    month: 'short',
-    year: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit'
-  }).format(date);
+const roleLabels: Record<string, string> = {
+  admin: 'Admin',
+  supervisor: 'Supervisor',
+  producao: 'Produção',
+  operacao: 'Operação',
+  vendedor: 'Vendedor',
+  financeiro: 'Financeiro',
+  user: 'Usuário'
 };
 
+const inputWrapClassName = 'flex h-11 items-center gap-3 rounded-lg border border-dark-border bg-dark-input px-3 transition-colors focus-within:border-brand-primary focus-within:ring-1 focus-within:ring-brand-primary';
+const inputClassName = 'min-w-0 flex-1 bg-transparent text-sm font-semibold text-dark-text outline-none placeholder:text-dark-muted';
+
 const getInitials = (name: string) => {
   const parts = name.trim().split(/\s+/).filter(Boolean);
   if (!parts.length) return '?';
   return parts.slice(0, 2).map((part) => part[0]).join('').toUpperCase();
 };
 
+const getUserRoleLabel = (user: ManagedUser) => {
+  const role = String((user as ManagedUser & { role?: string }).role || 'user').toLowerCase();
+  return roleLabels[role] || role;
+};
+
 const AdminUsers = () => {
   const [users, setUsers] = useState<ManagedUser[]>([]);
   const [searchTerm, setSearchTerm] = useState('');
@@ -87,6 +96,8 @@ const AdminUsers = () => {
     });
   }, [searchTerm, statusFilter, users]);
 
+  const hasFilters = searchTerm.trim() !== '' || statusFilter !== 'all';
+
   const loadUsers = async () => {
     setIsLoading(true);
     try {
@@ -119,6 +130,11 @@ const AdminUsers = () => {
     resetForm();
   };
 
+  const clearFilters = () => {
+    setSearchTerm('');
+    setStatusFilter('all');
+  };
+
   const openCreateModal = () => {
     resetForm();
     setIsModalOpen(true);
@@ -251,57 +267,99 @@ const AdminUsers = () => {
       ? 'border-amber-500/30 bg-amber-500/10 text-amber-200'
       : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-300';
 
+  const statusCounts: Record<StatusFilter, number> = {
+    all: users.length,
+    active: activeCount,
+    inactive: inactiveCount
+  };
+
+  const stats = [
+    { label: 'Total', value: users.length, icon: UserIcon, tone: 'text-dark-text', detail: 'acessos cadastrados' },
+    { label: 'Ativos', value: activeCount, icon: UserCheck, tone: 'text-emerald-300', detail: 'podem entrar agora' },
+    { label: 'Inativos', value: inactiveCount, icon: UserX, tone: 'text-red-300', detail: 'bloqueados no login' },
+    { label: 'Exibindo', value: filteredUsers.length, icon: Search, tone: 'text-brand-primary', detail: hasFilters ? 'após filtros' : 'sem filtros' }
+  ];
+
   return (
     <div className="space-y-5">
-      <header className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-        <div>
-          <div className="mb-2 flex items-center gap-2 text-sm font-semibold text-brand-primary">
-            <Shield className="h-4 w-4" />
-            Super admin
-          </div>
-          <h1 className="text-2xl font-bold text-dark-text">Usuários</h1>
-          <p className="mt-1 text-sm text-dark-muted">Controle quem acessa o painel.</p>
+      <header className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
+        <div className="max-w-3xl">
+          <h1 className="text-3xl font-bold text-dark-text">Usuários</h1>
+          <p className="mt-2 text-sm leading-6 text-dark-muted">
+            Gerencie acessos individuais, senhas iniciais e bloqueios de entrada no painel.
+          </p>
         </div>
 
-        <div className="flex items-center gap-2">
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+          <button
+            type="button"
+            onClick={() => void loadUsers()}
+            disabled={isLoading}
+            className="inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-lg border border-dark-border bg-dark-card px-4 text-sm font-bold text-dark-text transition-colors hover:border-brand-primary disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+            Atualizar
+          </button>
           <button
             type="button"
             onClick={openCreateModal}
             className="inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-lg bg-brand-primary px-4 text-sm font-bold text-brand-contrast transition-colors hover:bg-brand-primary/90"
           >
-            <Plus className="h-4 w-4" />
-            Novo usuário
+            <UserPlus className="h-4 w-4" />
+            Novo acesso
           </button>
         </div>
       </header>
 
-      <section className="rounded-lg border border-dark-border bg-dark-card">
-        <div className="flex flex-col gap-4 border-b border-dark-border p-4 lg:flex-row lg:items-center lg:justify-between">
-          <div className="grid grid-cols-3 divide-x divide-dark-border overflow-hidden rounded-lg border border-dark-border bg-dark-input lg:w-[360px]">
-            <div className="px-4 py-3">
-              <p className="text-xs font-semibold text-dark-muted">Total</p>
-              <p className="mt-1 text-xl font-bold text-dark-text">{users.length}</p>
+      <section className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
+        {stats.map((stat) => {
+          const Icon = stat.icon;
+          return (
+            <div key={stat.label} className="rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm">
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">{stat.label}</p>
+                  <p className={`mt-2 text-2xl font-bold ${stat.tone}`}>{stat.value}</p>
+                  <p className="mt-1 text-xs font-semibold text-dark-muted">{stat.detail}</p>
                 </div>
-            <div className="px-4 py-3">
-              <p className="text-xs font-semibold text-dark-muted">Ativos</p>
-              <p className="mt-1 text-xl font-bold text-emerald-300">{activeCount}</p>
+                <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-dark-border bg-dark-input text-dark-muted">
+                  <Icon className="h-5 w-5" />
                 </div>
-            <div className="px-4 py-3">
-              <p className="text-xs font-semibold text-dark-muted">Inativos</p>
-              <p className="mt-1 text-xl font-bold text-red-300">{inactiveCount}</p>
               </div>
             </div>
+          );
+        })}
+      </section>
+
+      <section className="overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-sm">
+        <div className="border-b border-dark-border p-4">
+          <div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
+            <div>
+              <h2 className="text-base font-bold text-dark-text">Acessos cadastrados</h2>
+              <p className="mt-1 text-sm text-dark-muted">Busque, filtre e edite os usuários do painel.</p>
+            </div>
 
-          <div className="flex flex-col gap-3 md:flex-row md:items-center">
-            <div className="flex h-10 min-w-0 items-center gap-2 rounded-lg border border-dark-border bg-dark-input px-3 md:w-80">
+            <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
+              <div className="flex h-10 min-w-0 items-center gap-2 rounded-lg border border-dark-border bg-dark-input px-3 lg:w-80">
                 <Search className="h-4 w-4 shrink-0 text-dark-muted" />
                 <input
                   type="search"
                   value={searchTerm}
                   onChange={(event) => setSearchTerm(event.target.value)}
-                className="min-w-0 flex-1 bg-transparent text-sm text-dark-text outline-none placeholder:text-dark-muted"
+                  className="min-w-0 flex-1 bg-transparent text-sm font-semibold text-dark-text outline-none placeholder:text-dark-muted"
                   placeholder="Buscar nome ou e-mail"
                 />
+                {searchTerm && (
+                  <button
+                    type="button"
+                    onClick={() => setSearchTerm('')}
+                    className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-dark-muted transition-colors hover:bg-dark-card hover:text-dark-text"
+                    aria-label="Limpar busca"
+                    title="Limpar busca"
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </button>
+                )}
               </div>
 
               <div className="grid grid-cols-3 rounded-lg border border-dark-border bg-dark-input p-1">
@@ -317,63 +375,92 @@ const AdminUsers = () => {
                     }`}
                   >
                     {option.label}
+                    <span className="ml-1 text-xs opacity-70">{statusCounts[option.key]}</span>
                   </button>
                 ))}
               </div>
             </div>
           </div>
+        </div>
 
         {isLoading ? (
-          <div className="flex h-80 items-center justify-center text-brand-primary">
-            <Loader2 className="h-7 w-7 animate-spin" />
+          <div className="divide-y divide-dark-border" aria-label="Carregando usuários">
+            {Array.from({ length: 5 }).map((_, index) => (
+              <div key={`user-skeleton-${index}`} className="grid grid-cols-[1.4fr_1fr_120px_140px_88px] gap-5 px-5 py-4">
+                {Array.from({ length: 5 }).map((__, column) => (
+                  <div key={`user-skeleton-${index}-${column}`} className="skeleton h-4" />
+                ))}
+              </div>
+            ))}
           </div>
         ) : users.length === 0 ? (
-          <div className="flex h-80 flex-col items-center justify-center px-6 text-center">
-            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-dark-input text-dark-muted">
-              <UserIcon className="h-6 w-6" />
+          <div className="flex min-h-[360px] flex-col items-center justify-center px-6 py-12 text-center">
+            <div className="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl border border-dark-border bg-dark-input text-brand-primary">
+              <UserPlus className="h-7 w-7" />
             </div>
-            <p className="text-base font-bold text-dark-text">Nenhum usuário cadastrado</p>
-            <p className="mt-1 max-w-sm text-sm text-dark-muted">Crie o primeiro acesso para liberar o painel a outra pessoa.</p>
+            <p className="text-lg font-bold text-dark-text">Nenhum usuário cadastrado</p>
+            <p className="mt-2 max-w-md text-sm leading-6 text-dark-muted">Crie o primeiro acesso individual para tirar o uso compartilhado do login administrativo.</p>
+            <button
+              type="button"
+              onClick={openCreateModal}
+              className="mt-5 inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-lg bg-brand-primary px-4 text-sm font-bold text-brand-contrast transition-colors hover:bg-brand-primary/90"
+            >
+              <UserPlus className="h-4 w-4" />
+              Criar primeiro acesso
+            </button>
           </div>
         ) : filteredUsers.length === 0 ? (
-          <div className="flex h-80 flex-col items-center justify-center px-6 text-center">
-            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-dark-input text-dark-muted">
-              <Search className="h-6 w-6" />
+          <div className="flex min-h-[320px] flex-col items-center justify-center px-6 py-12 text-center">
+            <div className="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl border border-dark-border bg-dark-input text-dark-muted">
+              <Search className="h-7 w-7" />
             </div>
-            <p className="text-base font-bold text-dark-text">Nenhum resultado</p>
-            <p className="mt-1 text-sm text-dark-muted">Ajuste a busca ou limpe os filtros.</p>
+            <p className="text-lg font-bold text-dark-text">Nenhum resultado</p>
+            <p className="mt-2 max-w-md text-sm leading-6 text-dark-muted">Não encontramos usuários com os filtros atuais.</p>
+            <button
+              type="button"
+              onClick={clearFilters}
+              className="mt-5 inline-flex h-10 cursor-pointer items-center justify-center rounded-lg border border-dark-border px-4 text-sm font-bold text-dark-text transition-colors hover:border-brand-primary"
+            >
+              Limpar filtros
+            </button>
           </div>
         ) : (
           <div className="overflow-x-auto">
-            <table className="w-full min-w-[760px] text-left">
-              <thead className="border-b border-dark-border text-xs uppercase tracking-widest text-dark-muted">
+            <table className="w-full min-w-[900px] table-fixed text-left">
+              <thead className="border-b border-dark-border bg-dark-input/35 text-xs uppercase tracking-widest text-dark-muted">
                 <tr>
-                  <th className="px-5 py-3 font-bold">Usuário</th>
-                  <th className="px-5 py-3 font-bold">E-mail</th>
-                  <th className="px-5 py-3 font-bold">Status</th>
-                  <th className="px-5 py-3 text-right font-bold">Criado em</th>
-                  <th className="px-5 py-3 text-right font-bold">Ações</th>
+                  <th className="w-[34%] px-5 py-3 font-bold">Usuário</th>
+                  <th className="w-[24%] px-5 py-3 font-bold">E-mail</th>
+                  <th className="w-[16%] px-5 py-3 font-bold">Perfil</th>
+                  <th className="w-[14%] px-5 py-3 font-bold">Status</th>
+                  <th className="w-[12%] px-5 py-3 text-right font-bold">Ações</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-dark-border">
                 {filteredUsers.map((user) => (
                   <tr key={user.id} className="text-sm transition-colors hover:bg-dark-input/45">
                     <td className="px-5 py-4">
-                      <div className="flex items-center gap-3">
-                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-brand-primary/10 text-sm font-bold text-brand-primary">
+                      <div className="flex min-w-0 items-center gap-3">
+                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-primary/10 text-sm font-bold text-brand-primary">
                           {getInitials(user.name)}
                         </div>
                         <div className="min-w-0">
-                          <p className="truncate font-semibold text-dark-text">{user.name}</p>
+                          <p className="truncate font-bold text-dark-text">{user.name}</p>
+                          <p className="mt-0.5 text-xs font-semibold text-dark-muted">ID {user.id}</p>
                         </div>
                       </div>
                     </td>
                     <td className="px-5 py-4">
                       <div className="flex min-w-0 items-center gap-2 text-dark-muted">
                         <Mail className="h-4 w-4 shrink-0" />
-                        <span className="truncate">{user.email}</span>
+                        <span className="truncate font-semibold">{user.email}</span>
                       </div>
                     </td>
+                    <td className="px-5 py-4">
+                      <span className="inline-flex rounded-full border border-brand-primary/20 bg-brand-primary/10 px-2.5 py-1 text-xs font-bold text-brand-primary">
+                        {getUserRoleLabel(user)}
+                      </span>
+                    </td>
                     <td className="px-5 py-4">
                       <span className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-bold ${
                         user.isActive ? 'bg-emerald-500/10 text-emerald-300' : 'bg-red-500/10 text-red-300'
@@ -382,13 +469,12 @@ const AdminUsers = () => {
                         {user.isActive ? 'Ativo' : 'Inativo'}
                       </span>
                     </td>
-                    <td className="px-5 py-4 text-right text-dark-muted">{formatDateTime(user.createdAt)}</td>
                     <td className="px-5 py-4">
                       <div className="flex justify-end gap-2">
                         <button
                           type="button"
                           onClick={() => openEditModal(user)}
-                          className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border border-dark-border text-dark-muted transition-colors hover:border-brand-primary/50 hover:text-brand-primary"
+                          className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg border border-dark-border text-dark-muted transition-colors hover:border-brand-primary/50 hover:text-brand-primary"
                           aria-label={`Editar ${user.name}`}
                           title="Editar"
                         >
@@ -400,7 +486,7 @@ const AdminUsers = () => {
                             setNotice(null);
                             setUserToDelete(user);
                           }}
-                          className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border border-dark-border text-dark-muted transition-colors hover:border-red-400/50 hover:text-red-300"
+                          className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg border border-dark-border text-dark-muted transition-colors hover:border-red-400/50 hover:text-red-300"
                           aria-label={`Excluir ${user.name}`}
                           title="Excluir"
                         >
@@ -417,15 +503,20 @@ const AdminUsers = () => {
       </section>
 
       {isModalOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-4 py-6">
-          <div className="w-full max-w-lg overflow-hidden rounded-lg border border-dark-border bg-dark-card shadow-2xl">
-            <div className="flex items-start justify-between border-b border-dark-border px-5 py-4">
+        <div className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-black/70 px-4 py-6">
+          <div className="w-full max-w-2xl overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-2xl">
+            <div className="flex items-start justify-between gap-4 border-b border-dark-border px-5 py-4">
+              <div className="flex items-start gap-3">
+                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-dark-border bg-dark-input text-brand-primary">
+                  {editingUser ? <Edit3 className="h-5 w-5" /> : <UserPlus className="h-5 w-5" />}
+                </div>
                 <div>
-                <h2 className="text-lg font-bold text-dark-text">{editingUser ? 'Editar usuário' : 'Novo usuário'}</h2>
-                <p className="mt-1 text-sm text-dark-muted">
-                  {editingUser ? 'Atualize dados, status e senha de acesso.' : 'Crie um acesso individual para o painel.'}
+                  <h2 className="text-lg font-bold text-dark-text">{editingUser ? 'Editar usuário' : 'Novo acesso'}</h2>
+                  <p className="mt-1 text-sm leading-5 text-dark-muted">
+                    {editingUser ? 'Atualize identificação, status e senha.' : 'Crie uma credencial individual para o painel.'}
                   </p>
                 </div>
+              </div>
               <button
                 type="button"
                 onClick={closeModal}
@@ -437,16 +528,23 @@ const AdminUsers = () => {
               </button>
             </div>
 
-            <form onSubmit={editingUser ? handleUpdateUser : handleCreateUser} className="space-y-4 p-5">
+            <form onSubmit={editingUser ? handleUpdateUser : handleCreateUser}>
+              <div className="space-y-5 p-5">
+                <section>
+                  <div className="mb-3">
+                    <h3 className="text-sm font-bold text-dark-text">Identificação</h3>
+                    <p className="mt-1 text-xs font-semibold text-dark-muted">Use um nome reconhecível e um e-mail individual.</p>
+                  </div>
+                  <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                     <label className="block">
                       <span className="mb-2 block text-xs font-bold uppercase tracking-widest text-dark-muted">Nome</span>
-                <div className="flex h-11 items-center gap-3 rounded-lg border border-dark-border bg-dark-input px-3 transition-colors focus-within:border-brand-primary focus-within:ring-1 focus-within:ring-brand-primary">
+                      <div className={inputWrapClassName}>
                         <UserIcon className="h-4 w-4 shrink-0 text-dark-muted" />
                         <input
                           type="text"
                           value={name}
                           onChange={(event) => setName(event.target.value)}
-                    className="min-w-0 flex-1 bg-transparent text-dark-text outline-none placeholder:text-dark-muted"
+                          className={inputClassName}
                           placeholder="Nome completo"
                           required
                           autoFocus
@@ -456,59 +554,88 @@ const AdminUsers = () => {
 
                     <label className="block">
                       <span className="mb-2 block text-xs font-bold uppercase tracking-widest text-dark-muted">E-mail</span>
-                <div className="flex h-11 items-center gap-3 rounded-lg border border-dark-border bg-dark-input px-3 transition-colors focus-within:border-brand-primary focus-within:ring-1 focus-within:ring-brand-primary">
+                      <div className={inputWrapClassName}>
                         <AtSign className="h-4 w-4 shrink-0 text-dark-muted" />
                         <input
                           type="email"
                           value={email}
                           onChange={(event) => setEmail(event.target.value)}
-                    className="min-w-0 flex-1 bg-transparent text-dark-text outline-none placeholder:text-dark-muted"
+                          className={inputClassName}
                           placeholder="usuario@empresa.com"
                           required
                         />
                       </div>
                     </label>
+                  </div>
+                </section>
 
-              <div>
-                <span className="mb-2 block text-xs font-bold uppercase tracking-widest text-dark-muted">{editingUser ? 'Senha' : 'Senha inicial'}</span>
-                <div className="grid grid-cols-2 rounded-lg border border-dark-border bg-dark-input p-1">
+                <section>
+                  <div className="mb-3">
+                    <h3 className="text-sm font-bold text-dark-text">{editingUser ? 'Senha' : 'Senha inicial'}</h3>
+                    <p className="mt-1 text-xs font-semibold text-dark-muted">
+                      {editingUser ? 'Mantenha a senha atual ou defina uma nova.' : 'Gere uma senha temporária ou defina uma senha manual.'}
+                    </p>
+                  </div>
+                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                     <button
                       type="button"
                       onClick={() => setPasswordMode('auto')}
-                    className={`h-9 cursor-pointer rounded-md text-sm font-semibold transition-colors ${passwordMode === 'auto' ? 'bg-dark-card text-dark-text' : 'text-dark-muted hover:text-dark-text'}`}
+                      className={`cursor-pointer rounded-xl border p-4 text-left transition-colors ${
+                        passwordMode === 'auto'
+                          ? 'border-brand-primary/50 bg-brand-primary/10 text-dark-text'
+                          : 'border-dark-border bg-dark-input text-dark-muted hover:border-brand-primary/35 hover:text-dark-text'
+                      }`}
                     >
-                    {editingUser ? 'Manter' : 'Gerar'}
+                      <span className="flex items-center gap-2 text-sm font-bold">
+                        <KeyRound className="h-4 w-4" />
+                        {editingUser ? 'Manter senha' : 'Gerar senha'}
+                      </span>
+                      <span className="mt-1 block text-xs font-semibold opacity-80">
+                        {editingUser ? 'Não altera a credencial atual.' : 'Mostra uma senha para copiar após criar.'}
+                      </span>
                     </button>
                     <button
                       type="button"
                       onClick={() => setPasswordMode('manual')}
-                    className={`h-9 cursor-pointer rounded-md text-sm font-semibold transition-colors ${passwordMode === 'manual' ? 'bg-dark-card text-dark-text' : 'text-dark-muted hover:text-dark-text'}`}
+                      className={`cursor-pointer rounded-xl border p-4 text-left transition-colors ${
+                        passwordMode === 'manual'
+                          ? 'border-brand-primary/50 bg-brand-primary/10 text-dark-text'
+                          : 'border-dark-border bg-dark-input text-dark-muted hover:border-brand-primary/35 hover:text-dark-text'
+                      }`}
                     >
-                    {editingUser ? 'Alterar' : 'Definir'}
+                      <span className="flex items-center gap-2 text-sm font-bold">
+                        <Edit3 className="h-4 w-4" />
+                        {editingUser ? 'Alterar senha' : 'Definir senha'}
+                      </span>
+                      <span className="mt-1 block text-xs font-semibold opacity-80">
+                        Use quando a senha já será combinada fora do sistema.
+                      </span>
                     </button>
                   </div>
 
                   {passwordMode === 'manual' && (
-                  <div className="mt-3 flex h-11 items-center gap-3 rounded-lg border border-dark-border bg-dark-input px-3 transition-colors focus-within:border-brand-primary focus-within:ring-1 focus-within:ring-brand-primary">
+                    <div className="mt-3">
+                      <div className={inputWrapClassName}>
                         <KeyRound className="h-4 w-4 shrink-0 text-dark-muted" />
                         <input
                           type="password"
                           value={password}
                           onChange={(event) => setPassword(event.target.value)}
-                      className="min-w-0 flex-1 bg-transparent text-dark-text outline-none placeholder:text-dark-muted"
+                          className={inputClassName}
                           placeholder="Mínimo de 6 caracteres"
                           minLength={6}
                           required
                         />
                       </div>
-                )}
                     </div>
+                  )}
+                </section>
 
                 {editingUser && (
-                <label className="flex cursor-pointer items-center justify-between rounded-lg border border-dark-border bg-dark-input px-3 py-3">
+                  <label className="flex cursor-pointer items-center justify-between gap-4 rounded-xl border border-dark-border bg-dark-input px-4 py-3">
                     <div>
-                    <span className="block text-sm font-semibold text-dark-text">Usuário ativo</span>
-                    <span className="mt-0.5 block text-xs text-dark-muted">Usuários inativos não conseguem entrar.</span>
+                      <span className="block text-sm font-bold text-dark-text">Usuário ativo</span>
+                      <span className="mt-0.5 block text-xs font-semibold text-dark-muted">Usuários inativos não conseguem entrar.</span>
                     </div>
                     <input
                       type="checkbox"
@@ -520,20 +647,20 @@ const AdminUsers = () => {
                 )}
 
                 {notice && (
-                <div className={`rounded-lg border px-3 py-3 text-sm ${noticeClass}`}>
+                  <div className={`rounded-xl border px-3 py-3 text-sm font-semibold ${noticeClass}`}>
                     <div className="flex items-start gap-2">
                       {notice.tone === 'error' ? <X className="mt-0.5 h-4 w-4 shrink-0" /> : <Check className="mt-0.5 h-4 w-4 shrink-0" />}
                       <div className="min-w-0 flex-1">
                         <p>{notice.text}</p>
                         {notice.temporaryPassword && (
-                        <div className="mt-3 flex gap-2">
-                          <code className="min-w-0 flex-1 truncate rounded-md bg-black/25 px-3 py-2 text-amber-100">
+                          <div className="mt-3 flex flex-col gap-2 sm:flex-row">
+                            <code className="min-w-0 flex-1 truncate rounded-lg bg-black/25 px-3 py-2 text-amber-100">
                               {notice.temporaryPassword}
                             </code>
                             <button
                               type="button"
                               onClick={copyTemporaryPassword}
-                            className="inline-flex h-9 cursor-pointer items-center gap-2 rounded-md border border-amber-400/30 px-3 text-xs font-bold text-amber-100 transition-colors hover:bg-amber-400/10"
+                              className="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-lg border border-amber-400/30 px-3 text-xs font-bold text-amber-100 transition-colors hover:bg-amber-400/10"
                             >
                               <Copy className="h-3.5 w-3.5" />
                               {copyLabel}
@@ -544,13 +671,14 @@ const AdminUsers = () => {
                     </div>
                   </div>
                 )}
+              </div>
 
-              <div className="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">
+              <div className="flex flex-col-reverse gap-2 border-t border-dark-border bg-dark-input/35 px-5 py-4 sm:flex-row sm:justify-end">
                 <button
                   type="button"
                   onClick={closeModal}
                   disabled={isSubmitting}
-                  className="h-10 cursor-pointer rounded-lg border border-dark-border px-4 text-sm font-semibold text-dark-muted transition-colors hover:text-dark-text disabled:cursor-not-allowed disabled:opacity-50"
+                  className="h-10 cursor-pointer rounded-lg border border-dark-border px-4 text-sm font-bold text-dark-muted transition-colors hover:text-dark-text disabled:cursor-not-allowed disabled:opacity-50"
                 >
                   Cancelar
                 </button>
@@ -560,7 +688,7 @@ const AdminUsers = () => {
                   className="inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-lg bg-brand-primary px-4 text-sm font-bold text-brand-contrast transition-colors hover:bg-brand-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
                 >
                   {isSubmitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
-                  {editingUser ? 'Salvar alterações' : 'Criar usuário'}
+                  {editingUser ? 'Salvar alterações' : 'Criar acesso'}
                 </button>
               </div>
             </form>
@@ -570,19 +698,24 @@ const AdminUsers = () => {
 
       {userToDelete && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-4 py-6">
-          <div className="w-full max-w-md overflow-hidden rounded-lg border border-dark-border bg-dark-card shadow-2xl">
-            <div className="border-b border-dark-border px-5 py-4">
+          <div className="w-full max-w-md overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-2xl">
+            <div className="flex items-start gap-3 border-b border-dark-border px-5 py-4">
+              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-red-500/25 bg-red-500/10 text-red-300">
+                <AlertTriangle className="h-5 w-5" />
+              </div>
+              <div>
                 <h2 className="text-lg font-bold text-dark-text">Excluir usuário</h2>
-              <p className="mt-1 text-sm text-dark-muted">Esta ação remove o acesso imediatamente.</p>
+                <p className="mt-1 text-sm leading-5 text-dark-muted">Esta ação remove o acesso imediatamente.</p>
+              </div>
             </div>
             <div className="space-y-4 p-5">
-              <div className="rounded-lg border border-dark-border bg-dark-input p-4">
-                <p className="font-semibold text-dark-text">{userToDelete.name}</p>
-                <p className="mt-1 text-sm text-dark-muted">{userToDelete.email}</p>
+              <div className="rounded-xl border border-dark-border bg-dark-input p-4">
+                <p className="font-bold text-dark-text">{userToDelete.name}</p>
+                <p className="mt-1 text-sm font-semibold text-dark-muted">{userToDelete.email}</p>
               </div>
 
               {notice?.tone === 'error' && (
-                <div className={`rounded-lg border px-3 py-3 text-sm ${noticeClass}`}>
+                <div className={`rounded-xl border px-3 py-3 text-sm font-semibold ${noticeClass}`}>
                   {notice.text}
                 </div>
               )}
@@ -596,7 +729,7 @@ const AdminUsers = () => {
                     setNotice(null);
                   }}
                   disabled={isSubmitting}
-                  className="h-10 cursor-pointer rounded-lg border border-dark-border px-4 text-sm font-semibold text-dark-muted transition-colors hover:text-dark-text disabled:cursor-not-allowed disabled:opacity-50"
+                  className="h-10 cursor-pointer rounded-lg border border-dark-border px-4 text-sm font-bold text-dark-muted transition-colors hover:text-dark-text disabled:cursor-not-allowed disabled:opacity-50"
                 >
                   Cancelar
                 </button>

src/pages/Supplies.tsx

@@ -23,6 +23,7 @@ import {
   Warehouse,
 } from 'lucide-react';
 import { buildConsumptionReferencePath } from '../catalogLinks';
+import PaginationControls from '../components/PaginationControls';
 import { adjustSupplyLotInventory, approveSupplyReceipt, consumeSupplyLotForProduction, createSupplyFabricPlan, createSupplyReceipt, deleteSupplyFabricPlan, deleteSupplyReceipt, fetchSupplySummary } from '../dataService';
 import type { SupplyFabricPlan, SupplyLot, SupplyMovement, SupplyPurchaseNeed, SupplyReceipt, SupplySummary } from '../types';
 
@@ -1148,6 +1149,8 @@ const PurchaseNeedsScreen = () => {
   const [summary, setSummary] = useState<SupplySummary>(emptySupplySummary);
   const [isLoading, setIsLoading] = useState(true);
   const [search, setSearch] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(10);
 
   const loadSummary = async () => {
     const nextSummary = await fetchSupplySummary();
@@ -1178,6 +1181,10 @@ const PurchaseNeedsScreen = () => {
   const visibleNeeds = summary.purchaseNeeds.filter(need => (
     !normalizedSearch || normalizeSearch(`${need.material} ${need.suppliers.join(' ')} ${need.colors.join(' ')}`).includes(normalizedSearch)
   ));
+  const totalPages = Math.ceil(visibleNeeds.length / itemsPerPage);
+  const safeCurrentPage = Math.min(currentPage, totalPages || 1);
+  const startIndex = (safeCurrentPage - 1) * itemsPerPage;
+  const paginatedNeeds = visibleNeeds.slice(startIndex, startIndex + itemsPerPage);
   const purchaseItemCount = summary.purchaseNeeds.filter(need => need.purchaseKg > 0).length;
   const suggestedPurchaseSummary = summarizePurchaseNeeds(summary.purchaseNeeds);
   const pendingSupplierCount = new Set(summary.purchaseNeeds.flatMap(need => need.suppliers)).size;
@@ -1230,7 +1237,15 @@ const PurchaseNeedsScreen = () => {
         </div>
         <label className="relative mt-4 block">
           <Search className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-dark-muted" />
-          <input value={search} onChange={(event) => setSearch(event.target.value)} className={`${inputClassName} pl-9`} placeholder="Buscar por material, fornecedor ou cor..." />
+          <input
+            value={search}
+            onChange={(event) => {
+              setSearch(event.target.value);
+              setCurrentPage(1);
+            }}
+            className={`${inputClassName} pl-9`}
+            placeholder="Buscar por material, fornecedor ou cor..."
+          />
         </label>
         {isLoading ? (
           <div className={emptyStateClassName}>
@@ -1239,20 +1254,33 @@ const PurchaseNeedsScreen = () => {
           </div>
         ) : visibleNeeds.length ? (
           <div className="mt-4 overflow-hidden rounded-xl border border-dark-border">
-            <div className="hidden grid-cols-[1.3fr_110px_110px_110px_110px_110px] border-b border-dark-border bg-dark-input/40 px-4 py-3 text-xs font-bold uppercase tracking-widest text-dark-muted lg:grid">
-              <span>Material</span>
-              <span>Planejado</span>
-              <span>Estoque</span>
-              <span>Pendente</span>
-              <span>Comprar</span>
-              <span>Cobertura</span>
-            </div>
-            <div className="divide-y divide-dark-border">
-              {visibleNeeds.map(need => {
+            <div className="overflow-x-auto">
+              <table className="w-full min-w-[920px] table-fixed border-collapse">
+                <colgroup>
+                  <col />
+                  <col className="w-[120px]" />
+                  <col className="w-[120px]" />
+                  <col className="w-[120px]" />
+                  <col className="w-[120px]" />
+                  <col className="w-[150px]" />
+                </colgroup>
+                <thead className="border-b border-dark-border bg-dark-input/40 text-xs font-bold uppercase tracking-widest text-dark-muted">
+                  <tr>
+                    <th scope="col" className="px-4 py-3 text-left">Material</th>
+                    <th scope="col" className="px-4 py-3 text-right">Planejado</th>
+                    <th scope="col" className="px-4 py-3 text-right">Estoque</th>
+                    <th scope="col" className="px-4 py-3 text-right">Pendente</th>
+                    <th scope="col" className="px-4 py-3 text-right">Comprar</th>
+                    <th scope="col" className="px-4 py-3 text-left">Cobertura</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-dark-border bg-dark-card">
+              {paginatedNeeds.map(need => {
                 const referenceProduct = need.products?.[0];
                 return (
-                  <div key={need.material} className="grid grid-cols-1 gap-3 bg-dark-card px-4 py-4 lg:grid-cols-[1.3fr_110px_110px_110px_110px_110px] lg:items-center">
-                    <div>
+                  <tr key={need.material}>
+                    <td className="px-4 py-4 align-middle">
+                      <div className="min-w-0">
                       <p className="text-sm font-bold text-dark-text">{need.material}</p>
                       <div className="mt-1 flex flex-wrap items-center gap-2">
                         <p className="text-xs font-semibold text-dark-muted">
@@ -1278,11 +1306,13 @@ const PurchaseNeedsScreen = () => {
                         </p>
                       ) : null}
                       </div>
-                    <p className="text-sm font-bold text-dark-text">{formatNeedQuantity(need, need.plannedKg)}</p>
-                    <p className="text-sm font-bold text-dark-text">{formatNeedQuantity(need, need.stockKg)}</p>
-                    <p className="text-sm font-bold text-dark-text">{formatNeedQuantity(need, need.pendingKg)}</p>
-                    <p className={`text-sm font-bold ${need.purchaseKg > 0 ? 'text-red-300' : 'text-emerald-300'}`}>{formatNeedQuantity(need, need.purchaseKg)}</p>
-                    <span className={`w-fit rounded-full border px-2.5 py-1 text-xs font-bold ${
+                    </td>
+                    <td className="px-4 py-4 text-right align-middle text-sm font-bold text-dark-text">{formatNeedQuantity(need, need.plannedKg)}</td>
+                    <td className="px-4 py-4 text-right align-middle text-sm font-bold text-dark-text">{formatNeedQuantity(need, need.stockKg)}</td>
+                    <td className="px-4 py-4 text-right align-middle text-sm font-bold text-dark-text">{formatNeedQuantity(need, need.pendingKg)}</td>
+                    <td className={`px-4 py-4 text-right align-middle text-sm font-bold ${need.purchaseKg > 0 ? 'text-amber-300' : 'text-emerald-300'}`}>{formatNeedQuantity(need, need.purchaseKg)}</td>
+                    <td className="px-4 py-4 align-middle">
+                      <span className={`inline-flex whitespace-nowrap rounded-full border px-2.5 py-1 text-xs font-bold ${
                       need.missingReference
                         ? 'border-red-400/30 bg-red-400/10 text-red-300'
                         : need.status === 'critical'
@@ -1293,10 +1323,30 @@ const PurchaseNeedsScreen = () => {
                     }`}>
                       {need.missingReference ? 'Sem referência' : purchaseStatusLabels[need.status]}
                     </span>
-                  </div>
+                    </td>
+                  </tr>
                 );
               })}
+                </tbody>
+              </table>
             </div>
+            <PaginationControls
+              totalItems={visibleNeeds.length}
+              currentPage={safeCurrentPage}
+              totalPages={totalPages}
+              pageSize={itemsPerPage}
+              pageSizeOptions={[10, 20, 50, 100]}
+              itemLabel="materiais"
+              pageSizeLabel="itens por página"
+              startIndex={startIndex}
+              endIndex={Math.min(startIndex + itemsPerPage, visibleNeeds.length)}
+              onPageChange={setCurrentPage}
+              onPageSizeChange={(pageSize) => {
+                setItemsPerPage(pageSize);
+                setCurrentPage(1);
+              }}
+              className="border-t border-dark-border px-4 py-3"
+            />
           </div>
         ) : (
           <div className={emptyStateClassName}>
@@ -1306,10 +1356,6 @@ const PurchaseNeedsScreen = () => {
           </div>
         )}
       </div>
-      <div className={`${panelClassName} p-5`}>
-        <h2 className="text-base font-bold text-dark-text">Como o fluxo está conectado</h2>
-        <p className="mt-2 text-sm font-semibold text-dark-muted">Plano de malha cria demanda. Recebimento pendente entra como material a receber. Aprovar recebimento move para estoque e movimentações.</p>
-      </div>
     </div>
   );
 };