Add Olist reconnection flow

backend/services/olistService.js

@@ -277,7 +277,7 @@ const createAuthorizationUrl = async () => {
     const params = new URLSearchParams({
         client_id: OLIST_CLIENT_ID,
         redirect_uri: OLIST_REDIRECT_URI,
-        scope: 'openid',
+        scope: 'openid offline_access',
         response_type: 'code',
         state
     });

src/pages/OlistSync.tsx

@@ -106,6 +106,7 @@ const OlistSync = () => {
   }, [selectedRunId, runDetails?.run.status, detailsPages, loadRunDetails]);
 
   const latestRun = status?.runs[0] || null;
+  const tokenExpired = Boolean(status?.tokenExpiresAt && new Date(status.tokenExpiresAt).getTime() <= now);
   const completionPercent = useMemo(() => {
     const cache = status?.productCache;
     if (!cache?.total) return 0;
@@ -198,6 +199,9 @@ const OlistSync = () => {
             </button>
           ) : (
             <>
+              <button type="button" onClick={() => void connect()} disabled={!status?.configured || isActionLoading} className="inline-flex h-10 items-center gap-2 rounded-xl 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 cursor-pointer">
+                {isActionLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Link2 className="h-4 w-4" />} Reconectar Olist
+              </button>
               <button type="button" onClick={() => void startSync()} disabled={isActionLoading || status.syncInProgress} className="inline-flex h-10 items-center gap-2 rounded-xl 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 cursor-pointer">
                 {isActionLoading || status.syncInProgress ? <Loader2 className="h-4 w-4 animate-spin" /> : <CloudDownload className="h-4 w-4" />} {status.syncInProgress ? 'Sincronizando' : 'Sincronizar agora'}
               </button>
@@ -218,8 +222,8 @@ const OlistSync = () => {
       <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
         <div className="rounded-2xl border border-dark-border bg-dark-card p-5">
           <div className="flex items-center justify-between"><span className="text-xs font-bold uppercase tracking-widest text-dark-muted">Conexão</span><Link2 className="h-4 w-4 text-brand-primary" /></div>
-          <p className={`mt-4 text-lg font-bold ${status?.connected ? 'text-emerald-300' : 'text-dark-text'}`}>{status?.connected ? 'Conectada' : 'Não conectada'}</p>
-          <p className="mt-1 text-xs font-semibold text-dark-muted">Token expira: {formatDateTime(status?.tokenExpiresAt || null)}</p>
+          <p className={`mt-4 text-lg font-bold ${status?.connected && !tokenExpired ? 'text-emerald-300' : tokenExpired ? 'text-amber-200' : 'text-dark-text'}`}>{status?.connected ? (tokenExpired ? 'Reconexão necessária' : 'Conectada') : 'Não conectada'}</p>
+          <p className="mt-1 text-xs font-semibold text-dark-muted">{tokenExpired ? `Token expirado: ${formatDateTime(status?.tokenExpiresAt || null)}` : `Token expira: ${formatDateTime(status?.tokenExpiresAt || null)}`}</p>
         </div>
         <div className="rounded-2xl border border-dark-border bg-dark-card p-5">
           <div className="flex items-center justify-between"><span className="text-xs font-bold uppercase tracking-widest text-dark-muted">Execução atual</span><Timer className="h-4 w-4 text-brand-primary" /></div>