feat(client): add education and institution management

apps/client/src/features/education/components/EducationForm.tsx

···
+import { Button, Calendar, Checkbox, Textarea, TextInput } from "@cv/ui";
+import { useQueryClient } from "@tanstack/react-query";
+import { useId, useState } from "react";
+import { useToast } from "@/contexts/ToastContext";
+import { SelectedSkillsDisplay } from "@/features/job-experience/components/SelectedSkillsDisplay";
+import { SkillsSelect } from "@/features/job-experience/components/SkillsSelect";
+import { useCreateEducationMutation } from "@/generated/graphql";
+import {
+  type EducationFormData,
+  educationFormSchema,
+} from "./education.schema";
+import { InstitutionSelect } from "./InstitutionSelect";
+
+interface EducationFormProps {
+  onSuccess?: () => void;
+  onCancel?: () => void;
+}
+
+export const EducationForm = ({ onSuccess, onCancel }: EducationFormProps) => {
+  const { mutateAsync: createEducation, isPending: loading } =
+    useCreateEducationMutation();
+  const queryClient = useQueryClient();
+  const { showSuccess, showError } = useToast();
+
+  const startDateId = useId();
+  const endDateId = useId();
+
+  const [formData, setFormData] = useState<EducationFormData>({
+    institutionId: "",
+    degree: "",
+    fieldOfStudy: "",
+    startDate: null,
+    endDate: null,
+    description: "",
+    isCurrentEducation: false,
+    skillIds: [],
+  });
+
+  const [errors, setErrors] = useState<
+    Partial<Record<keyof EducationFormData, string>>
+  >({});
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    // Validate form using Zod
+    const result = educationFormSchema.safeParse(formData);
+
+    if (!result.success) {
+      const newErrors: Partial<Record<keyof EducationFormData, string>> = {};
+      result.error.errors.forEach((error) => {
+        if (error.path.length > 0) {
+          newErrors[error.path[0] as keyof EducationFormData] = error.message;
+        }
+      });
+      setErrors(newErrors);
+      return;
+    }
+
+    setErrors({});
+
+    try {
+      await createEducation({
+        institutionId: formData.institutionId,
+        degree: formData.degree,
+        fieldOfStudy: formData.fieldOfStudy || null,
+        startDate: formData.startDate || new Date(),
+        endDate: formData.isCurrentEducation ? null : formData.endDate || null,
+        description: formData.description || null,
+        skillIds:
+          formData.skillIds && formData.skillIds.length > 0
+            ? formData.skillIds
+            : null,
+      });
+
+      // Invalidate and refetch education queries
+      await queryClient.invalidateQueries({
+        queryKey: ["MeEducation"],
+      });
+
+      showSuccess(
+        "Education Created",
+        "Your education has been successfully added.",
+      );
+
+      onSuccess?.();
+    } catch (error) {
+      console.error("Error creating education:", error);
+      showError(
+        "Failed to Create Education",
+        "There was an error creating the education. Please try again.",
+      );
+    }
+  };
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleCheckboxChange = (field: string, checked: boolean) => {
+    setFormData((prev) => ({ ...prev, [field]: checked }));
+  };
+
+  const handleDateChange = (field: string, date: Date | null) => {
+    setFormData((prev) => ({ ...prev, [field]: date }));
+  };
+
+  const handleSkillToggle = (skillId: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      skillIds: (prev.skillIds || []).includes(skillId)
+        ? (prev.skillIds || []).filter((id) => id !== skillId)
+        : [...(prev.skillIds || []), skillId],
+    }));
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <InstitutionSelect
+          value={formData.institutionId}
+          onChange={(value: string) =>
+            handleInputChange("institutionId", value)
+          }
+          error={errors.institutionId}
+        />
+
+        <TextInput
+          label="Degree"
+          value={formData.degree}
+          onChange={(value: string) => handleInputChange("degree", value)}
+          required
+          error={errors.degree}
+          placeholder="e.g., Bachelor of Science"
+        />
+
+        <TextInput
+          label="Field of Study"
+          value={formData.fieldOfStudy || ""}
+          onChange={(value: string) => handleInputChange("fieldOfStudy", value)}
+          error={errors.fieldOfStudy}
+          placeholder="e.g., Computer Science"
+        />
+
+        <div>
+          <label
+            htmlFor={startDateId}
+            className="block text-sm font-medium text-ctp-text mb-2"
+          >
+            Start Date <span className="text-ctp-red">*</span>
+          </label>
+          <Calendar
+            value={formData.startDate}
+            onChange={(date: Date | null) =>
+              handleDateChange("startDate", date)
+            }
+            placeholder="Select start date"
+            showTime={false}
+            format="long"
+            className="w-full"
+          />
+          {errors.startDate && (
+            <p className="text-sm text-ctp-red mt-1">{errors.startDate}</p>
+          )}
+        </div>
+
+        <div>
+          <label
+            htmlFor={endDateId}
+            className="block text-sm font-medium text-ctp-text mb-2"
+          >
+            End Date
+          </label>
+          <Calendar
+            value={formData.endDate}
+            onChange={(date: Date | null) => handleDateChange("endDate", date)}
+            placeholder="Select end date"
+            showTime={false}
+            format="long"
+            className="w-full"
+            disabled={formData.isCurrentEducation}
+          />
+          {errors.endDate && (
+            <p className="text-sm text-ctp-red mt-1">{errors.endDate}</p>
+          )}
+        </div>
+      </div>
+
+      <Checkbox
+        label="Currently studying here"
+        checked={formData.isCurrentEducation}
+        onChange={(checked: boolean) =>
+          handleCheckboxChange("isCurrentEducation", checked)
+        }
+      />
+
+      <Textarea
+        label="Description"
+        value={formData.description || ""}
+        onChange={(value: string) => handleInputChange("description", value)}
+        rows={4}
+        placeholder="Additional details about your education..."
+      />
+
+      <div className="space-y-4">
+        <SkillsSelect
+          value=""
+          onChange={(value: string) => {
+            if (!formData.skillIds?.includes(value)) {
+              setFormData((prev) => ({
+                ...prev,
+                skillIds: [...(prev.skillIds || []), value],
+              }));
+            }
+          }}
+        />
+
+        <SelectedSkillsDisplay
+          skillIds={formData.skillIds || []}
+          onRemoveSkill={handleSkillToggle}
+        />
+      </div>
+
+      <div className="flex space-x-4">
+        <Button
+          type="submit"
+          disabled={
+            loading ||
+            !formData.institutionId ||
+            !formData.degree ||
+            !formData.startDate
+          }
+        >
+          {loading ? "Creating..." : "Create Education"}
+        </Button>
+        {onCancel && (
+          <Button type="button" variant="ghost" onClick={onCancel}>
+            Cancel
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+};

apps/client/src/features/education/components/EducationTable.tsx

···
+import {
+  DeleteIcon,
+  EditIcon,
+  FormattedDateRange,
+  IconButton,
+  Placeholder,
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+} from "@cv/ui";
+import { useQueryClient } from "@tanstack/react-query";
+import { useConfirmationModal } from "@/contexts/ConfirmationModalContext";
+import { useToast } from "@/contexts/ToastContext";
+import type { MeEducationQuery } from "@/generated/graphql";
+import { useDeleteEducationMutation } from "@/generated/graphql";
+
+interface EducationTableProps {
+  educations: NonNullable<
+    NonNullable<MeEducationQuery["me"]>["educationHistory"]
+  >["edges"][number]["node"][];
+  onEdit?: (
+    education: NonNullable<
+      NonNullable<MeEducationQuery["me"]>["educationHistory"]
+    >["edges"][number]["node"],
+  ) => void;
+  onDelete?: () => void;
+}
+
+export const EducationTable = ({
+  educations,
+  onEdit,
+  onDelete,
+}: EducationTableProps) => {
+  const { mutateAsync: deleteEducation, isPending: loading } =
+    useDeleteEducationMutation();
+  const queryClient = useQueryClient();
+  const { showSuccess, showError } = useToast();
+  const { showConfirmation } = useConfirmationModal();
+
+  const handleDeleteClick = async (educationId: string) => {
+    const education = educations.find(({ id }) => id === educationId);
+
+    await showConfirmation({
+      title: "Delete Education",
+      message: `Are you sure you want to delete your ${education?.degree} from ${education?.institution?.name}? This action cannot be undone.`,
+      confirmText: "Delete",
+      cancelText: "Cancel",
+      variant: "danger",
+      onConfirm: async () => {
+        try {
+          await deleteEducation({
+            id: educationId,
+          });
+
+          // Invalidate and refetch education queries
+          await queryClient.invalidateQueries({
+            queryKey: ["MeEducation"],
+          });
+
+          showSuccess(
+            "Education Deleted",
+            `Successfully deleted ${education?.degree} from ${education?.institution?.name}`,
+          );
+
+          onDelete?.();
+        } catch (error) {
+          console.error("Error deleting education:", error);
+          showError(
+            "Failed to Delete Education",
+            "There was an error deleting the education. Please try again.",
+          );
+        }
+      },
+    });
+  };
+
+  if (educations.length === 0) {
+    return (
+      <Placeholder
+        variant="empty"
+        message="Create your first education entry to get started"
+      />
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell>Institution</TableHeaderCell>
+          <TableHeaderCell>Degree</TableHeaderCell>
+          <TableHeaderCell>Field of Study</TableHeaderCell>
+          <TableHeaderCell>Duration</TableHeaderCell>
+          <TableHeaderCell>Actions</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {educations.map((education) => {
+          const { id, institution, degree, fieldOfStudy, startDate, endDate } =
+            education;
+
+          return (
+            <TableRow key={id}>
+              <TableCell>
+                <div className="font-medium text-ctp-text p-2">
+                  {institution?.name || "—"}
+                </div>
+              </TableCell>
+              <TableCell>
+                <div className="font-medium text-ctp-text p-2">{degree}</div>
+              </TableCell>
+              <TableCell>
+                <div className="text-ctp-subtext0 p-2">
+                  {fieldOfStudy || "—"}
+                </div>
+              </TableCell>
+              <TableCell>
+                <div className="p-2">
+                  <FormattedDateRange
+                    startDate={startDate}
+                    endDate={endDate}
+                    variant="muted"
+                  />
+                </div>
+              </TableCell>
+              <TableCell>
+                <div className="flex items-center gap-2 p-2">
+                  <IconButton
+                    icon={<EditIcon />}
+                    label="Edit education"
+                    variant="primary"
+                    size="xs"
+                    showColorOnHover={true}
+                    onClick={() => onEdit?.(education)}
+                  />
+                  <IconButton
+                    icon={<DeleteIcon />}
+                    label="Delete education"
+                    variant="destructive"
+                    size="xs"
+                    showColorOnHover={true}
+                    onClick={() => handleDeleteClick(id)}
+                    disabled={loading}
+                  />
+                </div>
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+};

apps/client/src/features/education/components/InstitutionSelect.tsx

···
+import { SearchableSelect } from "@cv/ui";
+import { useQueryClient } from "@tanstack/react-query";
+import { useToast } from "@/contexts/ToastContext";
+import {
+  useCreateInstitutionMutation,
+  useInstitutionsQuery,
+} from "@/generated/graphql";
+
+interface InstitutionSelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  error?: string;
+}
+
+export const InstitutionSelect = ({
+  value,
+  onChange,
+  error,
+}: InstitutionSelectProps) => {
+  const { data, isLoading } = useInstitutionsQuery();
+  const { mutateAsync: createInstitution } = useCreateInstitutionMutation();
+  const queryClient = useQueryClient();
+  const { showSuccess, showError } = useToast();
+
+  const institutions = data?.institutions || [];
+
+  const handleAddNew = async (name: string) => {
+    try {
+      const result = await createInstitution({ name });
+      // Invalidate and refetch institutions
+      await queryClient.invalidateQueries({
+        queryKey: ["Institutions"],
+      });
+      // Select the newly created institution
+      onChange(result.createInstitution.id);
+      showSuccess("Institution Created", `Successfully created "${name}"`);
+    } catch (error) {
+      console.error("Error creating institution:", error);
+      showError(
+        "Failed to Create Institution",
+        "There was an error creating the institution. Please try again.",
+      );
+    }
+  };
+
+  return (
+    <SearchableSelect
+      label="Institution"
+      options={institutions.map((institution) => ({
+        value: institution.id,
+        label: institution.name,
+      }))}
+      value={value}
+      onChange={onChange}
+      placeholder="Select an institution"
+      required
+      error={error}
+      isLoading={isLoading}
+      allowAddNew
+      onAddNew={handleAddNew}
+      addNewLabel="Add institution"
+    />
+  );
+};

apps/client/src/features/education/components/education.schema.ts

···
+import { z } from "zod";
+
+export const educationFormSchema = z
+  .object({
+    institutionId: z.string().min(1, "Institution is required"),
+    degree: z
+      .string()
+      .min(1, "Degree is required")
+      .max(200, "Degree must be less than 200 characters"),
+    fieldOfStudy: z
+      .string()
+      .max(200, "Field of study must be less than 200 characters")
+      .optional(),
+    startDate: z.date({ required_error: "Start date is required" }),
+    endDate: z.date().optional().nullable(),
+    description: z.string().optional(),
+    isCurrentEducation: z.boolean().default(false),
+    skillIds: z.array(z.string()).optional().default([]),
+  })
+  .refine(
+    (data) => {
+      if (data.endDate && data.startDate && data.endDate < data.startDate) {
+        return false;
+      }
+      return true;
+    },
+    {
+      message: "End date must be after start date",
+      path: ["endDate"],
+    },
+  );
+
+export type EducationFormData = z.infer<typeof educationFormSchema>;

apps/client/src/features/education/components/index.ts

···
+export { EducationForm } from "./EducationForm";
+export { EducationTable } from "./EducationTable";
+export { InstitutionSelect } from "./InstitutionSelect";

apps/client/src/features/education/queries/create-education.graphql

···
+mutation CreateEducation(
+  $institutionId: String!
+  $degree: String!
+  $fieldOfStudy: String
+  $startDate: DateTime!
+  $endDate: DateTime
+  $description: String
+  $skillIds: [String!]
+) {
+  createEducation(
+    institutionId: $institutionId
+    degree: $degree
+    fieldOfStudy: $fieldOfStudy
+    startDate: $startDate
+    endDate: $endDate
+    description: $description
+    skillIds: $skillIds
+  ) {
+    id
+    institutionId
+    institution {
+      id
+      name
+    }
+    degree
+    fieldOfStudy
+    startDate
+    endDate
+    description
+    skills {
+      id
+      name
+      description
+    }
+    createdAt
+    updatedAt
+  }
+}

apps/client/src/features/education/queries/create-institution.graphql

···
+mutation CreateInstitution($name: String!, $description: String) {
+  createInstitution(name: $name, description: $description) {
+    id
+    name
+    description
+    createdAt
+    updatedAt
+  }
+}

apps/client/src/features/education/queries/delete-education.graphql

···
+mutation DeleteEducation($id: String!) {
+  deleteEducation(id: $id)
+}

apps/client/src/features/education/queries/institutions.graphql

···
+query Institutions {
+  institutions {
+    id
+    name
+    description
+    createdAt
+    updatedAt
+  }
+}

apps/client/src/features/education/queries/me-education.graphql

···
+query MeEducation {
+  me {
+    educationHistory {
+      edges {
+        node {
+          id
+          userId
+          institutionId
+          institution {
+            id
+            name
+            description
+          }
+          degree
+          fieldOfStudy
+          startDate
+          endDate
+          description
+          skills {
+            id
+            name
+            description
+          }
+          createdAt
+          updatedAt
+        }
+      }
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        startCursor
+        endCursor
+      }
+      totalCount
+    }
+  }
+}

apps/client/src/pages/CreateEducationPage.tsx

···
+import { PageHeader } from "@cv/ui";
+import { useNavigate } from "react-router-dom";
+import { EducationForm } from "@/features/education/components/EducationForm";
+
+export default function CreateEducationPage() {
+  const navigate = useNavigate();
+
+  const handleSuccess = () => {
+    navigate("/education");
+  };
+
+  const handleCancel = () => {
+    navigate("/education");
+  };
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Add Education"
+        description="Add a new educational qualification to your profile"
+      />
+
+      <EducationForm onSuccess={handleSuccess} onCancel={handleCancel} />
+    </div>
+  );
+}

apps/client/src/pages/EducationPage.tsx

···
+import { Button, PageHeader, Placeholder } from "@cv/ui";
+import { useNavigate } from "react-router-dom";
+import { useToast } from "@/contexts/ToastContext";
+import { EducationTable } from "@/features/education/components";
+import type { MeEducationQuery } from "@/generated/graphql";
+import { useMeEducationQuery } from "@/generated/graphql";
+
+export default function EducationPage() {
+  const { data, isPending: loading, error, refetch } = useMeEducationQuery();
+  const { showInfo } = useToast();
+  const navigate = useNavigate();
+
+  const handleEdit = (
+    education: NonNullable<
+      NonNullable<MeEducationQuery["me"]>["educationHistory"]
+    >["edges"][number]["node"],
+  ) => {
+    // TODO: Implement edit functionality
+    showInfo("Edit Feature", "Edit functionality is coming soon!");
+    console.log("Edit education:", education);
+  };
+
+  const handleDelete = async () => {
+    try {
+      await refetch();
+    } catch (error) {
+      console.error("Error refreshing education history:", error);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="space-y-6">
+        <PageHeader
+          title="Education History"
+          description="Manage your educational background and qualifications"
+        />
+        <Placeholder variant="loading" message="Loading education history..." />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="space-y-6">
+        <PageHeader
+          title="Education History"
+          description="Manage your educational background and qualifications"
+        />
+        <Placeholder
+          variant="error"
+          message="Error loading education history"
+        />
+      </div>
+    );
+  }
+
+  const educations =
+    data?.me?.educationHistory?.edges?.map((edge) => edge.node) || [];
+
+  if (educations.length === 0) {
+    return (
+      <div className="space-y-6">
+        <PageHeader
+          title="Education History"
+          description="Manage your educational background and qualifications"
+          action={
+            <Button onClick={() => navigate("/education/create")}>
+              Add Education
+            </Button>
+          }
+        />
+
+        <Placeholder
+          variant="empty"
+          message="Create your first education entry to get started"
+        >
+          <Button
+            onClick={() => navigate("/education/create")}
+            className="mt-4"
+          >
+            Add Education
+          </Button>
+        </Placeholder>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Education History"
+        description="Manage your educational background and qualifications"
+        action={
+          <Button onClick={() => navigate("/education/create")}>
+            Add Education
+          </Button>
+        }
+      />
+
+      <div>
+        <h2 className="text-lg font-semibold text-ctp-text mb-4">
+          Your Education ({educations.length})
+        </h2>
+        <EducationTable
+          educations={educations}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
+        />
+      </div>
+    </div>
+  );
+}