feat: integrate Things to Pray For tab and add dashboard widget

2026-01-16 08:29:51 -05:00
1 parent 55076bbc0e
commit a67f295089
@@ -0,0 +1,112 @@
+'use client';
+
+import React from 'react';
+
+interface Prayer {
+  id: string;
+  date: string;
+  text: string;
+  prayFor?: string;
+  answered?: boolean;
+  answerDetails?: string;
+}
+
+interface ThingsToPrayForProps {
+  prayers: Prayer[];
+  onEdit: (prayer: Prayer) => void;
+}
+
+export default function ThingsToPrayFor({ prayers, onEdit }: ThingsToPrayForProps) {
+  // Filter for unanswered prayers
+  const thingsToPrayFor = prayers.filter(p => !p.answered).sort((a, b) => 
+    new Date(b.date).getTime() - new Date(a.date).getTime()
+  );
+
+  // Group by prayer for (people/topics)
+  const groupedByTopic: Record<string, Prayer[]> = {};
+  thingsToPrayFor.forEach(prayer => {
+    const topic = prayer.prayFor || 'Other Concerns';
+    if (!groupedByTopic[topic]) {
+      groupedByTopic[topic] = [];
+    }
+    groupedByTopic[topic].push(prayer);
+  });
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 pt-20 px-4 pb-8">
+      {/* Animated Background */}
+      <div className="fixed inset-0 -z-10">
+        <div className="absolute top-40 right-20 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-40 left-20 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl"></div>
+      </div>
+
+      <div className="max-w-2xl mx-auto">
+        {/* Header */}
+        <div className="text-center mb-12">
+          <h1 className="text-5xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-2">
+            🙏 Things to Pray For
+          </h1>
+          <p className="text-slate-400 text-lg">
+            {thingsToPrayFor.length} active {thingsToPrayFor.length === 1 ? 'prayer request' : 'prayer requests'}
+          </p>
+        </div>
+
+        {thingsToPrayFor.length === 0 ? (
+          <div className="text-center py-12">
+            <div className="text-6xl mb-4 animate-bounce">✨</div>
+            <p className="text-white font-semibold mb-2">All Caught Up!</p>
+            <p className="text-slate-400">
+              You've marked all your prayers as answered. Praise God for His faithfulness!
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-8">
+            {Object.entries(groupedByTopic).map(([topic, prayersByTopic]) => (
+              <div key={topic}>
+                <div className="flex items-center gap-2 mb-4">
+                  <div className="h-1 flex-1 bg-gradient-to-r from-blue-500/50 to-transparent rounded"></div>
+                  <h2 className="text-xl font-bold text-blue-400 px-4">
+                    🎯 {topic}
+                  </h2>
+                  <div className="h-1 flex-1 bg-gradient-to-l from-blue-500/50 to-transparent rounded"></div>
+                </div>
+                <div className="space-y-3">
+                  {prayersByTopic.map((prayer, idx) => {
+                    const daysAgo = Math.floor(
+                      (new Date().getTime() - new Date(prayer.date).getTime()) / (1000 * 60 * 60 * 24)
+                    );
+                    
+                    return (
+                      <button
+                        key={prayer.id}
+                        onClick={() => onEdit(prayer)}
+                        className="w-full text-left group bg-slate-800/60 backdrop-blur-xl rounded-xl p-5 shadow-md border border-slate-700/50 hover:border-blue-500/50 transition-all hover:shadow-xl hover:bg-slate-800/80 transform hover:translate-x-2"
+                      >
+                        <div className="flex items-start gap-3">
+                          <div className="text-3xl mt-0.5">🙏</div>
+                          <div className="flex-1 min-w-0">
+                            <p className="text-base text-slate-200 group-hover:text-white line-clamp-3">
+                              {prayer.text}
+                            </p>
+                            <div className="mt-3 flex items-center justify-between text-xs">
+                              <span className="text-slate-500">
+                                {daysAgo === 0 ? 'Today' : daysAgo === 1 ? 'Yesterday' : `${daysAgo} days ago`}
+                              </span>
+                              <span className="text-blue-400 opacity-0 group-hover:opacity-100 transition-opacity">
+                                Edit & Mark Answered →
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}