npm - create-crm-tmp - Versions diffs - 1.0.0 - Mend

create-crm-tmp 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (187) hide show

package/template/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import './globals.css';
+import { cn } from '@/lib/utils';
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+});
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+});
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="fr">
+      <body className={cn(geistSans.variable, geistMono.variable, 'antialiased')}>{children}</body>
+    </html>
+  );
+}

package/template/src/app/page.tsx ADDED Viewed

@@ -0,0 +1,32 @@
+'use client';
+import { useSession } from '@/lib/auth-client';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+export default function HomePage() {
+  const { data: session, isPending } = useSession();
+  const router = useRouter();
+  useEffect(() => {
+    if (isPending) return;
+    if (session) {
+      // Utilisateur connecté -> rediriger vers le dashboard
+      router.push('/dashboard');
+    } else {
+      // Utilisateur non connecté -> rediriger vers la page de connexion
+      router.push('/signin');
+    }
+  }, [session, isPending, router]);
+  // Afficher un loader pendant la redirection
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50">
+      <div className="flex flex-col items-center gap-4">
+        <div className="h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-indigo-600"></div>
+        <p className="text-sm text-gray-600">Redirection...</p>
+      </div>
+    </div>
+  );
+}

package/template/src/components/dashboard/activity-chart.tsx ADDED Viewed

@@ -0,0 +1,67 @@
+'use client';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis, Legend } from 'recharts';
+interface ActivityChartProps {
+  data: Array<{ date: string; interactions: number; tasks: number }>;
+}
+export function ActivityChart({ data }: ActivityChartProps) {
+  return (
+    <div className="rounded-xl border border-gray-200/50 bg-white p-6 shadow-lg transition-shadow duration-300 hover:shadow-xl">
+      <div className="mb-4">
+        <h3 className="text-lg font-bold text-gray-900">Activité des 7 Derniers Jours</h3>
+        <p className="mt-1 text-sm text-gray-500">Interactions et tâches créées</p>
+      </div>
+      <div className="h-[300px]">
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={data} barCategoryGap="20%">
+            <defs>
+              <linearGradient id="interactionsGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor="#6366f1" stopOpacity={1} />
+                <stop offset="100%" stopColor="#4f46e5" stopOpacity={0.8} />
+              </linearGradient>
+              <linearGradient id="tasksGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor="#8b5cf6" stopOpacity={1} />
+                <stop offset="100%" stopColor="#7c3aed" stopOpacity={0.8} />
+              </linearGradient>
+            </defs>
+            <XAxis
+              dataKey="date"
+              stroke="#9ca3af"
+              fontSize={12}
+              tickLine={false}
+              axisLine={false}
+            />
+            <YAxis stroke="#9ca3af" fontSize={12} tickLine={false} axisLine={false} />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: 'white',
+                border: '1px solid #e5e7eb',
+                borderRadius: '12px',
+                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+              }}
+              labelStyle={{ color: '#374151', fontWeight: 600 }}
+            />
+            <Legend
+              wrapperStyle={{ paddingTop: '20px' }}
+              iconType="circle"
+            />
+            <Bar
+              dataKey="interactions"
+              fill="url(#interactionsGradient)"
+              radius={[8, 8, 0, 0]}
+              name="Interactions"
+            />
+            <Bar
+              dataKey="tasks"
+              fill="url(#tasksGradient)"
+              radius={[8, 8, 0, 0]}
+              name="Tâches"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}

package/template/src/components/dashboard/contacts-chart.tsx ADDED Viewed

