feat: implement one-on-one meeting notes with Lexical rich text editor

client/package.json

@@ -15,6 +15,11 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/error-message": "^2.0.1",
+    "@lexical/html": "^0.41.0",
+    "@lexical/link": "^0.41.0",
+    "@lexical/list": "^0.41.0",
+    "@lexical/react": "^0.41.0",
+    "@lexical/rich-text": "^0.41.0",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -40,6 +45,7 @@
     "dayjs": "^1.11.19",
     "input-otp": "^1.4.2",
     "jwt-decode": "^4.0.0",
+    "lexical": "^0.41.0",
     "lucide-react": "^0.555.0",
     "next-themes": "^0.4.6",
     "react": "^19.2.0",

client/src/api/api.ts

@@ -28,6 +28,8 @@ import {
   GetUserReport,
   GetUserReports,
   GetCurrentQuarterStatus,
+  GetAllMeetings,
+  GetMeeting,
 } from "@/types/apiResponse";
 import { CheckInPayload, ICheckInPayload } from "@/types/chekin";
 import { Goal } from "@/types/goal";
@@ -244,8 +246,13 @@ export class API {
   markGoalAsComplete(data: ViewGoalFormValues) {
     return this.request(this.instance.put("/goals/mark-as-complete", data));
   }
-  getGoalsByOwner(): Promise<GetGoals> {
-    return this.request(this.instance.get("/goals/get-by-owner"));
+  getGoalsByOwner(filter?: {
+    quarter?: string | null;
+    year?: string | null;
+  }): Promise<GetGoals> {
+    return this.request(
+      this.instance.get("/goals/get-by-owner", { params: filter }),
+    );
   }
   deleteGoalById(goalId: string) {
     return this.request(
@@ -288,6 +295,39 @@ export class API {
   generateUserReport(): Promise<GetUserReport> {
     return this.request(this.instance.post("/reports/generate-user-report"));
   }
+  createMeeting(data: {
+    title: string;
+    employee: string;
+    meetingDate: string;
+  }) {
+    return this.request(this.instance.post("/meetings/add", data));
+  }
+  updateMeeting(
+    meetingId: string,
+    data: { title?: string; meetingDate?: string; notes?: string; status?: string },
+  ) {
+    return this.request(
+      this.instance.put(`/meetings/update/${meetingId}`, data),
+    );
+  }
+  deleteMeeting(meetingId: string) {
+    return this.request(
+      this.instance.delete("/meetings/delete", { params: { meetingId } }),
+    );
+  }
+  getAllMeetings(filters: {
+    employeeId?: string | null;
+    quarter?: string | null;
+    year?: string | null;
+    status?: string | null;
+  }): Promise<GetAllMeetings> {
+    return this.request(
+      this.instance.get("/meetings/get-all", { params: filters }),
+    );
+  }
+  getMeetingById(meetingId: string): Promise<GetMeeting> {
+    return this.request(this.instance.get(`/meetings/get/${meetingId}`));
+  }
 }
 
 const Api = new API();

client/src/components/meetings/DeleteMeetingModal.tsx

@@ -0,0 +1,49 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+
+interface DeleteMeetingModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirmDelete: () => void;
+  isPending?: boolean;
+}
+
+export const DeleteMeetingModal = ({
+  isOpen,
+  onClose,
+  onConfirmDelete,
+  isPending = false,
+}: DeleteMeetingModalProps) => {
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Delete Meeting</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete this meeting? This action cannot be
+            undone.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={isPending}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={onConfirmDelete}
+            disabled={isPending}
+          >
+            {isPending ? "Deleting..." : "Delete Meeting"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

client/src/components/meetings/LexicalEditor.tsx

@@ -0,0 +1,195 @@
+import { useEffect } from "react";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { HeadingNode } from "@lexical/rich-text";
+import {
+  $getSelection,
+  $isRangeSelection,
+  FORMAT_TEXT_COMMAND,
+  type EditorState,
+  type LexicalEditor as LexicalEditorType,
+} from "lexical";
+import {
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+} from "@lexical/list";
+import { useState, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+
+const theme = {
+  paragraph: "mb-1",
+  text: {
+    bold: "font-bold",
+    italic: "italic",
+    underline: "underline",
+  },
+  list: {
+    nested: {
+      listitem: "list-none",
+    },
+    ol: "list-decimal ml-4",
+    ul: "list-disc ml-4",
+    listitem: "ml-2",
+  },
+  heading: {
+    h1: "text-2xl font-bold",
+    h2: "text-xl font-bold",
+    h3: "text-lg font-bold",
+  },
+};
+
+function ToolbarPlugin() {
+  const [editor] = useLexicalComposerContext();
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+  const [isUnderline, setIsUnderline] = useState(false);
+
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      setIsBold(selection.hasFormat("bold"));
+      setIsItalic(selection.hasFormat("italic"));
+      setIsUnderline(selection.hasFormat("underline"));
+    }
+  }, []);
+
+  useEffect(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        updateToolbar();
+      });
+    });
+  }, [editor, updateToolbar]);
+
+  return (
+    <div className="flex gap-1 border-b p-1">
+      <Button
+        type="button"
+        variant={isBold ? "default" : "ghost"}
+        size="sm"
+        className="h-8 w-8 p-0 font-bold"
+        onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold")}
+      >
+        B
+      </Button>
+      <Button
+        type="button"
+        variant={isItalic ? "default" : "ghost"}
+        size="sm"
+        className="h-8 w-8 p-0 italic"
+        onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic")}
+      >
+        I
+      </Button>
+      <Button
+        type="button"
+        variant={isUnderline ? "default" : "ghost"}
+        size="sm"
+        className="h-8 w-8 p-0 underline"
+        onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline")}
+      >
+        U
+      </Button>
+      <div className="mx-1 w-px bg-border" />
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        className="h-8 px-2 text-xs"
+        onClick={() =>
+          editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)
+        }
+      >
+        • List
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        className="h-8 px-2 text-xs"
+        onClick={() =>
+          editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined)
+        }
+      >
+        1. List
+      </Button>
+    </div>
+  );
+}
+
+function LoadInitialStatePlugin({
+  initialState,
+}: {
+  initialState?: string;
+}) {
+  const [editor] = useLexicalComposerContext();
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    if (initialState && !loaded) {
+      try {
+        const parsed = JSON.parse(initialState);
+        const editorState = editor.parseEditorState(parsed);
+        editor.setEditorState(editorState);
+        setLoaded(true);
+      } catch {
+        // Invalid state, ignore
+      }
+    }
+  }, [editor, initialState, loaded]);
+
+  return null;
+}
+
+interface LexicalEditorProps {
+  onChange: (serializedState: string) => void;
+  initialState?: string;
+}
+
+export default function LexicalEditor({
+  onChange,
+  initialState,
+}: LexicalEditorProps) {
+  const initialConfig = {
+    namespace: "MeetingNotesEditor",
+    theme,
+    nodes: [ListNode, ListItemNode, HeadingNode],
+    onError: (error: Error) => {
+      console.error(error);
+    },
+  };
+
+  const handleChange = (
+    editorState: EditorState,
+    _editor: LexicalEditorType,
+  ) => {
+    const json = editorState.toJSON();
+    onChange(JSON.stringify(json));
+  };
+
+  return (
+    <LexicalComposer initialConfig={initialConfig}>
+      <div className="rounded-md border">
+        <ToolbarPlugin />
+        <div className="relative min-h-[200px]">
+          <RichTextPlugin
+            contentEditable={
+              <ContentEditable className="min-h-[200px] p-3 outline-none" />
+            }
+            ErrorBoundary={({ children }) => <>{children}</>}
+          />
+        </div>
+        <HistoryPlugin />
+        <ListPlugin />
+        <OnChangePlugin onChange={handleChange} />
+        <LoadInitialStatePlugin initialState={initialState} />
+      </div>
+    </LexicalComposer>
+  );
+}