Update index.html

index.html

@@ -192,6 +192,7 @@
       const [activeTeacherSession, setActiveTeacherSession] = useState("MORNING");
       const [selectedReportDay, setSelectedReportDay] = useState(() => { const d = new Date().getDay(); const idx = d === 0 || d === 6 ? 2 : d - 1; return DAYS[idx] || DAYS[2]; });
       const [isGenerating, setIsGenerating] = useState(false);
+      const [isEmailing, setIsEmailing] = useState(false);
       const [hideFormLevel, setHideFormLevel] = useState(false);
       const fileInputRef = useRef(null);
 
@@ -523,12 +524,71 @@
         reader.readAsText(file);
       };
 
+      const buildTimetablePdf = (scheduleShifts, generatedAt = new Date()) => {
+        const jsPDF = window.jspdf && window.jspdf.jsPDF;
+        if (!jsPDF) throw new Error("PDF library did not load. Please refresh the page and try again.");
+
+        const safeShifts = Array.isArray(scheduleShifts) ? scheduleShifts : [];
+        const fileName = "Prefect_Duty_Timetable_" + generatedAt.toISOString().slice(0, 10) + ".pdf";
+        const doc = new jsPDF({ orientation: "landscape", unit: "mm", format: "a4" });
+
+        doc.setFont("helvetica", "bold");
+        doc.setFontSize(18);
+        doc.text("Prefect Duty Timetable", 14, 16);
+        doc.setFont("helvetica", "normal");
+        doc.setFontSize(9);
+        doc.text("Generated by Prefect Duty Manager", 14, 22);
+        doc.text("Generated: " + generatedAt.toLocaleString(), 14, 27);
+
+        const headers = ["Day", "Session", "Location", "Prefect", "Status"];
+        const rows = safeShifts
+          .map((s) => [s.day || "", s.sessionName || s.sessionId || "", s.locationName || s.locationId || "", s.userName || "Unassigned", s.status || "pending"])
+          .sort((a, b) => (String(a[0]) + String(a[1]) + String(a[2])).localeCompare(String(b[0]) + String(b[1]) + String(b[2])));
+
+        const colX = [14, 43, 92, 160, 232];
+        const rowH = 7;
+        let y = 35;
+
+        const drawHeader = () => {
+          doc.setFont("helvetica", "bold");
+          doc.setFontSize(8);
+          headers.forEach((h, i) => doc.text(h, colX[i], y));
+          doc.line(14, y + 2, 272, y + 2);
+          y += rowH;
+          doc.setFont("helvetica", "normal");
+        };
+
+        drawHeader();
+        rows.forEach((row) => {
+          if (y > 190) {
+            doc.addPage();
+            y = 15;
+            drawHeader();
+          }
+          doc.setFontSize(7);
+          row.forEach((value, i) => {
+            let text = String(value);
+            const maxChars = i === 0 ? 16 : i === 1 ? 27 : i === 2 ? 34 : i === 3 ? 34 : 12;
+            if (text.length > maxChars) text = text.slice(0, maxChars - 1) + "…";
+            doc.text(text, colX[i], y);
+          });
+          doc.setDrawColor(220);
+          doc.line(14, y + 2, 272, y + 2);
+          doc.setDrawColor(0);
+          y += rowH;
+        });
+
+        if (rows.length === 0) {
+          doc.setFontSize(10);
+          doc.text("No duty timetable records found.", 14, y + 8);
+        }
+
+        doc.save(fileName);
+        return fileName;
+      };
+
       const generateTimetable = async () => {
         if (!profile || profile.role !== ROLES.HEAD_PREFECT) return;
-        if (!user || !user.email) {
-          showToast("You must be signed in with Gmail to generate and email the timetable.", "error");
-          return;
-        }
         setIsGenerating(true);
         try {
           const deleteOps = [];
@@ -539,13 +599,13 @@
           const prefects = users.filter((u) => u.role === ROLES.PREFECT || u.role === ROLES.HEAD_PREFECT);
           if (prefects.length === 0) {
             showToast("No prefects registered to assign!", "error");
-            setIsGenerating(false);
             return;
           }
 
           const assignmentCounts = {};
           prefects.forEach((p) => { assignmentCounts[p.id] = 0; });
           const createOps = [];
+          const generatedShifts = [];
           let unassignedSlots = 0;
 
           DAYS.forEach((day) => {
@@ -569,19 +629,24 @@
                 const chosen = candidates[Math.floor(Math.random() * candidates.length)];
                 assignmentCounts[chosen.id]++;
                 usedThisDay.add(chosen.id);
+
                 const newRef = db.collection("shifts").doc();
+                const shiftData = {
+                  id: newRef.id,
+                  day,
+                  sessionId: session.id,
+                  sessionName: session.name,
+                  locationId: loc.id,
+                  locationName: loc.name,
+                  userId: chosen.id,
+                  userName: chosen.name,
+                  status: "pending",
+                  swapStatus: "none"
+                };
+                generatedShifts.push(shiftData);
                 createOps.push((batch) => {
-                  batch.set(newRef, {
-                    day,
-                    sessionId: session.id,
-                    sessionName: session.name,
-                    locationId: loc.id,
-                    locationName: loc.name,
-                    userId: chosen.id,
-                    userName: chosen.name,
-                    status: "pending",
-                    swapStatus: "none"
-                  });
+                  const { id, ...data } = shiftData;
+                  batch.set(newRef, data);
                 });
               });
             });