@@ -0,0 +1,63 @@
+'use client';
+import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+interface ContactsChartProps {
+  data: Array<{ month: string; count: number }>;
+}
+export function ContactsChart({ data }: ContactsChartProps) {
+  return (
+    <div className="rounded-xl border border-gray-200/50 bg-white p-6 shadow-lg transition-shadow duration-300 hover:shadow-xl">
+      <div className="mb-4 flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-bold text-gray-900">Évolution des Contacts</h3>
+          <p className="mt-1 text-sm text-gray-500">Nombre de contacts créés par mois</p>
+        </div>
+      </div>
+      <div className="h-[300px]">
+        <ResponsiveContainer width="100%" height="100%">
+          <AreaChart data={data}>
+            <defs>
+              <linearGradient id="colorCount" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.4} />
+                <stop offset="50%" stopColor="#6366f1" stopOpacity={0.3} />
+                <stop offset="95%" stopColor="#6366f1" stopOpacity={0} />
+              </linearGradient>
+            </defs>
+            <XAxis
+              dataKey="month"
+              stroke="#9ca3af"
+              fontSize={12}
+              tickLine={false}
+              axisLine={false}
+            />
+            <YAxis
+              stroke="#9ca3af"
+              fontSize={12}
+              tickLine={false}
+              axisLine={false}
+              tickFormatter={(value) => `${value}`}
+            />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: 'white',
+                border: '1px solid #e5e7eb',
+                borderRadius: '12px',
+                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+              }}
+              labelStyle={{ color: '#374151', fontWeight: 600 }}
+            />
+            <Area
+              type="monotone"
+              dataKey="count"
+              stroke="#8b5cf6"
+              strokeWidth={3}
+              fill="url(#colorCount)"
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}

package/template/src/components/dashboard/recent-activity.tsx ADDED Viewed

