Dayflow

Il diario di lavoro che si scrive da solo, guardando cosa fai al computer

Cosa fa

Un registro del tempo automatico: osserva in modo privato lo schermo e costruisce la cronologia di quello che hai fatto davvero durante la giornata.

Come guadagna

Progetto open source su GitHub con oltre 7.000 stelle, che non dichiara incassi. Ha licenza MIT: puoi partire dal suo codice, anche per un prodotto a pagamento, mantenendo il nome degli autori originali. Idee nostre per guadagnare: versione a pagamento per freelance che devono fatturare le ore ai clienti.

Rendilo tuo

Per freelance e consulenti italiani: ore per cliente pronte per la fattura.
La privacy è il punto chiave: tutto resta sul computer.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Dove Va il Tempo": un'estensione per il browser che registra in automatico, solo sul tuo computer, quanto tempo passi su ogni sito e progetto, e mostra a fine giornata la cronologia di cosa hai fatto davvero. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina iniziale con un esempio di giornata e il pulsante per installare l'estensione
2. Cronologia della giornata a blocchi colorati per categoria (lavoro, comunicazione, svago)
3. Regole: quali siti sono di quale progetto o categoria
4. Settimana: ore per progetto e per categoria
5. Pagina "I tuoi dati restano qui"

Stile: calmo e chiaro: sfondo bianco, blu #2563EB per il lavoro, verde #16A34A per la comunicazione, arancio #F97316 per lo svago, carattere "Inter", cronologia orizzontale a blocchi. Nessuna immagine generica di stock.

Tutto deve funzionare perfettamente da telefono. Tutti i testi in italiano, chiari e senza parole tecniche.

2. Database, account e sicurezza

Collega il progetto a Supabase e attiva la registrazione con email e password.

Crea queste tabelle:
- nessun dato di navigazione sul server: tutto resta nell'estensione, sul computer
- "profili": piano, per la licenza

Regole di sicurezza obbligatorie:
- la cronologia non lascia mai il computer, a meno che l'utente non esporti un file
- l'estensione registra solo il dominio e il tempo, mai il contenuto delle pagine
- si mette in pausa con un clic e si escludono siti a scelta

Usa esattamente il codice SQL che trovi nei "Dettagli tecnici" di questa scheda: eseguilo nel SQL Editor di Supabase prima di continuare, poi collega le pagine alle tabelle.

3. Registrazione privata nel browser

L'estensione (Chrome e Edge, Manifest V3) registra solo: dominio della scheda attiva, inizio e fine, e se l'utente era inattivo (nessun movimento per più di 2 minuti). Niente indirizzi completi, niente titoli, niente contenuti. Salva tutto nella memoria locale dell'estensione (codice nei Dettagli tecnici).

Le regole collegano i domini ai progetti e alle categorie ("figma.com e github.com/mio-progetto → Progetto Alfa"). I siti esclusi (banca, salute) non vengono mai registrati.

Pausa con un clic dall'icona. La pagina della cronologia è dentro l'estensione e funziona senza internet.

4. Settimana ed esportazione

Vista settimanale con le ore per progetto e categoria, il tempo "a pezzetti" (molti cambi di scheda) e le ore più concentrate.

Esportazione in CSV per compilare i timesheet o fatturare ai clienti. La licenza Pro si attiva con l'account, senza mai inviare la cronologia.

5. Pagamenti con Stripe

Aggiungi un pagamento singolo di 9,99 € una volta sola. Il pagamento sblocca progetti illimitati, la vista settimanale e l'esportazione CSV.

A pagamento riuscito il webhook imposta "piano" a "pro" nella tabella "profili", sulla riga dell'utente indicata in client_reference_id.

Per la sessione di pagamento e il webhook segui la guida "Pagamenti con Stripe" di Fattibile.

6. Controlli specifici di questo progetto

Oltre ai controlli della guida "Controllo finale", verifica in particolare:
1. Privacy: dopo una giornata di uso, controlla la memoria dell'estensione: devono esserci solo domini e orari, mai indirizzi completi o titoli.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

L'estensione che conta il tempo per sito

Il service worker dell'estensione registra il dominio della scheda attiva e quanto ci resti, fermandosi quando sei inattivo o il browser non è in primo piano.

// background.ts (service worker dell'estensione, Manifest V3)
// Permessi nel manifest: "tabs", "idle", "storage"
type Blocco = { dominio: string; inizio: number; fine: number };
let corrente: { dominio: string; inizio: number } | null = null;

const dominio = (url?: string) => {
  try { return url ? new URL(url).hostname.replace(/^www\./, "") : null; } catch { return null; }
};

async function chiudiBlocco() {
  if (!corrente) return;
  const blocco: Blocco = { ...corrente, fine: Date.now() };
  corrente = null;
  if (blocco.fine - blocco.inizio < 5000) return;              // meno di 5 secondi: si ignora
  const giorno = new Date(blocco.inizio).toISOString().slice(0, 10);
  const salvati = (await chrome.storage.local.get(giorno))[giorno] ?? [];
  await chrome.storage.local.set({ [giorno]: [...salvati, blocco] });
}

async function aggiorna() {
  const { esclusi = [], inPausa = false } = await chrome.storage.local.get(["esclusi", "inPausa"]);
  const [scheda] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
  const d = dominio(scheda?.url);
  if (corrente?.dominio === d) return;
  await chiudiBlocco();
  if (d && !inPausa && !esclusi.includes(d)) corrente = { dominio: d, inizio: Date.now() };
}

chrome.tabs.onActivated.addListener(aggiorna);
chrome.tabs.onUpdated.addListener((_, info) => { if (info.url) void aggiorna(); });
chrome.windows.onFocusChanged.addListener((id) => (id === chrome.windows.WINDOW_ID_NONE ? chiudiBlocco() : aggiorna()));
chrome.idle.setDetectionInterval(120);                          // inattivo dopo 2 minuti
chrome.idle.onStateChanged.addListener((stato) => (stato === "active" ? aggiorna() : chiudiBlocco()));

Pezzi comuni a tutti i progetti

Glossario

CSV: Un file di testo con i dati separati da virgole, che si apre con Excel.
Estensione del browser: Un piccolo programma che si aggiunge a Chrome o Edge e ne amplia le funzioni.
Manifest V3: Le regole attuali di Chrome per le estensioni: più sicure e con permessi dichiarati.