Initial commit

2026-06-17 13:51:22 +02:00
commit 4898bf7142
81 changed files with 12522 additions and 0 deletions
@@ -0,0 +1,91 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { LeadStatusBadge } from "./lead-status-badge"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Lead } from "@/types"
+import {
+  Building2,
+  Mail,
+  Phone,
+  Globe,
+  User,
+  CalendarDays,
+  Clock,
+  Tag,
+} from "lucide-react"
+
+interface LeadDetailsCardProps {
+  lead: Lead
+}
+
+export function LeadDetailsCard({ lead }: LeadDetailsCardProps) {
+  const fields = [
+    { icon: Building2, label: "Company", value: lead.companyName },
+    { icon: User, label: "Contact", value: lead.contactName },
+    { icon: Mail, label: "Email", value: lead.email },
+    { icon: Phone, label: "Phone", value: lead.phone || "—" },
+    { icon: Globe, label: "Source", value: lead.source || "—" },
+    { icon: Tag, label: "Status", value: <LeadStatusBadge status={lead.status} /> },
+    { icon: CalendarDays, label: "Created", value: new Date(lead.createdAt).toLocaleDateString() },
+    { icon: Clock, label: "Updated", value: new Date(lead.updatedAt).toLocaleDateString() },
+  ]
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+    >
+      <Card>
+        <CardHeader>
+          <CardTitle>Lead Information</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-6 sm:grid-cols-2">
+            {fields.map((field, i) => (
+              <div key={i} className="flex items-start gap-3">
+                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted">
+                  <field.icon className="h-4 w-4 text-muted-foreground" />
+                </div>
+                <div className="space-y-0.5">
+                  <p className="text-xs text-muted-foreground">{field.label}</p>
+                  <div className="text-sm font-medium">{field.value}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {lead.description && (
+            <div className="mt-6 border-t pt-6">
+              <h4 className="mb-2 text-sm font-medium text-muted-foreground">Description</h4>
+              <p className="text-sm leading-relaxed">{lead.description}</p>
+            </div>
+          )}
+
+          <div className="mt-6 border-t pt-6">
+            <h4 className="mb-3 text-sm font-medium text-muted-foreground">Assigned User</h4>
+            {lead.assignedUser ? (
+              <div className="flex items-center gap-3">
+                <Avatar className="h-10 w-10">
+                  <AvatarImage src={lead.assignedUser.avatar} />
+                  <AvatarFallback>{lead.assignedUser.name[0]}</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className="text-sm font-medium">{lead.assignedUser.name}</p>
+                  <Badge variant="secondary" className="mt-0.5 text-xs">
+                    {lead.assignedUser.role}
+                  </Badge>
+                </div>
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground">No user assigned</p>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </motion.div>
+  )
+}