1 files changed, 63 insertions, 0 deletions
diff --git a/web/src/pages/SettingsPage.tsx b/web/src/pages/SettingsPage.tsx
new file mode 100644
index 0000000..2e56213
--- /dev/null
+++ b/web/src/pages/SettingsPage.tsx
@@ -0,0 +1,63 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '@/lib/api';
+import { useToast } from '@/context/ToastContext';
+import styles from './SettingsPage.module.css';
+
+export default function SettingsPage() {
+  const queryClient = useQueryClient();
+  const { addToast } = useToast();
+
+  const { data: settings, isLoading } = useQuery({
+    queryKey: ['settings'],
+    queryFn: () => api.settings.get(),
+  });
+
+  const mutation = useMutation({
+    mutationFn: (newVal: boolean) => api.settings.update({ allowRequesterChat: newVal }),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['settings'] });
+      addToast('Configuração atualizada com sucesso', 'success');
+    },
+    onError: (err: any) => {
+      addToast(`Erro ao atualizar: ${err.message}`, 'error');
+    }
+  });
+
+  if (isLoading) {
+    return (
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <div className="spinner" /> Carregando configurações...
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.header}>
+        <h2 className={styles.heading}>Configurações do Sistema</h2>
+        <p className={styles.subheading}>Gerencie as preferências globais da plataforma de chamados.</p>
+      </div>
+
+      <div className={styles.card}>
+        <div className={styles.settingRow}>
+          <div className={styles.settingInfo}>
+            <h3 className={styles.settingTitle}>Chat de Solicitantes</h3>
+            <p className={styles.settingDesc}>
+              Se ativado, usuários padrão (requesters) poderão enviar e receber mensagens dentro dos chamados. Se desativado, apenas agentes e administradores poderão interagir no chat.
+            </p>
+          </div>
+          
+          <label className={styles.switch}>
+            <input 
+              type="checkbox" 
+              checked={settings?.allowRequesterChat ?? true} 
+              disabled={mutation.isPending}
+              onChange={(e) => mutation.mutate(e.target.checked)}
+            />
+            <span className={styles.slider}></span>
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+}