Add agreements component and use it on the coaching sessions page

src/app/coaching-sessions/[id]/page.tsx

@@ -48,6 +48,14 @@ import {
 import { Note, noteToString } from "@/types/note";
 import { useAuthStore } from "@/lib/providers/auth-store-provider";
 import { Id } from "@/types/general";
+import { AgreementsList } from "@/components/ui/coaching-sessions/agreements-list";
+import { Agreement, agreementToString } from "@/types/agreement";
+import {
+  createAgreement,
+  deleteAgreement,
+  updateAgreement,
+} from "@/lib/api/agreements";
+import { siteConfig } from "@/site.config";
 
 // export const metadata: Metadata = {
 //   title: "Coaching Session",
@@ -91,6 +99,40 @@ export default function CoachingSessionsPage() {
     fetchNote();
   }, [coachingSessionId, noteId]);
 
+  const handleAgreementAdded = (body: string): Promise<Agreement> => {
+    // Calls the backend endpoint that creates and stores a full Agreement entity
+    return createAgreement(coachingSessionId, userId, body)
+      .then((agreement) => {
+        return agreement;
+      })
+      .catch((err) => {
+        console.error("Failed to create new Agreement: " + err);
+        throw err;
+      });
+  };
+
+  const handleAgreementEdited = (id: Id, body: string): Promise<Agreement> => {
+    return updateAgreement(id, coachingSessionId, userId, body)
+      .then((agreement) => {
+        return agreement;
+      })
+      .catch((err) => {
+        console.error("Failed to update Agreement (id: " + id + "): " + err);
+        throw err;
+      });
+  };
+
+  const handleAgreementDeleted = (id: Id): Promise<Agreement> => {
+    return deleteAgreement(id)
+      .then((agreement) => {
+        return agreement;
+      })
+      .catch((err) => {
+        console.error("Failed to update Agreement (id: " + id + "): " + err);
+        throw err;
+      });
+  };
+
   const handleInputChange = (value: string) => {
     setNote(value);
 
@@ -188,28 +230,41 @@ export default function CoachingSessionsPage() {
             </div>
             <CollapsibleContent className="px-4">
               <div className="flex-col space-y-4 sm:flex">
-                <Tabs defaultValue="agreements" className="flex-1">
-                  <TabsList className="grid w-full grid-cols-3">
-                    <TabsTrigger value="agreements">Agreements</TabsTrigger>
-                    <TabsTrigger value="actions">Actions</TabsTrigger>
-                    <TabsTrigger value="program">Program</TabsTrigger>
-                  </TabsList>
-                  <TabsContent value="agreements">
-                    <div className="bg-gray-500 text-white p-4">Agreements</div>
-                  </TabsContent>
-                  <TabsContent value="actions">
-                    <div className="bg-red-500 text-white p-4">Actions</div>
-                  </TabsContent>
-                  <TabsContent value="program">
-                    <div className="bg-blue-500 text-white p-4">Program</div>
-                  </TabsContent>
-                </Tabs>
+                <div className="grid flex-1 items-start gap-4 sm:py-0 md:gap-8">
+                  <Tabs defaultValue="agreements">
+                    <div className="flex items-center">
+                      <TabsList className="grid grid-cols-3">
+                        <TabsTrigger value="agreements">Agreements</TabsTrigger>
+                        <TabsTrigger value="actions">Actions</TabsTrigger>
+                        <TabsTrigger value="program">Program</TabsTrigger>
+                      </TabsList>
+                    </div>
+                    <TabsContent value="agreements">
+                      <div className="w-full">
+                        <AgreementsList
+                          coachingSessionId={coachingSessionId}
+                          userId={userId}
+                          locale={siteConfig.locale}
+                          onAgreementAdded={handleAgreementAdded}
+                          onAgreementEdited={handleAgreementEdited}
+                          onAgreementDeleted={handleAgreementDeleted}
+                        ></AgreementsList>
+                      </div>
+                    </TabsContent>
+                    <TabsContent value="actions">
+                      {/* <div className="bg-red-500 text-white">Actions</div> */}
+                    </TabsContent>
+                    <TabsContent value="program">
+                      {/* <div className="bg-blue-500 text-white">Program</div> */}
+                    </TabsContent>
+                  </Tabs>
+                </div>
               </div>
             </CollapsibleContent>
           </Collapsible>
         </div>
 
-        <div className="row-span-1 h-full py-6 px-4">
+        <div className="row-span-1 h-full py-4 px-4">
           <div className="grid h-full items-stretch gap-6 md:grid-cols-[1fr_200px]">
             <div className="flex-col space-y-4 sm:flex md:order-1">
               <Tabs defaultValue="notes" className="flex-1">

src/app/login/page.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
 import { UserAuthForm } from "@/components/user-auth-form";
+import { siteConfig } from "@/site.config";
 
 export const metadata: Metadata = {
   title: "Authentication",
@@ -55,13 +56,11 @@ export default function AuthenticationPage() {
             >
               <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
             </svg>
-            Refactor Coaching & Mentoring
+            {siteConfig.name}
           </div>
           <div className="relative z-20 mt-auto">
             <blockquote className="space-y-2">
-              <p className="text-lg">
-                A coaching and mentorship platform for engineering leaders and software engineers.
-              </p>
+              <p className="text-lg">{siteConfig.description}</p>
             </blockquote>
           </div>
         </div>