@@ -589,103 +654,71 @@
 
           if (createOps.length === 0) {
             showToast("Not enough prefects to fill any slots.", "error");
-            setIsGenerating(false);
             return;
           }
-          await commitInBatches(createOps);
 
-          // ===== 0-cost PDF + Gmail workflow =====
-          // The browser cannot silently attach a local file to Gmail.
-          // We therefore: generate/download the PDF, then open a pre-filled Gmail compose window.
-          const emailList = prefects.map((p) => p.email).filter((e) => e && e.includes("@"));
-          const generatedAt = new Date();
-          const fileName = "Prefect_Duty_Timetable_" + generatedAt.toISOString().slice(0, 10) + ".pdf";
-
-          try {
-            const jsPDF = window.jspdf && window.jspdf.jsPDF;
-            if (!jsPDF) throw new Error("PDF library did not load. Please check your internet connection and try again.");
+          await commitInBatches(createOps);
+          showToast("New timetable generated and saved. No email was sent.", "success");
 
-            const doc = new jsPDF({ orientation: "landscape", unit: "mm", format: "a4" });
-            doc.setFont("helvetica", "bold");
-            doc.setFontSize(18);
-            doc.text("Prefect Duty Timetable", 14, 16);
-            doc.setFont("helvetica", "normal");
-            doc.setFontSize(9);
-            doc.text("Generated by Prefect Duty Manager", 14, 22);
-            doc.text("Generated: " + generatedAt.toLocaleString(), 14, 27);
+          // The schedule generator ONLY generates/saves. Emailing is a separate action.
+          // Keep generatedShifts available so the UI can immediately reflect what was created.
+          console.info("Generated timetable:", generatedShifts.length, "assignments;", unassignedSlots, "unassigned slots.");
+        } catch (error) {
+          console.error("Error generating timetable:", error);
+          showToast("Failed to generate timetable: " + (error.message || "unknown"), "error");
+        } finally {
+          setIsGenerating(false);
+        }
+      };
 
