Add 2 files

index.html

@@ -25,6 +25,19 @@
     .fade-in {
       animation: fadeIn 0.3s ease-in-out;
     }
+    .event-card {
+      transition: all 0.2s ease;
+    }
+    .event-card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    }
+    .section-toggle {
+      transition: all 0.3s ease;
+    }
+    .section-toggle:hover {
+      background-color: rgba(59, 130, 246, 0.1);
+    }
     @keyframes fadeIn {
       from { opacity: 0; }
       to { opacity: 1; }
@@ -68,6 +81,8 @@
       });
       const [viewMode, setViewMode] = useState('month'); // 'month' or 'week'
       const [selectedEvent, setSelectedEvent] = useState(null);
+      const [showCompleted, setShowCompleted] = useState(false);
+      const [showAll, setShowAll] = useState(false);
 
       // Sample initial events
       useEffect(() => {
@@ -78,7 +93,8 @@
             description: 'Discuss project requirements with ABC Corp',
             date: new Date(new Date().setDate(new Date().getDate() + 1)),
             time: '10:30',
-            type: 'meeting'
+            type: 'meeting',
+            completed: false
           },
           {
             id: 2,
@@ -86,7 +102,8 @@
             description: 'Check on product delivery status',
             date: new Date(new Date().setDate(new Date().getDate() + 3)),
             time: '14:00',
-            type: 'call'
+            type: 'call',
+            completed: false
           },
           {
             id: 3,
@@ -94,7 +111,17 @@
             description: 'Send proposal to XYZ Inc',
             date: new Date(new Date().setDate(new Date().getDate() - 2)),
             time: '11:15',
-            type: 'email'
+            type: 'email',
+            completed: true
+          },
+          {
+            id: 4,
+            title: 'Project Review',
+            description: 'Review project milestones with team',
+            date: new Date(new Date().setDate(new Date().getDate() - 5)),
+            time: '15:30',
+            type: 'meeting',
+            completed: true
           }
         ];
         setEvents(sampleEvents);
@@ -186,7 +213,8 @@
           description: newEvent.description,
           date: new Date(selectedDate),
           time: newEvent.time,
-          type: newEvent.type
+          type: newEvent.type,
+          completed: false
         };
         
         setEvents([...events, event]);
@@ -198,6 +226,12 @@
         setSelectedEvent(null);
       };
 
+      const toggleEventCompletion = (id) => {
+        setEvents(events.map(event => 
+          event.id === id ? { ...event, completed: !event.completed } : event
+        ));
+      };
+
       const isToday = (date) => {
         if (!date) return false;
         const today = new Date();
@@ -364,6 +398,38 @@
         );
       };
 
