feat(client): add application flow and management features

apps/client/src/features/applications/components/ApplicationFlow.tsx

···
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Progress, useProgressContext } from "@/components/Progress";
+import { useCreateApplicationMutation, useCvQuery } from "@/generated/graphql";
+import { CVTemplateSelector } from "./CVTemplateSelector";
+import { VacancySelector } from "./VacancySelector";
+
+export const ApplicationFlow = () => {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const [selectedVacancyId, setSelectedVacancyId] = useState<string | null>(
+    null,
+  );
+  const [selectedCVId, setSelectedCVId] = useState<string | null>(null);
+  const [coverLetter, setCoverLetter] = useState("");
+
+  const createApplicationMutation = useCreateApplicationMutation();
+
+  const handleCancel = () => {
+    navigate("/dashboard");
+  };
+
+  const handleSubmitApplication = async () => {
+    if (!(selectedVacancyId && selectedCVId)) {
+      return;
+    }
+
+    try {
+      await createApplicationMutation.mutateAsync({
+        input: {
+          vacancyId: selectedVacancyId,
+          cvId: selectedCVId,
+          coverLetter: coverLetter || null,
+        },
+      });
+
+      // Invalidate and refetch application queries
+      await queryClient.invalidateQueries({
+        queryKey: ["MyApplications"],
+      });
+
+      navigate("/applications", {
+        state: { message: "Application submitted successfully!" },
+      });
+    } catch (error) {
+      console.error("Failed to submit application:", error);
+      // Handle error (show toast, etc.)
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-ctp-base p-6">
+      <div className="mx-auto max-w-4xl">
+        <Progress>
+          <Progress.Step name="Select Vacancy">
+            <VacancySelector
+              onSelectVacancy={setSelectedVacancyId}
+              onCancel={handleCancel}
+            />
+          </Progress.Step>
+          <Progress.Step name="Select CV">
+            <CVTemplateSelector
+              onSelectCV={setSelectedCVId}
+              onCancel={handleCancel}
+            />
+          </Progress.Step>
+          <Progress.Step name="Review & Apply">
+            <ApplicationReview
+              vacancyId={selectedVacancyId}
+              cvId={selectedCVId}
+              coverLetter={coverLetter}
+              onCoverLetterChange={setCoverLetter}
+              onCancel={handleCancel}
+              onSubmit={handleSubmitApplication}
+              isSubmitting={createApplicationMutation.isPending}
+            />
+          </Progress.Step>
+        </Progress>
+      </div>
+    </div>
+  );
+};
+
+interface ApplicationReviewProps {
+  vacancyId: string | null;
+  cvId: string | null;
+  coverLetter: string;
+  onCoverLetterChange: (value: string) => void;
+  onCancel: () => void;
+  onSubmit: () => void;
+  isSubmitting: boolean;
+}
+
+const ApplicationReview = ({
+  vacancyId,
+  cvId,
+  coverLetter,
+  onCoverLetterChange,
+  onCancel,
+  onSubmit,
+  isSubmitting,
+}: ApplicationReviewProps) => {
+  const { back } = useProgressContext();
+  const { data: cvData, isLoading: cvLoading } = useCvQuery(
+    { id: cvId ?? "" },
+    { enabled: !!cvId },
+  );
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold text-ctp-text">Review Application</h2>
+        <p className="mt-2 text-ctp-subtext0">
+          Review your application details before submitting
+        </p>
+      </div>
+
+      <div className="space-y-4">
+        <div className="rounded-lg bg-ctp-surface0 p-4">
+          <h3 className="font-semibold text-ctp-text">Selected Vacancy</h3>
+          <p className="text-sm text-ctp-subtext0">Vacancy ID: {vacancyId}</p>
+        </div>
+
+        <div className="rounded-lg bg-ctp-surface0 p-4">
+          <h3 className="font-semibold text-ctp-text">Selected CV</h3>
+          {cvLoading ? (
+            <p className="text-sm text-ctp-subtext0">Loading...</p>
+          ) : cvData?.cv ? (
+            <p className="text-sm text-ctp-subtext0">{cvData.cv.title}</p>
+          ) : (
+            <p className="text-sm text-ctp-subtext0">CV ID: {cvId}</p>
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <label
+            className="block text-sm font-medium text-ctp-text"
+            htmlFor="cover-letter"
+          >
+            Cover Letter (Optional)
+          </label>
+          <textarea
+            name="cover-letter"
+            value={coverLetter}
+            onChange={(e) => onCoverLetterChange(e.target.value)}
+            placeholder="Write a cover letter for this application..."
+            className="w-full rounded-lg border border-ctp-surface1 bg-ctp-surface0 p-3 text-ctp-text placeholder-ctp-subtext0 focus:border-ctp-blue focus:outline-none"
+            rows={6}
+          />
+        </div>
+      </div>
+
+      <div className="flex justify-between">
+        <button
+          type="button"
+          onClick={back}
+          className="rounded-lg border border-ctp-surface1 bg-ctp-surface0 px-4 py-2 text-ctp-text hover:bg-ctp-surface1"
+        >
+          Back
+        </button>
+        <div className="space-x-3">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="rounded-lg border border-ctp-surface1 bg-ctp-surface0 px-4 py-2 text-ctp-text hover:bg-ctp-surface1"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={onSubmit}
+            disabled={isSubmitting || !vacancyId || !cvId}
+            className="rounded-lg bg-ctp-blue px-4 py-2 text-ctp-base hover:bg-ctp-blue/90 disabled:opacity-50"
+          >
+            {isSubmitting ? "Submitting..." : "Submit Application"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/client/src/features/applications/components/ApplicationsOverview.tsx

···
+import { Badge, Button, FormattedDate, PageHeader, Placeholder } from "@cv/ui";
+import { useMyApplicationsQuery } from "@/generated/graphql";
+import { formatSalary } from "@/utils/salaryFormatter";
+
+type BadgeColor =
+  | "ctp-red"
+  | "ctp-orange"
+  | "ctp-yellow"
+  | "ctp-green"
+  | "ctp-teal"
+  | "ctp-sky"
+  | "ctp-sapphire"
+  | "ctp-blue"
+  | "ctp-lavender"
+  | "ctp-mauve"
+  | "ctp-pink"
+  | "ctp-maroon"
+  | "ctp-peach"
+  | "ctp-rosewater"
+  | "ctp-gray";
+
+const getStatusColor = (statusName: string): BadgeColor => {
+  switch (statusName.toLowerCase()) {
+    case "applied":
+      return "ctp-blue";
+    case "under review":
+      return "ctp-yellow";
+    case "interview scheduled":
+      return "ctp-orange";
+    case "interviewed":
+      return "ctp-teal";
+    case "accepted":
+      return "ctp-green";
+    case "rejected":
+      return "ctp-red";
+    case "withdrawn":
+      return "ctp-gray";
+    default:
+      return "ctp-gray";
+  }
+};
+
+export const ApplicationsOverview = () => {
+  const { data, isLoading, error, refetch } = useMyApplicationsQuery();
+
+  const applications = data?.me?.applications?.edges || [];
+  const totalCount = data?.me?.applications?.totalCount || 0;
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <PageHeader
+          title="My Applications"
+          description="Track your job applications and their status"
+        />
+        <Placeholder variant="loading" message="Loading applications..." />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="space-y-6">
+        <PageHeader
+          title="My Applications"
+          description="Track your job applications and their status"
+        />
+        <Placeholder variant="error" message="Error loading applications" />
+      </div>
+    );
+  }
+
+  if (applications.length === 0) {
+    return (
+      <div className="space-y-6">
+        <PageHeader
+          title="My Applications"
+          description="Track your job applications and their status"
+        />
+        <Placeholder
+          variant="empty"
+          message="Start applying to vacancies to see your applications here"
+        >
+          <Button
+            onClick={() => {
+              window.location.href = "/applications/apply";
+            }}
+          >
+            Apply to Vacancy
+          </Button>
+        </Placeholder>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="My Applications"
+        description={`${totalCount} application${totalCount !== 1 ? "s" : ""} total`}
+        action={<Button onClick={() => refetch()}>Refresh</Button>}
+      />
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {applications.map((application) => (
+          <div
+            key={application.id}
+            className="rounded-lg border border-ctp-surface1 bg-ctp-surface0 p-6 shadow-sm"
+          >
+            <div className="space-y-4">
+              <div className="flex items-start justify-between">
+                <div className="flex-1">
+                  <h3 className="text-lg font-semibold text-ctp-text">
+                    {application.vacancy.title}
+                  </h3>
+                  <p className="text-ctp-subtext0">
+                    {application.vacancy.companyName} •{" "}
+                    {application.vacancy.roleName}
+                  </p>
+                  {application.vacancy.location && (
+                    <p className="text-sm text-ctp-subtext0">
+                      📍 {application.vacancy.location}
+                    </p>
+                  )}
+                </div>
+                <Badge color={getStatusColor(application.status.name)}>
+                  {application.status.name}
+                </Badge>
+              </div>
+
+              <div className="space-y-2 text-sm text-ctp-subtext0">
+                <div className="flex justify-between">
+                  <span>Applied:</span>
+                  <span>
+                    <FormattedDate date={application.appliedAt} />
+                  </span>
+                </div>
+                {application.cv && (
+                  <div className="flex justify-between">
+                    <span>CV:</span>
+                    <span className="truncate max-w-32">
+                      {application.cv.title}
+                    </span>
+                  </div>
+                )}
+                {(() => {
+                  const salary = formatSalary(
+                    application.vacancy.minSalary,
+                    application.vacancy.maxSalary,
+                  );
+                  return salary ? (
+                    <div className="flex justify-between">
+                      <span>Salary:</span>
+                      <span className="text-ctp-green">{salary}</span>
+                    </div>
+                  ) : null;
+                })()}
+              </div>
+
+              {application.coverLetter && (
+                <div className="pt-2 border-t border-ctp-surface1">
+                  <p className="text-sm text-ctp-subtext0 line-clamp-2">
+                    {application.coverLetter}
+                  </p>
+                </div>
+              )}
+
+              <div className="pt-2 border-t border-ctp-surface1">
+                <div className="flex justify-between text-xs text-ctp-subtext0">
+                  <span>Application ID: {application.id.slice(-8)}</span>
+                  <span>
+                    Updated: <FormattedDate date={application.updatedAt} />
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Summary Stats */}
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+        <div className="rounded-lg bg-ctp-surface0 p-4 text-center">
+          <div className="text-2xl font-bold text-ctp-blue">
+            {applications.filter((app) => app.status.name === "Applied").length}
+          </div>
+          <div className="text-sm text-ctp-subtext0">Applied</div>
+        </div>
+        <div className="rounded-lg bg-ctp-surface0 p-4 text-center">
+          <div className="text-2xl font-bold text-ctp-yellow">
+            {
+              applications.filter((app) => app.status.name === "Under Review")
+                .length
+            }
+          </div>
+          <div className="text-sm text-ctp-subtext0">Under Review</div>
+        </div>
+        <div className="rounded-lg bg-ctp-surface0 p-4 text-center">
+          <div className="text-2xl font-bold text-ctp-orange">
+            {
+              applications.filter((app) =>
+                ["Interview Scheduled", "Interviewed"].includes(
+                  app.status.name,
+                ),
+              ).length
+            }
+          </div>
+          <div className="text-sm text-ctp-subtext0">Interviewing</div>
+        </div>
+        <div className="rounded-lg bg-ctp-surface0 p-4 text-center">
+          <div className="text-2xl font-bold text-ctp-green">
+            {
+              applications.filter((app) => app.status.name === "Accepted")
+                .length
+            }
+          </div>
+          <div className="text-sm text-ctp-subtext0">Accepted</div>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/client/src/features/applications/components/CVTemplateSelector.tsx

···
+import { Button, TextInput } from "@cv/ui";
+import { useState } from "react";
+import { useProgressContext } from "@/components/Progress";
+import { useCvTemplatesQuery, useMyCVsQuery } from "@/generated/graphql";
+
+interface CVTemplateSelectorProps {
+  onSelectCV?: (cvId: string) => void;
+  onCancel: () => void;
+  onBack?: () => void;
+}
+
+export const CVTemplateSelector = ({
+  onSelectCV,
+  onCancel,
+  onBack,
+}: CVTemplateSelectorProps) => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedCVId, setSelectedCVId] = useState<string | null>(null);
+  const [showTemplates, setShowTemplates] = useState(false);
+
+  // Use Progress context if available (components used in Progress will have this)
+  const progressContext = useProgressContext();
+
+  const { data: cvsData, isLoading: cvsLoading } = useMyCVsQuery({
+    first: 50,
+  });
+
+  const { data: templatesData, isLoading: templatesLoading } =
+    useCvTemplatesQuery({
+      first: 50,
+    });
+
+  const cvs = cvsData?.me?.cvs?.edges?.map((edge) => edge.node) || [];
+  const templates =
+    templatesData?.cvTemplates?.edges?.map((edge) => edge.node) || [];
+
+  const filteredCVs = cvs.filter((cv) =>
+    cv.title.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  const filteredTemplates = templates.filter((template) =>
+    template.name.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  const handleSelectCV = (cvId: string) => {
+    setSelectedCVId(cvId);
+  };
+
+  const handleConfirm = () => {
+    if (selectedCVId) {
+      onSelectCV?.(selectedCVId);
+      progressContext?.next();
+    }
+  };
+
+  const isLoading = cvsLoading || templatesLoading;
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <div className="text-ctp-subtext0">Loading CVs and templates...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold text-ctp-text">Select a CV</h2>
+        <p className="mt-2 text-ctp-subtext0">
+          Choose an existing CV or create a new one from a template
+        </p>
+      </div>
+
+      <div>
+        <TextInput
+          placeholder="Search CVs or templates..."
+          value={searchTerm}
+          onChange={setSearchTerm}
+          className="w-full"
+        />
+      </div>
+
+      <div className="flex space-x-2">
+        <Button
+          variant={!showTemplates ? "primary" : "outline"}
+          onClick={() => setShowTemplates(false)}
+        >
+          My CVs ({cvs.length})
+        </Button>
+        <Button
+          variant={showTemplates ? "primary" : "outline"}
+          onClick={() => setShowTemplates(true)}
+        >
+          Templates ({templates.length})
+        </Button>
+      </div>
+
+      <div className="max-h-96 overflow-y-auto space-y-3">
+        {!showTemplates ? (
+          // Show existing CVs
+          filteredCVs.length === 0 ? (
+            <div className="text-center py-8 text-ctp-subtext0">
+              {searchTerm
+                ? "No CVs match your search"
+                : "You don't have any CVs yet"}
+            </div>
+          ) : (
+            filteredCVs.map((cv) => (
+              <button
+                key={cv.id}
+                type="button"
+                className={`cursor-pointer transition-colors rounded-lg border border-ctp-surface1 bg-ctp-surface0 p-4 shadow-sm text-left w-full ${
+                  selectedCVId === cv.id
+                    ? "border-ctp-blue bg-ctp-blue/10"
+                    : "hover:bg-ctp-surface0"
+                }`}
+                onClick={() => handleSelectCV(cv.id)}
+              >
+                <div className="p-4">
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <h3 className="text-lg font-semibold text-ctp-text">
+                        {cv.title}
+                      </h3>
+                      <p className="text-ctp-subtext0">
+                        Template: {cv.template.name}
+                      </p>
+                      <p className="text-sm text-ctp-subtext0 mt-1">
+                        Updated: {new Date(cv.updatedAt).toLocaleDateString()}
+                      </p>
+                    </div>
+                    <div className="ml-4">
+                      {selectedCVId === cv.id && (
+                        <div className="h-4 w-4 rounded-full bg-ctp-blue"></div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </button>
+            ))
+          )
+        ) : // Show templates
+        filteredTemplates.length === 0 ? (
+          <div className="text-center py-8 text-ctp-subtext0">
+            {searchTerm
+              ? "No templates match your search"
+              : "No templates available"}
+          </div>
+        ) : (
+          filteredTemplates.map((template) => (
+            <button
+              key={template.id}
+              type="button"
+              className={`cursor-pointer transition-colors rounded-lg border border-ctp-surface1 bg-ctp-surface0 p-4 shadow-sm text-left w-full ${
+                selectedCVId === template.id
+                  ? "border-ctp-blue bg-ctp-blue/10"
+                  : "hover:bg-ctp-surface0"
+              }`}
+              onClick={() => handleSelectCV(template.id)}
+            >
+              <div className="p-4">
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <h3 className="text-lg font-semibold text-ctp-text">
+                      {template.name}
+                    </h3>
+                    <p className="text-ctp-subtext0">
+                      {template.description || "Professional CV template"}
+                    </p>
+                    <p className="text-sm text-ctp-green mt-1">
+                      Create new CV from template
+                    </p>
+                  </div>
+                  <div className="ml-4">
+                    {selectedCVId === template.id && (
+                      <div className="h-4 w-4 rounded-full bg-ctp-blue"></div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </button>
+          ))
+        )}
+      </div>
+
+      <div className="flex justify-between">
+        <Button
+          variant="outline"
+          onClick={() => {
+            onBack?.();
+            progressContext?.back();
+          }}
+        >
+          Back
+        </Button>
+        <div className="space-x-3">
+          <Button variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button onClick={handleConfirm} disabled={!selectedCVId}>
+            {showTemplates ? "Create CV & Apply" : "Apply with Selected CV"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/client/src/features/applications/components/MatchIndicator.tsx

···
+import { useRef, useState } from "react";
+import { useMeJobExperienceQuery } from "@/generated/graphql";
+import { calculateSkillsMatch } from "@/utils/skillsMatcher";
+import { MatchTooltip } from "./MatchTooltip";
+
+interface MatchIndicatorProps {
+  vacancy: {
+    id: string;
+    skills?: Array<{ id: string; name: string }> | null;
+  };
+  compact?: boolean;
+}
+
+const getMatchLevel = (percent: number): "high" | "medium" | "low" => {
+  if (percent >= 75) {
+    return "high";
+  }
+  if (percent >= 50) {
+    return "medium";
+  }
+  return "low";
+};
+
+const getConfidenceConfig = (confidence: "high" | "medium" | "low") => {
+  switch (confidence) {
+    case "high":
+      return { text: "Great Match", color: "text-ctp-green" };
+    case "medium":
+      return { text: "Good Match", color: "text-ctp-yellow" };
+    case "low":
+      return { text: "Low Match", color: "text-ctp-red" };
+  }
+};
+
+export const MatchIndicator = ({
+  vacancy,
+  compact = false,
+}: MatchIndicatorProps) => {
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+  const [isClicked, setIsClicked] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const { data: jobExperienceData } = useMeJobExperienceQuery();
+
+  // Extract skills from user's job experience
+  const experiences =
+    jobExperienceData?.me?.experience?.edges?.map((edge) => edge.node) || [];
+  const userSkills = experiences.flatMap(
+    (job) =>
+      job.skills?.map((skill: { id: string; name: string }) => ({
+        id: skill.id,
+        name: skill.name,
+      })) ?? [],
+  );
+
+  // Remove duplicates by ID
+  const uniqueUserSkills = Array.from(
+    new Map(userSkills.map((s) => [s.id, s])).values(),
+  );
+
+  const vacancySkills = vacancy.skills ?? [];
+
+  // Calculate match
+  const match = calculateSkillsMatch(uniqueUserSkills, vacancySkills);
+
+  const { percentage } = match;
+
+  const confidence = getMatchLevel(percentage);
+  const { color: confidenceColor } = getConfidenceConfig(confidence);
+
+  if (!vacancySkills || vacancySkills.length === 0) {
+    return null;
+  }
+
+  if (compact) {
+    return (
+      <div ref={containerRef} className="relative group">
+        <button
+          type="button"
+          className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-xs font-medium transition-all duration-200 cursor-pointer opacity-75 hover:opacity-100"
+          onClick={(e) => {
+            e.stopPropagation();
+            setIsClicked(true);
+            setIsTooltipOpen(!isTooltipOpen);
+          }}
+          onMouseEnter={() => {
+            if (!isClicked) {
+              setIsTooltipOpen(true);
+            }
+          }}
+          onMouseLeave={() => {
+            if (!isClicked) {
+              setIsTooltipOpen(false);
+            }
+          }}
+          aria-label={`Match percentage: ${percentage}%. Click or hover to view details.`}
+        >
+          <span className={`text-xs font-semibold ${confidenceColor}`}>
+            {percentage}%
+          </span>
+        </button>
+        {isTooltipOpen && (
+          <MatchTooltip
+            match={match}
+            position="right"
+            triggerRef={containerRef}
+          />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div ref={containerRef} className="relative group">
+      <button
+        type="button"
+        className="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 cursor-pointer bg-ctp-surface0 hover:bg-ctp-surface1 border border-ctp-surface1"
+        onClick={(e) => {
+          e.stopPropagation();
+          setIsClicked(true);
+          setIsTooltipOpen(!isTooltipOpen);
+        }}
+        onMouseEnter={() => {
+          if (!isClicked) {
+            setIsTooltipOpen(true);
+          }
+        }}
+        onMouseLeave={() => {
+          if (!isClicked) {
+            setIsTooltipOpen(false);
+          }
+        }}
+        aria-label={`Match percentage: ${percentage}%. Click or hover to view details.`}
+      >
+        <span className={`text-sm font-semibold ${confidenceColor}`}>
+          {percentage}% Match
+        </span>
+      </button>
+      {isTooltipOpen && (
+        <MatchTooltip
+          match={match}
+          position="right"
+          triggerRef={containerRef}
+        />
+      )}
+    </div>
+  );
+};

apps/client/src/features/applications/components/MatchTooltip.tsx

···
+import { Badge } from "@cv/ui";
+import { Tooltip } from "@/components/Tooltip";
+
+interface MatchTooltipProps {
+  match: {
+    percentage: number;
+    matchedSkills: Array<{ id: string; name: string }>;
+    missingSkills: Array<{ id: string; name: string }>;
+  };
+  position?: "left" | "right" | "top" | "bottom";
+  triggerRef: React.RefObject<HTMLElement>;
+}
+
+const getConfidenceConfig = (percentage: number) => {
+  if (percentage >= 75) {
+    return { text: "Great Match", color: "bg-ctp-green text-ctp-base" };
+  } else if (percentage >= 50) {
+    return { text: "Good Match", color: "bg-ctp-yellow text-ctp-base" };
+  } else {
+    return { text: "Low Match", color: "bg-ctp-red text-ctp-base" };
+  }
+};
+
+export const MatchTooltip = ({
+  match,
+  position = "right",
+  triggerRef,
+}: MatchTooltipProps) => {
+  const confidence = getConfidenceConfig(match.percentage);
+
+  return (
+    <Tooltip position={position} triggerRef={triggerRef}>
+      <div className="bg-ctp-crust border border-ctp-overlay0 rounded-lg p-4 shadow-lg min-w-64 max-w-96">
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-semibold text-ctp-text">
+              Match Details
+            </span>
+            <span
+              className={`px-2 py-0.5 rounded-full text-xs font-medium ${confidence.color}`}
+            >
+              {confidence.text}
+            </span>
+          </div>
+
+          <div>
+            <div className="text-xs text-ctp-subtext0 mb-1">
+              Matched Skills ({match.matchedSkills.length})
+            </div>
+            <div className="flex flex-wrap gap-1">
+              {match.matchedSkills.map((skill) => (
+                <Badge key={skill.id} color="ctp-green">
+                  {skill.name}
+                </Badge>
+              ))}
+            </div>
+          </div>
+
+          {match.missingSkills.length > 0 && (
+            <div>
+              <div className="text-xs text-ctp-subtext0 mb-1">
+                Missing Skills ({match.missingSkills.length})
+              </div>
+              <div className="flex flex-wrap gap-1">
+                {match.missingSkills.map((skill) => (
+                  <Badge key={skill.id} color="ctp-gray">
+                    {skill.name}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </Tooltip>
+  );
+};

apps/client/src/features/applications/components/VacancyCard.tsx

···
+import { Button, LocationIcon, SalaryIcon } from "@cv/ui";
+import { formatSalary } from "@/utils/salaryFormatter";
+import { MatchIndicator } from "./MatchIndicator";
+
+interface VacancyCardProps {
+  vacancy: {
+    id: string;
+    title: string;
+    description?: string | null;
+    requirements?: string | null;
+    company?: {
+      name: string;
+    } | null;
+    role?: {
+      name: string;
+    } | null;
+    level?: {
+      name: string;
+    } | null;
+    location?: string | null;
+    minSalary?: number | null;
+    maxSalary?: number | null;
+    applicationUrl?: string | null;
+  };
+  isSelected: boolean;
+  onSelect: (vacancyId: string) => void;
+}
+
+export const VacancyCard = ({
+  vacancy,
+  isSelected,
+  onSelect,
+}: VacancyCardProps) => {
+  const {
+    id,
+    title,
+    description,
+    company,
+    role,
+    level,
+    location,
+    minSalary,
+    maxSalary,
+    applicationUrl,
+  } = vacancy;
+
+  return (
+    <button
+      type="button"
+      className={`group relative cursor-pointer transition-colors rounded-lg border border-ctp-surface1 bg-ctp-surface0 p-4 shadow-sm text-left w-full ${
+        isSelected ? "border-ctp-blue bg-ctp-blue/10" : "hover:bg-ctp-surface1"
+      }`}
+      onClick={() => onSelect(id)}
+    >
+      <div className="flex items-start justify-between">
+        <div className="flex-1">
+          <h3 className="text-lg font-semibold text-ctp-text">{title}</h3>
+
+          <div className="mt-1 flex flex-wrap gap-2 text-sm text-ctp-subtext0">
+            {company?.name && (
+              <span className="font-medium">{company.name}</span>
+            )}
+            {role?.name && <span>• {role.name}</span>}
+            {level?.name && <span>• {level.name}</span>}
+            {location && (
+              <span className="flex items-center gap-1">
+                <LocationIcon />
+                {location}
+              </span>
+            )}
+            {(() => {
+              const salary = formatSalary(minSalary, maxSalary);
+              return salary ? (
+                <span className="flex items-center gap-1">
+                  <SalaryIcon />
+                  {salary}
+                </span>
+              ) : null;
+            })()}
+          </div>
+
+          {description && (
+            <p className="text-sm text-ctp-subtext0 mt-2 line-clamp-2">
+              {description}
+            </p>
+          )}
+        </div>
+
+        <div className="ml-4 flex flex-col items-end gap-2">
+          <MatchIndicator vacancy={vacancy} compact />
+          {isSelected && (
+            <div className="h-4 w-4 rounded-full bg-ctp-blue"></div>
+          )}
+        </div>
+      </div>
+
+      {/* Action Buttons - Always visible on mobile, hover on desktop */}
+      <div className="mt-4 flex justify-end gap-2">
+        {applicationUrl && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+              window.open(applicationUrl, "_blank");
+            }}
+            className="opacity-0 group-hover:opacity-100 md:opacity-0 md:group-hover:opacity-100 sm:opacity-100 transition-opacity"
+          >
+            View Vacancy
+          </Button>
+        )}
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            onSelect(id);
+          }}
+          className="opacity-0 group-hover:opacity-100 md:opacity-0 md:group-hover:opacity-100 sm:opacity-100 transition-opacity"
+        >
+          Select Vacancy
+        </Button>
+      </div>
+    </button>
+  );
+};

apps/client/src/features/applications/components/VacancyFilterPanel.tsx

···
+import { Button, RangeSlider } from "@cv/ui";
+import { useMemo, useState } from "react";
+import { useVacancyFilterOptionsQuery } from "@/generated/graphql";
+
+interface VacancyData {
+  company?: {
+    name: string;
+    id: string;
+  } | null;
+  level?: {
+    name: string;
+    id: string;
+  } | null;
+  location: string | null;
+}
+
+interface FilterOptions {
+  jobTypes: string[];
+  levels: string[];
+  companies: string[];
+  locations: string[];
+  salaryRange: {
+    min: number | null;
+    max: number | null;
+  };
+}
+
+interface VacancyFilterPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onApplyFilters: (filters: FilterOptions) => void;
+  currentFilters: FilterOptions;
+}
+
+export const VacancyFilterPanel = ({
+  isOpen,
+  onClose,
+  onApplyFilters,
+  currentFilters,
+}: VacancyFilterPanelProps) => {
+  const [filters, setFilters] = useState<FilterOptions>(currentFilters);
+
+  // Fetch filter options data
+  const {
+    data: filterOptionsData,
+    isLoading,
+    error,
+  } = useVacancyFilterOptionsQuery();
+
+  // Extract available options from the data
+  const availableOptions = useMemo(() => {
+    if (!filterOptionsData?.me?.vacancies) {
+      return {
+        jobTypes: [],
+        levels: [],
+        companies: [],
+        locations: [],
+      };
+    }
+
+    const vacancies =
+      (filterOptionsData.me.vacancies?.edges?.map(
+        (edge) => edge.node,
+      ) as VacancyData[]) || [];
+
+    // Extract unique companies
+    const companies = vacancies
+      .map((v) => v.company)
+      .filter(
+        (company): company is NonNullable<typeof company> => company !== null,
+      )
+      .filter(
+        (company, index, self) =>
+          index === self.findIndex((c) => c.id === company.id),
+      )
+      .map((company) => ({ id: company.id, name: company.name }));
+
+    // Extract unique levels
+    const levels = vacancies
+      .map((v) => v.level)
+      .filter((level): level is NonNullable<typeof level> => level !== null)
+      .filter(
+        (level, index, self) =>
+          index === self.findIndex((l) => l.id === level.id),
+      )
+      .map((level) => ({ id: level.id, name: level.name }));
+
+    // Extract unique locations
+    const locations = Array.from(
+      new Set(
+        vacancies
+          .map((v) => v.location)
+          .filter((location): location is string => location !== null),
+      ),
+    );
+
+    return {
+      jobTypes: [], // No job types available in current data
+      levels,
+      companies,
+      locations,
+    };
+  }, [filterOptionsData]);
+
+  const handleJobTypeToggle = (jobTypeId: string) => {
+    setFilters((prev) => ({
+      ...prev,
+      jobTypes: prev.jobTypes.includes(jobTypeId)
+        ? prev.jobTypes.filter((id) => id !== jobTypeId)
+        : [...prev.jobTypes, jobTypeId],
+    }));
+  };
+
+  const handleLevelToggle = (levelId: string) => {
+    setFilters((prev) => ({
+      ...prev,
+      levels: prev.levels.includes(levelId)
+        ? prev.levels.filter((id) => id !== levelId)
+        : [...prev.levels, levelId],
+    }));
+  };
+
+  const handleCompanyToggle = (companyId: string) => {
+    setFilters((prev) => ({
+      ...prev,
+      companies: prev.companies.includes(companyId)
+        ? prev.companies.filter((id) => id !== companyId)
+        : [...prev.companies, companyId],
+    }));
+  };
+
+  const handleLocationToggle = (location: string) => {
+    setFilters((prev) => ({
+      ...prev,
+      locations: prev.locations.includes(location)
+        ? prev.locations.filter((l) => l !== location)
+        : [...prev.locations, location],
+    }));
+  };
+
+  const handleClear = () => {
+    setFilters({
+      jobTypes: [],
+      levels: [],
+      companies: [],
+      locations: [],
+      salaryRange: { min: null, max: null },
+    });
+  };
+
+  const handleApply = () => {
+    onApplyFilters(filters);
+    onClose();
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-ctp-base rounded-lg p-6 w-full max-w-2xl max-h-[80vh] overflow-y-auto">
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-2xl font-bold text-ctp-text">Filter Vacancies</h2>
+          <Button variant="ghost" onClick={onClose}>
+            ✕
+          </Button>
+        </div>
+
+        {isLoading && (
+          <div className="flex items-center justify-center py-8">
+            <div className="text-ctp-subtext0">Loading filter options...</div>
+          </div>
+        )}
+
+        {error && (
+          <div className="flex items-center justify-center py-8">
+            <div className="text-ctp-red">
+              Error loading filter options. Please try again.
+            </div>
+          </div>
+        )}
+
+        {!(isLoading || error) && (
+          <>
+            <div className="space-y-6">
+              {/* Job Types - Currently no job types available */}
+              {availableOptions.jobTypes.length > 0 && (
+                <div>
+                  <h3 className="text-lg font-semibold text-ctp-text mb-3">
+                    Job Types
+                  </h3>
+                  <div className="flex flex-wrap gap-2">
+                    {availableOptions.jobTypes.map((jobType) => (
+                      <button
+                        key={jobType.id}
+                        type="button"
+                        onClick={() => handleJobTypeToggle(jobType.id)}
+                        className={`px-3 py-2 rounded-full text-sm transition-colors ${
+                          filters.jobTypes.includes(jobType.id)
+                            ? "bg-ctp-blue text-ctp-base"
+                            : "bg-ctp-surface1 text-ctp-text hover:bg-ctp-surface2"
+                        }`}
+                      >
+                        {jobType.name}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Experience Levels */}
+              <div>
+                <h3 className="text-lg font-semibold text-ctp-text mb-3">
+                  Experience Levels
+                </h3>
+                <div className="flex flex-wrap gap-2">
+                  {availableOptions.levels.map((level) => (
+                    <button
+                      key={level.id}
+                      type="button"
+                      onClick={() => handleLevelToggle(level.id)}
+                      className={`px-3 py-2 rounded-full text-sm transition-colors ${
+                        filters.levels.includes(level.id)
+                          ? "bg-ctp-blue text-ctp-base"
+                          : "bg-ctp-surface1 text-ctp-text hover:bg-ctp-surface2"
+                      }`}
+                    >
+                      {level.name}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Companies */}
+              <div>
+                <h3 className="text-lg font-semibold text-ctp-text mb-3">
+                  Companies
+                </h3>
+                <div className="flex flex-wrap gap-2">
+                  {availableOptions.companies.map((company) => (
+                    <button
+                      key={company.id}
+                      type="button"
+                      onClick={() => handleCompanyToggle(company.id)}
+                      className={`px-3 py-2 rounded-full text-sm transition-colors ${
+                        filters.companies.includes(company.id)
+                          ? "bg-ctp-blue text-ctp-base"
+                          : "bg-ctp-surface1 text-ctp-text hover:bg-ctp-surface2"
+                      }`}
+                    >
+                      {company.name}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Locations */}
+              <div>
+                <h3 className="text-lg font-semibold text-ctp-text mb-3">
+                  Locations
+                </h3>
+                <div className="flex flex-wrap gap-2">
+                  {availableOptions.locations.map((location) => (
+                    <button
+                      key={location}
+                      type="button"
+                      onClick={() => handleLocationToggle(location)}
+                      className={`px-3 py-2 rounded-full text-sm transition-colors ${
+                        filters.locations.includes(location)
+                          ? "bg-ctp-blue text-ctp-base"
+                          : "bg-ctp-surface1 text-ctp-text hover:bg-ctp-surface2"
+                      }`}
+                    >
+                      {location}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Salary Range */}
+              <div>
+                <h3 className="text-lg font-semibold text-ctp-text mb-3">
+                  Salary Range
+                </h3>
+                <RangeSlider
+                  min={20000}
+                  max={200000}
+                  value={[
+                    filters.salaryRange.min ?? 20000,
+                    filters.salaryRange.max ?? 200000,
+                  ]}
+                  onChange={([min, max]: [number, number]) => {
+                    setFilters((prev) => ({
+                      ...prev,
+                      salaryRange: {
+                        min: min === 20000 ? null : min,
+                        max: max === 200000 ? null : max,
+                      },
+                    }));
+                  }}
+                  step={5000}
+                  formatValue={(value: number) => `$${value.toLocaleString()}`}
+                  showLabels={true}
+                  showValues={true}
+                  className="px-2"
+                />
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-3 mt-8">
+              <Button variant="outline" onClick={handleClear}>
+                Clear All
+              </Button>
+              <Button variant="outline" onClick={onClose}>
+                Cancel
+              </Button>
+              <Button onClick={handleApply}>Apply Filters</Button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

apps/client/src/features/applications/components/VacancySelector.tsx

···
+import { Button, Placeholder, TextInput } from "@cv/ui";
+import { useState } from "react";
+import { useProgressContext } from "@/components/Progress";
+import { useMyVacanciesQuery } from "@/generated/graphql";
+import { useVacancyFilters } from "./useVacancyFilters";
+import { VacancyCard } from "./VacancyCard";
+import { VacancyFilterPanel } from "./VacancyFilterPanel";
+
+interface Vacancy {
+  id: string;
+  title: string;
+  description?: string | null;
+  requirements?: string | null;
+  company?: {
+    name: string;
+  } | null;
+  role?: {
+    name: string;
+  } | null;
+  level?: {
+    name: string;
+  } | null;
+  location?: string | null;
+  minSalary?: number | null;
+  maxSalary?: number | null;
+  applicationUrl?: string | null;
+}
+
+interface VacancySelectorProps {
+  onSelectVacancy?: (vacancyId: string) => void;
+  onCancel: () => void;
+}
+
+export const VacancySelector = ({
+  onSelectVacancy,
+  onCancel,
+}: VacancySelectorProps) => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedVacancyId, setSelectedVacancyId] = useState<string | null>(
+    null,
+  );
+  const [isFilterOpen, setIsFilterOpen] = useState(false);
+  const { filters, setFilters, activeFiltersCount, serverFilter } =
+    useVacancyFilters(searchTerm);
+
+  // Use Progress context if available (components used in Progress will have this)
+  const progressContext = useProgressContext();
+
+  // Fetch all vacancies with server-side filtering
+  const { data, isLoading, error } = useMyVacanciesQuery({
+    filter: serverFilter,
+  });
+
+  // Merge vacancies, prioritizing own vacancies first
+  const allVacancies =
+    data?.me?.vacancies?.edges?.map((edge) => edge.node) || [];
+  const myVacancies = allVacancies.filter((v) => !v.isPublic);
+  const publicVacancies = allVacancies.filter((v) => v.isPublic);
+
+  // Create a set of own vacancy IDs to avoid duplicates
+  const myVacancyIds = new Set(myVacancies.map((v) => v.id));
+
+  // Combine: own vacancies first, then public vacancies that aren't already in own list
+  const vacancies = [
+    ...myVacancies.map((v) => ({ ...v, isOwn: true })),
+    ...publicVacancies
+      .filter((v) => !myVacancyIds.has(v.id))
+      .map((v) => ({ ...v, isOwn: false })),
+  ];
+
+  if (isLoading) {
+    return <Placeholder variant="loading" message="Loading vacancies..." />;
+  }
+
+  if (error) {
+    return <Placeholder variant="error" message="Error loading vacancies" />;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold text-ctp-text">Select a Vacancy</h2>
+        <p className="mt-2 text-ctp-subtext0">
+          Choose the vacancy you want to apply for{" "}
+          <button
+            type="button"
+            onClick={() => window.open("/vacancies/create", "_blank")}
+            className="text-ctp-blue hover:text-ctp-blue/80 underline font-medium"
+          >
+            or create your own
+          </button>
+        </p>
+      </div>
+
+      <div className="flex items-center space-x-3">
+        <TextInput
+          placeholder="Search vacancies by title, company, or role..."
+          value={searchTerm}
+          onChange={setSearchTerm}
+          className="flex-1"
+        />
+        <Button
+          variant="outline"
+          onClick={() => setIsFilterOpen(true)}
+          className="relative"
+        >
+          🔍 Filter
+          {activeFiltersCount > 0 && (
+            <span className="absolute -top-2 -right-2 bg-ctp-blue text-ctp-base text-xs rounded-full h-5 w-5 flex items-center justify-center">
+              {activeFiltersCount}
+            </span>
+          )}
+        </Button>
+      </div>
+
+      <div className="max-h-96 overflow-y-auto space-y-3">
+        {vacancies.length === 0 ? (
+          <div className="text-center py-8 text-ctp-subtext0">
+            {searchTerm || activeFiltersCount > 0
+              ? "No vacancies match your search"
+              : "No vacancies available"}
+          </div>
+        ) : (
+          vacancies.map((vacancy: Vacancy) => (
+            <VacancyCard
+              key={vacancy.id}
+              vacancy={vacancy}
+              isSelected={selectedVacancyId === vacancy.id}
+              onSelect={setSelectedVacancyId}
+            />
+          ))
+        )}
+      </div>
+
+      <div className="flex justify-end space-x-3">
+        <Button variant="outline" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button
+          onClick={() => {
+            if (selectedVacancyId) {
+              onSelectVacancy?.(selectedVacancyId);
+              progressContext?.next();
+            }
+          }}
+          disabled={!selectedVacancyId}
+        >
+          Next: Select CV Template
+        </Button>
+      </div>
+
+      <VacancyFilterPanel
+        isOpen={isFilterOpen}
+        onClose={() => setIsFilterOpen(false)}
+        onApplyFilters={setFilters}
+        currentFilters={filters}
+      />
+    </div>
+  );
+};

apps/client/src/features/applications/components/useVacancyFilters.ts

···
+import { useMemo, useState } from "react";
+
+export interface FilterOptions {
+  jobTypes: string[];
+  levels: string[];
+  companies: string[];
+  locations: string[];
+  salaryRange: {
+    min: number | null;
+    max: number | null;
+  };
+}
+
+export interface VacancyFilterInput {
+  searchTerm?: string;
+  companies?: string[];
+  locations?: string[];
+  levels?: string[];
+  minSalary?: number;
+  maxSalary?: number;
+}
+
+export const useVacancyFilters = (searchTerm?: string) => {
+  const [filters, setFilters] = useState<FilterOptions>({
+    jobTypes: [],
+    levels: [],
+    companies: [],
+    locations: [],
+    salaryRange: { min: null, max: null },
+  });
+
+  const { activeFiltersCount, serverFilter } = useMemo(() => {
+    const count =
+      filters.jobTypes.length +
+      filters.levels.length +
+      filters.companies.length +
+      filters.locations.length +
+      (filters.salaryRange.min ? 1 : 0) +
+      (filters.salaryRange.max ? 1 : 0);
+
+    const filter: VacancyFilterInput = {
+      searchTerm: searchTerm || undefined,
+      companies: filters.companies.length > 0 ? filters.companies : undefined,
+      locations: filters.locations.length > 0 ? filters.locations : undefined,
+      levels: filters.levels.length > 0 ? filters.levels : undefined,
+      minSalary: filters.salaryRange.min ?? undefined,
+      maxSalary: filters.salaryRange.max ?? undefined,
+    };
+
+    return { activeFiltersCount: count, serverFilter: filter };
+  }, [searchTerm, filters]);
+
+  return {
+    filters,
+    setFilters,
+    activeFiltersCount,
+    serverFilter,
+  };
+};

apps/client/src/features/applications/mutations/create-application.graphql

···
+mutation CreateApplication($input: CreateApplicationInput!) {
+  createApplication(input: $input) {
+    id
+    userId
+    vacancyId
+    cvId
+    coverLetter
+    statusId
+    appliedAt
+    createdAt
+    updatedAt
+    status {
+      id
+      name
+      description
+      createdAt
+      updatedAt
+    }
+    vacancy {
+      id
+      title
+      description
+      location
+      minSalary
+      maxSalary
+      companyName
+      roleName
+      levelName
+      jobTypeName
+    }
+    cv {
+      id
+      title
+    }
+  }
+}

apps/client/src/features/applications/queries/my-applications.graphql

···
+query MyApplications {
+  me {
+    applications {
+      edges {
+        id
+        userId
+        vacancyId
+        cvId
+        coverLetter
+        statusId
+        appliedAt
+        createdAt
+        updatedAt
+        status {
+          id
+          name
+          description
+          createdAt
+          updatedAt
+        }
+        vacancy {
+          id
+          title
+          description
+          location
+          minSalary
+          maxSalary
+          companyName
+          roleName
+          levelName
+          jobTypeName
+        }
+        cv {
+          id
+          title
+        }
+      }
+      totalCount
+    }
+  }
+}

apps/client/src/pages/ApplicationFlowPage.tsx

···
+import { ApplicationFlow } from "@/features/applications/components/ApplicationFlow";
+
+export default function ApplicationFlowPage() {
+  return <ApplicationFlow />;
+}

apps/client/src/pages/ApplicationsPage.tsx

···
+import { ApplicationsOverview } from "@/features/applications/components/ApplicationsOverview";
+
+export default function ApplicationsPage() {
+  return <ApplicationsOverview />;
+}