Fix pagination clamp, fetch error handling, catch-all route, README honesty

- Users: clamp page to valid range when totalPages changes (snaps to new
  last page after deleting the last item on the last page)
- Users/Dashboard: add .catch to api fetches with an error state, message
  and retry button instead of an infinite skeleton
- App: add path="*" catch-all route redirecting to home
- README: label the auth as a client-side mock/demo login (not production
  security)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: Samuel Ferreira

README.md

@@ -14,7 +14,7 @@ Painel administrativo de nível profissional: autenticação, CRUD completo, tab
 
 <p align="center">
   <a href="https://samuelf27.github.io/admin-dashboard/"><b>🔗 Ver demo ao vivo</b></a>
-  &nbsp;·&nbsp; 🔑 <code>admin@empresa.com</code> / <code>123456</code>
+  &nbsp;·&nbsp; 🔑 Login de demonstração — <code>admin@empresa.com</code> / <code>123456</code> (ou qualquer e-mail válido + senha de 4+ caracteres)
 </p>
 
 <p align="center"><img src="https://raw.githubusercontent.com/Samuelf27/admin-dashboard/main/preview.png" alt="Preview do painel" width="820" /></p>
@@ -27,7 +27,7 @@ Um **painel administrativo completo** como os usados em produtos corporativos 
 
 ## ✨ Funcionalidades
 
-- 🔐 **Autenticação** com rota protegida e sessão persistida
+- 🔐 **Login de demonstração (mock)** com rota protegida e sessão persistida — validação apenas no cliente (qualquer e-mail com `@` e senha de 4+ caracteres entra; o token é fictício e descartado). **Não é segurança de produção.**
 - 👥 **CRUD completo de usuários** — criar, editar e remover com **modal e validação**
 - 🔎 **Tabela de dados** com **busca**, **ordenação por coluna** e **paginação**
 - 📈 **Dashboard** com KPIs e gráficos (área e pizza) via Recharts

src/App.tsx

@@ -1,4 +1,4 @@
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route, Navigate } from 'react-router-dom';
 import Layout from './components/Layout';
 import ProtectedRoute from './components/ProtectedRoute';
 import Login from './pages/Login';
@@ -21,6 +21,7 @@ export default function App() {
         <Route path="/usuarios" element={<Users />} />
         <Route path="/config" element={<Settings />} />
       </Route>
+      <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
   );
 }

src/pages/Dashboard.tsx

@@ -13,12 +13,19 @@ export default function Dashboard() {
   const [metrics, setMetrics] = useState<Metric[] | null>(null);
   const [sales, setSales] = useState<SalesPoint[] | null>(null);
   const [cats, setCats] = useState<CategorySlice[] | null>(null);
+  const [error, setError] = useState(false);
 
-  useEffect(() => {
-    api.getMetrics().then(setMetrics);
-    api.getSales().then(setSales);
-    api.getCategories().then(setCats);
-  }, []);
+  function load() {
+    setError(false);
+    setMetrics(null); setSales(null); setCats(null);
+    Promise.all([
+      api.getMetrics().then(setMetrics),
+      api.getSales().then(setSales),
+      api.getCategories().then(setCats),
+    ]).catch(() => setError(true));
+  }
+
+  useEffect(() => { load(); }, []);
 
   return (
     <div className="space-y-6">
@@ -27,6 +34,13 @@ export default function Dashboard() {
         <p className="text-sm text-slate-500">Acompanhe os principais indicadores do negócio.</p>
       </div>
 
+      {error && (
+        <div className="flex items-center justify-between gap-3 rounded-2xl border border-rose-200 bg-rose-50 px-5 py-4 text-sm text-rose-700 dark:border-rose-500/30 dark:bg-rose-500/10 dark:text-rose-400">
+          <span>Erro ao carregar os dados do dashboard.</span>
+          <button onClick={load} className="font-semibold hover:underline">Tentar novamente</button>
+        </div>
+      )}
+
       {/* KPIs */}
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
         {metrics

src/pages/Users.tsx

@@ -24,6 +24,7 @@ const EMPTY: FormState = { name: '', email: '', role: 'Viewer', status: 'Ativo'
 export default function Users() {
   const { notify } = useToast();
   const [users, setUsers] = useState<User[] | null>(null);
+  const [error, setError] = useState(false);
   const [search, setSearch] = useState('');
   const [sort, setSort] = useState<{ key: SortKey; dir: 'asc' | 'desc' }>({ key: 'name', dir: 'asc' });
   const [page, setPage] = useState(1);
@@ -35,7 +36,13 @@ export default function Users() {
   const [errors, setErrors] = useState<Partial<Record<keyof FormState, string>>>({});
   const [saving, setSaving] = useState(false);
 
-  useEffect(() => { api.listUsers().then(setUsers); }, []);
+  function loadUsers() {
+    setError(false);
+    setUsers(null);
+    api.listUsers().then(setUsers).catch(() => setError(true));
+  }
+
+  useEffect(() => { loadUsers(); }, []);
 
   const filtered = useMemo(() => {
     if (!users) return [];
@@ -51,6 +58,11 @@ export default function Users() {
   const totalPages = Math.max(1, Math.ceil(filtered.length / PER_PAGE));
   const pageItems = filtered.slice((page - 1) * PER_PAGE, page * PER_PAGE);
 
+  // Mantém a página dentro do intervalo válido após remoções/filtros.
+  useEffect(() => {
+    setPage((p) => Math.min(Math.max(1, p), totalPages));
+  }, [totalPages]);
+
   function toggleSort(key: SortKey) {
     setSort((s) => ({ key, dir: s.key === key && s.dir === 'asc' ? 'desc' : 'asc' }));
   }
@@ -147,7 +159,16 @@ export default function Users() {
               </tr>
             </thead>
             <tbody>
-              {users === null ? (
+              {error ? (
+                <tr>
+                  <td colSpan={6} className="px-5 py-10 text-center text-slate-400">
+                    Erro ao carregar usuários.
+                    <button onClick={loadUsers} className="ml-2 font-medium text-brand-600 hover:underline">
+                      Tentar novamente
+                    </button>
+                  </td>
+                </tr>
+              ) : users === null ? (
                 Array.from({ length: 6 }).map((_, i) => (
                   <tr key={i} className="border-b border-slate-100 dark:border-slate-800">
                     <td colSpan={6} className="px-5 py-4"><div className="h-5 animate-pulse rounded bg-slate-200 dark:bg-slate-800" /></td>