Implement multi-select triggers

Implement multi-select triggers for reporting relapse and adjust firebase logic.

Author: lovable-dev[bot]

src/pages/Analytics.tsx

@@ -10,13 +10,6 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Textarea } from "@/components/ui/textarea";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { Label } from "@/components/ui/label";
 import ProgressChart from "@/components/ProgressChart";
 import { logRelapse } from "../utils/firebase";
@@ -27,6 +20,7 @@ import { toast } from "sonner";
 import { useEffect } from "react";
 import { db } from "../utils/firebase";
 import { collection, doc, getDoc } from "firebase/firestore";
+import { MultiSelect } from "@/components/ui/multi-select";
 
 const mockStreakData = [
   { date: "Jan 1", streak: 1 },
@@ -65,12 +59,21 @@ const mockMoodData = [
 const Analytics: React.FC = () => {
   const { currentUser, userProfile } = useAuth();
   const [notes, setNotes] = useState("");
-  const [selectedTrigger, setSelectedTrigger] = useState("");
+  const [selectedTriggers, setSelectedTriggers] = useState<string[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [triggers, setTriggers] = useState<{ name: string; count: number }[]>(
     []
   );
 
+  const triggerOptions = [
+    { value: "stress", label: "Stress" },
+    { value: "boredom", label: "Boredom" },
+    { value: "loneliness", label: "Loneliness" },
+    { value: "fatigue", label: "Fatigue" },
+    { value: "social-media", label: "Social Media" },
+    { value: "other", label: "Other" }
+  ];
+
   const useTriggers = (uid: string | undefined) => {
     useEffect(() => {
       if (!uid) return;
@@ -117,15 +120,15 @@ const Analytics: React.FC = () => {
     setIsSubmitting(true);
 
     try {
-      const result = await logRelapse(currentUser.uid, selectedTrigger, notes);
+      const result = await logRelapse(currentUser.uid, selectedTriggers, notes);
       if (result.success) {
         toast.success("Progress reset", {
           description:
             "Remember that every moment is a new opportunity to begin again.",
         });
 
         setNotes("");
-        setSelectedTrigger("");
+        setSelectedTriggers([]);
       } else {
         toast.error("Failed to log relapse", {
           description: result.message,
@@ -389,23 +392,14 @@ const Analytics: React.FC = () => {
 
               <CardContent className="space-y-4">
                 <div className="space-y-2">
-                  <Label htmlFor="trigger">What triggered this relapse?</Label>
-                  <Select
-                    value={selectedTrigger}
-                    onValueChange={setSelectedTrigger}
-                  >
-                    <SelectTrigger id="trigger">
-                      <SelectValue placeholder="Select a trigger" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="stress">Stress</SelectItem>
-                      <SelectItem value="boredom">Boredom</SelectItem>
-                      <SelectItem value="loneliness">Loneliness</SelectItem>
-                      <SelectItem value="fatigue">Fatigue</SelectItem>
-                      <SelectItem value="social-media">Social Media</SelectItem>
-                      <SelectItem value="other">Other</SelectItem>
-                    </SelectContent>
-                  </Select>
+                  <Label htmlFor="trigger">What triggered this relapse? (Select up to 3)</Label>
+                  <MultiSelect
+                    options={triggerOptions}
+                    selected={selectedTriggers}
+                    onChange={setSelectedTriggers}
+                    placeholder="Select triggers"
+                    className="w-full"
+                  />
                 </div>
 
                 <div className="space-y-2">
@@ -424,7 +418,7 @@ const Analytics: React.FC = () => {
                   variant="destructive"
                   className="w-full"
                   onClick={handleRelapseSubmit}
-                  disabled={isSubmitting || !selectedTrigger}
+                  disabled={isSubmitting || selectedTriggers.length === 0}
                 >
                   {isSubmitting
                     ? "Submitting..."

src/utils/firebase.ts

@@ -1,3 +1,4 @@
+
 import { initializeApp } from 'firebase/app';
 import { getAuth, onAuthStateChanged, signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut, User, updatePassword, EmailAuthProvider, reauthenticateWithCredential } from 'firebase/auth';
 import { getFirestore, collection, doc, setDoc, getDoc, getDocs, updateDoc, query, where, GeoPoint, Timestamp, addDoc, orderBy, arrayUnion, serverTimestamp } from 'firebase/firestore';
@@ -297,13 +298,13 @@ interface LogRelapseResult {
   message?: string;
 }
 
-export const logRelapse = async (userId: string, triggers: string, notes?: string): Promise<LogRelapseResult> => {
+export const logRelapse = async (userId: string, triggers: string[], notes?: string): Promise<LogRelapseResult> => {
   try {
     const userDocRef = doc(db, 'users', userId);  // Reference to the user's document
 
     const relapseObject = {
       timestamp: Timestamp.now(),
-      triggers: triggers,
+      triggers: triggers,  // Now we store the array of triggers
       notes: notes || ''
     };