@@ -0,0 +1,164 @@
+'use client';
+import Link from 'next/link';
+import {
+  Phone,
+  Mail,
+  Calendar,
+  MessageSquare,
+  FileText,
+  TrendingUp,
+  RefreshCw,
+  CalendarCheck,
+  CalendarX,
+  CalendarClock,
+  UserCheck,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+interface Interaction {
+  id: string;
+  type: string;
+  title: string | null;
+  content: string;
+  date: string;
+  contact: {
+    id: string;
+    name: string;
+  };
+}
+interface RecentActivityProps {
+  interactions: Interaction[];
+}
+const interactionIcons = {
+  CALL: Phone,
+  SMS: MessageSquare,
+  EMAIL: Mail,
+  MEETING: Calendar,
+  NOTE: FileText,
+  STATUS_CHANGE: TrendingUp,
+  CONTACT_UPDATE: RefreshCw,
+  APPOINTMENT_CREATED: CalendarCheck,
+  APPOINTMENT_DELETED: CalendarX,
+  APPOINTMENT_CHANGED: CalendarClock,
+  ASSIGNMENT_CHANGE: UserCheck,
+};
+const interactionColors = {
+  CALL: 'bg-blue-100 text-blue-600',
+  SMS: 'bg-green-100 text-green-600',
+  EMAIL: 'bg-purple-100 text-purple-600',
+  MEETING: 'bg-indigo-100 text-indigo-600',
+  NOTE: 'bg-gray-100 text-gray-600',
+  STATUS_CHANGE: 'bg-amber-100 text-amber-600',
+  CONTACT_UPDATE: 'bg-cyan-100 text-cyan-600',
+  APPOINTMENT_CREATED: 'bg-emerald-100 text-emerald-600',
+  APPOINTMENT_DELETED: 'bg-red-100 text-red-600',
+  APPOINTMENT_CHANGED: 'bg-orange-100 text-orange-600',
+  ASSIGNMENT_CHANGE: 'bg-pink-100 text-pink-600',
+};
+const interactionLabels = {
+  CALL: 'Appel',
+  SMS: 'SMS',
+  EMAIL: 'Email',
+  MEETING: 'Réunion',
+  NOTE: 'Note',
+  STATUS_CHANGE: 'Changement de statut',
+  CONTACT_UPDATE: 'Mise à jour',
+  APPOINTMENT_CREATED: 'RDV créé',
+  APPOINTMENT_DELETED: 'RDV supprimé',
+  APPOINTMENT_CHANGED: 'RDV modifié',
+  ASSIGNMENT_CHANGE: 'Assignation',
+};
+export function RecentActivity({ interactions }: RecentActivityProps) {
+  if (interactions.length === 0) {
+    return (
+      <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-semibold text-gray-900">Activité Récente</h3>
+        </div>
+        <div className="mt-6 text-center text-sm text-gray-500">
+          <FileText className="mx-auto h-12 w-12 text-gray-400" />
+          <p className="mt-2">Aucune activité récente</p>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="rounded-xl border border-gray-200/50 bg-white p-6 shadow-lg transition-shadow duration-300 hover:shadow-xl">
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="text-lg font-bold text-gray-900">Activité Récente</h3>
+        <Link
+          href="/contacts"
+          className="text-sm font-semibold text-indigo-600 transition-colors hover:text-indigo-700"
+        >
+          Voir tout →
+        </Link>
+      </div>
+      <div className="space-y-3">
+        {interactions.map((interaction) => {
+          const Icon =
+            interactionIcons[interaction.type as keyof typeof interactionIcons] || FileText;
+          const color =
+            interactionColors[interaction.type as keyof typeof interactionColors] ||
+            'bg-gray-100 text-gray-600';
+          const label =
+            interactionLabels[interaction.type as keyof typeof interactionLabels] ||
+            interaction.type;
+          const date = new Date(interaction.date);
+          const now = new Date();
+          const diffMs = now.getTime() - date.getTime();
+          const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+          const diffMinutes = Math.floor(diffMs / (1000 * 60));
+          let timeAgo = '';
+          if (diffMinutes < 1) {
+            timeAgo = "À l'instant";
+          } else if (diffMinutes < 60) {
+            timeAgo = `Il y a ${diffMinutes} min`;
+          } else if (diffHours < 24) {
+            timeAgo = `Il y a ${diffHours}h`;
+          } else {
+            timeAgo = date.toLocaleDateString('fr-FR', {
+              day: 'numeric',
+              month: 'short',
+            });
+          }
+          return (
+            <div
+              key={interaction.id}
+              className="group flex items-start gap-3 rounded-lg border-l-4 border-transparent bg-gray-50/50 p-3 transition-all duration-200 hover:border-indigo-400 hover:bg-indigo-50/30"
+            >
+              <div className={cn('rounded-lg p-2 shadow-sm', color)}>
+                <Icon className="h-4 w-4" />
+              </div>
+              <div className="flex-1">
+                <div className="flex items-start justify-between">
+                  <div>
+                    <p className="text-sm font-semibold text-gray-900">{label}</p>
+                    <Link
+                      href={`/contacts/${interaction.contact.id}`}
+                      className="text-sm text-gray-600 transition-colors hover:text-indigo-600"
+                    >
+                      {interaction.contact.name}
+                    </Link>
+                    {interaction.title && (
+                      <p className="mt-1 text-xs text-gray-500">{interaction.title}</p>
+                    )}
+                  </div>
+                  <span className="text-xs font-medium text-gray-500">{timeAgo}</span>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/template/src/components/dashboard/sales-analytics-chart.tsx ADDED Viewed

@@ -0,0 +1,81 @@
+'use client';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+interface SalesAnalyticsChartProps {
+  data: Array<{ month: string; count: number }>;
+}
+export function SalesAnalyticsChart({ data }: SalesAnalyticsChartProps) {
+  // Calculer le total et la croissance
+  const total = data.reduce((sum, item) => sum + item.count, 0);
+  const previousTotal = data.length > 1 ? data.slice(0, -1).reduce((sum, item) => sum + item.count, 0) : 0;
+  const growth = previousTotal > 0 ? ((total - previousTotal) / previousTotal) * 100 : 0;
+  return (
+    <div className="rounded-xl border border-gray-200/50 bg-white p-6 shadow-lg transition-shadow duration-300 hover:shadow-xl">
+      <div className="mb-4 flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-bold text-gray-900">Analytiques des Ventes</h3>
+        </div>
+        <select className="rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+          <option>Mensuel</option>
+          <option>Hebdomadaire</option>
+          <option>Annuel</option>
+        </select>
+      </div>
+      <div className="mb-4 flex items-baseline gap-4">
+        <div>
+          <p className="text-2xl font-bold text-gray-900">
+            {total.toLocaleString('fr-FR')} contacts ce mois
+          </p>
+          <p className="mt-1 text-sm font-semibold text-emerald-600">
+            Augmentation ce mois : +{growth.toFixed(1)}%
+          </p>
+        </div>
+      </div>
+      <div className="h-[280px]">
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={data} barCategoryGap="20%">
+            <defs>
+              <linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor="#8b5cf6" stopOpacity={1} />
+                <stop offset="100%" stopColor="#6366f1" stopOpacity={0.8} />
+              </linearGradient>
+            </defs>
+            <XAxis
+              dataKey="month"
+              stroke="#9ca3af"
+              fontSize={12}
+              tickLine={false}
+              axisLine={false}
+            />
+            <YAxis
+              stroke="#9ca3af"
+              fontSize={12}
+              tickLine={false}
+              axisLine={false}
+              tickFormatter={(value) => `${value}`}
+            />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: 'white',
+                border: '1px solid #e5e7eb',
+                borderRadius: '12px',
+                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+              }}
+              labelStyle={{ color: '#374151', fontWeight: 600 }}
+              formatter={(value: number) => [`${value.toLocaleString('fr-FR')}`, 'Contacts']}
+            />
+            <Bar
+              dataKey="count"
+              fill="url(#barGradient)"
+              radius={[8, 8, 0, 0]}
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}

package/template/src/components/dashboard/stat-card.tsx ADDED Viewed

@@ -0,0 +1,61 @@
+'use client';
+import { LucideIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+interface StatCardProps {
+  title: string;
+  value: string | number;
+  icon: LucideIcon;
+  trend?: {
+    value: number;
+    label: string;
+  };
+  iconColor?: string;
+  iconBgColor?: string;
+}
+export function StatCard({
+  title,
+  value,
+  icon: Icon,
+  trend,
+  iconColor = 'text-indigo-600',
+  iconBgColor = 'bg-indigo-100',
+}: StatCardProps) {
+  return (
+    <div className="group relative overflow-hidden rounded-xl border border-gray-200/50 bg-white p-6 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
+      <div className="absolute inset-0 bg-gradient-to-br from-white via-purple-50/30 to-indigo-50/30 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+      <div className="relative flex items-center justify-between">
+        <div className="flex-1">
+          <p className="text-sm font-medium text-gray-600">{title}</p>
+          <p className="mt-2 bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-3xl font-bold text-transparent">
+            {value}
+          </p>
+          {trend && (
+            <p className="mt-2 flex items-center gap-1 text-sm">
+              <span
+                className={cn(
+                  'font-semibold',
+                  trend.value >= 0 ? 'text-emerald-600' : 'text-red-600',
+                )}
+              >
+                {trend.value >= 0 ? '+' : ''}
+                {trend.value}%
+              </span>
+              <span className="text-gray-500">{trend.label}</span>
+            </p>
+          )}
+        </div>
+        <div
+          className={cn(
+            'rounded-xl bg-gradient-to-br p-4 shadow-md transition-transform duration-300 group-hover:scale-110 group-hover:shadow-lg',
+            iconBgColor,
+          )}
+        >
+          <Icon className={cn('h-6 w-6', iconColor)} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/src/components/dashboard/status-distribution-chart.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+'use client';
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart, ResponsiveContainer } from 'recharts';
+interface StatusDistributionChartProps {
+  data: Array<{ name: string; value: number }>;
+}
+export function StatusDistributionChart({ data }: StatusDistributionChartProps) {
+  return (
+    <div className="rounded-xl border border-gray-200/50 bg-white p-6 shadow-lg transition-shadow duration-300 hover:shadow-xl">
+      <div className="mb-4">
+        <h3 className="text-lg font-bold text-gray-900">Répartition par Statut</h3>
+        <p className="mt-1 text-sm text-gray-500">Distribution des contacts selon leur statut</p>
+      </div>
+      <div className="h-[300px]">
+        <ResponsiveContainer width="100%" height="100%">
+          <RadarChart data={data}>
+            <defs>
+              <linearGradient id="radarGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor="#8b5cf6" stopOpacity={0.8} />
+                <stop offset="100%" stopColor="#6366f1" stopOpacity={0.4} />
+              </linearGradient>
+            </defs>
+            <PolarGrid stroke="#e5e7eb" />
+            <PolarAngleAxis
+              dataKey="name"
+              stroke="#6b7280"
+              fontSize={12}
+              tick={{ fill: '#6b7280' }}
+            />
+            <Radar
+              name="Contacts"
+              dataKey="value"
+              stroke="#8b5cf6"
+              fill="url(#radarGradient)"
+              fillOpacity={0.6}
+              strokeWidth={2}
+            />
+          </RadarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}

package/template/src/components/dashboard/tasks-pie-chart.tsx ADDED Viewed

@@ -0,0 +1,88 @@
+'use client';
+import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
+interface TasksPieChartProps {
+  completed: number;
+  pending: number;
+}
+const COLORS = {
+  completed: '#10b981',
+  pending: '#f59e0b',
+};
+export function TasksPieChart({ completed, pending }: TasksPieChartProps) {
+  const data = [
+    { name: 'Complétées', value: completed },
+    { name: 'En attente', value: pending },
+  ];
+  const total = completed + pending;
+  const completionRate = total > 0 ? Math.round((completed / total) * 100) : 0;
+  return (
+    <div className="rounded-xl border border-gray-200/50 bg-white p-6 shadow-lg transition-shadow duration-300 hover:shadow-xl">
+      <div className="mb-4">
+        <h3 className="text-lg font-bold text-gray-900">Statut des Tâches</h3>
+        <p className="mt-1 text-sm text-gray-500">Répartition des tâches</p>
+      </div>
+      <div className="flex items-center justify-center">
+        <div className="relative h-[200px] w-[200px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <PieChart>
+              <Pie
+                data={data}
+                cx="50%"
+                cy="50%"
+                innerRadius={60}
+                outerRadius={80}
+                paddingAngle={2}
+                dataKey="value"
+              >
+                {data.map((entry, index) => (
+                  <Cell
+                    key={`cell-${index}`}
+                    fill={entry.name === 'Complétées' ? COLORS.completed : COLORS.pending}
+                  />
+                ))}
+              </Pie>
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: 'white',
+                  border: '1px solid #e5e7eb',
+                  borderRadius: '12px',
+                  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+                }}
+              />
+            </PieChart>
+          </ResponsiveContainer>
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="text-center">
+              <p className="text-3xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">
+                {completionRate}%
+              </p>
+              <p className="text-xs text-gray-500">Complétées</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mt-4 grid grid-cols-2 gap-4">
+        <div className="flex items-center gap-2 rounded-lg bg-emerald-50 p-2">
+          <div className="h-3 w-3 rounded-full bg-emerald-500" />
+          <div>
+            <p className="text-xs text-gray-500">Complétées</p>
+            <p className="font-semibold text-gray-900">{completed}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 rounded-lg bg-amber-50 p-2">
+          <div className="h-3 w-3 rounded-full bg-amber-500" />
+          <div>
+            <p className="text-xs text-gray-500">En attente</p>
+            <p className="font-semibold text-gray-900">{pending}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}