create-crm-tmp 1.0.0

package/template/src/components/dashboard/top-contacts-list.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import Link from 'next/link';
+import { cn } from '@/lib/utils';
+
+interface Contact {
+  id: string;
+  name: string;
+  phone: string;
+  email: string | null;
+  status: string;
+  interactionsCount: number;
+  assignedCommercial?: string;
+  assignedTelepro?: string;
+}
+
+interface TopContactsListProps {
+  contacts: Contact[];
+}
+
+const statusColors: Record<string, { bg: string; text: string }> = {
+  Nouveau: { bg: 'bg-blue-100', text: 'text-blue-700' },
+  Contacté: { bg: 'bg-orange-100', text: 'text-orange-700' },
+  Qualifié: { bg: 'bg-green-100', text: 'text-green-700' },
+  Prospect: { bg: 'bg-purple-100', text: 'text-purple-700' },
+};
+
+export function TopContactsList({ contacts }: TopContactsListProps) {
+  if (contacts.length === 0) {
+    return (
+      <div className="rounded-xl border border-gray-200/50 bg-white p-6 shadow-lg">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-bold text-gray-900">Prospects</h3>
+          <Link
+            href="/contacts"
+            className="text-sm font-semibold text-indigo-600 transition-colors hover:text-indigo-700"
+          >
+            Voir tout →
+          </Link>
+        </div>
+        <div className="mt-6 text-center text-sm text-gray-500">
+          <p className="mt-2">Aucun contact</p>
+        </div>
+      </div>
+    );
+  }
+
+  const getStatusColor = (status: string) => {
+    return statusColors[status] || { bg: 'bg-gray-100', text: 'text-gray-700' };
+  };
+
+  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">Prospects</h3>
+        <Link
+          href="/contacts"
+          className="text-sm font-semibold text-indigo-600 transition-colors hover:text-indigo-700"
+        >
+          Voir tout →
+        </Link>
+      </div>
+      <div className="overflow-x-auto">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-700">
+                Nom du Prospect
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-700">
+                Email
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-700">
+                Télépro
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-700">
+                Statut
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200 bg-white">
+            {contacts.map((contact) => {
+              const statusColor = getStatusColor(contact.status);
+              const nameParts = contact.name.split(' ');
+              const firstName = nameParts[0] || '';
+              const lastName = nameParts.slice(1).join(' ') || '';
+              const initials = `${firstName[0] || ''}${lastName[0] || ''}`.toUpperCase();
+
+              return (
+                <tr key={contact.id} className="transition-colors hover:bg-gray-50">
+                  <td className="whitespace-nowrap px-4 py-4">
+                    <div className="flex items-center gap-3">
+                      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-indigo-100 to-purple-100 text-xs font-semibold text-indigo-700">
+                        {initials || '?'}
+                      </div>
+                      <Link
+                        href={`/contacts/${contact.id}`}
+                        className="font-semibold text-gray-900 transition-colors hover:text-indigo-600"
+                      >
+                        {contact.name}
+                      </Link>
+                    </div>
+                  </td>
+                  <td className="whitespace-nowrap px-4 py-4 text-sm text-gray-700">
+                    {contact.email || '-'}
+                  </td>
+                  <td className="whitespace-nowrap px-4 py-4 text-sm text-gray-700">
+                    {contact.assignedTelepro || '-'}
+                  </td>
+                  <td className="whitespace-nowrap px-4 py-4">
+                    <span
+                      className={cn(
+                        'inline-flex rounded-full px-2.5 py-0.5 text-xs font-semibold',
+                        statusColor.bg,
+                        statusColor.text,
+                      )}
+                    >
+                      {contact.status}
+                    </span>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/template/src/components/dashboard/upcoming-tasks-list.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import Link from 'next/link';
+import { Calendar, Phone, Video, Mail, CheckCircle2, Clock } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface Task {
+  id: string;
+  title: string;
+  type: string;
+  scheduledAt: string;
+  contact: { id: string; name: string } | null;
+  priority: string;
+}
+
+interface UpcomingTasksListProps {
+  tasks: Task[];
+}
+
+const taskIcons = {
+  CALL: Phone,
+  MEETING: Calendar,
+  EMAIL: Mail,
+  VIDEO_CONFERENCE: Video,
+  OTHER: CheckCircle2,
+};
+
+const priorityColors = {
+  LOW: 'text-gray-500 bg-gray-100',
+  MEDIUM: 'text-blue-600 bg-blue-100',
+  HIGH: 'text-orange-600 bg-orange-100',
+  URGENT: 'text-red-600 bg-red-100',
+};
+
+const priorityLabels = {
+  LOW: 'Basse',
+  MEDIUM: 'Moyenne',
+  HIGH: 'Haute',
+  URGENT: 'Urgente',
+};
+
+export function UpcomingTasksList({ tasks }: UpcomingTasksListProps) {
+  if (tasks.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">Tâches à Venir</h3>
+          <Link
+            href="/agenda"
+            className="text-sm font-medium text-indigo-600 hover:text-indigo-700"
+          >
+            Voir tout
+          </Link>
+        </div>
+        <div className="mt-6 text-center text-sm text-gray-500">
+          <Clock className="mx-auto h-12 w-12 text-gray-400" />
+          <p className="mt-2">Aucune tâche à venir</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">Liste des Tâches</h3>
+        <Link
+          href="/agenda"
+          className="text-sm font-semibold text-indigo-600 transition-colors hover:text-indigo-700"
+        >
+          Voir tout →
+        </Link>
+      </div>
+      <div className="space-y-3">
+        {tasks.map((task) => {
+          const Icon = taskIcons[task.type as keyof typeof taskIcons] || CheckCircle2;
+          const scheduledDate = new Date(task.scheduledAt);
+
+          return (
+            <div
+              key={task.id}
+              className="group flex items-start gap-3 rounded-lg border border-gray-100 bg-gray-50/50 p-3 transition-all duration-200 hover:border-indigo-200 hover:bg-indigo-50/30"
+            >
+              <input
+                type="checkbox"
+                className="mt-1 h-4 w-4 cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-2 focus:ring-indigo-500"
+              />
+              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-indigo-100 to-purple-100">
+                <Icon className="h-4 w-4 text-indigo-600" />
+              </div>
+              <div className="flex-1">
+                <div className="flex items-start justify-between">
+                  <div>
+                    <p className="font-semibold text-gray-900">{task.title}</p>
+                    {task.contact && (
+                      <Link
+                        href={`/contacts/${task.contact.id}`}
+                        className="text-sm text-gray-600 transition-colors hover:text-indigo-600"
+                      >
+                        {task.contact.name}
+                      </Link>
+                    )}
+                  </div>
+                  <button className="opacity-0 transition-opacity group-hover:opacity-100">
+                    <span className="text-gray-400">⋯</span>
+                  </button>
+                </div>
+                <p className="mt-1 text-xs text-gray-500">
+                  {scheduledDate.toLocaleDateString('fr-FR', {
+                    day: 'numeric',
+                    month: 'long',
+                  })}{' '}
+                  à{' '}
+                  {scheduledDate.toLocaleTimeString('fr-FR', {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                  })}
+                </p>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}