feat: implement Phase 6 - Advanced Features (Part 1)

claude · claude · commit 6298d3210491 · 2025-11-17T15:31:04.000Z
Enhanced Due Date Templates:
- Added 6 enhanced quick presets in date picker
- Templates: Today 5PM, Tomorrow 5PM, In 3 Days, End of Week, Next Monday, End of Month
- Changed grid layout from 2 columns to 3 columns for better UX
- All templates include specific times for consistency

Calendar Export (.ics):
Backend:
- Implemented generateBoardCalendar method in ReportService
- Created iCalendar format generator with proper escaping
- Maps card priority to iCal priority (1-9 scale)
- Maps card status to iCal status (COMPLETED/CONFIRMED)
- Includes full card details: title, description, list, status, priority
- Added GET /api/v1/reports/board/:boardId/calendar endpoint
- Returns proper .ics file with Content-Type: text/calendar

Frontend:
- Added "Export (.ics)" button to CalendarView toolbar
- Downloads .ics file for import into Google Calendar, Outlook, Apple Calendar
- Includes all cards with due dates from the board

Keyboard Shortcuts:
- Created useDueDateShortcuts hook for quick date setting
- Shortcuts: D+T (today), D+N (tomorrow), D+W (week), D+M (month), D+3 (3 days), D+X (clear)
- Built KeyboardShortcutsHelp component with visual guide
- Added shortcuts help button to BoardView header
- Popover displays all available shortcuts with visual keys

Technical Details:
- iCalendar RFC 5545 compliant format
- Proper date formatting (YYYYMMDDTHHMMSSZ)
- Special character escaping for iCal text fields
- UID format: card-id@sprinty.app
- Includes metadata: DTSTAMP, CREATED, LAST-MODIFIED
diff --git a/api/src/modules/reports/report.controller.ts b/api/src/modules/reports/report.controller.ts
@@ -144,4 +144,31 @@ export class ReportController {
       return reply.code(500).send({ error: "Internal server error" });
     }
   }
+
+  /**
+   * GET /api/v1/reports/board/:boardId/calendar
+   * Generate board calendar export (.ics)
+   */
+  async generateBoardCalendar(
+    request: FastifyRequest<{
+      Params: BoardReportParams;
+    }>,
+    reply: FastifyReply
+  ) {
+    try {
+      const { boardId } = request.params;
+      const ical = await this.service.generateBoardCalendar(boardId);
+
+      reply
+        .header("Content-Type", "text/calendar; charset=utf-8")
+        .header(
+          "Content-Disposition",
+          `attachment; filename="board-${boardId}-calendar.ics"`
+        )
+        .send(ical);
+    } catch (error) {
+      request.log.error(error);
+      return reply.code(500).send({ error: "Internal server error" });
+    }
+  }
 }
diff --git a/api/src/modules/reports/report.route.ts b/api/src/modules/reports/report.route.ts
@@ -70,4 +70,19 @@ export default async function reportRoutes(fastify: FastifyInstance) {
     },
     controller.generateUserActivityReport.bind(controller)
   );
+
+  // Board calendar export
+  fastify.get(
+    "/board/:boardId/calendar",
+    {
+      schema: {
+        description: "Generate board calendar export (iCalendar .ics format)",
+        tags: ["Reports"],
+        params: Type.Object({
+          boardId: Type.String({ format: "uuid" }),
+        }),
+      },
+    },
+    controller.generateBoardCalendar.bind(controller)
+  );
 }
diff --git a/api/src/modules/reports/report.service.ts b/api/src/modules/reports/report.service.ts
@@ -190,4 +190,92 @@ export class ReportService {
 
     return this.generateCSV(activities, headers);
   }