+      const renderEventCard = (event) => {
+        return (
+          <div 
+            key={event.id} 
+            onClick={() => setSelectedEvent(event)}
+            className={`event-card p-3 sm:p-4 rounded-lg cursor-pointer ${getEventTypeColor(event.type)} text-white mb-2 sm:mb-3`}
+          >
+            <div className="flex justify-between items-start">
+              <div className="flex-1">
+                <div className="font-medium text-sm sm:text-base mb-1">{event.title}</div>
+                <div className="text-xs sm:text-sm mb-1">{event.date.toLocaleDateString()} at {event.time}</div>
+                {event.description && (
+                  <div className="text-xs opacity-90 truncate">{event.description}</div>
+                )}
+              </div>
+              <div className="flex items-center space-x-2">
+                <i className={`fas ${getEventTypeIcon(event.type)} text-sm sm:text-base`}></i>
+                <button 
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    toggleEventCompletion(event.id);
+                  }}
+                  className={`w-5 h-5 rounded-full flex items-center justify-center ${event.completed ? 'bg-white text-green-500' : 'bg-white bg-opacity-30'}`}
+                >
+                  {event.completed && <i className="fas fa-check text-xs"></i>}
+                </button>
+              </div>
+            </div>
+          </div>
+        );
+      };
+
       return (
         <div className="min-h-screen bg-gray-100 p-2 sm:p-4 md:p-8">
           <div className="max-w-6xl mx-auto">
@@ -427,33 +493,64 @@
               {viewMode === 'month' ? renderMonthView() : renderWeekView()}
             </div>
             
-            <div className="bg-white rounded-lg shadow p-2 sm:p-4">
-              <h3 className="text-base sm:text-lg font-semibold text-gray-800 mb-2 sm:mb-4">Upcoming Follow-Ups</h3>
-              <div className="space-y-2 sm:space-y-3">
+            {/* Upcoming Follow-Ups */}
+            <div className="bg-white rounded-lg shadow p-4 sm:p-6 mb-4 sm:mb-6">
+              <h3 className="text-base sm:text-lg font-semibold text-gray-800 mb-3 sm:mb-4">Upcoming Follow-Ups</h3>
+              <div className="space-y-3 sm:space-y-4">
                 {events
-                  .filter(event => event.date >= new Date())
+                  .filter(event => !event.completed && event.date >= new Date())
                   .sort((a, b) => a.date - b.date)
                   .slice(0, 5)
-                  .map(event => (
-                    <div 
-                      key={event.id} 
-                      onClick={() => setSelectedEvent(event)}
-                      className={`p-2 sm:p-3 rounded-lg cursor-pointer ${getEventTypeColor(event.type)} text-white`}
-                    >
-                      <div className="flex justify-between items-center">
-                        <div>
-                          <div className="font-medium text-xs sm:text-sm">{event.title}</div>
-                          <div className="text-xs">{event.date.toLocaleDateString()} at {event.time}</div>
-                        </div>
-                        <i className={`fas ${getEventTypeIcon(event.type)} text-xs sm:text-sm`}></i>
-                      </div>
-                    </div>
-                  ))}
-                {events.filter(event => event.date >= new Date()).length === 0 && (
-                  <div className="text-center py-4 text-gray-500 text-xs sm:text-sm">No upcoming follow-ups</div>
+                  .map(event => renderEventCard(event))}
+                {events.filter(event => !event.completed && event.date >= new Date()).length === 0 && (
+                  <div className="text-center py-4 text-gray-500 text-sm">No upcoming follow-ups</div>
                 )}
               </div>
             </div>
+            
+            {/* Completed Follow-Ups */}
+            <div className="bg-white rounded-lg shadow p-4 sm:p-6 mb-4 sm:mb-6">
+              <div 
+                className="flex justify-between items-center cursor-pointer mb-3 sm:mb-4 section-toggle p-2 rounded-lg"
+                onClick={() => setShowCompleted(!showCompleted)}
+              >
+                <h3 className="text-base sm:text-lg font-semibold text-gray-800">Completed Follow-Ups</h3>
+                <i className={`fas ${showCompleted ? 'fa-chevron-up' : 'fa-chevron-down'} text-gray-500`}></i>
+              </div>
+              {showCompleted && (
+                <div className="space-y-3 sm:space-y-4">
+                  {events
+                    .filter(event => event.completed)
+                    .sort((a, b) => b.date - a.date)
+                    .slice(0, 5)
+                    .map(event => renderEventCard(event))}
+                  {events.filter(event => event.completed).length === 0 && (
+                    <div className="text-center py-4 text-gray-500 text-sm">No completed follow-ups</div>
+                  )}
+                </div>
+              )}
+            </div>
+            
+            {/* All Follow-Ups */}
+            <div className="bg-white rounded-lg shadow p-4 sm:p-6">
+              <div 
+                className="flex justify-between items-center cursor-pointer mb-3 sm:mb-4 section-toggle p-2 rounded-lg"
+                onClick={() => setShowAll(!showAll)}
+              >
+                <h3 className="text-base sm:text-lg font-semibold text-gray-800">All Follow-Ups</h3>
+                <i className={`fas ${showAll ? 'fa-chevron-up' : 'fa-chevron-down'} text-gray-500`}></i>
+              </div>
+              {showAll && (
+                <div className="space-y-3 sm:space-y-4">
+                  {events
+                    .sort((a, b) => a.date - b.date)
+                    .map(event => renderEventCard(event))}
+                  {events.length === 0 && (
+                    <div className="text-center py-4 text-gray-500 text-sm">No follow-ups created yet</div>
+                  )}
+                </div>
+              )}
+            </div>
           </div>
           
           {/* Add Event Modal */}
@@ -574,6 +671,16 @@
                     <p className="text-gray-800 text-xs sm:text-sm">{selectedEvent.description || 'No description provided'}</p>
                   </div>
                   
+                  <div className="flex items-center mb-4 sm:mb-5">
+                    <span className="text-xs sm:text-sm font-medium text-gray-700 mr-2">Status:</span>
+                    <button
+                      onClick={() => toggleEventCompletion(selectedEvent.id)}
+                      className={`px-3 py-1 rounded-lg text-xs sm:text-sm ${selectedEvent.completed ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
+                    >
+                      {selectedEvent.completed ? 'Completed' : 'Pending'}
+                    </button>
+                  </div>
+                  
                   <div className="flex justify-end space-x-2 sm:space-x-3 pt-3 sm:pt-4">
                     <button
                       onClick={() => handleDeleteEvent(selectedEvent.id)}

prompts.txt

@@ -0,0 +1 @@
+after upcoming follow-ups give a completed follow-ups section and all