Repository: nyainda/animal-haven-manager
Pull request #9: fix:fixed error in transaction
Author: login: nyainda
Created: 2025-05-25T17:58:41Z | Merged: 2025-05-25T18:01:44Z



<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Redesigned calendar view with enhanced visuals, internal event and animal management, and a sidebar showing detailed events for selected days.
  - Event creation dialog now features custom tabs for "Note" and "Task" types, improved validation, and streamlined form fields.
  - Improved navigation with previous/next month and "Today" buttons.

- **Refactor**
  - Calendar view is now fully self-contained, with internal state and mock data, and no longer relies on external props or UI libraries.
  - Updated styling for a more modern, responsive, and accessible interface.

- **Bug Fixes**
  - Corrected transaction status options by removing an invalid status.
  - Removed the 'trade' option from transaction type selections.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/src/components/dashboard/CalendarView.tsx b/src/components/dashboard/CalendarView.tsx
index 1b7f5ec..1b24e59 100644
--- a/src/components/dashboard/CalendarView.tsx
+++ b/src/components/dashboard/CalendarView.tsx
@@ -1,679 +1,770 @@
-import React, { useState } from 'react';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Input } from '@/components/ui/input';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Textarea } from '@/components/ui/textarea';
-import { cn } from '@/lib/utils';
-import { format, startOfMonth, endOfMonth, eachDayOfInterval, isSameDay, addMonths, subMonths, getDay, startOfWeek, addDays } from 'date-fns';
-import { ChevronLeft, ChevronRight, Calendar as CalendarIcon, Plus, Clock } from 'lucide-react';
-import { Animal } from '@/types/AnimalTypes';
-import { NoteFormData } from '@/services/noteApi';
-import { TaskFormData } from '@/services/taskApi';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-
-interface CalendarEvent {
-  id: string;
-  title: string;
-  date: Date;
-  time?: string;
-  type: 'appointment' | 'note' | 'task' | 'meeting' | 'production';
-  animalId?: string;
-  priority?: 'low' | 'medium' | 'high';
-  status?: 'pending' | 'completed' | 'archived';
-  taskType?: string;
-}
-
-interface CalendarViewProps {
-  calendarEvents: CalendarEvent[];
-  currentMonth: Date;
-  setCurrentMonth: (date: Date) => void;
-  selectedDate: Date | null;
-  setSelectedDate: (date: Date | null) => void;
-  animals: Animal[];
-  onNoteCreated: (animalId: string, noteData: NoteFormData) => void;
-  onTaskCreated: (animalId: string, taskData: TaskFormData) => void;
-}
-
-const CalendarView: React.FC<CalendarViewProps> = ({
-  calendarEvents,
-  currentMonth,
-  setCurrentMonth,
-  selectedDate,
-  setSelectedDate,
-  animals,
-  onNoteCreated,
-  onTaskCreated,
-}) => {
+import React, { useState, useEffect, useCallback } from 'react';
+import { ChevronLeft, ChevronRight, Calendar, Plus, Clock, Users, Briefcase, Play, FileText, CheckSquare, X } from 'lucide-react';
+
+// Mock data for demo
+const mockAnimals = [
+  { id: '1', name: 'Bella', type: 'Dog' },
+  { id: '2', name: 'Whiskers', type: 'Cat' },
+  { id: '3', name: 'Charlie', type: 'Horse' },
+  { id: '4', name: 'Daisy', type: 'Cow' },
+];
+
+const mockEvents = [
+  {
+    id: '1',
+    title: 'Vaccination Checkup',
+    date: new Date(2025, 4, 26), // Note: Month is 0-indexed, so 4 is May
+    time: '09:00',
+    type: 'appointment',
+    animalId: '1',
+    priority: 'high',
+    status: 'pending'
+  },
+  {
+    id: '2',
+    title: 'Health Notes Review',
+    date: new Date(2025, 4, 28),
+    type: 'note',
+    animalId: '2',
+    priority: 'medium',
+    status: 'completed',
+    content: 'Reviewed annual health records. All clear.',
+    category: 'Health Record'
+  },
+  {
+    id: '3',
+    title: 'Feeding Schedule Update',
+    date: new Date(2025, 4, 30),
+    time: '14:30',
+    type: 'task',
+    animalId: '3',
+    priority: 'low',
+    status: 'pending',
+    taskType: 'Feeding',
+    description: 'Transition to new feed type.'
+  },
+];
+
+const CalendarView = () => {
+  const [currentMonth, setCurrentMonth] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(null);
+  const [calendarEvents, setCalendarEvents] = useState(mockEvents); // Changed to allow updates
+  const [animals] = useState(mockAnimals);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [eventType, setEventType] = useState<'note' | 'task'>('note');
-  const [formData, setFormData] = useState<{
-    title?: string; // For tasks
-    content?: string; // For notes
-    task_type?: string;
-    category?: string;
-    keywords?: string;
-    animalId?: string;
-    priority: 'low' | 'medium' | 'high';
-    status: 'pending' | 'completed' | 'archived';
-    start_date?: string;
-    start_time?: string;
-    end_date?: string;
-    end_time?: string;
-    duration?: number;
-    description?: string;
-    health_notes?: string;
-    location?: string;
-    repeats?: 'daily' | 'weekly' | 'monthly';
-    repeat_frequency?: number;
-    end_repeat_date?: string;
-    add_to_calendar?: boolean;
-  }>({
+  const [eventType, setEventType] = useState('note'); // Default to 'note'
+  const [formData, setFormData] = useState({
+    title: '',
+    content: '',
+    task_type: '', // For task's specific type, e.g., "Feeding", "Vaccination"
+    category: '',   // For note's category
+    keywords: '',   // Not used in current form, but part of original state
+    animalId: '',
     priority: 'medium',
     status: 'pending',
-    start_date: selectedDate ? format(selectedDate, 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
+    start_date: '', // Will be set from selectedDate
     start_time: '09:00',
-    end_date: selectedDate ? format(selectedDate, 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
-    end_time: '10:00',
-    duration: 60,
-    add_to_calendar: true,
+    end_date: '',   // Not directly used for simple event creation logic here
+    end_time: '10:00', // Not directly used
+    duration: 60,    // For tasks
+    description: '', // For tasks
+    health_notes: '',// Not used in current form
+    location: '',    // Not used in current form
+    repeats: '',     // Not used in current form
+    repeat_frequency: 1, // Not used
+    end_repeat_date: '', // Not used
+    add_to_calendar: true, // Not used
   });
 
-  const handleCreateEvent = () => {
-    if (!selectedDate || !formData.animalId) return;
-
-    if (eventType === 'note' && formData.content) {
-      const noteData: NoteFormData = {
-        content: formData.content,
-        category: formData.category || 'General',
-        keywords: formData.keywords?.split(',').map(k => k.trim()).filter(k => k) || [],
-        priority: formData.priority,
-        status: formData.status,
-        due_date: formData.start_date || format(selectedDate, 'yyyy-MM-dd'),
-        add_to_calendar: formData.add_to_calendar || false,
-      };
-      onNoteCreated(formData.animalId, noteData);
-    } else if (
-      eventType === 'task' &&
-      formData.title &&
-      formData.task_type &&
-      formData.start_date &&
-      formData.start_time &&
-      formData.end_date &&
-      formData.end_time &&
-      formData.duration
-    ) {
-      const taskData: TaskFormData = {
-        title: formData.title,
-        task_type: formData.task_type,
-        start_date: formData.start_date,
-        start_time: formData.start_time,
-        end_date: formData.end_date,
-        end_time: formData.end_time,
-        duration: formData.duration,
-        description: formData.description,
-        health_notes: formData.health_notes,
-        location: formData.location,
-        priority: formData.priority,
-        status: formData.status,
-        repeats: formData.repeats,
-        repeat_frequency: formData.repeat_frequency,
-        end_repeat_date: formData.end_repeat_date,
-      };
-      onTaskCreated(formData.animalId, taskData);
+  const monthNames = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+  ];
+
+  const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+  const getMonthStart = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
+  const getMonthEnd = (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0);
+  const isSameDay = (date1, date2) =>
+    date1 && date2 && // Ensure dates are not null
+    date1.getDate() === date2.getDate() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getFullYear() === date2.getFullYear();
+
+  const generateCalendarDays = () => {
+    const monthStart = getMonthStart(currentMonth);
+    const monthEnd = getMonthEnd(currentMonth);
+    const startDate = new Date(monthStart);
+    startDate.setDate(startDate.getDate() - monthStart.getDay());
+
+    const days = [];
+    const dateIterator = new Date(startDate);
+
+    for (let i = 0; i < 42; i++) {
+      days.push(new Date(dateIterator));
+      dateIterator.setDate(dateIterator.getDate() + 1);
+    }
+    return days;
+  };
+
+  const getEventsForDay = useCallback((day) => {
+    if (!day) return [];
+    return calendarEvents.filter(event => isSameDay(event.date, day));
+  }, [calendarEvents]);
+
+
+  const getEventTypeIcon = (type) => {
+    switch (type) {
+      case 'appointment': return <Clock className="w-3 h-3 text-white" />;
+      case 'meeting': return <Users className="w-3 h-3 text-white" />;
+      case 'note': return <FileText className="w-3 h-3 text-white" />;
+      case 'task': return <CheckSquare className="w-3 h-3 text-white" />;
+      case 'production': return <Play className="w-3 h-3 text-white" />;
+      default: return <Briefcase className="w-3 h-3 text-white" />;
+    }
+  };
+
+  const getEventTypeColor = (type) => {
+    switch (type) {
+      case 'appointment': return 'from-blue-500 to-blue-600';
+      case 'meeting': return 'from-amber-500 to-amber-600';
+      case 'note': return 'from-emerald-500 to-emerald-600';
+      case 'task': return 'from-violet-500 to-violet-600';
+      case 'production': return 'from-pink-500 to-pink-600';
+      default: return 'from-gray-500 to-gray-600';
     }
+  };
+
+  const getPriorityColor = (priority) => {
+    switch (priority) {
+      case 'high': return 'from-red-500 to-red-600';
+      case 'medium': return 'from-yellow-500 to-yellow-600';
+      case 'low': return 'from-green-500 to-green-600';
+      default: return 'from-gray-500 to-gray-600';
+    }
+  };
+
+  const navigateMonth = (direction) => {
+    const newMonth = new Date(currentMonth);
+    newMonth.setMonth(newMonth.getMonth() + direction);
+    setCurrentMonth(newMonth);
+  };
+
+  const resetForm = useCallback(() => {
     setFormData({
+      title: '',
+      content: '',
+      task_type: '',
+      category: '',
+      keywords: '',
+      animalId: '',
       priority: 'medium',
       status: 'pending',
-      start_date: selectedDate ? format(selectedDate, 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
+      start_date: selectedDate ? selectedDate.toISOString().split('T')[0] : new Date().toISOString().split('T')[0],
       start_time: '09:00',
-      end_date: selectedDate ? format(selectedDate, 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
+      end_date: selectedDate ? selectedDate.toISOString().split('T')[0] : new Date().toISOString().split('T')[0],
       end_time: '10:00',
       duration: 60,
+      description: '',
+      health_notes: '',
+      location: '',
+      repeats: '',
+      repeat_frequency: 1,
+      end_repeat_date: '',
       add_to_calendar: true,
     });
-    setIsDialogOpen(false);
-  };
+  }, [selectedDate]); // formData depends on selectedDate for date pre-fill
 
-  // Priority and status badges
-  const getPriorityBadge = (priority: 'low' | 'medium' | 'high') => {
-    return (
-      <span className={cn(
-        'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium',
-        priority === 'high' && 'bg-red-100 text-red-800',
-        priority === 'medium' && 'bg-yellow-100 text-yellow-800',
-        priority === 'low' && 'bg-green-100 text-green-800'
-      )}>
-        {priority}
-      </span>
-    );
-  };
+  // Reset form when dialog opens or selectedDate for dialog changes
+  useEffect(() => {
+    if (isDialogOpen && selectedDate) {
+      resetForm();
+    }
+  }, [isDialogOpen, selectedDate, resetForm]);
 
-  const getStatusBadge = (status: 'pending' | 'completed' | 'archived') => {
-    return (
-      <span className={cn(
-        'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium',
-        status === 'pending' && 'bg-blue-100 text-blue-800',
-        status === 'completed' && 'bg-green-100 text-green-800',
-        status === 'archived' && 'bg-gray-100 text-gray-800'
-      )}>
-        {status}
-      </span>
-    );
-  };
+  // Adjust form fields when eventType changes within the dialog
+  useEffect(() => {
+    if (isDialogOpen) { // Only apply when dialog is open
+        setFormData(prev => ({
+            ...prev, // Keep common fields like animalId, priority, status, start_date
+            // Reset fields that are specific to one type or might need clearing
+            title: '', // Reset title as context might imply a different kind of title
+            content: eventType === 'note' ? prev.content : '', // Keep if switching to note, clear if switching away
+            category: eventType === 'note' ? prev.category : '',
+            task_type: eventType === 'task' ? prev.task_type : '',
+            description: eventType === 'task' ? prev.description : '',
+            // start_time and duration are more task-specific but might be kept for convenience
+        }));
+    }
+  }, [eventType, isDialogOpen]);
 
-  const getEventTypeColor = (type: string) => {
-    switch (type) {
-      case 'appointment': return 'bg-blue-500';
-      case 'note': return 'bg-emerald-500';
-      case 'task': return 'bg-violet-500';
-      case 'meeting': return 'bg-amber-500';
-      case 'production': return 'bg-pink-500';
-      default: return 'bg-gray-500';
+
+  const handleCreateEvent = () => {
+    if (!selectedDate) {
+      alert("Error: A date must be selected to create an event.");
+      return;
+    }
+    if (!formData.animalId) {
+      alert("Please select an animal for the event.");
+      return;
     }
+    if (!formData.title.trim()) {
+      alert(`Please enter a title for the ${eventType}.`);
+      return;
+    }
+    if (eventType === 'note' && !formData.content.trim() && !formData.title.trim()) {
+      alert("Please enter a title or content for the note.");
+      return;
+    }
+
+
+    const newEvent: any = {
+      id: String(Date.now()), // Simple unique ID
+      title: formData.title.trim(),
+      date: new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()), // Use date part of selectedDate
+      animalId: formData.animalId,
+      priority: formData.priority,
+      status: formData.status,
+      type: eventType, // This is 'note' or 'task' from the dialog
+    };
+
+    if (eventType === 'note') {
+      newEvent.content = formData.content.trim();
+      if (formData.category.trim()) newEvent.category = formData.category.trim();
+    } else if (eventType === 'task') {
+      if (formData.task_type.trim()) newEvent.taskType = formData.task_type.trim(); // Corresponds to mockEvent's taskType
+      if (formData.start_time) newEvent.time = formData.start_time;
+      newEvent.duration = formData.duration;
+      if (formData.description.trim()) newEvent.description = formData.description.trim();
+    }
+
+    setCalendarEvents(prevEvents => [...prevEvents, newEvent]);
+    setIsDialogOpen(false);
+    // resetForm(); // Form will be reset by the useEffect when isDialogOpen becomes true again or by explicit user action.
+                   // Or, if we want it reset immediately for the *next* potential opening without relying on selectedDate change:
+    // Let's keep the original pattern of resetting after creation for good measure.
+    // However, resetForm depends on selectedDate, which hasn't changed. This is fine.
+    // The useEffect for dialog open will handle the fresh reset.
+  };
+
+  const days = generateCalendarDays();
+  const today = new Date();
+  const selectedEvents = selectedDate ? getEventsForDay(selectedDate) : getEventsForDay(today);
+
+  const openDialogForDate = (date) => {
+    setSelectedDate(date);
+    setEventType('note'); // Default to 'note' when opening
+    setIsDialogOpen(true);
   };
 
-  const renderCalendarHeader = () => (
-    <div className="flex justify-between items-center mb-6">
-      <div className="flex items-center space-x-2">
-        <CalendarIcon className="h-6 w-6 text-primary" />
-        <h2 className="text-2xl font-semibold">{format(currentMonth, 'MMMM yyyy')}</h2>
-      </div>
-      <div className="flex space-x-2">
-        <Button 
-          variant="outline" 
-          size="icon" 
-          onClick={() => setCurrentMonth(subMonths(currentMonth, 1))}
-          className="rounded-full"
-        >
-          <ChevronLeft className="h-4 w-4" />
-        </Button>
-        <Button 
-          variant="outline" 
-          onClick={() => setCurrentMonth(new Date())}
-          className="text-sm"
-        >
-          Today
-        </Button>
-        <Button 
-          variant="outline" 
-          size="icon" 
-          onClick={() => setCurrentMonth(addMonths(currentMonth, 1))}
-          className="rounded-full"
-        >
-          <ChevronRight className="h-4 w-4" />
-        </Button>
-      </div>
-    </div>
-  );
 
-  const renderCalendarGrid = () => {
-    const monthStart = startOfMonth(currentMonth);
-    const monthEnd = endOfMonth(currentMonth);
-    const days = eachDayOfInterval({ start: monthStart, end: monthEnd });
-    const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-    const startWeek = startOfWeek(monthStart);
-
-    const calendarCells = [];
-    for (let i = 0; i < getDay(monthStart); i++) {
-      const prevDay = addDays(startWeek, i);
-      calendarCells.push(
-        <div key={`prev-${i}`} className="h-24 p-1 text-muted-foreground text-center border border-muted bg-muted/5">
-          <span className="text-xs opacity-50">{format(prevDay, 'd')}</span>
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 p-4 sm:p-6 lg:p-8 text-white">
+      <div className="max-w-7xl mx-auto">
+        {/* Header */}
+        <div className="mb-8 text-center">
+          <h1 className="text-4xl sm:text-5xl font-bold text-white mb-2 bg-gradient-to-r from-white via-purple-300 to-purple-400 bg-clip-text text-transparent">
+            Animal Care Calendar
+          </h1>
+          <p className="text-purple-200 text-lg">Manage schedules, tasks, and health records</p>
         </div>
-      );
-    }
 
-    days.forEach(day => {
-      const eventsForDay = calendarEvents.filter(event => isSameDay(event.date, day));
-      const isSelected = selectedDate && isSameDay(day, selectedDate);
-      const isToday = isSameDay(day, new Date());
-
-      calendarCells.push(
-        <div
-          key={day.toString()}
-          className={cn(
-            'h-24 p-1 border border-muted relative cursor-pointer transition-all',
-            isSelected ? 'bg-primary/10 border-primary shadow-sm' : 'hover:bg-muted/10',
-            isToday && 'ring-2 ring-primary/20'
-          )}
-          onClick={() => setSelectedDate(day)}
-          role="button"
-          aria-label={`Select ${format(day, 'MMMM d, yyyy')}`}
-          tabIndex={0}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-              setSelectedDate(day);
-            }
-          }}
-        >
-          <div className="flex justify-between items-start">
-            <span
-              className={cn(
-                'text-sm font-medium h-6 w-6 flex items-center justify-center rounded-full',
-                isToday && 'bg-primary text-primary-foreground'
-              )}
+        {/* Main Content */}
+        {calendarEvents.length === 0 && !isDialogOpen ? ( // Added !isDialogOpen to ensure it doesn't show if dialog is opening for the first time
+          <div className="backdrop-blur-xl bg-white/10 rounded-3xl border border-white/20 shadow-2xl p-12 text-center">
+            <Calendar className="w-24 h-24 text-white/20 mx-auto mb-6" />
+            <h3 className="text-2xl font-bold text-white mb-4">No events scheduled yet</h3>
+            <p className="text-purple-200 mb-8 max-w-md mx-auto">
+              Start by selecting a date and adding your first event to manage your animal care schedule.
+            </p>
+            <button
+              onClick={() => openDialogForDate(new Date())}
+              className="px-8 py-4 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-semibold rounded-xl hover:from-purple-700 hover:to-blue-700 transition-all duration-300 hover:scale-105 shadow-lg"
             >
-              {format(day, 'd')}
-            </span>
-            {isSelected && (
-              <Button
-                size="sm"
-                variant="ghost"
-                className="h-6 w-6 p-0 rounded-full"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setIsDialogOpen(true);
-                }}
-              >
-                <Plus className="h-3 w-3" />
-              </Button>
-            )}
+              Add Your First Event
+            </button>
           </div>
-          {eventsForDay.length > 0 && (
-            <div className="mt-1 space-y-1 overflow-hidden max-h-[calc(100%-24px)]">
-              {eventsForDay.slice(0, 3).map((event) => (
-                <div
-                  key={event.id}
-                  className={cn(
-                    'text-xs px-1.5 py-0.5 rounded-sm truncate flex items-center space-x-1',
-                    `${getEventTypeColor(event.type)} bg-opacity-90 text-white`
-                  )}
-                  title={`${event.title}${event.time ? ` at ${event.time}` : ''}`}
-                >
-                  {event.time && (
-                    <Clock className="h-2.5 w-2.5 flex-shrink-0" />
-                  )}
-                  <span className="truncate">{event.title}</span>
-                </div>
-              ))}
-              {eventsForDay.length > 3 && (
-                <div className="text-xs px-1.5 py-0.5 text-muted-foreground font-medium">
-                  +{eventsForDay.length - 3} more
+        ) : (
+          <div className="grid lg:grid-cols-4 gap-8">
+            {/* Main Calendar */}
+            <div className="lg:col-span-3">
+              <div className="backdrop-blur-xl bg-white/10 rounded-3xl border border-white/20 shadow-2xl overflow-hidden">
+                {/* Calendar Header */}
+                <div className="bg-gradient-to-r from-purple-600/20 to-blue-600/20 backdrop-blur-sm border-b border-white/10 p-6">
+                  <div className="flex items-center justify-between mb-6">
+                    <button
+                      onClick={() => navigateMonth(-1)}
+                      className="group flex items-center justify-center w-12 h-12 rounded-xl bg-white/10 border border-white/20 hover:bg-white/20 transition-all duration-300 hover:scale-105"
+                      aria-label="Previous month"
+                    >
+                      <ChevronLeft className="w-5 h-5 text-white group-hover:text-purple-200" />
+                    </button>
+                    
+                    <h2 className="text-2xl sm:text-3xl font-bold text-white">
+                      {monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()}
+                    </h2>
+                    
+                    <div className="flex gap-2">
+                      <button
+                        onClick={() => setCurrentMonth(new Date())}
+                        className="px-4 py-2 bg-white/10 border border-white/20 text-white rounded-xl hover:bg-white/20 transition-all duration-300 text-sm font-medium"
+                      >
+                        Today
+                      </button>
+                      <button
+                        onClick={() => navigateMonth(1)}
+                        className="group flex items-center justify-center w-12 h-12 rounded-xl bg-white/10 border border-white/20 hover:bg-white/20 transition-all duration-300 hover:scale-105"
+                        aria-label="Next month"
+                      >
+                        <ChevronRight className="w-5 h-5 text-white group-hover:text-purple-200" />
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* Legend */}
+                  <div className="flex flex-wrap gap-x-4 gap-y-2 justify-center sm:justify-start">
+                    {[
+                      { type: 'appointment', label: 'Appointments', color: getEventTypeColor('appointment') },
+                      { type: 'note', label: 'Notes', color: getEventTypeColor('note') },
+                      { type: 'task', label: 'Tasks', color: getEventTypeColor('task') },
+                      { type: 'meeting', label: 'Meetings', color: getEventTypeColor('meeting') },
+                      { type: 'production', label: 'Production', color: getEventTypeColor('production') },
+                    ].map(item => (
+                      <div key={item.type} className="flex items-center gap-2">
+                        <div className={`w-3 h-3 rounded-full bg-gradient-to-r ${item.color} shadow-lg`} />
+                        <span className="text-white/80 text-sm font-medium">{item.label}</span>
+                      </div>
+                    ))}
+                  </div>
                 </div>
-              )}
-            </div>
-          )}
-        </div>
-      );
-    });
 
-    const totalCells = 7 * Math.ceil(days.length / 7);
-    const remainingCells = totalCells - calendarCells.length;
-    for (let i = 1; i <= remainingCells; i++) {
-      calendarCells.push(
-        <div key={`next-${i}`} className="h-24 p-1 text-muted-foreground text-center border border-muted bg-muted/5">
-          <span className="text-xs opacity-50">{i}</span>
-        </div>
-      );
-    }
+                {/* Calendar Grid */}
+                <div className="p-4 sm:p-6">
+                  {/* Week Days Header */}
+                  <div className="grid grid-cols-7 gap-1 sm:gap-2 mb-3 sm:mb-4">
+                    {weekDays.map(day => (
+                      <div key={day} className="text-center p-2 sm:p-3 text-white/60 font-semibold text-xs sm:text-sm">
+                        <span className="hidden sm:inline">{day}</span>
+                        <span className="sm:hidden">{day.slice(0, 1)}</span>
+                      </div>
+                    ))}
+                  </div>
 
-    return (
-      <div className="grid grid-cols-7 gap-0">
-        {weekDays.map(day => (
-          <div key={day} className="text-center p-2 font-medium bg-muted/10 border-b border-muted text-sm">{day}</div>
-        ))}
-        {calendarCells}
-      </div>
-    );
-  };
+                  {/* Calendar Days */}
+                  <div className="grid grid-cols-7 gap-1 sm:gap-2">
+                    {days.map((day, index) => {
+                      const isCurrentMonthDay = day.getMonth() === currentMonth.getMonth();
+                      const isTodayDate = isSameDay(day, today);
+                      const isSelectedDate = selectedDate && isSameDay(day, selectedDate);
+                      const dayEvents = getEventsForDay(day);
+                      
+                      return (
+                        <div
+                          key={index}
+                          onClick={() => setSelectedDate(day)}
+                          className={`
+                            relative group cursor-pointer rounded-lg sm:rounded-xl p-2 sm:p-3 min-h-[4.5rem] sm:min-h-[6rem] 
+                            transition-all duration-300 hover:scale-105 border 
+                            ${isCurrentMonthDay 
+                              ? 'bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20' 
+                              : 'bg-white/[0.02] border-white/5 hover:bg-white/5 text-white/40'
+                            }
+                            ${isSelectedDate ? 'bg-purple-500/30 border-purple-400/60 shadow-lg shadow-purple-500/30 scale-105' : ''}
+                            ${isTodayDate && !isSelectedDate ? 'ring-2 ring-purple-400/70' : ''}
+                          `}
+                        >
+                          <div className="flex flex-col h-full">
+                            <div className="flex justify-between items-center mb-1 sm:mb-2">
+                              <span className={`
+                                text-xs sm:text-sm font-medium
+                                ${isCurrentMonthDay ? 'text-white' : 'text-white/40'}
+                                ${isTodayDate ? 'bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent font-bold' : ''}
+                              `}>
+                                {day.getDate()}
+                              </span>
+                              {isCurrentMonthDay && ( // Only show add button for days in current month (optional)
+                                <button
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    openDialogForDate(day);
+                                  }}
+                                  aria-label={`Add event for ${day.toLocaleDateString()}`}
+                                  className="opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 p-1 rounded-md bg-white/20 hover:bg-white/30 transition-opacity"
+                                >
+                                  <Plus className="w-3 h-3 text-white" />
+                                </button>
+                              )}
+                            </div>
+                            
+                            {dayEvents.length > 0 && (
+                              <div className="flex flex-col gap-1 mt-auto overflow-hidden">
+                                {dayEvents.slice(0, 2).map((event, idx) => (
+                                  <div
+                                    key={idx}
+                                    className={`
+                                      px-1.5 py-0.5 sm:px-2 sm:py-1 rounded-md bg-gradient-to-r ${getEventTypeColor(event.type)} 
+                                      text-white text-[0.6rem] sm:text-xs font-medium truncate flex items-center gap-1
+                                      shadow-md opacity-90 group-hover:opacity-100 transition-opacity
+                                    `}
+                                    title={`${event.title}${event.time ? ` at ${event.time}` : ''}`}
+                                  >
+                                    {getEventTypeIcon(event.type)}
+                                    <span className="truncate hidden sm:inline">{event.title}</span>
+                                    <span className="truncate sm:hidden">{event.title.substring(0,5)}...</span>
 
-  const renderAgendaView = () => {
-    if (!selectedDate) return null;
-
-    const eventsForDay = calendarEvents.filter(event => isSameDay(event.date, selectedDate));
-    
-    return (
-      <div className="mt-6 p-4 border rounded-lg shadow-sm bg-card">
-        <div className="flex justify-between items-center mb-4">
-          <div>
-            <h3 className="font-semibold">{format(selectedDate, 'EEEE, MMMM d, yyyy')}</h3>
-            <p className="text-sm text-muted-foreground">
-              {eventsForDay.length} event{eventsForDay.length !== 1 ? 's' : ''}
-            </p>
-          </div>
-          <Button
-            onClick={() => setIsDialogOpen(true)}
-            className="flex items-center space-x-1"
-          >
-            <Plus className="h-4 w-4 mr-1" />
-            Add Event
-          </Button>
-        </div>
-        
-        {eventsForDay.length > 0 ? (
-          <div className="space-y-2">
-            {eventsForDay.map(event => (
-              <div
-                key={event.id}
-                className="p-3 border rounded-md cursor-pointer hover:bg-muted/20 transition-colors"
-                onClick={() => {
-                  console.log('View event:', event.id);
-                }}
-              >
-                <div className="flex items-center space-x-2">
-                  <div className={`h-3 w-3 rounded-full ${getEventTypeColor(event.type)}`} />
-                  <p className="font-medium flex-grow">{event.title}</p>
-                  {event.time && (
-                    <span className="text-sm text-muted-foreground flex items-center">
-                      <Clock className="h-3 w-3 mr-1" />
-                      {event.time}
-                    </span>
+                                  </div>
+                                ))}
+                                {dayEvents.length > 2 && (
+                                  <div className="text-[0.6rem] sm:text-xs text-white/60 px-1 sm:px-2 font-medium">
+                                    +{dayEvents.length - 2} more
+                                  </div>
+                                )}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Event Details Sidebar */}
+            <div className="lg:col-span-1">
+              <div className="backdrop-blur-xl bg-white/10 rounded-3xl border border-white/20 shadow-2xl p-6 sticky top-8">
+                <div className="flex items-center justify-between mb-4">
+                  <h3 className="text-lg sm:text-xl font-bold text-white flex items-center gap-2">
+                    <Calendar className="w-5 h-5" />
+                    {selectedDate ? 'Selected Day' : "Today's Events"}
+                  </h3>
+                  {selectedDate && (
+                    <button
+                      onClick={() => openDialogForDate(selectedDate)}
+                      aria-label="Add new event for selected day"
+                      className="p-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 text-white hover:from-purple-700 hover:to-blue-700 transition-all duration-300 hover:scale-105 shadow-lg"
+                    >
+                      <Plus className="w-4 h-4" />
+                    </button>
                   )}
                 </div>
-                <div className="mt-1 text-sm text-muted-foreground capitalize flex items-center gap-2">
-                  <span className="capitalize">{event.type}</span>
-                  {event.priority && getPriorityBadge(event.priority)}
-                  {event.status && getStatusBadge(event.status)}
-                  {event.taskType && <span className="text-muted-foreground">Type: {event.taskType}</span>}
+                
+                {selectedDate && (
+                  <div className="mb-4 p-3 sm:p-4 rounded-xl bg-gradient-to-r from-purple-500/20 to-blue-500/20 border border-white/10">
+                    <p className="text-white font-medium text-sm">
+                      {selectedDate.toLocaleDateString('en-US', { 
+                        weekday: 'long', 
+                        year: 'numeric', 
+                        month: 'long', 
+                        day: 'numeric' 
+                      })}
+                    </p>
+                    <p className="text-white/60 text-xs mt-1">
+                      {selectedEvents.length} event{selectedEvents.length !== 1 ? 's' : ''}
+                    </p>
+                  </div>
+                )}
+
+                <div className="space-y-3 max-h-96 overflow-y-auto pr-1"> {/* Added pr-1 for scrollbar space */}
+                  {selectedEvents.length > 0 ? (
+                    selectedEvents.map(event => {
+                      const animal = animals.find(a => a.id === event.animalId);
+                      return (
+                        <div
+                          key={event.id}
+                          className="group p-3 sm:p-4 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 hover:border-white/20 transition-all duration-300 hover:scale-[1.02]"
+                        >
+                          <div className="flex items-start gap-3">
+                            <div className={`p-2 rounded-lg bg-gradient-to-r ${getEventTypeColor(event.type)} shadow-lg flex-shrink-0`}>
+                              {getEventTypeIcon(event.type)}
+                            </div>
+                            <div className="flex-1 min-w-0">
+                              <h4 className="font-semibold text-white group-hover:text-purple-200 transition-colors truncate text-sm sm:text-base">
+                                {event.title}
+                              </h4>
+                              {animal && (
+                                <p className="text-xs sm:text-sm text-white/60 mt-1">
+                                  {animal.name} ({animal.type})
+                                </p>
+                              )}
+                              {event.time && (
+                                <p className="text-xs sm:text-sm text-white/60 flex items-center gap-1 mt-1">
+                                  <Clock className="w-3 h-3" />
+                                  {event.time}
+                                </p>
+                              )}
+                              {event.description && event.type === 'task' && (
+                                <p className="text-xs text-white/50 mt-1 truncate" title={event.description}>
+                                  {event.description}
+                                </p>
+                              )}
+                              {event.content && event.type === 'note' && (
+                                <p className="text-xs text-white/50 mt-1 truncate" title={event.content}>
+                                  {event.content}
+                                </p>
+                              )}
+                              <div className="flex items-center flex-wrap gap-2 mt-2">
+                                {event.priority && (
+                                  <span className={`px-2 py-0.5 rounded-full text-[0.65rem] sm:text-xs font-medium bg-gradient-to-r ${getPriorityColor(event.priority)} text-white shadow-sm`}>
+                                    {event.priority}
+                                  </span>
+                                )}
+                                {event.status && (
+                                  <span className={`px-2 py-0.5 rounded-full text-[0.65rem] sm:text-xs font-medium ${
+                                    event.status === 'completed' ? 'bg-green-500/20 text-green-200 border border-green-500/30' :
+                                    event.status === 'pending' ? 'bg-blue-500/20 text-blue-200 border border-blue-500/30' :
+                                    event.status === 'in progress' ? 'bg-yellow-500/20 text-yellow-200 border border-yellow-500/30' :
+                                    'bg-gray-500/20 text-gray-200 border border-gray-500/30'
+                                  }`}>
+                                    {event.status}
+                                  </span>
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    })
+                  ) : (
+                    <div className="text-center py-8">
+                      <Calendar className="w-12 h-12 text-white/20 mx-auto mb-3" />
+                      <p className="text-white/60 mb-4">No events scheduled for {selectedDate ? 'this day' : 'today'}</p>
+                      {selectedDate && (
+                        <button
+                          onClick={() => openDialogForDate(selectedDate)}
+                          className="px-4 py-2 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-xl hover:from-purple-700 hover:to-blue-700 transition-all duration-300 text-sm font-medium"
+                        >
+                          Create Event
+                        </button>
+                      )}
+                    </div>
+                  )}
                 </div>
               </div>
-            ))}
-          </div>
-        ) : (
-          <div className="py-12 flex flex-col items-center justify-center text-muted-foreground">
-            <CalendarIcon className="h-12 w-12 mb-2 opacity-40" />
-            <p>No events scheduled for this day</p>
-            <Button
-              variant="outline"
-              className="mt-4"
-              onClick={() => setIsDialogOpen(true)}
-            >
-              Create your first event
-            </Button>
+            </div>
           </div>
         )}
-      </div>
-    );
-  };
 
-  const renderForm = () => (
-    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-      <DialogContent className="max-w-lg max-h-[80vh] overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle className="text-xl flex items-center gap-2">
-            <Plus className="h-5 w-5" />
-            New {eventType === 'note' ? 'Note' : 'Task'}
-          </DialogTitle>
-        </DialogHeader>
-        
-        <Tabs defaultValue={eventType} onValueChange={(value) => setEventType(value as 'note' | 'task')} className="mt-4">
-          <TabsList className="grid grid-cols-2 mb-4">
-            <TabsTrigger value="note">Note</TabsTrigger>
-            <TabsTrigger value="task">Task</TabsTrigger>
-          </TabsList>
-          
-          <div className="space-y-4">
-            <div className="p-2 rounded-md bg-muted/20">
-              <p className="text-sm mb-1 font-medium">Date</p>
-              <p className="text-muted-foreground text-sm">
-                {selectedDate ? format(selectedDate, 'EEEE, MMMM d, yyyy') : 'No date selected'}
-              </p>
-            </div>
-            
-            <Select
-              value={formData.animalId || ''}
-              onValueChange={(value) => setFormData(prev => ({ ...prev, animalId: value }))}
-            >
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder="Select animal" />
-              </SelectTrigger>
-              <SelectContent>
-                {animals.map(animal => (
-                  <SelectItem key={animal.id} value={animal.id}>
-                    {animal.name} ({animal.type})
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            
-            <TabsContent value="note" className="mt-0 space-y-4">
-              <Textarea
-                placeholder="Content"
-                value={formData.content || ''}
-                onChange={(e) => setFormData(prev => ({ ...prev, content: e.target.value }))}
-                className="min-h-32"
-              />
-              <Input
-                placeholder="Category (e.g., Health, Maintenance)"
-                value={formData.category || ''}
-                onChange={(e) => setFormData(prev => ({ ...prev, category: e.target.value }))}
-              />
-              <Input
-                placeholder="Keywords (comma-separated)"
-                value={formData.keywords || ''}
-                onChange={(e) => setFormData(prev => ({ ...prev, keywords: e.target.value }))}
-              />
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="add-to-calendar"
-                  checked={formData.add_to_calendar}
-                  onCheckedChange={(checked) => setFormData(prev => ({ ...prev, add_to_calendar: !!checked }))}
-                />
-                <label htmlFor="add-to-calendar" className="text-sm">Add to calendar</label>
-              </div>
-            </TabsContent>
-            
-            <TabsContent value="task" className="mt-0 space-y-4">
-              <Input
-                placeholder="Task Title"
-                value={formData.title || ''}
-                onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
-              />
-              <Input
-                placeholder="Task Type (e.g., Vaccination, Feeding)"
-                value={formData.task_type || ''}
-                onChange={(e) => setFormData(prev => ({ ...prev, task_type: e.target.value }))}
-              />
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <label className="text-sm block mb-1">Start Date</label>
-                  <Input
-                    type="date"
-                    value={formData.start_date || ''}
-                    onChange={(e) => setFormData(prev => ({ ...prev, start_date: e.target.value }))}
-                  />
-                </div>
-                <div>
-                  <label className="text-sm block mb-1">Start Time</label>
-                  <Input
-                    type="time"
-                    value={formData.start_time || ''}
-                    onChange={(e) => setFormData(prev => ({ ...prev, start_time: e.target.value }))}
-                  />
+        {/* Event Creation Dialog */}
+        {isDialogOpen && (
+          <div className="fixed inset-0 bg-slate-900/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+            <div className="bg-gradient-to-br from-slate-800 via-slate-800 to-slate-900 rounded-2xl border border-white/20 shadow-2xl max-w-lg w-full max-h-[90vh] flex flex-col">
+              <div className="sticky top-0 bg-gradient-to-r from-purple-600/30 to-blue-600/30 backdrop-blur-sm border-b border-white/10 p-5 sm:p-6">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg sm:text-xl font-bold text-white flex items-center gap-2">
+                    <Plus className="w-5 h-5" />
+                    New {eventType.charAt(0).toUpperCase() + eventType.slice(1)}
+                  </h3>
+                  <button
+                    onClick={() => setIsDialogOpen(false)}
+                    aria-label="Close dialog"
+                    className="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
+                  >
+                    <X className="w-5 h-5 text-white" />
+                  </button>
                 </div>
               </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <label className="text-sm block mb-1">End Date</label>
-                  <Input
-                    type="date"
-                    value={formData.end_date || ''}
-                    onChange={(e) => setFormData(prev => ({ ...prev, end_date: e.target.value }))}
-                  />
-                </div>
-                <div>
-                  <label className="text-sm block mb-1">End Time</label>
-                  <Input
-                    type="time"
-                    value={formData.end_time || ''}
-                    onChange={(e) => setFormData(prev => ({ ...prev, end_time: e.target.value }))}
-                  />
+
+              <div className="p-5 sm:p-6 overflow-y-auto flex-grow">
+                {/* Event Type Tabs */}
+                <div className="flex rounded-xl bg-white/10 p-1 mb-6">
+                  <button
+                    onClick={() => setEventType('note')}
+                    className={`flex-1 py-2.5 px-4 rounded-lg text-sm font-medium transition-all flex items-center justify-center gap-2 ${
+                      eventType === 'note' 
+                        ? 'bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-lg' 
+                        : 'text-white/60 hover:text-white hover:bg-white/5'
+                    }`}
+                  >
+                    <FileText className="w-4 h-4" />
+                    Note
+                  </button>
+                  <button
+                    onClick={() => setEventType('task')}
+                    className={`flex-1 py-2.5 px-4 rounded-lg text-sm font-medium transition-all flex items-center justify-center gap-2 ${
+                      eventType === 'task' 
+                        ? 'bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-lg' 
+                        : 'text-white/60 hover:text-white hover:bg-white/5'
+                    }`}
+                  >
+                    <CheckSquare className="w-4 h-4" />
+                    Task
+                  </button>
                 </div>
-              </div>
-              <Input
-                type="number"
-                placeholder="Duration (minutes)"
-                value={formData.duration || ''}
-                onChange={(e) => setFormData(prev => ({ ...prev, duration: parseInt(e.target.value) }))}
-              />
-              <Textarea
-                placeholder="Description"
-                value={formData.description || ''}
-                onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
-              />
-              <Textarea
-                placeholder="Health Notes"
-                value={formData.health_notes || ''}
-                onChange={(e) => setFormData(prev => ({ ...prev, health_notes: e.target.value }))}
-              />
-              <Input
-                placeholder="Location"
-                value={formData.location || ''}
-                onChange={(e) => setFormData(prev => ({ ...prev, location: e.target.value }))}
-              />
-              <Select
-                value={formData.repeats || ''}
-                onValueChange={(value) => setFormData(prev => ({ ...prev, repeats: value as 'daily' | 'weekly' | 'monthly' }))}
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder="Select repeat frequency" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="none">None</SelectItem>
-                  <SelectItem value="daily">Daily</SelectItem>
-                  <SelectItem value="weekly">Weekly</SelectItem>
-                  <SelectItem value="monthly">Monthly</SelectItem>
-                </SelectContent>
-              </Select>
-              {formData.repeats && (
-                <>
-                  <Input
-                    type="number"
-                    placeholder="Repeat Frequency"
-                    value={formData.repeat_frequency || ''}
-                    onChange={(e) => setFormData(prev => ({ ...prev, repeat_frequency: parseInt(e.target.value) }))}
-                  />
+
+                <div className="space-y-4">
+                  {/* Date Display */}
+                  <div className="p-3 sm:p-4 rounded-xl bg-gradient-to-r from-purple-500/10 to-blue-500/10 border border-white/10">
+                    <p className="text-white font-medium text-sm">
+                      {selectedDate ? selectedDate.toLocaleDateString('en-US', { 
+                        weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' 
+                      }) : 'No date selected'}
+                    </p>
+                  </div>
+
+                  {/* Animal Selection */}
                   <div>
-                    <label className="text-sm block mb-1">End Repeat Date</label>
-                    <Input
-                      type="date"
-                      value={formData.end_repeat_date || ''}
-                      onChange={(e) => setFormData(prev => ({ ...prev, end_repeat_date: e.target.value }))}
-                    />
+                    <label htmlFor="animalId" className="block text-sm text-white/80 font-medium mb-1.5">Animal*</label>
+                    <select
+                      id="animalId"
+                      value={formData.animalId}
+                      onChange={(e) => setFormData(prev => ({ ...prev, animalId: e.target.value }))}
+                      className="w-full p-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder-white/40 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all"
+                    >
+                      <option value="" className="bg-slate-800 text-white/70">Select animal</option>
+                      {animals.map(animal => (
+                        <option key={animal.id} value={animal.id} className="bg-slate-700 hover:bg-slate-600">
+                          {animal.name} ({animal.type})
+                        </option>
+                      ))}
+                    </select>
                   </div>
-                </>
-              )}
-            </TabsContent>
-            
-            {/* Common fields for both tabs */}
-            <div className="pt-2 grid grid-cols-2 gap-4">
-              <Select
-                value={formData.priority}
-                onValueChange={(value) => setFormData(prev => ({ ...prev, priority: value as 'low' | 'medium' | 'high' }))}
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder="Select priority" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="low">Low</SelectItem>
-                  <SelectItem value="medium">Medium</SelectItem>
-                  <SelectItem value="high">High</SelectItem>
-                </SelectContent>
-              </Select>
-              
-              <Select
-                value={formData.status}
-                onValueChange={(value) => setFormData(prev => ({ ...prev, status: value as 'pending' | 'completed' | 'archived' }))}
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder="Select status" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="pending">Pending</SelectItem>
-                  <SelectItem value="completed">Completed</SelectItem>
-                  <SelectItem value="archived">Archived</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-        </Tabs>
-        
-        <DialogFooter className="pt-4">
-          <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
-            Cancel
-          </Button>
-          <Button
-            onClick={handleCreateEvent}
-            disabled={
-              !formData.animalId ||
-              (eventType === 'note' && !formData.content) ||
-              (eventType === 'task' &&
-                (!formData.title ||
-                  !formData.task_type ||
-                  !formData.start_date ||
-                  !formData.start_time ||
-                  !formData.end_date ||
-                  !formData.end_time ||
-                  !formData.duration))
-            }
-          >
-            Create
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
 
-  const renderLegend = () => (
-    <div className="grid grid-cols-5 gap-2 mb-6 md:flex md:flex-wrap md:gap-4">
-      {[
-        { type: 'appointment', color: 'bg-blue-500', label: 'Appointments' },
-        { type: 'note', color: 'bg-emerald-500', label: 'Notes' },
-        { type: 'task', color: 'bg-violet-500', label: 'Tasks' },
-        { type: 'meeting', color: 'bg-amber-500', label: 'Meetings' },
-        { type: 'production', color: 'bg-pink-500', label: 'Production' },
-      ].map(item => (
-        <div key={item.type} className="flex items-center space-x-2">
-          <div className={cn('w-3 h-3 rounded-full', item.color)} />
-          <span className="text-sm">{item.label}</span>
-        </div>
-      ))}
-    </div>
-  );
+                  {/* Title Input */}
+                  <div>
+                      <label htmlFor="eventTitle" className="block text-sm text-white/80 font-medium mb-1.5">
+                        {eventType === 'note' ? 'Note Title*' : 'Task Title*'}
+                      </label>
+                      <input
+                        id="eventTitle"
+                        type="text"
+                        value={formData.title}
+                        onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
+                        placeholder={eventType === 'note' ? 'Enter note title...' : 'Enter task title...'}
+                        className="w-full p-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder-white/40 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all"
+                      />
+                  </div>
 
-  return (
-    <Card className="shadow-lg">
-      <CardHeader className="pb-4">
-        <CardTitle className="flex items-center text-2xl space-x-2">
-          <CalendarIcon className="h-6 w-6" />
-          <span>Calendar</span>
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="min-h-[600px]">
-        {calendarEvents.length === 0 ? (
-          <div className="flex flex-col items-center justify-center h-96 text-center">
-            <CalendarIcon className="h-16 w-16 text-muted-foreground opacity-20 mb-4" />
-            <h3 className="text-xl font-medium mb-2">No events scheduled yet</h3>
-            <p className="text-muted-foreground mb-6 max-w-md">
-              Start by selecting a date and adding your first event to the calendar.
-            </p>
-            <Button onClick={() => {
-              setSelectedDate(new Date());
-              setIsDialogOpen(true);
-            }}>
-              Add Your First Event
-            </Button>
-          </div>
-        ) : (
-          <div className="space-y-6">
-            {renderLegend()}
-            {renderCalendarHeader()}
-            <div className="grid lg:grid-cols-[3fr,2fr] gap-6">
-              <div>
-                {renderCalendarGrid()}
+                  {/* Form fields based on event type */}
+                  {eventType === 'note' ? (
+                    <>
+                      <div>
+                        <label htmlFor="noteContent" className="block text-sm text-white/80 font-medium mb-1.5">Content*</label>
+                        <textarea
+                          id="noteContent"
+                          value={formData.content}
+                          onChange={(e) => setFormData(prev => ({ ...prev, content: e.target.value }))}
+                          placeholder="Enter note content..."
+                          rows={4}
+                          className="w-full p-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder-white/40 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all min-h-[100px] resize-none"
+                        />
+                      </div>
+                      <div>
+                        <label htmlFor="noteCategory" className="block text-sm text-white/80 font-medium mb-1.5">Category</label>
+                        <input
+                          id="noteCategory"
+                          type="text"
+                          value={formData.category}
+                          onChange={(e) => setFormData(prev => ({ ...prev, category: e.target.value }))}
+                          placeholder="e.g., Health, Behavior"
+                          className="w-full p-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder-white/40 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all"
+                        />
+                      </div>
+                    </>
+                  ) : ( // eventType === 'task'
+                    <>
+                      <div>
+                        <label htmlFor="taskType" className="block text-sm text-white/80 font-medium mb-1.5">Task Category/Type</label>
+                        <input
+                          id="taskType"
+                          type="text"
+                          value={formData.task_type}
+                          onChange={(e) => setFormData(prev => ({ ...prev, task_type: e.target.value }))}
+                          placeholder="e.g., Vaccination, Feeding"
+                          className="w-full p-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder-white/40 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all"
+                        />
+                      </div>
+                      <div className="grid grid-cols-2 gap-4">
+                        <div>
+                          <label htmlFor="startTime" className="block text-sm text-white/80 font-medium mb-1.5">Start Time</label>
+                          <input
+                            id="startTime"
+                            type="time"
+                            value={formData.start_time}
+                            onChange={(e) => setFormData(prev => ({ ...prev, start_time: e.target.value }))}
+                            className="w-full p-3 rounded-xl bg-white/10 border border-white/20 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all"
+                          />
+                        </div>
+                        <div>
+                          <label htmlFor="duration" className="block text-sm text-white/80 font-medium mb-1.5">Duration (min)</label>
+                          <input
+                            id="duration"
+                            type="number"
+                            min="0"
+                            value={formData.duration}
+                            onChange={(e) => setFormData(prev => ({ ...prev, duration: parseInt(e.target.value) || 0 }))}
+                            placeholder="60"
+                            className="w-full p-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder-white/40 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all"
+                          />
+                        </div>
+                      </div>
+                       <div>
+                        <label htmlFor="taskDescription" className="block text-sm text-white/80 font-medium mb-1.5">Description</label>
+                        <textarea
+                          id="taskDescription"
+                          value={formData.description}
+                          onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
+                          placeholder="Additional details about the task..."
+                          rows={3}
+                          className="w-full p-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder-white/40 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all min-h-[80px] resize-none"
+                        />
+                      </div>
+                    </>
+                  )}
+
+                  {/* Priority and Status */}
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <label htmlFor="eventPriority" className="block text-sm text-white/80 font-medium mb-1.5">Priority</label>
+                      <select
+                        id="eventPriority"
+                        value={formData.priority}
+                        onChange={(e) => setFormData(prev => ({ ...prev, priority: e.target.value }))}
+                        className="w-full p-3 rounded-xl bg-white/10 border border-white/20 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all"
+                      >
+                        <option value="low" className="bg-slate-700">Low</option>
+                        <option value="medium" className="bg-slate-700">Medium</option>
+                        <option value="high" className="bg-slate-700">High</option>
+                      </select>
+                    </div>
+                    <div>
+                      <label htmlFor="eventStatus" className="block text-sm text-white/80 font-medium mb-1.5">Status</label>
+                      <select
+                        id="eventStatus"
+                        value={formData.status}
+                        onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value }))}
+                        className="w-full p-3 rounded-xl bg-white/10 border border-white/20 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all"
+                      >
+                        <option value="pending" className="bg-slate-700">Pending</option>
+                        <option value="in progress" className="bg-slate-700">In Progress</option>
+                        <option value="completed" className="bg-slate-700">Completed</option>
+                        <option value="cancelled" className="bg-slate-700">Cancelled</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
               </div>
-              <div className="order-first lg:order-last">
-                {renderAgendaView()}
+              {/* Action Buttons */}
+              <div className="bg-slate-800/50 border-t border-white/10 p-5 sm:p-6 mt-auto">
+                <div className="flex justify-end gap-3">
+                    <button
+                    onClick={() => setIsDialogOpen(false)}
+                    className="px-5 py-2.5 rounded-xl bg-white/10 border border-white/20 text-white hover:bg-white/20 transition-all font-medium"
+                    >
+                    Cancel
+                    </button>
+                    <button
+                    onClick={handleCreateEvent}
+                    className="px-5 py-2.5 rounded-xl bg-gradient-to-r from-purple-600 to-blue-600 text-white hover:from-purple-700 hover:to-blue-700 transition-all duration-300 hover:scale-105 shadow-lg font-medium"
+                    >
+                    Create {eventType.charAt(0).toUpperCase() + eventType.slice(1)}
+                    </button>
+                </div>
               </div>
             </div>
           </div>
         )}
-        {renderForm()}
-      </CardContent>
-    </Card>
+      </div>
+    </div>
   );
 };
 
diff --git a/src/pages/animal/TransactionForm.tsx b/src/pages/animal/TransactionForm.tsx
index 4699c90..f7d6e5c 100644
--- a/src/pages/animal/TransactionForm.tsx
+++ b/src/pages/animal/TransactionForm.tsx
@@ -110,8 +110,8 @@ const formSchema = z.object({
   insurance_amount: z.number().nullable().optional(),
 });
 
-const transactionTypes = ['sale', 'purchase', 'lease', 'trade', 'transfer', 'other'];
-const transactionStatusOptions = ['pending', 'completedksom', 'cancelled', 'in_progress'];
+const transactionTypes = ['sale', 'purchase', 'lease', 'transfer', 'other'];
+const transactionStatusOptions = ['pending', 'completed', 'cancelled', 'in_progress'];
 const paymentMethods = ['credit_card', 'bank_transfer', 'cash', 'check', 'paypal', 'other'];
 const currencies = ['USD', 'EUR', 'GBP', 'CAD', 'AUD', 'JPY', 'CNY'];
 


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 4**

<details>
<summary>🧹 Nitpick comments (2)</summary><blockquote>

<details>
<summary>src/components/dashboard/CalendarView.tsx (2)</summary><blockquote>

`384-395`: **Enhance accessibility for calendar day interactions**

The calendar days are clickable but lack proper accessibility attributes for keyboard navigation and screen readers.

```diff
 <div
   key={index}
   onClick={() => setSelectedDate(day)}
+  onKeyDown={(e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      setSelectedDate(day);
+    }
+  }}
+  role="button"
+  tabIndex={0}
+  aria-label={`${day.toLocaleDateString()}, ${dayEvents.length} events`}
   className={`
     relative group cursor-pointer rounded-lg sm:rounded-xl p-2 sm:p-3 min-h-[4.5rem] sm:min-h-[6rem] 
     transition-all duration-300 hover:scale-105 border
```

---

`48-770`: **Consider splitting this large component for better maintainability**

This component is 700+ lines and handles multiple responsibilities. Consider splitting it into smaller, focused components for better maintainability and testability.


Suggested component structure:
- `CalendarView.tsx` - Main container component
- `CalendarGrid.tsx` - Calendar grid rendering
- `CalendarDay.tsx` - Individual day cell
- `EventList.tsx` - Event list sidebar
- `EventCreationDialog.tsx` - Event creation modal
- `useCalendarEvents.ts` - Custom hook for event management
- `dateUtils.ts` - Date utility functions

This separation would improve:
- Code reusability
- Testing capabilities
- Performance through component-level memoization
- Developer experience through focused files

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 4e1098369bf52fb7bcd602763f110cf6d0601661 and dd6b16bfaeea96f5c3647a848dc95cd52211c3b3.

</details>

<details>
<summary>📒 Files selected for processing (2)</summary>

* `src/components/dashboard/CalendarView.tsx` (1 hunks)
* `src/pages/animal/TransactionForm.tsx` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (1)</summary>

<details>
<summary>src/pages/animal/TransactionForm.tsx (1)</summary><blockquote>

<details>
<summary>src/schemas/transactionSchema.ts (2)</summary>

* `transactionTypes` (59-59)
* `transactionStatusOptions` (60-60)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (1)</summary><blockquote>

<details>
<summary>src/pages/animal/TransactionForm.tsx (1)</summary>

`114-114`: **Good fix for the typo in transaction status options**

The correction from 'completedksom' to 'completed' properly aligns with the schema definition and prevents potential runtime errors.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-25T18:04:15Z

Review comments:
diff_hunk: @@ -110,8 +110,8 @@ const formSchema = z.object({
   insurance_amount: z.number().nullable().optional(),
 });
 
-const transactionTypes = ['sale', 'purchase', 'lease', 'trade', 'transfer', 'other'];
-const transactionStatusOptions = ['pending', 'completedksom', 'cancelled', 'in_progress'];
+const transactionTypes = ['sale', 'purchase', 'lease', 'transfer', 'other'];
path: src/pages/animal/TransactionForm.tsx
user: login: coderabbitai[bot]
body: _💡 Verification agent_

<details>
<summary>🧩 Analysis chain</summary>

**Critical: Transaction types inconsistent with schema definition**

The removal of 'trade' from `transactionTypes` creates an inconsistency with the schema definition in `src/schemas/transactionSchema.ts`, which still includes 'trade' as a valid transaction type. This could lead to issues if existing transactions use the 'trade' type or if the backend expects it as a valid option.


Run the following script to verify if 'trade' transactions exist in the codebase:

---

🏁 Script executed:

```shell
#!/bin/bash
# Description: Check for references to 'trade' transaction type in the codebase

# Search for 'trade' transaction type usage
echo "Searching for 'trade' transaction type references..."
rg -A 3 -B 3 "transaction_type.*trade|transactionType.*trade|type.*trade.*transaction" --type ts --type tsx --type js --type jsx

# Search for any hardcoded 'trade' values in transaction-related files
echo -e "\nSearching for 'trade' in transaction-related files..."
fd -e ts -e tsx -e js -e jsx . | xargs rg "'trade'|\"trade\"" | grep -i transaction

# Check if any API endpoints or services reference trade transactions
echo -e "\nChecking API services for trade transaction handling..."
ast-grep --pattern 'transaction_type === "trade"'
```

Length of output: 803

---



</details>

**Align transaction types between UI and schema**

The `transactionTypes` array in `src/pages/animal/TransactionForm.tsx` no longer includes `'trade'`, but the schema in `src/schemas/transactionSchema.ts` still defines it. This mismatch can lead to invalid form submissions or backend validation errors.

• In `src/pages/animal/TransactionForm.tsx` (line 113), restore `'trade'` if it’s still a supported type, or  
• In `src/schemas/transactionSchema.ts`, remove `'trade'` if it has been deprecated across the system.

The typo fix in the status options (`'completedksom'` → `'completed'`) is correct and can be approved.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In src/pages/animal/TransactionForm.tsx at line 113, the transactionTypes array
excludes 'trade', causing inconsistency with the schema in
src/schemas/transactionSchema.ts which still includes 'trade'. To fix this,
verify if 'trade' is still a supported transaction type in the system; if yes,
add 'trade' back into the transactionTypes array in TransactionForm.tsx to align
with the schema. If 'trade' is deprecated, remove it from the schema instead to
maintain consistency. Ensure both UI and schema definitions match exactly to
prevent validation errors.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-25T18:04:14Z
author_association: NONE
diff_hunk: @@ -1,679 +1,770 @@
-import React, { useState } from 'react';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Input } from '@/components/ui/input';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Textarea } from '@/components/ui/textarea';
-import { cn } from '@/lib/utils';
-import { format, startOfMonth, endOfMonth, eachDayOfInterval, isSameDay, addMonths, subMonths, getDay, startOfWeek, addDays } from 'date-fns';
-import { ChevronLeft, ChevronRight, Calendar as CalendarIcon, Plus, Clock } from 'lucide-react';
-import { Animal } from '@/types/AnimalTypes';
-import { NoteFormData } from '@/services/noteApi';
-import { TaskFormData } from '@/services/taskApi';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-
-interface CalendarEvent {
-  id: string;
-  title: string;
-  date: Date;
-  time?: string;
-  type: 'appointment' | 'note' | 'task' | 'meeting' | 'production';
-  animalId?: string;
-  priority?: 'low' | 'medium' | 'high';
-  status?: 'pending' | 'completed' | 'archived';
-  taskType?: string;
-}
-
-interface CalendarViewProps {
-  calendarEvents: CalendarEvent[];
-  currentMonth: Date;
-  setCurrentMonth: (date: Date) => void;
-  selectedDate: Date | null;
-  setSelectedDate: (date: Date | null) => void;
-  animals: Animal[];
-  onNoteCreated: (animalId: string, noteData: NoteFormData) => void;
-  onTaskCreated: (animalId: string, taskData: TaskFormData) => void;
-}
-
-const CalendarView: React.FC<CalendarViewProps> = ({
-  calendarEvents,
-  currentMonth,
-  setCurrentMonth,
-  selectedDate,
-  setSelectedDate,
-  animals,
-  onNoteCreated,
-  onTaskCreated,
-}) => {
+import React, { useState, useEffect, useCallback } from 'react';
+import { ChevronLeft, ChevronRight, Calendar, Plus, Clock, Users, Briefcase, Play, FileText, CheckSquare, X } from 'lucide-react';
+
+// Mock data for demo
+const mockAnimals = [
+  { id: '1', name: 'Bella', type: 'Dog' },
+  { id: '2', name: 'Whiskers', type: 'Cat' },
+  { id: '3', name: 'Charlie', type: 'Horse' },
+  { id: '4', name: 'Daisy', type: 'Cow' },
+];
+
+const mockEvents = [
+  {
+    id: '1',
+    title: 'Vaccination Checkup',
+    date: new Date(2025, 4, 26), // Note: Month is 0-indexed, so 4 is May
+    time: '09:00',
+    type: 'appointment',
+    animalId: '1',
+    priority: 'high',
+    status: 'pending'
+  },
+  {
+    id: '2',
+    title: 'Health Notes Review',
+    date: new Date(2025, 4, 28),
+    type: 'note',
+    animalId: '2',
+    priority: 'medium',
+    status: 'completed',
+    content: 'Reviewed annual health records. All clear.',
+    category: 'Health Record'
+  },
+  {
+    id: '3',
+    title: 'Feeding Schedule Update',
+    date: new Date(2025, 4, 30),
+    time: '14:30',
+    type: 'task',
+    animalId: '3',
+    priority: 'low',
+    status: 'pending',
+    taskType: 'Feeding',
+    description: 'Transition to new feed type.'
+  },
+];
+
+const CalendarView = () => {
+  const [currentMonth, setCurrentMonth] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(null);
+  const [calendarEvents, setCalendarEvents] = useState(mockEvents); // Changed to allow updates
+  const [animals] = useState(mockAnimals);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [eventType, setEventType] = useState<'note' | 'task'>('note');
-  const [formData, setFormData] = useState<{
-    title?: string; // For tasks
-    content?: string; // For notes
-    task_type?: string;
-    category?: string;
-    keywords?: string;
-    animalId?: string;
-    priority: 'low' | 'medium' | 'high';
-    status: 'pending' | 'completed' | 'archived';
-    start_date?: string;
-    start_time?: string;
-    end_date?: string;
-    end_time?: string;
-    duration?: number;
-    description?: string;
-    health_notes?: string;
-    location?: string;
-    repeats?: 'daily' | 'weekly' | 'monthly';
-    repeat_frequency?: number;
-    end_repeat_date?: string;
-    add_to_calendar?: boolean;
-  }>({
+  const [eventType, setEventType] = useState('note'); // Default to 'note'
+  const [formData, setFormData] = useState({
+    title: '',
+    content: '',
+    task_type: '', // For task's specific type, e.g., "Feeding", "Vaccination"
+    category: '',   // For note's category
+    keywords: '',   // Not used in current form, but part of original state
+    animalId: '',
     priority: 'medium',
     status: 'pending',
-    start_date: selectedDate ? format(selectedDate, 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
+    start_date: '', // Will be set from selectedDate
     start_time: '09:00',
-    end_date: selectedDate ? format(selectedDate, 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
-    end_time: '10:00',
-    duration: 60,
-    add_to_calendar: true,
+    end_date: '',   // Not directly used for simple event creation logic here
+    end_time: '10:00', // Not directly used
+    duration: 60,    // For tasks
+    description: '', // For tasks
+    health_notes: '',// Not used in current form
+    location: '',    // Not used in current form
+    repeats: '',     // Not used in current form
+    repeat_frequency: 1, // Not used
+    end_repeat_date: '', // Not used
+    add_to_calendar: true, // Not used
   });
 
-  const handleCreateEvent = () => {
-    if (!selectedDate || !formData.animalId) return;
-
-    if (eventType === 'note' && formData.content) {
-      const noteData: NoteFormData = {
-        content: formData.content,
-        category: formData.category || 'General',
-        keywords: formData.keywords?.split(',').map(k => k.trim()).filter(k => k) || [],
-        priority: formData.priority,
-        status: formData.status,
-        due_date: formData.start_date || format(selectedDate, 'yyyy-MM-dd'),
-        add_to_calendar: formData.add_to_calendar || false,
-      };
-      onNoteCreated(formData.animalId, noteData);
-    } else if (
-      eventType === 'task' &&
-      formData.title &&
-      formData.task_type &&
-      formData.start_date &&
-      formData.start_time &&
-      formData.end_date &&
-      formData.end_time &&
-      formData.duration
-    ) {
-      const taskData: TaskFormData = {
-        title: formData.title,
-        task_type: formData.task_type,
-        start_date: formData.start_date,
-        start_time: formData.start_time,
-        end_date: formData.end_date,
-        end_time: formData.end_time,
-        duration: formData.duration,
-        description: formData.description,
-        health_notes: formData.health_notes,
-        location: formData.location,
-        priority: formData.priority,
-        status: formData.status,
-        repeats: formData.repeats,
-        repeat_frequency: formData.repeat_frequency,
-        end_repeat_date: formData.end_repeat_date,
-      };
-      onTaskCreated(formData.animalId, taskData);
+  const monthNames = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+  ];
+
+  const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+  const getMonthStart = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
+  const getMonthEnd = (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0);
+  const isSameDay = (date1, date2) =>
+    date1 && date2 && // Ensure dates are not null
+    date1.getDate() === date2.getDate() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getFullYear() === date2.getFullYear();
+
+  const generateCalendarDays = () => {
+    const monthStart = getMonthStart(currentMonth);
+    const monthEnd = getMonthEnd(currentMonth);
+    const startDate = new Date(monthStart);
+    startDate.setDate(startDate.getDate() - monthStart.getDay());
+
+    const days = [];
+    const dateIterator = new Date(startDate);
+
+    for (let i = 0; i < 42; i++) {
+      days.push(new Date(dateIterator));
+      dateIterator.setDate(dateIterator.getDate() + 1);
+    }
+    return days;
+  };
+
+  const getEventsForDay = useCallback((day) => {
+    if (!day) return [];
+    return calendarEvents.filter(event => isSameDay(event.date, day));
+  }, [calendarEvents]);
+
+
+  const getEventTypeIcon = (type) => {
+    switch (type) {
+      case 'appointment': return <Clock className="w-3 h-3 text-white" />;
+      case 'meeting': return <Users className="w-3 h-3 text-white" />;
+      case 'note': return <FileText className="w-3 h-3 text-white" />;
+      case 'task': return <CheckSquare className="w-3 h-3 text-white" />;
+      case 'production': return <Play className="w-3 h-3 text-white" />;
+      default: return <Briefcase className="w-3 h-3 text-white" />;
+    }
+  };
+
+  const getEventTypeColor = (type) => {
+    switch (type) {
+      case 'appointment': return 'from-blue-500 to-blue-600';
+      case 'meeting': return 'from-amber-500 to-amber-600';
+      case 'note': return 'from-emerald-500 to-emerald-600';
+      case 'task': return 'from-violet-500 to-violet-600';
+      case 'production': return 'from-pink-500 to-pink-600';
+      default: return 'from-gray-500 to-gray-600';
     }
+  };
+
+  const getPriorityColor = (priority) => {
+    switch (priority) {
+      case 'high': return 'from-red-500 to-red-600';
+      case 'medium': return 'from-yellow-500 to-yellow-600';
+      case 'low': return 'from-green-500 to-green-600';
+      default: return 'from-gray-500 to-gray-600';
+    }
+  };
+
+  const navigateMonth = (direction) => {
+    const newMonth = new Date(currentMonth);
+    newMonth.setMonth(newMonth.getMonth() + direction);
+    setCurrentMonth(newMonth);
+  };
+
+  const resetForm = useCallback(() => {
     setFormData({
+      title: '',
+      content: '',
+      task_type: '',
+      category: '',
+      keywords: '',
+      animalId: '',
       priority: 'medium',
       status: 'pending',
-      start_date: selectedDate ? format(selectedDate, 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
+      start_date: selectedDate ? selectedDate.toISOString().split('T')[0] : new Date().toISOString().split('T')[0],
       start_time: '09:00',
-      end_date: selectedDate ? format(selectedDate, 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
+      end_date: selectedDate ? selectedDate.toISOString().split('T')[0] : new Date().toISOString().split('T')[0],
       end_time: '10:00',
       duration: 60,
+      description: '',
+      health_notes: '',
+      location: '',
+      repeats: '',
+      repeat_frequency: 1,
+      end_repeat_date: '',
       add_to_calendar: true,
     });
-    setIsDialogOpen(false);
-  };
+  }, [selectedDate]); // formData depends on selectedDate for date pre-fill
 
-  // Priority and status badges
-  const getPriorityBadge = (priority: 'low' | 'medium' | 'high') => {
-    return (
-      <span className={cn(
-        'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium',
-        priority === 'high' && 'bg-red-100 text-red-800',
-        priority === 'medium' && 'bg-yellow-100 text-yellow-800',
-        priority === 'low' && 'bg-green-100 text-green-800'
-      )}>
-        {priority}
-      </span>
-    );
-  };
+  // Reset form when dialog opens or selectedDate for dialog changes
+  useEffect(() => {
+    if (isDialogOpen && selectedDate) {
+      resetForm();
+    }
+  }, [isDialogOpen, selectedDate, resetForm]);
 
-  const getStatusBadge = (status: 'pending' | 'completed' | 'archived') => {
-    return (
-      <span className={cn(
-        'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium',
-        status === 'pending' && 'bg-blue-100 text-blue-800',
-        status === 'completed' && 'bg-green-100 text-green-800',
-        status === 'archived' && 'bg-gray-100 text-gray-800'
-      )}>
-        {status}
-      </span>
-    );
-  };
+  // Adjust form fields when eventType changes within the dialog
+  useEffect(() => {
+    if (isDialogOpen) { // Only apply when dialog is open
+        setFormData(prev => ({
+            ...prev, // Keep common fields like animalId, priority, status, start_date
+            // Reset fields that are specific to one type or might need clearing
+            title: '', // Reset title as context might imply a different kind of title
+            content: eventType === 'note' ? prev.content : '', // Keep if switching to note, clear if switching away
+            category: eventType === 'note' ? prev.category : '',
+            task_type: eventType === 'task' ? prev.task_type : '',
+            description: eventType === 'task' ? prev.description : '',
+            // start_time and duration are more task-specific but might be kept for convenience
+        }));
+    }
+  }, [eventType, isDialogOpen]);
 
-  const getEventTypeColor = (type: string) => {
-    switch (type) {
-      case 'appointment': return 'bg-blue-500';
-      case 'note': return 'bg-emerald-500';
-      case 'task': return 'bg-violet-500';
-      case 'meeting': return 'bg-amber-500';
-      case 'production': return 'bg-pink-500';
-      default: return 'bg-gray-500';
+
+  const handleCreateEvent = () => {
+    if (!selectedDate) {
+      alert("Error: A date must be selected to create an event.");
+      return;
+    }
+    if (!formData.animalId) {
+      alert("Please select an animal for the event.");
+      return;
     }
+    if (!formData.title.trim()) {
+      alert(`Please enter a title for the ${eventType}.`);
+      return;
+    }
+    if (eventType === 'note' && !formData.content.trim() && !formData.title.trim()) {
+      alert("Please enter a title or content for the note.");
+      return;
+    }
+
+
+    const newEvent: any = {
+      id: String(Date.now()), // Simple unique ID
+      title: formData.title.trim(),
+      date: new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()), // Use date part of selectedDate
+      animalId: formData.animalId,
+      priority: formData.priority,
+      status: formData.status,
+      type: eventType, // This is 'note' or 'task' from the dialog
+    };
path: src/components/dashboard/CalendarView.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

_⚠️ Potential issue_

**Avoid using 'any' type - define proper TypeScript interface**

Using `any` type defeats TypeScript's type safety. Define a proper interface for calendar events.


```diff
+interface CalendarEvent {
+  id: string;
+  title: string;
+  date: Date;
+  animalId: string;
+  priority: string;
+  status: string;
+  type: 'note' | 'task' | 'appointment' | 'meeting' | 'production';
+  time?: string;
+  content?: string;
+  category?: string;
+  taskType?: string;
+  duration?: number;
+  description?: string;
+}

-const newEvent: any = {
+const newEvent: CalendarEvent = {
   id: String(Date.now()), // Simple unique ID
   title: formData.title.trim(),
   date: new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()),
   animalId: formData.animalId,
   priority: formData.priority,
   status: formData.status,
   type: eventType,
 };
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
// Define a strict type for calendar events
interface CalendarEvent {
  id: string;
  title: string;
  date: Date;
  animalId: string;
  priority: string;
  status: string;
  type: 'note' | 'task' | 'appointment' | 'meeting' | 'production';
  time?: string;
  content?: string;
  category?: string;
  taskType?: string;
  duration?: number;
  description?: string;
}

// ...

    const newEvent: CalendarEvent = {
      id: String(Date.now()), // Simple unique ID
      title: formData.title.trim(),
      date: new Date(
        selectedDate.getFullYear(),
        selectedDate.getMonth(),
        selectedDate.getDate()
      ), // Use date part of selectedDate
      animalId: formData.animalId,
      priority: formData.priority,
      status: formData.status,
      type: eventType, // 'note' or 'task' from the dialog
    };
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In src/components/dashboard/CalendarView.tsx around lines 220 to 228, the
newEvent object is typed as 'any', which bypasses TypeScript's type safety.
Define a proper TypeScript interface that describes the shape and types of the
calendar event properties (id, title, date, animalId, priority, status, type)
and use this interface to type the newEvent variable instead of 'any'.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-25T18:04:14Z
author_association: NONE
diff_hunk: @@ -1,679 +1,770 @@
-import React, { useState } from 'react';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Input } from '@/components/ui/input';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Textarea } from '@/components/ui/textarea';
-import { cn } from '@/lib/utils';
-import { format, startOfMonth, endOfMonth, eachDayOfInterval, isSameDay, addMonths, subMonths, getDay, startOfWeek, addDays } from 'date-fns';
-import { ChevronLeft, ChevronRight, Calendar as CalendarIcon, Plus, Clock } from 'lucide-react';
-import { Animal } from '@/types/AnimalTypes';
-import { NoteFormData } from '@/services/noteApi';
-import { TaskFormData } from '@/services/taskApi';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-
-interface CalendarEvent {
-  id: string;
-  title: string;
-  date: Date;
-  time?: string;
-  type: 'appointment' | 'note' | 'task' | 'meeting' | 'production';
-  animalId?: string;
-  priority?: 'low' | 'medium' | 'high';
-  status?: 'pending' | 'completed' | 'archived';
-  taskType?: string;
-}
-
-interface CalendarViewProps {
-  calendarEvents: CalendarEvent[];
-  currentMonth: Date;
-  setCurrentMonth: (date: Date) => void;
-  selectedDate: Date | null;
-  setSelectedDate: (date: Date | null) => void;
-  animals: Animal[];
-  onNoteCreated: (animalId: string, noteData: NoteFormData) => void;
-  onTaskCreated: (animalId: string, taskData: TaskFormData) => void;
-}
-
-const CalendarView: React.FC<CalendarViewProps> = ({
-  calendarEvents,
-  currentMonth,
-  setCurrentMonth,
-  selectedDate,
-  setSelectedDate,
-  animals,
-  onNoteCreated,
-  onTaskCreated,
-}) => {
+import React, { useState, useEffect, useCallback } from 'react';
+import { ChevronLeft, ChevronRight, Calendar, Plus, Clock, Users, Briefcase, Play, FileText, CheckSquare, X } from 'lucide-react';
+
+// Mock data for demo
+const mockAnimals = [
+  { id: '1', name: 'Bella', type: 'Dog' },
+  { id: '2', name: 'Whiskers', type: 'Cat' },
+  { id: '3', name: 'Charlie', type: 'Horse' },
+  { id: '4', name: 'Daisy', type: 'Cow' },
+];
+
+const mockEvents = [
+  {
+    id: '1',
+    title: 'Vaccination Checkup',
+    date: new Date(2025, 4, 26), // Note: Month is 0-indexed, so 4 is May
+    time: '09:00',
+    type: 'appointment',
+    animalId: '1',
+    priority: 'high',
+    status: 'pending'
+  },
+  {
+    id: '2',
+    title: 'Health Notes Review',
+    date: new Date(2025, 4, 28),
+    type: 'note',
+    animalId: '2',
+    priority: 'medium',
+    status: 'completed',
+    content: 'Reviewed annual health records. All clear.',
+    category: 'Health Record'
+  },
+  {
+    id: '3',
+    title: 'Feeding Schedule Update',
+    date: new Date(2025, 4, 30),
+    time: '14:30',
+    type: 'task',
+    animalId: '3',
+    priority: 'low',
+    status: 'pending',
+    taskType: 'Feeding',
+    description: 'Transition to new feed type.'
+  },
+];
path: src/components/dashboard/CalendarView.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

_⚠️ Potential issue_

**Remove mock data from production component**

Mock data should not be hardcoded in production components. This makes the component non-reusable and couples it to test data. Consider:
- Moving mock data to a separate file (e.g., `mockData.ts`) for development/testing
- Accepting data through props or context
- Fetching data from an API


Move the mock data to a separate file:

```diff
-// Mock data for demo
-const mockAnimals = [
-  { id: '1', name: 'Bella', type: 'Dog' },
-  { id: '2', name: 'Whiskers', type: 'Cat' },
-  { id: '3', name: 'Charlie', type: 'Horse' },
-  { id: '4', name: 'Daisy', type: 'Cow' },
-];
-
-const mockEvents = [
-  // ... mock events
-];
+// Import data from props or fetch from API
+interface CalendarViewProps {
+  animals: Animal[];
+  events: CalendarEvent[];
+  onCreateEvent?: (event: CalendarEvent) => void;
+}
```


> Committable suggestion skipped: line range outside the PR's diff.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In src/components/dashboard/CalendarView.tsx around lines 4 to 46, the mock data
is hardcoded inside the production component, which reduces reusability and
couples the component to test data. To fix this, move the mockAnimals and
mockEvents arrays to a separate file such as mockData.ts. Then, modify the
CalendarView component to accept data via props or context, or fetch it from an
API, so the component is decoupled from static test data and can be reused in
different environments.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-25T18:04:15Z
author_association: NONE
diff_hunk: @@ -1,679 +1,770 @@
-import React, { useState } from 'react';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Input } from '@/components/ui/input';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Textarea } from '@/components/ui/textarea';
-import { cn } from '@/lib/utils';
-import { format, startOfMonth, endOfMonth, eachDayOfInterval, isSameDay, addMonths, subMonths, getDay, startOfWeek, addDays } from 'date-fns';
-import { ChevronLeft, ChevronRight, Calendar as CalendarIcon, Plus, Clock } from 'lucide-react';
-import { Animal } from '@/types/AnimalTypes';
-import { NoteFormData } from '@/services/noteApi';
-import { TaskFormData } from '@/services/taskApi';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-
-interface CalendarEvent {
-  id: string;
-  title: string;
-  date: Date;
-  time?: string;
-  type: 'appointment' | 'note' | 'task' | 'meeting' | 'production';
-  animalId?: string;
-  priority?: 'low' | 'medium' | 'high';
-  status?: 'pending' | 'completed' | 'archived';
-  taskType?: string;
-}
-
-interface CalendarViewProps {
-  calendarEvents: CalendarEvent[];
-  currentMonth: Date;
-  setCurrentMonth: (date: Date) => void;
-  selectedDate: Date | null;
-  setSelectedDate: (date: Date | null) => void;
-  animals: Animal[];
-  onNoteCreated: (animalId: string, noteData: NoteFormData) => void;
-  onTaskCreated: (animalId: string, taskData: TaskFormData) => void;
-}
-
-const CalendarView: React.FC<CalendarViewProps> = ({
-  calendarEvents,
-  currentMonth,
-  setCurrentMonth,
-  selectedDate,
-  setSelectedDate,
-  animals,
-  onNoteCreated,
-  onTaskCreated,
-}) => {
+import React, { useState, useEffect, useCallback } from 'react';
+import { ChevronLeft, ChevronRight, Calendar, Plus, Clock, Users, Briefcase, Play, FileText, CheckSquare, X } from 'lucide-react';
+
+// Mock data for demo
+const mockAnimals = [
+  { id: '1', name: 'Bella', type: 'Dog' },
+  { id: '2', name: 'Whiskers', type: 'Cat' },
+  { id: '3', name: 'Charlie', type: 'Horse' },
+  { id: '4', name: 'Daisy', type: 'Cow' },
+];
+
+const mockEvents = [
+  {
+    id: '1',
+    title: 'Vaccination Checkup',
+    date: new Date(2025, 4, 26), // Note: Month is 0-indexed, so 4 is May
+    time: '09:00',
+    type: 'appointment',
+    animalId: '1',
+    priority: 'high',
+    status: 'pending'
+  },
+  {
+    id: '2',
+    title: 'Health Notes Review',
+    date: new Date(2025, 4, 28),
+    type: 'note',
+    animalId: '2',
+    priority: 'medium',
+    status: 'completed',
+    content: 'Reviewed annual health records. All clear.',
+    category: 'Health Record'
+  },
+  {
+    id: '3',
+    title: 'Feeding Schedule Update',
+    date: new Date(2025, 4, 30),
+    time: '14:30',
+    type: 'task',
+    animalId: '3',
+    priority: 'low',
+    status: 'pending',
+    taskType: 'Feeding',
+    description: 'Transition to new feed type.'
+  },
+];
+
+const CalendarView = () => {
+  const [currentMonth, setCurrentMonth] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(null);
+  const [calendarEvents, setCalendarEvents] = useState(mockEvents); // Changed to allow updates
+  const [animals] = useState(mockAnimals);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [eventType, setEventType] = useState<'note' | 'task'>('note');
-  const [formData, setFormData] = useState<{
-    title?: string; // For tasks
-    content?: string; // For notes
-    task_type?: string;
-    category?: string;
-    keywords?: string;
-    animalId?: string;
-    priority: 'low' | 'medium' | 'high';
-    status: 'pending' | 'completed' | 'archived';
-    start_date?: string;
-    start_time?: string;
-    end_date?: string;
-    end_time?: string;
-    duration?: number;
-    description?: string;
-    health_notes?: string;
-    location?: string;
-    repeats?: 'daily' | 'weekly' | 'monthly';
-    repeat_frequency?: number;
-    end_repeat_date?: string;
-    add_to_calendar?: boolean;
-  }>({
+  const [eventType, setEventType] = useState('note'); // Default to 'note'
+  const [formData, setFormData] = useState({
+    title: '',
+    content: '',
+    task_type: '', // For task's specific type, e.g., "Feeding", "Vaccination"
+    category: '',   // For note's category
+    keywords: '',   // Not used in current form, but part of original state
+    animalId: '',
     priority: 'medium',
     status: 'pending',
-    start_date: selectedDate ? format(selectedDate, 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
+    start_date: '', // Will be set from selectedDate
     start_time: '09:00',
-    end_date: selectedDate ? format(selectedDate, 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
-    end_time: '10:00',
-    duration: 60,
-    add_to_calendar: true,
+    end_date: '',   // Not directly used for simple event creation logic here
+    end_time: '10:00', // Not directly used
+    duration: 60,    // For tasks
+    description: '', // For tasks
+    health_notes: '',// Not used in current form
+    location: '',    // Not used in current form
+    repeats: '',     // Not used in current form
+    repeat_frequency: 1, // Not used
+    end_repeat_date: '', // Not used
+    add_to_calendar: true, // Not used
   });
path: src/components/dashboard/CalendarView.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Remove unused form fields to reduce complexity**

The `formData` state contains many fields that are never used in the current implementation: `keywords`, `end_date`, `end_time`, `health_notes`, `location`, `repeats`, `repeat_frequency`, `end_repeat_date`, and `add_to_calendar`. This adds unnecessary complexity and memory overhead.

```diff
 const [formData, setFormData] = useState({
   title: '',
   content: '',
-  task_type: '', // For task's specific type, e.g., "Feeding", "Vaccination"
-  category: '',   // For note's category
-  keywords: '',   // Not used in current form, but part of original state
+  task_type: '',
+  category: '',
   animalId: '',
   priority: 'medium',
   status: 'pending',
-  start_date: '', // Will be set from selectedDate
+  start_date: '',
   start_time: '09:00',
-  end_date: '',   // Not directly used for simple event creation logic here
-  end_time: '10:00', // Not directly used
-  duration: 60,    // For tasks
-  description: '', // For tasks
-  health_notes: '',// Not used in current form
-  location: '',    // Not used in current form
-  repeats: '',     // Not used in current form
-  repeat_frequency: 1, // Not used
-  end_repeat_date: '', // Not used
-  add_to_calendar: true, // Not used
+  duration: 60,
+  description: '',
 });
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
  const [formData, setFormData] = useState({
    title: '',
    content: '',
    task_type: '',
    category: '',
    animalId: '',
    priority: 'medium',
    status: 'pending',
    start_date: '',
    start_time: '09:00',
    duration: 60,
    description: '',
  });
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In src/components/dashboard/CalendarView.tsx between lines 55 and 76, the
formData state includes several unused fields such as keywords, end_date,
end_time, health_notes, location, repeats, repeat_frequency, end_repeat_date,
and add_to_calendar. Remove these unused fields from the initial state object to
simplify the state management and reduce unnecessary complexity and memory
usage.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-25T18:04:15Z
author_association: NONE

PR comments:
user: login: vercel[bot]
created_at: 2025-05-25T17:58:45Z
body: [vc]: #jidAztn8gM4pbgHvjJe/D3w8w0aP4kFYsYq4N+tu2tc=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJhbmltYWwtaGF2ZW4tbWFuYWdlciIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJhbmltYWwtaGF2ZW4tbWFuYWdlci1naXQtZmVhdHVyZS1teS1maXgtbnlhaW5kYXMtcHJvamVjdHMudmVyY2VsLmFwcCJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vbnlhaW5kYXMtcHJvamVjdHMvYW5pbWFsLWhhdmVuLW1hbmFnZXIvMjNHN0x3aWlDTTNWd3E3U2NqVUhrTnZTcGZ3OCIsInByZXZpZXdVcmwiOiJhbmltYWwtaGF2ZW4tbWFuYWdlci1naXQtZmVhdHVyZS1teS1maXgtbnlhaW5kYXMtcHJvamVjdHMudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCJ9XX0=
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **animal-haven-manager** | ✅ Ready ([Inspect](https://vercel.com/nyaindas-projects/animal-haven-manager/23G7LwiiCM3Vwq7ScjUHkNvSpfw8)) | [Visit Preview](https://animal-haven-manager-git-feature-my-fix-nyaindas-projects.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/animal-haven-manager-git-feature-my-fix-nyaindas-projects.vercel.app?via=pr-comment-feedback-link) | May 25, 2025 5:58pm |


author_association: NONE
user: login: coderabbitai[bot]
created_at: 2025-05-25T17:58:47Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough

The `CalendarView` component was refactored into a self-contained React component with internal state, mock data, custom date utilities, and redesigned UI and event creation logic. In `TransactionForm.tsx`, the 'trade' transaction type was removed and a typo in transaction statuses was corrected. No new exported entities were introduced.

## Changes

| File(s)                                                         | Change Summary                                                                                              |
|------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------|
| src/components/dashboard/CalendarView.tsx                        | Refactored to a self-contained component with internal state, mock data, redesigned UI, custom logic, and removed external dependencies and props. |
| src/pages/animal/TransactionForm.tsx                             | Removed 'trade' from transaction types and fixed typo in transaction status options.                        |

## Poem

> A calendar blooms with colors anew,  
> Mock animals and events in full view.  
> No more props to wrangle or trade to be found,  
> Just gradients and icons all swirling around.  
> With every click, a rabbit’s delight—  
> Hopping through months, from morning to night!  
> 🗓️🐇✨

<!-- walkthrough_end -->
<!-- This is an auto-generated comment: all tool run failures by coderabbit.ai -->

> [!WARNING]
> There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.
> 
> <details>
> <summary>🔧 ESLint</summary>
> 
> > If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.
> 
> npm warn config production Use `--omit=dev` instead.
> npm error Exit handler never called!
> npm error This is an error with npm itself. Please report this error at:
> npm error   <https://github.com/npm/cli/issues>
> npm error A complete log of this run can be found in: /.npm/_logs/2025-05-25T18_00_03_982Z-debug-0.log
> 
> 
> 
> </details>

<!-- end of auto-generated comment: all tool run failures by coderabbit.ai -->
<!-- internal state start -->


<!-- DwQgtGAEAqAWCWBnSTIEMB26CuAXA9mAOYCmGJATmriQCaQDG+Ats2bgFyQAOFk+AIwBWJBrngA3EsgEBPRvlqU0AgfFwA6NPEgQAfACgjoCEejqANiS4AzeAA8Od+3UiUK+PvCy4qGRGhi8PgYBgBy2MwClFwAnAYAqogxkBiy2hi0aEb6xuBQZPT4NjgExGTKNPRMrOxcvPzCouJSMvJMSlSq6lo6uSZQcKiomKWEpORUVQq1GJyQVADukIiRzGgU8nIKnSpqmtq6YIZ5pgaIFAwA9DXcIeyIV1mIsAL4G7RXAMJoVpkbADV4CRFhpcIhHAYAEQwgwAYjhkAAggBJcqTaiuVasDbyYqMWCYUiIMywEiQAAGPz+WQoQJBYIhFJmd3Ic0gizQyBI9ho/kkJAs8goJBsgQIIvoNg8zHQkFwsm4dAANDwPNwwLQKAKsAAlEjiln3dneAhy5IWGxgJhzDKuGzYDBBEK/I1s3Ac9SwFBzSgYV2IXCY9CZSDMfAMADWkCyQY0MDJapIEmC2GQUgoiGCWBFFmBRSwPJoFH9FjV+G4yBsnjcUjmiFVmHg6wsDZD9EJmSsmdViwQVnlifIywzWZCPvU8F+8AAXtIwxHo02W8hMPRkw8fcXS0L22HMGhibX2IwRdRs5ALBHfkKNEYANIkeQOp3iF1lhido/eBgWbBKDgckgfVwwkV18SLP1XV4CtV1DBUlUQABudALDLQNg1QDB8GWU0oLLRYvUpNMSAAZSDGgKTvKAUTmDxaGwZ0sHxcMoxjag0Egas+GXX44OqX5Cg2Y962o4CSG4CxAhINh2XxWMSDAGx/EgPB4DzcR50I3BvQYNMCFlBTIDJCwlT4F8mKrGtwzmb0MIoXArkKPcsnkEgAEdsGnBUxLgckGEE/4+CIbV6Gw5ZaCQSS0FkZAABYACZ2NiyAAAoADYORIEhI0QABKH1f3/bwiGSqsZXQWghGk9kbJ0tttO9MhOwYLEFTzDBSrXYz8AzNwbBsZpEDEgBROsPRFTJKBKn1GEC2lGEFVsUGQPNmHUVwzVwRZ8BE8FPR0uUoQAajCBcRShH1IoCiVfMTLMlAEYSXhw5AlCDdTXA3esuJrHTyQtZpXFc/g+AIEH4BKbDyBWQUgdoVUfz/SLOpDZtXW8atVXENhVSURAGG1bg3wwRtQye2gj24tVgm1BU9ww3A0wO71sG4BT6EDWQOq60M0FoSKSYDCiSOGgxBkTb6PUJg0SZjKcr1K1BJWkeAiHIehGsYfSWHlFQrL4KEwnwGhLu6qFoC5SNLoQ6RVQNT8Wb19TPHtTxZTsQVaDFqAADF3ZWCjyVQdZ/VITWiM4rNOoHCluOYAARDjmUEEQxFVEVkg9cdIt+fBSorMhQdhqwxGB4NPyJEgxIBadYwvbxKU7WgrC+M8aDG9hmSR/950EhyDbDJBo9KhSyfRixVT+ywSBuEI+VwMnqnbvvUhBPb0G4JUpvoM0rwC9Cg9G8b5UVYObX4hQr0zdARX3LfXC14cUAvvcQv54F2SYa+fcgMI0BTEQc844BB4AICpamvBkypkeOQXkC5bJ7gtooGKZs77NkkjJdgj8iJ6UDLrZu3Zf5+UgAkFEK0FjSHajgw679IonielGEK+BHTe0RswGCUhd6KnzlQbgsBZBL0oYgVkWYpCXhiiwzQ4txKgWBhJQoZAGDAmQOOSCJZXRkLdJuVK1ciAaFVD8CgCNIAJwVvnLiFUtF5gEFQTYBVuoimiq1COh08EGX3BQSMbMGbtRKmJECvVXCOhIkUPgSgoE3TdhQD2wILDez3IreADBKFSWmGaJxss2xkl+IdbCNA2z72AaTPcB8hJeF9O/Emd1/LzWEjkzoiSSATHoBsYOlSpiuFNLtf6+5G5SVkFIp2bMOaB25v4mRSIGCtUQFmNQGl5AYI8FIWS+0e5KFvlOMAUlojLW6pGJ8bwPhbmUExYyppf4AHkMw3mxomW4xoPRYRwuaIM/wrzkFVCmVYN5hTJLJHwMpQUnZS1PLLC83V3raCsPQEGKYQRtgdGheQodDxdN9Bo5Fd4jDwkREiCwxZinIC2omJQv4NhEv4CUHkdwHKuBrNwbAAg8wpPYJOaQQESFUjqXSYEixmQPPdCsNW/omZ30rp1e0FVOK23oPqcUGhfZfCdjBSsaUKRAtpJ3esFJVQauwBQSauAACy89YC6spFnL4BqjWmtshaikgMy60CTpRPVWdSJw2da6kgDreKtgdSEY2NA26yzoIGjAltECRlDZiWgFICpmk4twClbBixWFmVxR0TFXSCpPFrPCmLA7Bm6thcslYAkySCfQQtYoZmUmpOU7VuBmTdW5TSQEfKAAK6pEBURkcbfg/0+A0s8NMBlTKWVuDmOy5AixKDkn5koMJlC5G0DvDCKEOQzgXGuCm4kVx/VXGgH4AITF/YxMZJCTduLkRogmJULEaxcRUoJFXEkBgSEStIKuoJxLEwAHJfD8xIAB/gxMLzSl1r0ikwH/DimzNAM+fbb5UEEZQhiyjUa9LzIGSxussz2HlLtOw4jbaIC4ABgIVgAOqgA4yy4hJki0cgABqwXJQN0bg4gQaFAWPdQAybAFAH4xIgFpOd8Qo7nklg6ehDIRyLUDTJciDIQUMbDQxQpghr4aQG2CKUCM0ZU8K4L07wYE8ycxFsgADtwrBVFyiwMDysJJSRcU7XpFn4D0FsywTBVQRMJnJJnbOJRemM2ZhWEmyADMZFUk6L8dBKPbxRkQFjtnMCtTQnQfjoYAPeAAPowRCtIRAImjAImRASyo2ZiU9NJaIKSUxauvtHXSldjLmXJOneITSH6oCDu/fOM0bXx18E61Otl9MyVNcpfOu+6wlAbthOLY4pwCihnxGgPA4wKidOqCwVZXAlgrGfZsPT7RFDKG6AcPoa2BgzHWrgAr3nEAFZFPC+dtACv2Q9LkAwD2BbpQEAARmB2KbKaBYjpRsAAVgYAAZnSnFAA7GgAAHHFdHtAGCxHh7QWHCUEog5B4jgQCOjgnAezUJ7L3vbvegSCOgBXnL6CAA= -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=nyainda/animal-haven-manager&utm_content=9):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Explain this complex logic.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai explain this code block.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and explain its main purpose.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE
user: login: genezio-app[bot]
created_at: 2025-05-25T17:59:16Z
body: ## Project deployed! See all details in the [Genezio Dashboard](https://app.genez.io/project/415de267-d9ca-4d86-b8a2-7cbb69c79517/b5d1c7d1-a82a-45c2-8586-19e7795f55cc)

### Frontend URLs:
No | URL
---|---
1 | [animal-haven-manager.app.genez.io](https://animal-haven-manager.app.genez.io)

author_association: CONTRIBUTOR