+
+  /**
+   * Format date to iCalendar format (YYYYMMDDTHHMMSSZ)
+   */
+  private formatICalDate(date: Date): string {
+    return date
+      .toISOString()
+      .replace(/[-:]/g, "")
+      .replace(/\.\d{3}/, "");
+  }
+
+  /**
+   * Escape special characters for iCalendar format
+   */
+  private escapeICalText(text: string): string {
+    return text
+      .replace(/\\/g, "\\\\")
+      .replace(/;/g, "\\;")
+      .replace(/,/g, "\\,")
+      .replace(/\n/g, "\\n");
+  }
+
+  /**
+   * Generate board calendar export (.ics)
+   */
+  async generateBoardCalendar(boardId: string): Promise<string> {
+    const cards = await this.knex("cards")
+      .select(
+        "cards.id",
+        "cards.title",
+        "cards.description",
+        "cards.status",
+        "cards.priority",
+        "cards.due_date",
+        "cards.created_at",
+        "cards.updated_at",
+        "lists.title as list_title",
+        "boards.title as board_title"
+      )
+      .join("lists", "cards.list_id", "lists.id")
+      .join("boards", "lists.board_id", "boards.id")
+      .where("lists.board_id", boardId)
+      .whereNotNull("cards.due_date")
+      .orderBy("cards.due_date", "asc");
+
+    const now = new Date();
+    const icalLines = [
+      "BEGIN:VCALENDAR",
+      "VERSION:2.0",
+      "PRODID:-//Sprinty//Board Calendar Export//EN",
+      "CALSCALE:GREGORIAN",
+      "METHOD:PUBLISH",
+      `X-WR-CALNAME:${this.escapeICalText(cards[0]?.board_title || "Sprinty Board")}`,
+      "X-WR-TIMEZONE:UTC",
+    ];
+
+    for (const card of cards) {
+      const dueDate = new Date(card.due_date);
+      const description = card.description
+        ? `${this.escapeICalText(card.description)}\\n\\nList: ${this.escapeICalText(card.list_title)}\\nStatus: ${card.status || "N/A"}\\nPriority: ${card.priority || "N/A"}`
+        : `List: ${this.escapeICalText(card.list_title)}\\nStatus: ${card.status || "N/A"}\\nPriority: ${card.priority || "N/A"}`;
+
+      icalLines.push("BEGIN:VEVENT");
+      icalLines.push(`UID:${card.id}@sprinty.app`);
+      icalLines.push(`DTSTAMP:${this.formatICalDate(now)}`);
+      icalLines.push(`DTSTART:${this.formatICalDate(dueDate)}`);
+      icalLines.push(`DTEND:${this.formatICalDate(dueDate)}`);
+      icalLines.push(`SUMMARY:${this.escapeICalText(card.title)}`);
+      icalLines.push(`DESCRIPTION:${description}`);
+      icalLines.push(`LOCATION:${this.escapeICalText(card.list_title)}`);
+      icalLines.push(`CREATED:${this.formatICalDate(new Date(card.created_at))}`);
+      icalLines.push(`LAST-MODIFIED:${this.formatICalDate(new Date(card.updated_at))}`);
+
+      // Set priority based on card priority
+      const icalPriority = card.priority === "critical" ? "1" : card.priority === "high" ? "3" : card.priority === "medium" ? "5" : "9";
+      icalLines.push(`PRIORITY:${icalPriority}`);
+
+      // Set status
+      const icalStatus = card.status === "completed" ? "COMPLETED" : "CONFIRMED";
+      icalLines.push(`STATUS:${icalStatus}`);
+
+      icalLines.push("END:VEVENT");
+    }
+
+    icalLines.push("END:VCALENDAR");
+
+    return icalLines.join("\r\n");
+  }
 }