-            const headers = ["Day", "Session", "Location", "Prefect", "Status"];
-            const rows = shifts
-              .map((s) => [s.day || "", s.sessionName || "", s.locationName || "", s.userName || "Unassigned", s.status || "pending"])
-              .sort((a, b) => (String(a[0]) + String(a[1]) + String(a[2])).localeCompare(String(b[0]) + String(b[1]) + String(b[2])));
+      const emailCurrentSchedule = async () => {
+        if (!profile || profile.role !== ROLES.HEAD_PREFECT) return;
+        if (!user || !user.email) {
+          showToast("You must be signed in with Gmail to email the timetable.", "error");
+          return;
+        }
 
-            const colX = [14, 43, 92, 160, 232];
-            const colW = [29, 49, 68, 72, 40];
-            let y = 35;
-            const rowH = 7;
+        setIsEmailing(true);
+        try {
+          // Read the current schedule directly from Firestore so this button NEVER regenerates it.
+          const snap = await db.collection("shifts").get();
+          const currentShifts = snap.docs.map((d) => ({ id: d.id, ...d.data() }));
+          if (currentShifts.length === 0) {
+            showToast("There is no timetable to email yet. Generate a schedule first.", "error");
+            return;
+          }
 
-            const drawHeader = () => {
-              doc.setFont("helvetica", "bold");
-              doc.setFontSize(8);
-              headers.forEach((h, i) => doc.text(h, colX[i], y));
-              doc.line(14, y + 2, 272, y + 2);
-              y += rowH;
-              doc.setFont("helvetica", "normal");
-            };
+          const emailList = users
+            .filter((u) => u.role === ROLES.PREFECT || u.role === ROLES.HEAD_PREFECT)
+            .map((p) => p.email)
+            .filter((e) => e && e.includes("@"));
 
-            drawHeader();
-            rows.forEach((row) => {
-              if (y > 190) {
-                doc.addPage();
-                y = 15;
-                drawHeader();
-              }
-              doc.setFontSize(7);
-              row.forEach((value, i) => {
-                let text = String(value);
-                const maxChars = i === 0 ? 16 : i === 1 ? 27 : i === 2 ? 34 : i === 3 ? 34 : 12;
-                if (text.length > maxChars) text = text.slice(0, maxChars - 1) + "…";
-                doc.text(text, colX[i], y);
-              });
-              doc.setDrawColor(220);
-              doc.line(14, y + 2, 272, y + 2);
-              doc.setDrawColor(0);
-              y += rowH;
-            });
+          const generatedAt = new Date();
+          const fileName = buildTimetablePdf(currentShifts, generatedAt);
 
-            const extra = unassignedSlots > 0 ? unassignedSlots + " slot(s) left empty (1 duty/person/day)." : "All generated slots were assigned.";
-            if (y > 190) { doc.addPage(); y = 15; }
-            doc.setFontSize(8);
-            doc.text(extra, 14, y + 4);
-            doc.save(fileName);
-
-            if (emailList.length > 0) {
-              const subject = encodeURIComponent("Prefect Duty Timetable");
-              const body = encodeURIComponent(
-                "Hi Prefects,\n\n" +
-                "The latest prefect duty timetable has been generated.\n\n" +
-                "Please download the PDF that was just generated by Prefect Duty Manager and attach it to this email before sending.\n\n" +
-                "Generated by: " + (user.displayName || user.email) + "\n" +
-                "Generated: " + generatedAt.toLocaleString() + "\n\n" +
-                "Thank you!"
-              );
-              const to = encodeURIComponent(emailList.join(","));
-              const gmailUrl = "https://mail.google.com/mail/?view=cm&fs=1&to=" + to + "&su=" + subject + "&body=" + body;
-              window.open(gmailUrl, "_blank", "noopener,noreferrer");
-              showToast("PDF downloaded. Gmail compose opened — attach " + fileName + " and press Send.", "success");
-            } else {
-              showToast("PDF downloaded as " + fileName + ". No prefect Gmail addresses are stored yet.", "info");
-            }
-          } catch (pdfError) {
-            console.error("PDF/email preparation error:", pdfError);
-            showToast("Timetable generated, but PDF preparation failed: " + (pdfError.message || "unknown error"), "error");
-          } finally {
-            setIsGenerating(false);
+          if (emailList.length === 0) {
+            showToast("PDF downloaded as " + fileName + ". No prefect Gmail addresses are stored yet.", "info");
+            return;
           }
+
+          const subject = encodeURIComponent("Current Prefect Duty Timetable");
+          const body = encodeURIComponent(
+            "Hi Prefects,\n\n" +
+            "Attached is the current prefect duty timetable. This email uses the schedule already saved in Prefect Duty Manager; it does NOT generate a new schedule.\n\n" +
+            "Please attach the downloaded PDF: " + fileName + "\n\n" +
+            "Sent by: " + (user.displayName || user.email) + "\n" +
+            "Prepared: " + generatedAt.toLocaleString() + "\n\n" +
+            "Thank you!"
+          );
+          const to = encodeURIComponent(emailList.join(","));
+          const gmailUrl = "https://mail.google.com/mail/?view=cm&fs=1&to=" + to + "&su=" + subject + "&body=" + body;
+          window.open(gmailUrl, "_blank", "noopener,noreferrer");
+          showToast("Current schedule PDF downloaded. Gmail opened — attach " + fileName + " and press Send.", "success");
         } catch (error) {
-          console.error("Error generating timetable:", error);
-          showToast("Failed to generate timetable: " + (error.message || "unknown"), "error");
-          setIsGenerating(false);
+          console.error("Error emailing current timetable:", error);
+          showToast("Failed to prepare email: " + (error.message || "unknown error"), "error");
+        } finally {
+          setIsEmailing(false);
         }
       };
 
@@ -1262,10 +1295,16 @@
                 )}
               </div>
               {profile.role === ROLES.HEAD_PREFECT && activeTab === "timetable" && (
-                <button onClick={generateTimetable} disabled={isGenerating} className="w-full md:w-auto flex items-center justify-center gap-2 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white px-6 py-2.5 rounded-lg font-bold shadow-md disabled:opacity-70">
-                  {isGenerating ? <Icon name="refresh-cw" size={18} className="animate-spin" /> : <Icon name="mail" size={18} />}
-                  {isGenerating ? "Generating..." : "AI Generate & Email"}
-                </button>
+                <div className="w-full md:w-auto flex flex-col sm:flex-row gap-2">
+                  <button onClick={generateTimetable} disabled={isGenerating || isEmailing} className="flex-1 md:flex-none flex items-center justify-center gap-2 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white px-5 py-2.5 rounded-lg font-bold shadow-md disabled:opacity-70">
+                    {isGenerating ? <Icon name="refresh-cw" size={18} className="animate-spin" /> : <Icon name="sparkles" size={18} />}
+                    {isGenerating ? "Generating..." : "Generate Schedule"}
+                  </button>
+                  <button onClick={emailCurrentSchedule} disabled={isGenerating || isEmailing} className="flex-1 md:flex-none flex items-center justify-center gap-2 bg-white hover:bg-slate-50 text-indigo-700 border border-indigo-200 px-5 py-2.5 rounded-lg font-bold shadow-sm disabled:opacity-70">
+                    {isEmailing ? <Icon name="refresh-cw" size={18} className="animate-spin" /> : <Icon name="mail" size={18} />}
+                    {isEmailing ? "Preparing Email..." : "Email Current Schedule"}
+                  </button>
+                </div>
               )}
             </div>