Initial commit: SecourIT Gestion

src/components/DashboardContent.tsx

@@ -0,0 +1,358 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import {
+  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Area, AreaChart, BarChart, Bar, Line,
+} from 'recharts'
+import { formatCurrency } from '@/lib/utils'
+import { Users, FileText, TrendingUp, Euro, AlertCircle, FileSignature, Server } from 'lucide-react'
+
+interface DashboardStats {
+  yearlyCA: number
+  monthlyRecurringRevenue: number
+  monthlyRecurringCost: number
+  monthlyMargin: number
+  monthlyMarginPercent: number
+  invoicedThisMonth: number
+  costThisMonth: number
+  salesCostThisMonth: number
+  marginThisMonth: number
+  activeContracts: number
+  activeClients: number
+  prospectsCount: number
+  unpaidRevenue: number
+  pendingProposalCount: number
+  pendingProposalMonthly: number
+  pausedCount: number
+  pausedMonthly: number
+  projectedMonthlyRecurring: number
+  projectedOneTimeSetup: number
+  projectedTotal: number
+  serverMonthlyCost: number
+  totalServerCostShared: number
+  totalServerCostSharedRounded: number
+  totalProposalValue: number
+  topQuotes: { id: string; name: string; clientName: string; totalValue: number; status: string }[]
+  topClients: { id: string; name: string; monthlyRecurring: number; oneTimeTotal: number; invoiceTotal: number; totalRevenue: number; contractCount: number }[]
+}
+
+interface ChartDataPoint {
+  month: string
+  monthLabel: string
+  recurringRevenue: number
+  recurringCost: number
+  oneTimeRevenue: number
+  oneTimeCost: number
+  invoiceRevenue: number
+  newClients: number
+  revenue: number
+  cost: number
+  margin: number
+}
+
+export function DashboardContent({ onViewChange }: { onViewChange?: (view: string) => void }) {
+  const [stats, setStats] = useState<DashboardStats | null>(null)
+  const [chartData, setChartData] = useState<ChartDataPoint[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetchDashboard()
+  }, [])
+
+  const fetchDashboard = async () => {
+    try {
+      const res = await fetch('/api/dashboard')
+      if (res.ok) {
+        const data = await res.json()
+        setStats(data.stats)
+        setChartData(data.chartData || [])
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600" />
+      </div>
+    )
+  }
+
+  if (!stats) {
+    return (
+      <div className="text-center py-12 text-slate-500">
+        Erreur lors du chargement des données
+      </div>
+    )
+  }
+
+  const cards = [
+    {
+      label: 'CA annuel',
+      value: formatCurrency(stats.yearlyCA),
+      sub: `année ${new Date().getFullYear()}`,
+      icon: Euro,
+      color: 'text-primary-600 bg-primary-100 dark:bg-primary-900/30',
+    },
+    {
+      label: 'Revenus récurrents/mois',
+      value: formatCurrency(stats.monthlyRecurringRevenue),
+      sub: `${stats.activeContracts} contrats actifs`,
+      icon: Euro,
+      color: 'text-green-600 bg-green-100 dark:bg-green-900/30',
+    },
+    {
+      label: 'Coûts récurrents/mois',
+      value: formatCurrency(stats.monthlyRecurringCost),
+      sub: `Marge: ${formatCurrency(stats.monthlyMargin)} (${stats.monthlyMarginPercent.toFixed(1)}%)`,
+      icon: TrendingUp,
+      color: 'text-blue-600 bg-blue-100 dark:bg-blue-900/30',
+    },
+    {
+      label: 'Facturé ce mois',
+      value: formatCurrency(stats.invoicedThisMonth),
+      sub: `Marge: ${formatCurrency(stats.invoicedThisMonth - stats.salesCostThisMonth)}`,
+      icon: FileText,
+      color: 'text-purple-600 bg-purple-100 dark:bg-purple-900/30',
+    },
+    {
+      label: 'Non payé',
+      value: formatCurrency(stats.unpaidRevenue),
+      sub: `dont factures impayées incluses`,
+      icon: AlertCircle,
+      color: 'text-red-600 bg-red-100 dark:bg-red-900/30',
+      onClick: () => onViewChange?.('invoices'),
+    },
+    {
+      label: 'Propositions en cours',
+      value: stats.pendingProposalCount.toString(),
+      sub: `${formatCurrency(stats.pendingProposalMonthly)}/mois`,
+      icon: FileSignature,
+      color: 'text-purple-600 bg-purple-100 dark:bg-purple-900/30',
+    },
+    {
+      label: 'Total devis en cours',
+      value: formatCurrency(stats.totalProposalValue),
+      sub: `setup + mensualité`,
+      icon: FileText,
+      color: 'text-indigo-600 bg-indigo-100 dark:bg-indigo-900/30',
+    },
+    {
+      label: 'Clients actifs',
+      value: stats.activeClients.toString(),
+      sub: `${stats.prospectsCount} prospects`,
+      icon: Users,
+      color: 'text-amber-600 bg-amber-100 dark:bg-amber-900/30',
+    },
+    {
+      label: 'Coûts serveurs/mois',
+      value: formatCurrency(stats.serverMonthlyCost),
+      sub: `Réparti: ${formatCurrency(stats.totalServerCostSharedRounded)}`,
+      icon: Server,
+      color: 'text-orange-600 bg-orange-100 dark:bg-orange-900/30',
+    },
+  ]
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Tableau de bord</h2>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4">
+        {cards.map((card) => {
+          const Tag = card.onClick ? 'button' : 'div'
+          return (
+            <Tag key={card.label} onClick={card.onClick}
+              className={`bg-white dark:bg-slate-800 rounded-xl p-5 border border-slate-200 dark:border-slate-700 text-left ${card.onClick ? 'cursor-pointer hover:shadow-md transition-shadow' : ''}`}>
+              <div className="flex items-start justify-between">
+                <div>
+                  <p className="text-sm text-slate-500 dark:text-slate-400">{card.label}</p>
+                  <p className="text-2xl font-bold mt-1 text-slate-900 dark:text-white">{card.value}</p>
+                  <p className="text-xs text-slate-400 mt-1">{card.sub}</p>
+                </div>
+                <div className={`p-2.5 rounded-lg ${card.color}`}>
+                  <card.icon className="h-5 w-5" />
+                </div>
+              </div>
+            </Tag>
+          )
+        })}
+      </div>
+
+      <div className="bg-white dark:bg-slate-800 rounded-xl p-5 border border-slate-200 dark:border-slate-700">
+        <h3 className="text-sm font-semibold text-slate-500 uppercase mb-3">Projection récurrente</h3>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          <div>
+            <p className="text-xs text-slate-500">Récurrent actuel</p>
+            <p className="text-xl font-bold text-green-600">{formatCurrency(stats.monthlyRecurringRevenue)}</p>
+          </div>
+          <div>
+            <p className="text-xs text-slate-500">En proposition</p>
+            <p className="text-xl font-bold text-amber-600">{formatCurrency(stats.pendingProposalMonthly)}</p>
+            <p className="text-xs text-slate-400">{stats.pendingProposalCount} contrat(s)</p>
+          </div>
+          <div>
+            <p className="text-xs text-slate-500">En pause</p>
+            <p className="text-xl font-bold text-blue-600">{formatCurrency(stats.pausedMonthly)}</p>
+            <p className="text-xs text-slate-400">{stats.pausedCount} contrat(s)</p>
+          </div>
+        </div>
+        <div className="mt-4 pt-4 border-t border-slate-200 dark:border-slate-700">
+          <div className="flex items-center justify-between">
+            <p className="text-sm font-medium text-slate-600 dark:text-slate-400">Projection totale</p>
+            <p className="text-xl font-bold text-primary-600">{formatCurrency(stats.projectedMonthlyRecurring)}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-white dark:bg-slate-800 rounded-xl p-5 border border-slate-200 dark:border-slate-700">
+        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Revenus mensuels</h3>
+        <div className="h-72">
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart data={chartData}>
+              <defs>
+                <linearGradient id="revenueGrad" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="#0ea5e9" stopOpacity={0.25} />
+                  <stop offset="95%" stopColor="#0ea5e9" stopOpacity={0} />
+                </linearGradient>
+                <linearGradient id="marginGrad" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="#10b981" stopOpacity={0.35} />
+                  <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
+                </linearGradient>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey="month" stroke="#94a3b8" fontSize={12} />
+              <YAxis stroke="#94a3b8" fontSize={12} />
+              <Tooltip
+                contentStyle={{ backgroundColor: '#1e293b', border: 'none', borderRadius: '8px', color: '#f1f5f9' }}
+                formatter={(value: number) => formatCurrency(value)}
+              />
+              <Area type="monotone" dataKey="revenue" stroke="#0ea5e9" fill="url(#revenueGrad)" name="Revenu" strokeWidth={1.5} />
+              <Area type="monotone" dataKey="cost" stroke="#ef4444" fill="none" name="Coût" strokeWidth={1.5} strokeDasharray="4 3" />
+              <Area type="monotone" dataKey="margin" stroke="#10b981" fill="url(#marginGrad)" name="Net (poche)" strokeWidth={2.5} />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+
+      <div className="bg-white dark:bg-slate-800 rounded-xl p-5 border border-slate-200 dark:border-slate-700">
+        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Nouveaux clients par mois</h3>
+        <div className="h-48">
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={chartData}>
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey="month" stroke="#94a3b8" fontSize={12} />
+              <YAxis stroke="#94a3b8" fontSize={12} allowDecimals={false} />
+              <Tooltip
+                contentStyle={{ backgroundColor: '#1e293b', border: 'none', borderRadius: '8px', color: '#f1f5f9' }}
+                formatter={(value: number) => [value, 'Nouveaux clients']}
+              />
+              <Bar dataKey="newClients" fill="#f59e0b" name="Nouveaux clients" radius={[4, 4, 0, 0]} />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="bg-white dark:bg-slate-800 rounded-xl p-5 border border-slate-200 dark:border-slate-700">
+          <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Top Clients</h3>
+          <div className="space-y-3">
+            {stats.topClients.length === 0 ? (
+              <p className="text-slate-500 text-sm">Aucun client pour le moment</p>
+            ) : (
+              stats.topClients.map((client, i) => (
+                <div key={client.id} className="p-3 rounded-lg bg-slate-50 dark:bg-slate-700/50">
+                  <div className="flex items-center justify-between mb-1">
+                    <div className="flex items-center gap-2">
+                      <span className="text-lg font-bold text-slate-400">{i + 1}</span>
+                      <p className="font-medium text-slate-900 dark:text-white">{client.name}</p>
+                    </div>
+                    <span className="font-bold text-green-600 dark:text-green-400">{formatCurrency(client.totalRevenue)}</span>
+                  </div>
+                  <div className="flex gap-4 text-xs text-slate-500 ml-8">
+                    {client.monthlyRecurring > 0 && <span>Récurrent: {formatCurrency(client.monthlyRecurring)}/mois</span>}
+                    {client.oneTimeTotal > 0 && <span>Ventes: {formatCurrency(client.oneTimeTotal)}</span>}
+                    {client.invoiceTotal > 0 && <span>Facturé: {formatCurrency(client.invoiceTotal)}</span>}
+                    <span>{client.contractCount} contrat(s)</span>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+
+        <div className="bg-white dark:bg-slate-800 rounded-xl p-5 border border-slate-200 dark:border-slate-700">
+          <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Top Devis</h3>
+          <div className="space-y-3">
+            {stats.topQuotes.length === 0 ? (
+              <p className="text-slate-500 text-sm">Aucun devis pour le moment</p>
+            ) : (
+              stats.topQuotes.map((q, i) => (
+                <div key={q.id} className="flex items-center justify-between p-3 rounded-lg bg-slate-50 dark:bg-slate-700/50">
+                  <div className="flex items-center gap-3">
+                    <span className="text-lg font-bold text-slate-400 w-6">{i + 1}</span>
+                    <div>
+                      <p className="font-medium text-slate-900 dark:text-white">{q.name}</p>
+                      <p className="text-xs text-slate-500">{q.clientName}</p>
+                    </div>
+                  </div>
+                  <span className="font-semibold text-primary-600 dark:text-primary-400">
+                    {formatCurrency(q.totalValue)}
+                  </span>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
+        <div className="px-5 py-4 border-b border-slate-200 dark:border-slate-700">
+          <h3 className="text-lg font-semibold text-slate-900 dark:text-white">Détail mensuel</h3>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50">
+                <th className="text-left px-4 py-3 text-xs font-medium text-slate-500 uppercase">Mois</th>
+                <th className="text-right px-4 py-3 text-xs font-medium text-slate-500 uppercase">Factures</th>
+                <th className="text-right px-4 py-3 text-xs font-medium text-slate-500 uppercase">Ventes</th>
+                <th className="text-right px-4 py-3 text-xs font-medium text-slate-500 uppercase">Total</th>
+                <th className="text-right px-4 py-3 text-xs font-medium text-slate-500 uppercase">Coût</th>
+                <th className="text-right px-4 py-3 text-xs font-medium text-slate-500 uppercase">Nvx clients</th>
+                <th className="text-right px-4 py-3 text-xs font-medium text-slate-500 uppercase">Marge</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-200 dark:divide-slate-700">
+              {chartData.length === 0 ? (
+                <tr><td colSpan={7} className="text-center py-8 text-slate-500">Aucune donnée</td></tr>
+              ) : (
+                [...chartData].reverse().map((row) => {
+                  const totalFacturesVentes = row.invoiceRevenue + row.oneTimeRevenue
+                  const marginPct = totalFacturesVentes > 0 ? (row.margin / totalFacturesVentes) * 100 : 0
+                  return (
+                    <tr key={row.month} className="hover:bg-slate-50 dark:hover:bg-slate-700/50">
+                      <td className="px-4 py-3 text-sm font-medium text-slate-900 dark:text-white">{row.monthLabel}</td>
+                      <td className="px-4 py-3 text-right text-sm text-purple-600">{formatCurrency(row.invoiceRevenue)}</td>
+                      <td className="px-4 py-3 text-right text-sm text-blue-600">{formatCurrency(row.oneTimeRevenue)}</td>
+                      <td className="px-4 py-3 text-right text-sm font-semibold text-slate-900 dark:text-white">{formatCurrency(totalFacturesVentes)}</td>
+                      <td className="px-4 py-3 text-right text-sm text-red-500">{formatCurrency(row.cost)}</td>
+                      <td className="px-4 py-3 text-right text-sm font-medium text-amber-600">{row.newClients}</td>
+                      <td className="px-4 py-3 text-right">
+                        <span className={`text-sm font-semibold ${row.margin >= 0 ? 'text-green-600' : 'text-red-500'}`}>
+                          {formatCurrency(row.margin)}
+                          <span className="text-xs ml-1">({marginPct.toFixed(0)}%)</span>
+                        </span>
+                      </td>
+                    </tr>
+                  )
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}