diff --git a/package.json b/package.json
index ffb5b21..dcc43ba 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "simpl_result_scaffold",
"private": true,
- "version": "0.2.11",
+ "version": "0.2.12",
"type": "module",
"scripts": {
"dev": "vite",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 1cf1734..4b6759c 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
[package]
name = "simpl-result"
-version = "0.2.11"
+version = "0.2.12"
description = "Personal finance management app"
authors = ["you"]
edition = "2021"
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index f6f53ad..528beb1 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
{
"$schema": "https://schema.tauri.app/config/2",
"productName": "Simpl Résultat",
- "version": "0.2.11",
+ "version": "0.2.12",
"identifier": "com.simpl.resultat",
"build": {
"beforeDevCommand": "npm run dev",
diff --git a/src/App.tsx b/src/App.tsx
index 6055eee..03ec323 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,7 @@ import AdjustmentsPage from "./pages/AdjustmentsPage";
import BudgetPage from "./pages/BudgetPage";
import ReportsPage from "./pages/ReportsPage";
import SettingsPage from "./pages/SettingsPage";
+import DocsPage from "./pages/DocsPage";
export default function App() {
return (
@@ -22,6 +23,7 @@ export default function App() {
} />
} />
} />
+ } />
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 15b41e4..4cc91a1 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -410,6 +410,10 @@
"tryAgain": "Try again"
}
},
+ "userGuide": {
+ "title": "User Guide",
+ "description": "Learn how to use all features of the app"
+ },
"dataSafeNotice": "Your data is safe — only the app binary is replaced, your database is not modified.",
"help": {
"title": "About Settings",
@@ -443,6 +447,215 @@
"nov": "Nov",
"dec": "Dec"
},
+ "docs": {
+ "title": "User Guide",
+ "backToSettings": "Back to Settings",
+ "print": "Print",
+ "features": "Features",
+ "howTo": "How To",
+ "quickStart": "Quick Start",
+ "tipsHeader": "Tips",
+ "gettingStarted": {
+ "title": "Getting Started",
+ "overview": "Simpl'Result helps you track your personal finances by importing bank statements, categorizing transactions, setting budgets, and generating reports.",
+ "features": [
+ "Import CSV bank statements from multiple sources",
+ "Automatic and manual transaction categorization",
+ "Budget planning with monthly and annual views",
+ "Visual reports and trend analysis"
+ ],
+ "steps": [
+ "Go to Settings and set your import folder — create one subfolder per bank account",
+ "Place your CSV bank statements in the corresponding subfolder",
+ "Open the Import page and configure your source (column mapping, delimiter, date format)",
+ "Import your transactions, then head to Categories to set up keyword rules",
+ "Use Auto-categorize on the Transactions page to apply your rules in bulk",
+ "Set up your Budget and track progress via Reports"
+ ],
+ "tips": [
+ "You can switch between English and French using the language selector in the sidebar",
+ "Each page has a help icon (?) in the header with quick tips",
+ "Your data is stored locally on your computer — nothing is sent to the cloud"
+ ]
+ },
+ "dashboard": {
+ "title": "Dashboard",
+ "overview": "The Dashboard gives you an at-a-glance summary of your financial situation for a selected time period.",
+ "features": [
+ "Balance, income, and expense summary cards",
+ "Expense breakdown by category (pie chart)",
+ "Recent transactions list",
+ "Adjustable time period selector"
+ ],
+ "steps": [
+ "Use the period selector in the top-right to choose a time range (month, 3 months, year, etc.)",
+ "Review the summary cards for your balance, total income, and total expenses",
+ "Check the pie chart to see how your spending is distributed across categories",
+ "Scroll down to see your most recent transactions"
+ ],
+ "tips": [
+ "The balance is calculated as income minus expenses for the selected period",
+ "Click on a category in the pie chart to view its transactions"
+ ]
+ },
+ "import": {
+ "title": "Import",
+ "overview": "Import bank statements from CSV files using a step-by-step wizard. Each bank account is represented as a source folder.",
+ "features": [
+ "Multi-step import wizard with data preview",
+ "Configurable column mapping, delimiter, and date format",
+ "Automatic duplicate detection (within batch and against existing data)",
+ "Import templates to save and reuse source configurations",
+ "Import history with the ability to delete past imports"
+ ],
+ "steps": [
+ "Set your import folder via the folder picker at the top of the page",
+ "Create a subfolder for each bank/source and place CSV files inside",
+ "Click on a source to open the import wizard",
+ "Configure the delimiter, encoding, date format, and column mapping",
+ "Select which files to import and preview the parsed data",
+ "Check for duplicates, review the summary, then confirm the import"
+ ],
+ "tips": [
+ "Save your configuration as a template so you don't have to reconfigure each time",
+ "Files already imported are marked with a badge — re-importing them will trigger duplicate detection",
+ "You can delete an import from the history to remove all its transactions"
+ ]
+ },
+ "transactions": {
+ "title": "Transactions",
+ "overview": "Browse, filter, sort, and categorize all your imported transactions. This is where you organize your financial data.",
+ "features": [
+ "Search and filter by description, category, source, or date range",
+ "Quick period selectors (this month, last month, this year, etc.)",
+ "Sortable columns (date, description, amount, category)",
+ "Inline category assignment via dropdown",
+ "Auto-categorize based on keyword rules",
+ "Add keywords directly from a transaction",
+ "Transaction notes"
+ ],
+ "steps": [
+ "Use the filter bar to narrow down transactions by text, category, source, or date",
+ "Click a column header to sort ascending or descending",
+ "To categorize a transaction, click its category dropdown and select a category",
+ "To auto-categorize all uncategorized transactions, click the Auto-categorize button",
+ "To add a keyword rule from a transaction, click the + icon and enter the keyword"
+ ],
+ "tips": [
+ "Use the quick period buttons (This month, Last month, etc.) for fast date filtering",
+ "Auto-categorize only affects uncategorized transactions — it won't overwrite manual assignments",
+ "Adding a keyword from a transaction pre-fills the category so you can quickly build rules"
+ ]
+ },
+ "categories": {
+ "title": "Categories",
+ "overview": "Manage your category tree with subcategories, keyword rules for auto-categorization, and custom colors.",
+ "features": [
+ "Hierarchical categories with parent/child relationships",
+ "Three category types: Expense, Income, Transfer",
+ "Keyword rules with priority levels for auto-categorization",
+ "Custom colors for chart display",
+ "Toggle categories as inputable or non-inputable",
+ "Re-initialize categories to defaults"
+ ],
+ "steps": [
+ "Click Add Category to create a new category — choose a name, type, and optional parent",
+ "Select a category in the tree to view its details and keyword list",
+ "Add keywords that match transaction descriptions for auto-categorization",
+ "Set keyword priority to resolve conflicts when multiple categories match",
+ "Use the color picker to assign a custom color for charts"
+ ],
+ "tips": [
+ "Non-inputable categories are hidden from budget and transaction dropdowns but still visible in reports",
+ "Higher priority keywords win when multiple categories match the same transaction",
+ "Use Re-initialize to reset categories to defaults — this will unlink all transaction categories"
+ ]
+ },
+ "adjustments": {
+ "title": "Adjustments",
+ "overview": "Add manual entries that don't come from bank imports — useful for expected expenses, income, or corrections not yet in your statements.",
+ "features": [
+ "Create named adjustment groups with multiple entries",
+ "Assign a category to each entry",
+ "Mark adjustments as recurring"
+ ],
+ "steps": [
+ "Click New Adjustment to create an adjustment group",
+ "Add entries with a description, amount, date, and category",
+ "Toggle the recurring flag if the adjustment should repeat each period"
+ ],
+ "tips": [
+ "Adjustments appear in your budget actuals alongside imported transactions",
+ "Use adjustments for planned expenses that haven't hit your bank account yet"
+ ]
+ },
+ "budget": {
+ "title": "Budget",
+ "overview": "Plan your monthly budget for each category and track planned vs. actual spending throughout the year.",
+ "features": [
+ "Monthly budget grid for all categories",
+ "Annual column with automatic totals",
+ "Split annual amount evenly across 12 months",
+ "Budget templates to save and apply configurations",
+ "Parent category subtotals"
+ ],
+ "steps": [
+ "Use the year navigator to select the budget year",
+ "Click on any month cell to enter a planned amount",
+ "Press Enter to save, Escape to cancel, or Tab to move to the next month",
+ "Use the split button (on the Annual column) to distribute evenly across all months",
+ "Save your budget as a template to reuse it in future years"
+ ],
+ "tips": [
+ "The Annual column auto-sums all 12 months — a warning appears if monthly totals don't match",
+ "Templates can be applied to specific months or all 12 at once",
+ "Parent categories show subtotals aggregated from their children"
+ ]
+ },
+ "reports": {
+ "title": "Reports",
+ "overview": "Visualize your financial data with interactive charts and compare your budget plan against actual spending.",
+ "features": [
+ "Monthly Trends: income vs. expenses over time (bar chart)",
+ "Expenses by Category: spending breakdown (pie chart)",
+ "Category Over Time: track how each category evolves (line chart)",
+ "Budget vs Actual: monthly and year-to-date comparison table"
+ ],
+ "steps": [
+ "Use the tabs to switch between Trends, By Category, Over Time, and Budget vs Actual views",
+ "Adjust the time period using the period selector",
+ "In the pie chart, click a category to hide/show it",
+ "In Budget vs Actual, toggle between Monthly and Year-to-Date views"
+ ],
+ "tips": [
+ "Hidden categories are remembered while you stay on the page — click Show All to reset",
+ "The period selector applies to all chart tabs simultaneously",
+ "Budget vs Actual shows dollar and percentage variance for each category"
+ ]
+ },
+ "settings": {
+ "title": "Settings",
+ "overview": "Configure app preferences, check for updates, and manage your data with export/import tools.",
+ "features": [
+ "App version display",
+ "Automatic update checker with one-click install",
+ "Data export (transactions, categories, or both) in JSON or CSV format",
+ "Data import from a previously exported file",
+ "Optional encryption for exported files"
+ ],
+ "steps": [
+ "Click Check for Updates to see if a new version is available",
+ "Use the Data Management section to export or import your data",
+ "When exporting, choose what to include and optionally set a password for encryption",
+ "When importing, select a previously exported file — encrypted files will prompt for the password"
+ ],
+ "tips": [
+ "Updates only replace the app binary — your database is never modified",
+ "Change the app language using the language selector in the sidebar",
+ "Export regularly to keep a backup of your data"
+ ]
+ }
+ },
"common": {
"save": "Save",
"cancel": "Cancel",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index cefd88c..441d23d 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -410,6 +410,10 @@
"tryAgain": "Réessayer"
}
},
+ "userGuide": {
+ "title": "Guide d'utilisation",
+ "description": "Apprenez à utiliser toutes les fonctionnalités de l'application"
+ },
"dataSafeNotice": "Vos données sont en sécurité — seul le programme est remplacé, votre base de données n'est pas modifiée.",
"help": {
"title": "À propos des Paramètres",
@@ -443,6 +447,215 @@
"nov": "Nov",
"dec": "Déc"
},
+ "docs": {
+ "title": "Guide d'utilisation",
+ "backToSettings": "Retour aux paramètres",
+ "print": "Imprimer",
+ "features": "Fonctionnalités",
+ "howTo": "Comment faire",
+ "quickStart": "Démarrage rapide",
+ "tipsHeader": "Astuces",
+ "gettingStarted": {
+ "title": "Premiers pas",
+ "overview": "Simpl'Résultat vous aide à suivre vos finances personnelles en important des relevés bancaires, en catégorisant les transactions, en planifiant des budgets et en générant des rapports.",
+ "features": [
+ "Importation de relevés bancaires CSV depuis plusieurs sources",
+ "Catégorisation automatique et manuelle des transactions",
+ "Planification budgétaire avec vues mensuelles et annuelles",
+ "Rapports visuels et analyse des tendances"
+ ],
+ "steps": [
+ "Allez dans Paramètres et définissez votre dossier d'import — créez un sous-dossier par compte bancaire",
+ "Placez vos relevés bancaires CSV dans le sous-dossier correspondant",
+ "Ouvrez la page Import et configurez votre source (mapping des colonnes, délimiteur, format de date)",
+ "Importez vos transactions, puis allez dans Catégories pour configurer les règles de mots-clés",
+ "Utilisez l'auto-catégorisation sur la page Transactions pour appliquer vos règles en masse",
+ "Configurez votre Budget et suivez votre progression via les Rapports"
+ ],
+ "tips": [
+ "Vous pouvez basculer entre le français et l'anglais via le sélecteur de langue dans la barre latérale",
+ "Chaque page a une icône d'aide (?) dans l'en-tête avec des astuces rapides",
+ "Vos données sont stockées localement sur votre ordinateur — rien n'est envoyé vers le cloud"
+ ]
+ },
+ "dashboard": {
+ "title": "Tableau de bord",
+ "overview": "Le tableau de bord vous donne un aperçu rapide de votre situation financière pour une période sélectionnée.",
+ "features": [
+ "Cartes résumées du solde, des revenus et des dépenses",
+ "Répartition des dépenses par catégorie (graphique circulaire)",
+ "Liste des transactions récentes",
+ "Sélecteur de période ajustable"
+ ],
+ "steps": [
+ "Utilisez le sélecteur de période en haut à droite pour choisir une plage de temps (mois, 3 mois, année, etc.)",
+ "Consultez les cartes résumées pour votre solde, revenus totaux et dépenses totales",
+ "Vérifiez le graphique circulaire pour voir comment vos dépenses sont réparties par catégorie",
+ "Faites défiler vers le bas pour voir vos transactions les plus récentes"
+ ],
+ "tips": [
+ "Le solde est calculé comme les revenus moins les dépenses pour la période sélectionnée",
+ "Cliquez sur une catégorie dans le graphique circulaire pour voir ses transactions"
+ ]
+ },
+ "import": {
+ "title": "Import",
+ "overview": "Importez des relevés bancaires à partir de fichiers CSV à l'aide d'un assistant étape par étape. Chaque compte bancaire est représenté par un dossier source.",
+ "features": [
+ "Assistant d'import multi-étapes avec aperçu des données",
+ "Mapping de colonnes configurable, délimiteur et format de date",
+ "Détection automatique des doublons (dans le lot et contre les données existantes)",
+ "Modèles d'import pour sauvegarder et réutiliser les configurations",
+ "Historique des imports avec possibilité de supprimer les imports précédents"
+ ],
+ "steps": [
+ "Définissez votre dossier d'import via le sélecteur de dossier en haut de la page",
+ "Créez un sous-dossier pour chaque banque/source et placez-y les fichiers CSV",
+ "Cliquez sur une source pour ouvrir l'assistant d'import",
+ "Configurez le délimiteur, l'encodage, le format de date et le mapping des colonnes",
+ "Sélectionnez les fichiers à importer et prévisualisez les données analysées",
+ "Vérifiez les doublons, examinez le résumé, puis confirmez l'import"
+ ],
+ "tips": [
+ "Sauvegardez votre configuration comme modèle pour ne pas avoir à reconfigurer à chaque fois",
+ "Les fichiers déjà importés sont marqués d'un badge — les ré-importer déclenchera la détection de doublons",
+ "Vous pouvez supprimer un import de l'historique pour retirer toutes ses transactions"
+ ]
+ },
+ "transactions": {
+ "title": "Transactions",
+ "overview": "Parcourez, filtrez, triez et catégorisez toutes vos transactions importées. C'est ici que vous organisez vos données financières.",
+ "features": [
+ "Recherche et filtre par description, catégorie, source ou plage de dates",
+ "Sélecteurs de période rapides (ce mois, mois dernier, cette année, etc.)",
+ "Colonnes triables (date, description, montant, catégorie)",
+ "Assignation de catégorie en ligne via menu déroulant",
+ "Auto-catégorisation basée sur les règles de mots-clés",
+ "Ajout de mots-clés directement depuis une transaction",
+ "Notes sur les transactions"
+ ],
+ "steps": [
+ "Utilisez la barre de filtres pour affiner les transactions par texte, catégorie, source ou date",
+ "Cliquez sur un en-tête de colonne pour trier par ordre croissant ou décroissant",
+ "Pour catégoriser une transaction, cliquez sur son menu déroulant de catégorie et sélectionnez une catégorie",
+ "Pour auto-catégoriser toutes les transactions non catégorisées, cliquez sur le bouton Auto-catégoriser",
+ "Pour ajouter une règle de mot-clé depuis une transaction, cliquez sur l'icône + et entrez le mot-clé"
+ ],
+ "tips": [
+ "Utilisez les boutons de période rapide (Ce mois, Mois dernier, etc.) pour filtrer rapidement par date",
+ "L'auto-catégorisation n'affecte que les transactions non catégorisées — elle n'écrase pas les assignations manuelles",
+ "Ajouter un mot-clé depuis une transaction pré-remplit la catégorie pour construire rapidement vos règles"
+ ]
+ },
+ "categories": {
+ "title": "Catégories",
+ "overview": "Gérez votre arbre de catégories avec des sous-catégories, des règles de mots-clés pour l'auto-catégorisation et des couleurs personnalisées.",
+ "features": [
+ "Catégories hiérarchiques avec relations parent/enfant",
+ "Trois types de catégories : Dépense, Revenu, Transfert",
+ "Règles de mots-clés avec niveaux de priorité pour l'auto-catégorisation",
+ "Couleurs personnalisées pour l'affichage des graphiques",
+ "Basculer les catégories en saisissable ou non-saisissable",
+ "Réinitialiser les catégories aux valeurs par défaut"
+ ],
+ "steps": [
+ "Cliquez sur Ajouter une catégorie pour créer une nouvelle catégorie — choisissez un nom, un type et un parent optionnel",
+ "Sélectionnez une catégorie dans l'arbre pour voir ses détails et sa liste de mots-clés",
+ "Ajoutez des mots-clés correspondant aux descriptions des transactions pour l'auto-catégorisation",
+ "Définissez la priorité des mots-clés pour résoudre les conflits quand plusieurs catégories correspondent",
+ "Utilisez le sélecteur de couleur pour assigner une couleur personnalisée pour les graphiques"
+ ],
+ "tips": [
+ "Les catégories non-saisissables sont masquées du budget et des menus déroulants mais restent visibles dans les rapports",
+ "Les mots-clés de priorité supérieure l'emportent quand plusieurs catégories correspondent à la même transaction",
+ "Utilisez Réinitialiser pour revenir aux catégories par défaut — cela dissociera toutes les catégories des transactions"
+ ]
+ },
+ "adjustments": {
+ "title": "Ajustements",
+ "overview": "Ajoutez des entrées manuelles non issues de vos relevés bancaires — utile pour les dépenses prévues, revenus ou corrections pas encore dans vos relevés.",
+ "features": [
+ "Créer des groupes d'ajustement nommés avec plusieurs entrées",
+ "Assigner une catégorie à chaque entrée",
+ "Marquer des ajustements comme récurrents"
+ ],
+ "steps": [
+ "Cliquez sur Nouvel ajustement pour créer un groupe d'ajustement",
+ "Ajoutez des entrées avec une description, un montant, une date et une catégorie",
+ "Activez le drapeau récurrent si l'ajustement doit se répéter à chaque période"
+ ],
+ "tips": [
+ "Les ajustements apparaissent dans vos réels de budget aux côtés des transactions importées",
+ "Utilisez les ajustements pour les dépenses prévues qui n'ont pas encore été débitées de votre compte"
+ ]
+ },
+ "budget": {
+ "title": "Budget",
+ "overview": "Planifiez votre budget mensuel pour chaque catégorie et suivez le prévu par rapport au réel tout au long de l'année.",
+ "features": [
+ "Grille budgétaire mensuelle pour toutes les catégories",
+ "Colonne annuelle avec totaux automatiques",
+ "Répartition égale du montant annuel sur 12 mois",
+ "Modèles de budget pour sauvegarder et appliquer des configurations",
+ "Sous-totaux par catégorie parente"
+ ],
+ "steps": [
+ "Utilisez le navigateur d'année pour sélectionner l'année du budget",
+ "Cliquez sur une cellule de mois pour entrer un montant prévu",
+ "Appuyez sur Entrée pour sauvegarder, Échap pour annuler, ou Tab pour passer au mois suivant",
+ "Utilisez le bouton de répartition (sur la colonne Annuel) pour distribuer également sur tous les mois",
+ "Sauvegardez votre budget comme modèle pour le réutiliser les années suivantes"
+ ],
+ "tips": [
+ "La colonne Annuel additionne automatiquement les 12 mois — un avertissement apparaît si les totaux mensuels ne correspondent pas",
+ "Les modèles peuvent être appliqués à des mois spécifiques ou aux 12 mois d'un coup",
+ "Les catégories parentes affichent les sous-totaux agrégés de leurs enfants"
+ ]
+ },
+ "reports": {
+ "title": "Rapports",
+ "overview": "Visualisez vos données financières avec des graphiques interactifs et comparez votre plan budgétaire au réel.",
+ "features": [
+ "Tendances mensuelles : revenus vs dépenses dans le temps (graphique en barres)",
+ "Dépenses par catégorie : répartition des dépenses (graphique circulaire)",
+ "Catégories dans le temps : suivez l'évolution de chaque catégorie (graphique en ligne)",
+ "Budget vs Réel : tableau comparatif mensuel et cumul annuel"
+ ],
+ "steps": [
+ "Utilisez les onglets pour basculer entre Tendances, Par catégorie, Dans le temps et Budget vs Réel",
+ "Ajustez la période avec le sélecteur de période",
+ "Dans le graphique circulaire, cliquez sur une catégorie pour la masquer/afficher",
+ "Dans Budget vs Réel, basculez entre les vues Mensuel et Cumul annuel"
+ ],
+ "tips": [
+ "Les catégories masquées sont mémorisées tant que vous restez sur la page — cliquez sur Tout afficher pour réinitialiser",
+ "Le sélecteur de période s'applique à tous les onglets de graphiques simultanément",
+ "Budget vs Réel affiche l'écart en dollars et en pourcentage pour chaque catégorie"
+ ]
+ },
+ "settings": {
+ "title": "Paramètres",
+ "overview": "Configurez les préférences de l'application, vérifiez les mises à jour et gérez vos données avec les outils d'export/import.",
+ "features": [
+ "Affichage de la version de l'application",
+ "Vérification automatique des mises à jour avec installation en un clic",
+ "Export des données (transactions, catégories, ou les deux) en format JSON ou CSV",
+ "Import des données depuis un fichier exporté précédemment",
+ "Chiffrement optionnel pour les fichiers exportés"
+ ],
+ "steps": [
+ "Cliquez sur Vérifier les mises à jour pour voir si une nouvelle version est disponible",
+ "Utilisez la section Gestion des données pour exporter ou importer vos données",
+ "Lors de l'export, choisissez ce qu'il faut inclure et définissez optionnellement un mot de passe pour le chiffrement",
+ "Lors de l'import, sélectionnez un fichier exporté précédemment — les fichiers chiffrés demanderont le mot de passe"
+ ],
+ "tips": [
+ "Les mises à jour ne remplacent que le programme — votre base de données n'est jamais modifiée",
+ "Changez la langue de l'application via le sélecteur de langue dans la barre latérale",
+ "Exportez régulièrement pour garder une sauvegarde de vos données"
+ ]
+ }
+ },
"common": {
"save": "Enregistrer",
"cancel": "Annuler",
diff --git a/src/pages/DocsPage.tsx b/src/pages/DocsPage.tsx
new file mode 100644
index 0000000..d7a0832
--- /dev/null
+++ b/src/pages/DocsPage.tsx
@@ -0,0 +1,228 @@
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useLocation } from "react-router-dom";
+import {
+ Rocket,
+ LayoutDashboard,
+ Upload,
+ ArrowLeftRight,
+ Tags,
+ SlidersHorizontal,
+ PiggyBank,
+ BarChart3,
+ Settings,
+ ArrowLeft,
+ Lightbulb,
+ ListChecks,
+ Footprints,
+ Printer,
+} from "lucide-react";
+
+const SECTIONS = [
+ { key: "gettingStarted", icon: Rocket },
+ { key: "dashboard", icon: LayoutDashboard },
+ { key: "import", icon: Upload },
+ { key: "transactions", icon: ArrowLeftRight },
+ { key: "categories", icon: Tags },
+ { key: "adjustments", icon: SlidersHorizontal },
+ { key: "budget", icon: PiggyBank },
+ { key: "reports", icon: BarChart3 },
+ { key: "settings", icon: Settings },
+] as const;
+
+export default function DocsPage() {
+ const { t } = useTranslation();
+ const location = useLocation();
+ const [activeSection, setActiveSection] = useState(SECTIONS[0].key);
+ const sectionRefs = useRef>({});
+ const contentRef = useRef(null);
+
+ // Scroll spy via IntersectionObserver
+ useEffect(() => {
+ const container = contentRef.current;
+ if (!container) return;
+
+ const observer = new IntersectionObserver(
+ (entries) => {
+ for (const entry of entries) {
+ if (entry.isIntersecting) {
+ setActiveSection(entry.target.id);
+ }
+ }
+ },
+ {
+ root: container,
+ rootMargin: "-10% 0px -80% 0px",
+ threshold: 0,
+ }
+ );
+
+ for (const { key } of SECTIONS) {
+ const el = sectionRefs.current[key];
+ if (el) observer.observe(el);
+ }
+
+ return () => observer.disconnect();
+ }, []);
+
+ // Handle initial anchor from URL
+ useEffect(() => {
+ const hash = location.hash.replace("#", "");
+ if (hash && sectionRefs.current[hash]) {
+ requestAnimationFrame(() => {
+ sectionRefs.current[hash]?.scrollIntoView({ behavior: "smooth" });
+ });
+ }
+ }, [location.hash]);
+
+ const scrollToSection = (key: string) => {
+ sectionRefs.current[key]?.scrollIntoView({ behavior: "smooth" });
+ };
+
+ return (
+