feat: UX

2025-12-16 13:47:29 -05:00
commit 4a0db63a30
84 changed files with 12595 additions and 0 deletions
--- a/frontend/src/components/ParticipantManager.tsx
+++ b/frontend/src/components/ParticipantManager.tsx
@@ -0,0 +1,153 @@
+import { useState } from 'react';
+import { Participant } from '@/types/calendar';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { UserPlus, Trash2, User } from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+
+interface ParticipantManagerProps {
+  participants: Participant[];
+  onAddParticipant: (participant: { name: string; email: string; icsLink: string }) => void;
+  onRemoveParticipant: (id: string) => void;
+}
+
+export const ParticipantManager = ({
+  participants,
+  onAddParticipant,
+  onRemoveParticipant,
+}: ParticipantManagerProps) => {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [icsLink, setIcsLink] = useState('');
+  const { toast } = useToast();
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!name.trim() || !email.trim() || !icsLink.trim()) {
+      toast({
+        title: "Missing fields",
+        description: "Please fill in all fields",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    onAddParticipant({ name: name.trim(), email: email.trim(), icsLink: icsLink.trim() });
+    setName('');
+    setEmail('');
+    setIcsLink('');
+
+    toast({
+      title: "Participant added",
+      description: `${name} has been added successfully`,
+    });
+  };
+
+  const getInitials = (name: string) => {
+    return name
+      .split(' ')
+      .map((n) => n[0])
+      .join('')
+      .toUpperCase()
+      .slice(0, 2);
+  };
+
+  return (
+    <div className="space-y-8">
+      {/* Add Participant Form */}
+      <div className="bg-card rounded-xl shadow-card p-6">
+        <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
+          <UserPlus className="w-5 h-5 text-primary" />
+          Add Participant
+        </h3>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid gap-4 sm:grid-cols-3">
+            <div className="space-y-2">
+              <Label htmlFor="name">Name</Label>
+              <Input
+                id="name"
+                placeholder="John Doe"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="bg-background"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="john@example.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="bg-background"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="icsLink">Calendar ICS Link</Label>
+              <Input
+                id="icsLink"
+                placeholder="https://calendar.google.com/..."
+                value={icsLink}
+                onChange={(e) => setIcsLink(e.target.value)}
+                className="bg-background"
+              />
+            </div>
+          </div>
+
+          <Button type="submit" className="w-full sm:w-auto">
+            <UserPlus className="w-4 h-4 mr-2" />
+            Add Participant
+          </Button>
+        </form>
+      </div>
+
+      {/* Participants List */}
+      <div className="bg-card rounded-xl shadow-card p-6">
+        <h3 className="text-lg font-semibold text-foreground mb-4">
+          Participants ({participants.length})
+        </h3>
+
+        {participants.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <User className="w-12 h-12 mx-auto mb-3 opacity-50" />
+            <p>No participants yet. Add someone above to get started.</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {participants.map((participant) => (
+              <div
+                key={participant.id}
+                className="flex items-center justify-between p-4 bg-background rounded-lg border border-border"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-sm font-medium text-primary">
+                    {getInitials(participant.name)}
+                  </div>
+                  <div>
+                    <div className="font-medium text-foreground">{participant.name}</div>
+                    <div className="text-sm text-muted-foreground">{participant.email}</div>
+                  </div>
+                </div>
+
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => onRemoveParticipant(participant.id)}
+                  className="text-muted-foreground hover:text-destructive"
+                >
+                  <Trash2 className="w-4 h-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};