181 lines
8.1 KiB
TypeScript
181 lines
8.1 KiB
TypeScript
// TableauBordFinance.tsx — Tableau de bord Finance
|
|
// Permet d'accéder au dossier d'analyse budget sur le poste de l'utilisateur
|
|
|
|
import { useState } from 'react';
|
|
import { AppSidebar } from '../components/AppSidebar';
|
|
import {
|
|
LayoutDashboard,
|
|
FolderOpen,
|
|
Copy,
|
|
CheckCheck,
|
|
ExternalLink,
|
|
Info,
|
|
FolderSearch,
|
|
} from 'lucide-react';
|
|
|
|
const DEFAULT_PATH = 'C:\\Users\\o.pareige\\OneDrive - ITINOVA\\@ITINOVA\\Pilotage\\Budget\\Analyse budget de mon poste';
|
|
|
|
export default function TableauBordFinance() {
|
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
|
const [copied, setCopied] = useState(false);
|
|
const [customPath, setCustomPath] = useState(DEFAULT_PATH);
|
|
const [editingPath, setEditingPath] = useState(false);
|
|
|
|
const handleCopy = async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(customPath);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
} catch {
|
|
// fallback
|
|
const el = document.createElement('textarea');
|
|
el.value = customPath;
|
|
document.body.appendChild(el);
|
|
el.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(el);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
}
|
|
};
|
|
|
|
// Construire l'URL file:// pour tenter l'ouverture directe
|
|
// Remplace les backslashes par des slashes et encode les espaces
|
|
const fileUrl = 'file:///' + customPath.replace(/\\/g, '/');
|
|
|
|
return (
|
|
<div className="min-h-screen flex bg-background">
|
|
<AppSidebar collapsed={sidebarCollapsed} onToggle={() => setSidebarCollapsed(c => !c)} />
|
|
|
|
<main className="flex-1 flex flex-col min-w-0 overflow-hidden">
|
|
{/* En-tête */}
|
|
<header className="bg-card border-b border-border px-6 py-4 flex-shrink-0">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-9 h-9 rounded-lg bg-blue-500/20 flex items-center justify-center">
|
|
<LayoutDashboard className="w-5 h-5 text-blue-500" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-xl font-bold text-foreground" style={{ fontFamily: 'Sora, sans-serif' }}>
|
|
Tableau de bord Finance
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground mt-0.5">
|
|
Accès aux dossiers d'analyse budgétaire
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Contenu */}
|
|
<div className="flex-1 overflow-y-auto px-6 py-6">
|
|
<div className="max-w-2xl mx-auto space-y-6">
|
|
|
|
{/* Carte principale — dossier OneDrive */}
|
|
<div className="bg-card border border-border rounded-xl shadow-sm overflow-hidden">
|
|
<div className="px-5 py-4 border-b border-border flex items-center gap-3">
|
|
<FolderSearch className="w-5 h-5 text-blue-500 flex-shrink-0" />
|
|
<div>
|
|
<h2 className="text-sm font-semibold text-foreground">Analyse budget de mon poste</h2>
|
|
<p className="text-xs text-muted-foreground mt-0.5">Dossier OneDrive — Pilotage Budget</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-5 py-4 space-y-4">
|
|
{/* Chemin du dossier */}
|
|
<div>
|
|
<label className="text-xs font-medium text-muted-foreground uppercase tracking-wide block mb-1.5">
|
|
Chemin du dossier
|
|
</label>
|
|
{editingPath ? (
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={customPath}
|
|
onChange={e => setCustomPath(e.target.value)}
|
|
className="flex-1 text-sm font-mono bg-muted/50 border border-border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
|
|
autoFocus
|
|
/>
|
|
<button
|
|
onClick={() => setEditingPath(false)}
|
|
className="px-3 py-2 text-xs font-medium bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
|
|
>
|
|
OK
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div
|
|
className="flex items-center gap-2 bg-muted/40 border border-border rounded-lg px-3 py-2.5 cursor-pointer group hover:bg-muted/70 transition-colors"
|
|
onClick={() => setEditingPath(true)}
|
|
title="Cliquer pour modifier le chemin"
|
|
>
|
|
<FolderOpen className="w-4 h-4 text-amber-500 flex-shrink-0" />
|
|
<span className="flex-1 text-xs font-mono text-foreground/80 truncate">{customPath}</span>
|
|
<span className="text-[10px] text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity">modifier</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex flex-col sm:flex-row gap-3">
|
|
{/* Bouton copier le chemin */}
|
|
<button
|
|
onClick={handleCopy}
|
|
className={`flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium transition-all duration-150 flex-1 ${
|
|
copied
|
|
? 'bg-emerald-500/20 text-emerald-600 border border-emerald-500/30'
|
|
: 'bg-muted/50 border border-border text-foreground hover:bg-muted hover:border-border/80'
|
|
}`}
|
|
>
|
|
{copied ? (
|
|
<>
|
|
<CheckCheck className="w-4 h-4" />
|
|
Chemin copié !
|
|
</>
|
|
) : (
|
|
<>
|
|
<Copy className="w-4 h-4" />
|
|
Copier le chemin
|
|
</>
|
|
)}
|
|
</button>
|
|
|
|
{/* Bouton ouvrir dans l'explorateur */}
|
|
<a
|
|
href={fileUrl}
|
|
className="flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium bg-blue-500/15 border border-blue-500/30 text-blue-600 hover:bg-blue-500/25 transition-all duration-150 flex-1"
|
|
title="Tenter d'ouvrir le dossier (selon le navigateur)"
|
|
>
|
|
<ExternalLink className="w-4 h-4" />
|
|
Ouvrir le dossier
|
|
</a>
|
|
</div>
|
|
|
|
{/* Instructions */}
|
|
<div className="bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800/50 rounded-lg px-4 py-3 flex gap-3">
|
|
<Info className="w-4 h-4 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />
|
|
<div className="text-xs text-amber-800 dark:text-amber-300 space-y-1">
|
|
<p className="font-semibold">Comment accéder au dossier</p>
|
|
<p>
|
|
<strong>Option 1 :</strong> Cliquez sur <em>"Ouvrir le dossier"</em> — fonctionne sur certains navigateurs (Edge, Firefox) si le dossier est synchronisé localement.
|
|
</p>
|
|
<p>
|
|
<strong>Option 2 :</strong> Copiez le chemin puis collez-le dans la barre d'adresse de l'Explorateur Windows (<kbd className="bg-amber-100 dark:bg-amber-900 px-1 rounded">Win + E</kbd>, puis collez dans la barre d'adresse).
|
|
</p>
|
|
<p>
|
|
<strong>Option 3 :</strong> Ouvrez directement OneDrive et naviguez vers <em>@ITINOVA → Pilotage → Budget → Analyse budget de mon poste</em>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Note de personnalisation */}
|
|
<p className="text-xs text-muted-foreground text-center">
|
|
Le chemin peut être modifié en cliquant dessus — il sera conservé pour cette session.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|