diff --git a/client/src/components/board/KeyboardShortcutsHelp.tsx b/client/src/components/board/KeyboardShortcutsHelp.tsx
@@ -0,0 +1,65 @@
+import { Keyboard } from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+
+export const KeyboardShortcutsHelp = () => {
+  const shortcuts = [
+    { keys: ["D", "T"], description: "Set due date to today 5PM" },
+    { keys: ["D", "N"], description: "Set due date to tomorrow 5PM" },
+    { keys: ["D", "W"], description: "Set due date to end of week" },
+    { keys: ["D", "M"], description: "Set due date to end of month" },
+    { keys: ["D", "3"], description: "Set due date to 3 days from now" },
+    { keys: ["D", "X"], description: "Clear due date" },
+  ];
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" size="sm" className="gap-2 text-muted-foreground">
+          <Keyboard className="h-4 w-4" />
+          Shortcuts
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80" align="end">
+        <div className="space-y-3">
+          <div>
+            <h3 className="font-semibold text-sm mb-2">Due Date Keyboard Shortcuts</h3>
+            <p className="text-xs text-muted-foreground mb-3">
+              Press keys in sequence to quickly set due dates
+            </p>
+          </div>
+          <div className="space-y-2">
+            {shortcuts.map((shortcut, index) => (
+              <div key={index} className="flex items-center justify-between text-sm">
+                <div className="flex items-center gap-1">
+                  {shortcut.keys.map((key, keyIndex) => (
+                    <div key={keyIndex} className="flex items-center">
+                      <kbd className="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded">
+                        {key}
+                      </kbd>
+                      {keyIndex < shortcut.keys.length - 1 && (
+                        <span className="mx-1 text-muted-foreground">→</span>
+                      )}
+                    </div>
+                  ))}
+                </div>
+                <span className="text-xs text-muted-foreground ml-3">
+                  {shortcut.description}
+                </span>
+              </div>
+            ))}
+          </div>
+          <div className="pt-2 border-t">
+            <p className="text-xs text-muted-foreground italic">
+              Note: Shortcuts work when not typing in input fields
+            </p>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
diff --git a/client/src/components/ui/date-picker.tsx b/client/src/components/ui/date-picker.tsx
@@ -49,20 +49,28 @@ export function DatePicker({
     const now = DateTime.now();
     return [
       {
-        label: "Today",
-        date: now.endOf("day").toJSDate(),
+        label: "Today 5PM",
+        date: now.set({ hour: 17, minute: 0, second: 0 }).toJSDate(),
       },
       {
-        label: "Tomorrow",
-        date: now.plus({ days: 1 }).endOf("day").toJSDate(),
+        label: "Tomorrow 5PM",
+        date: now.plus({ days: 1 }).set({ hour: 17, minute: 0, second: 0 }).toJSDate(),
       },
       {
-        label: "Next Week",
-        date: now.plus({ weeks: 1 }).endOf("day").toJSDate(),
+        label: "In 3 Days",
+        date: now.plus({ days: 3 }).set({ hour: 17, minute: 0, second: 0 }).toJSDate(),
       },
       {
-        label: "Next Month",
-        date: now.plus({ months: 1 }).endOf("day").toJSDate(),
+        label: "End of Week",
+        date: now.endOf("week").set({ hour: 17, minute: 0, second: 0 }).toJSDate(),
+      },
+      {
+        label: "Next Monday",
+        date: now.plus({ weeks: 1 }).startOf("week").set({ hour: 9, minute: 0, second: 0 }).toJSDate(),
+      },
+      {
+        label: "End of Month",
+        date: now.endOf("month").set({ hour: 17, minute: 0, second: 0 }).toJSDate(),
       },
     ];
   }, []);
@@ -141,16 +149,16 @@ export function DatePicker({
             <>
               <div className="space-y-2">
                 <Label className="text-xs font-medium text-muted-foreground">
-                  Quick Select
+                  Quick Presets
                 </Label>
-                <div className="grid grid-cols-2 gap-2">
+                <div className="grid grid-cols-3 gap-2">
                   {quickPresets.map((preset) => (
                     <Button
                       key={preset.label}
                       variant="outline"
                       size="sm"
                       onClick={() => handleQuickPreset(preset.date)}
-                      className="h-8"
+                      className="h-8 text-xs"
                     >
                       {preset.label}
                     </Button>
diff --git a/client/src/hooks/useDueDateShortcuts.ts b/client/src/hooks/useDueDateShortcuts.ts
@@ -0,0 +1,100 @@
+import { useEffect } from "react";
+import { DateTime } from "luxon";
+import { toISOString } from "@/lib/dateUtils";
+
+export interface DueDateShortcuts {
+  enableShortcuts: boolean;
+  onSetDueDate: (date: string) => void;
+}
+
+/**
+ * Hook to enable keyboard shortcuts for setting due dates
+ *
+ * Shortcuts:
+ * - d + t: Set to today at 5 PM
+ * - d + n: Set to tomorrow at 5 PM
+ * - d + w: Set to end of week at 5 PM
+ * - d + m: Set to end of month at 5 PM
+ * - d + 3: Set to 3 days from now at 5 PM
+ * - d + x: Clear due date
+ */
+export const useDueDateShortcuts = ({ enableShortcuts, onSetDueDate }: DueDateShortcuts) => {
+  useEffect(() => {
+    if (!enableShortcuts) return;
+
+    let lastKey = "";
+    let timeout: NodeJS.Timeout;
+
+    const handleKeyPress = (event: KeyboardEvent) => {
+      // Ignore shortcuts when typing in input fields
+      const target = event.target as HTMLElement;
+      if (
+        target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.isContentEditable
+      ) {
+        return;
+      }
+
+      const key = event.key.toLowerCase();
+
+      // Start shortcut sequence with 'd'
+      if (key === "d" && lastKey === "") {
+        lastKey = "d";
+        clearTimeout(timeout);
+        // Reset after 1.5 seconds of inactivity
+        timeout = setTimeout(() => {
+          lastKey = "";
+        }, 1500);
+        return;
+      }
+
+      // Handle second key in sequence
+      if (lastKey === "d") {
+        const now = DateTime.now();
+        let dueDate: DateTime | null = null;
+
+        switch (key) {
+          case "t": // Today at 5 PM
+            dueDate = now.set({ hour: 17, minute: 0, second: 0 });
+            break;
+          case "n": // Tomorrow at 5 PM
+            dueDate = now.plus({ days: 1 }).set({ hour: 17, minute: 0, second: 0 });
+            break;
+          case "w": // End of week at 5 PM
+            dueDate = now.endOf("week").set({ hour: 17, minute: 0, second: 0 });
+            break;
+          case "m": // End of month at 5 PM
+            dueDate = now.endOf("month").set({ hour: 17, minute: 0, second: 0 });
+            break;
+          case "3": // 3 days from now at 5 PM
+            dueDate = now.plus({ days: 3 }).set({ hour: 17, minute: 0, second: 0 });
+            break;
+          case "x": // Clear due date
+            onSetDueDate("");
+            lastKey = "";
+            clearTimeout(timeout);
+            return;
+          default:
+            lastKey = "";
+            clearTimeout(timeout);
+            return;
+        }
+
+        if (dueDate) {
+          onSetDueDate(toISOString(dueDate.toJSDate()));
+        }
+
+        lastKey = "";
+        clearTimeout(timeout);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyPress);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyPress);
+      clearTimeout(timeout);
+    };
+  }, [enableShortcuts, onSetDueDate]);
+};
diff --git a/client/src/pages/BoardView.tsx b/client/src/pages/BoardView.tsx
@@ -16,6 +16,7 @@ import { Button } from "@/components/ui/button";
 import { Calendar, AlertCircle } from "lucide-react";
 import { useDueDateAnalytics } from "@/hooks/useAnalytics";
 import { Badge } from "@/components/ui/badge";
+import { KeyboardShortcutsHelp } from "@/components/board/KeyboardShortcutsHelp";
 
 const BoardView = () => {
   const { board_id } = useParams();
@@ -90,6 +91,7 @@ const BoardView = () => {
                 {dueDateAnalytics.summary.overdue} Overdue
               </Badge>
             )}
+            <KeyboardShortcutsHelp />
             <Button
               variant="outline"
               onClick={() => navigate(`/board/${board_id}/calendar`)}
diff --git a/client/src/pages/CalendarView.tsx b/client/src/pages/CalendarView.tsx
