refactor(client): update vacancy components and queries

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

···
+import { Button, DeleteIcon, FormattedDate, IconButton } from "@cv/ui";
+import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
-import ConfirmationModal from "@/components/ConfirmationModal";
-import { DeleteIcon } from "@/components/icons";
+import { ConfirmationModal } from "@/components/ConfirmationModal";
 import { useToast } from "@/contexts/ToastContext";
 import { useDeleteVacancyMutation } from "@/generated/graphql";
-import Button from "@/ui/Button";
-import IconButton from "@/ui/IconButton";
+import { formatDeadline } from "@/utils/dateUtils";
 
 interface VacancyCardProps {
   vacancy: {
     id: string;
     title: string;
-    company: string;
+    company: {
+      id: string;
+      name: string;
+    };
     description?: string | null;
     requirements?: string | null;
     location?: string | null;
-    salary?: string | null;
+    minSalary?: number | null;
+    maxSalary?: number | null;
     jobType?: string | null;
     applicationUrl?: string | null;
     deadline?: string | null;
···
 }
 
 export const VacancyCard = ({ vacancy, onDelete }: VacancyCardProps) => {
-  const [deleteVacancy, { loading }] = useDeleteVacancyMutation();
+  const { mutateAsync: deleteVacancy, isPending: loading } =
+    useDeleteVacancyMutation();
+  const queryClient = useQueryClient();
   const { showSuccess, showError } = useToast();
   const [showDetails, setShowDetails] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
···
   const handleDeleteConfirm = async () => {
     try {
       await deleteVacancy({
-        variables: { id: vacancy.id },
+        id: vacancy.id,
+      });
+
+      // Invalidate and refetch vacancy queries
+      await queryClient.invalidateQueries({
+        queryKey: ["MyVacancies"],
       });
 
       // Show success toast
       showSuccess(
         "Vacancy Deleted",
-        `Successfully deleted vacancy for ${vacancy.title} at ${vacancy.company}`,
+        `Successfully deleted vacancy for ${vacancy.title} at ${vacancy.company.name}`,
       );
 
       setShowDeleteModal(false);
···
     setShowDeleteModal(false);
   };
 
-  const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleDateString();
-  };
-
-  const formatDeadline = (deadlineString?: string | null) => {
-    if (!deadlineString) return null;
-    return new Date(deadlineString).toLocaleDateString();
-  };
-
   return (
     <div className="bg-ctp-surface0 border border-ctp-surface1 rounded-lg p-6 shadow-sm">
       <div className="flex items-start justify-between">
···
           </div>
 
           <div className="text-ctp-subtext0 mb-2">
-            <div className="font-medium text-ctp-text">{vacancy.company}</div>
+            <div className="font-medium text-ctp-text">
+              {vacancy.company.name}
+            </div>
             {vacancy.location && <div>{vacancy.location}</div>}
-            {vacancy.salary && <div>{vacancy.salary}</div>}
+            {(() => {
+              const salary = formatSalary(vacancy.minSalary, vacancy.maxSalary);
+              return salary ? <div>Salary: {salary}</div> : null;
+            })()}
             {vacancy.jobType && <div>{vacancy.jobType}</div>}
           </div>
 
···
           )}
 
           <div className="text-xs text-ctp-subtext1 mt-2">
-            Created: {formatDate(vacancy.createdAt)}
+            Created: <FormattedDate date={vacancy.createdAt} />
           </div>
         </div>
 
···
             label="Delete vacancy"
             onClick={handleDeleteClick}
             disabled={loading}
-            className="text-ctp-red hover:bg-ctp-red/20"
+            variant="destructive"
           />
         </div>
       </div>
···
         onClose={handleDeleteCancel}
         onConfirm={handleDeleteConfirm}
         title="Delete Vacancy"
-        message={`Are you sure you want to delete the vacancy for ${vacancy.title} at ${vacancy.company}? This action cannot be undone.`}
+        message={`Are you sure you want to delete the vacancy for ${vacancy.title} at ${vacancy.company.name}? This action cannot be undone.`}
         confirmText="Delete"
         cancelText="Cancel"
         variant="danger"

apps/client/src/features/vacancies/components/VacancyCreationSelector/CreationMethodCard.tsx

···
-import IconButton from "@/ui/IconButton";
+import { cn } from "@cv/ui";
+import { cloneElement } from "react";
 import type { CreationMethodCardProps } from "./types";
 import {
   creationMethodCardVariants,
···
     >
       <div className="flex items-center gap-3 mb-3">
         <div className={iconContainerVariants({ color })}>
-          <IconButton
-            icon={icon}
-            label={title}
-            variant="ghost"
-            size="sm"
-            className={iconButtonVariants({ color })}
-          />
+          <div className={cn(iconButtonVariants({ color }), "w-5 h-5")}>
+            {cloneElement(icon, { className: "w-5 h-5" })}
+          </div>
         </div>
         <h3 className="font-semibold text-ctp-text">{title}</h3>
       </div>

apps/client/src/features/vacancies/components/VacancyCreationSelector/PlaceholderForm.tsx

···
-import Button from "@/ui/Button";
+import { Button } from "@cv/ui";
 import type { PlaceholderFormProps } from "./types";
 
 export const PlaceholderForm = ({ title, onBack }: PlaceholderFormProps) => (

apps/client/src/features/vacancies/components/VacancyCreationSelector/VacancyCreationSelector.tsx

···
+import { Button } from "@cv/ui";
 import { useState } from "react";
-import Button from "@/ui/Button";
 import { VacancyForm } from "../VacancyForm";
 import { CreationMethodCard } from "./CreationMethodCard";
 import { creationMethods } from "./constants";

apps/client/src/features/vacancies/components/VacancyCreationSelector/constants.ts

···
-import {
-  DocumentIcon,
-  EditIcon,
-  LinkIcon,
-  UploadIcon,
-} from "@/components/icons";
+import { DocumentIcon, EditIcon, LinkIcon, UploadIcon } from "@cv/ui";
 import type { CreationMethod } from "./types";
 
 export const creationMethods = [

apps/client/src/features/vacancies/components/VacancyForm.tsx

···
-import { useState } from "react";
+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 { useCreateVacancyMutation } from "@/generated/graphql";
-import Button from "@/ui/Button";
-import Checkbox from "@/ui/Checkbox";
-import Textarea from "@/ui/Textarea";
-import TextInput from "@/ui/TextInput";
 import { type VacancyFormData, vacancyFormSchema } from "./vacancy.schema";
 
 interface VacancyFormProps {
···
 }
 
 export const VacancyForm = ({ onSuccess, onCancel }: VacancyFormProps) => {
-  const [createVacancy, { loading }] = useCreateVacancyMutation();
+  const { mutateAsync: createVacancy, isPending: loading } =
+    useCreateVacancyMutation();
+  const queryClient = useQueryClient();
   const { showSuccess, showError } = useToast();
+  const deadlineId = useId();
   const [formData, setFormData] = useState<VacancyFormData>({
     title: "",
     company: "",
+    role: "",
     description: "",
     requirements: "",
     location: "",
-    salary: "",
+    minSalary: undefined,
+    maxSalary: undefined,
     jobType: "",
     applicationUrl: "",
-    deadline: "",
+    deadline: null,
     isActive: true,
   });
   const [errors, setErrors] = useState<
···
 
     try {
       await createVacancy({
-        variables: {
-          title: formData.title,
-          company: formData.company,
-          ...(formData.description && { description: formData.description }),
-          ...(formData.requirements && { requirements: formData.requirements }),
-          ...(formData.location && { location: formData.location }),
-          ...(formData.salary && { salary: formData.salary }),
-          ...(formData.jobType && { jobType: formData.jobType }),
-          ...(formData.applicationUrl && {
-            applicationUrl: formData.applicationUrl,
-          }),
-          ...(formData.deadline && { deadline: new Date(formData.deadline) }),
-          isActive: formData.isActive,
-        },
+        title: formData.title,
+        companyId: formData.company,
+        roleId: formData.role,
+        ...(formData.description && { description: formData.description }),
+        ...(formData.requirements && { requirements: formData.requirements }),
+        ...(formData.location && { location: formData.location }),
+        ...(formData.minSalary !== undefined && {
+          minSalary: formData.minSalary,
+        }),
+        ...(formData.maxSalary !== undefined && {
+          maxSalary: formData.maxSalary,
+        }),
+        ...(formData.jobType && { jobType: formData.jobType }),
+        ...(formData.applicationUrl && {
+          applicationUrl: formData.applicationUrl,
+        }),
+        ...(formData.deadline && { deadline: formData.deadline }),
+        isActive: formData.isActive,
+      });
+
+      // Invalidate and refetch vacancy queries
+      await queryClient.invalidateQueries({
+        queryKey: ["MyVacancies"],
       });
 
       // Show success toast
···
       setFormData({
         title: "",
         company: "",
+        role: "",
         description: "",
         requirements: "",
         location: "",
-        salary: "",
+        minSalary: undefined,
+        maxSalary: undefined,
         jobType: "",
         applicationUrl: "",
-        deadline: "",
+        deadline: null,
         isActive: true,
       });
 
···
     setFormData((prev) => ({ ...prev, [field]: value }));
   };
 
+  const handleNumberInputChange = (field: string, value: string) => {
+    const numValue = value === "" ? undefined : Number(value);
+    setFormData((prev) => ({ ...prev, [field]: numValue }));
+  };
+
   const handleCheckboxChange = (field: string, checked: boolean) => {
     setFormData((prev) => ({ ...prev, [field]: checked }));
+  };
+
+  const handleDateChange = (date: Date | null) => {
+    setFormData((prev) => ({ ...prev, deadline: date }));
   };
 
   return (
···
         />
 
         <TextInput
+          label="Role"
+          value={formData.role}
+          onChange={(value: string) => handleInputChange("role", value)}
+          required
+          error={errors.role}
+        />
+
+        <TextInput
           label="Location"
           value={formData.location}
           onChange={(value: string) => handleInputChange("location", value)}
         />
 
         <TextInput
-          label="Salary"
-          value={formData.salary}
-          onChange={(value: string) => handleInputChange("salary", value)}
+          label="Min Salary"
+          type="number"
+          value={formData.minSalary?.toString() ?? ""}
+          onChange={(value: string) =>
+            handleNumberInputChange("minSalary", value)
+          }
+          placeholder="e.g., 50000"
+          error={errors.minSalary}
+        />
+
+        <TextInput
+          label="Max Salary"
+          type="number"
+          value={formData.maxSalary?.toString() ?? ""}
+          onChange={(value: string) =>
+            handleNumberInputChange("maxSalary", value)
+          }
+          placeholder="e.g., 70000"
+          error={errors.maxSalary}
         />
 
         <TextInput
···
         />
 
         <div className="md:col-span-2">
-          <TextInput
-            label="Deadline"
-            type="datetime-local"
-            value={formData.deadline}
-            onChange={(value: string) => handleInputChange("deadline", value)}
-          />
+          <div className="space-y-2">
+            <label
+              htmlFor={deadlineId}
+              className="block text-sm font-medium text-ctp-text"
+            >
+              Application Deadline
+            </label>
+            <Calendar
+              value={formData.deadline}
+              onChange={handleDateChange}
+              placeholder="Select application deadline"
+              showTime={true}
+              format="long"
+              minDate={new Date()}
+              className="w-full"
+            />
+            {errors.deadline && (
+              <p className="text-sm text-ctp-red">{errors.deadline}</p>
+            )}
+          </div>
         </div>
       </div>
 
···
       <div className="flex space-x-4">
         <Button
           type="submit"
-          disabled={loading || !formData.title || !formData.company}
+          disabled={
+            loading || !formData.title || !formData.company || !formData.role
+          }
         >
           {loading ? "Creating..." : "Create Vacancy"}
         </Button>

apps/client/src/features/vacancies/components/VacancyList.tsx

···
-import { DeleteIcon, EditIcon } from "@/components/icons";
-import { useConfirmationModal } from "@/contexts/ConfirmationModalContext";
-import { useToast } from "@/contexts/ToastContext";
-import { useDeleteVacancyMutation } from "@/generated/graphql";
-import IconButton from "@/ui/IconButton";
-import { StatusBadge } from "@/ui/StatusBadge";
 import {
+  DeleteIcon,
+  EditIcon,
+  FormattedDate,
+  IconButton,
+  Placeholder,
+  StatusBadge,
   Table,
   TableBody,
   TableCell,
   TableHeader,
   TableHeaderCell,
   TableRow,
-} from "@/ui/Table";
-import { formatDeadline, formatSimpleDate } from "@/utils/dateUtils";
+} from "@cv/ui";
+import { useQueryClient } from "@tanstack/react-query";
+import { useConfirmationModal } from "@/contexts/ConfirmationModalContext";
+import { useToast } from "@/contexts/ToastContext";
+import { useDeleteVacancyMutation } from "@/generated/graphql";
+import { formatDeadline } from "@/utils/dateUtils";
+import { formatSalary } from "@/utils/salaryFormatter";
 
 interface VacancyListProps {
   vacancies: Array<{
     id: string;
     title: string;
-    company: string;
+    company: {
+      id: string;
+      name: string;
+    };
     description?: string | null;
     requirements?: string | null;
     location?: string | null;
-    salary?: string | null;
+    minSalary?: number | null;
+    maxSalary?: number | null;
     jobType?: string | null;
     applicationUrl?: string | null;
     deadline?: string | null;
···
 }
 
 export const VacancyList = ({ vacancies, onDelete }: VacancyListProps) => {
-  const [deleteVacancy, { loading }] = useDeleteVacancyMutation();
+  const { mutateAsync: deleteVacancy, isPending: loading } =
+    useDeleteVacancyMutation();
+  const queryClient = useQueryClient();
   const { showSuccess, showError } = useToast();
   const { showConfirmation } = useConfirmationModal();
 
···
 
     const _confirmed = await showConfirmation({
       title: "Delete Vacancy",
-      message: `Are you sure you want to delete the vacancy for ${vacancy?.title} at ${vacancy?.company}? This action cannot be undone.`,
+      message: `Are you sure you want to delete the vacancy for ${vacancy?.title} at ${vacancy?.company.name}? This action cannot be undone.`,
       confirmText: "Delete",
       cancelText: "Cancel",
       variant: "danger",
       onConfirm: async () => {
         try {
           await deleteVacancy({
-            variables: { id: vacancyId },
+            id: vacancyId,
+          });
+
+          // Invalidate and refetch vacancy queries
+          await queryClient.invalidateQueries({
+            queryKey: ["MyVacancies"],
           });
 
           showSuccess(
             "Vacancy Deleted",
-            `Successfully deleted vacancy for ${vacancy?.title} at ${vacancy?.company}`,
+            `Successfully deleted vacancy for ${vacancy?.title} at ${vacancy?.company.name}`,
           );
 
           onDelete?.();
···
 
   if (vacancies.length === 0) {
     return (
-      <div className="text-center py-8">
-        <div className="text-ctp-subtext0 mb-2">No vacancies found</div>
-        <div className="text-sm text-ctp-subtext1">
-          Create your first job vacancy to get started
-        </div>
-      </div>
+      <Placeholder
+        variant="empty"
+        message="Create your first job vacancy to get started"
+      />
     );
   }
 
···
         {vacancies.map((vacancy) => (
           <TableRow key={vacancy.id}>
             <TableCell>
-              <div>
+              <div className="p-2">
                 <div className="font-medium text-ctp-text">{vacancy.title}</div>
                 <div className="text-sm text-ctp-subtext0">
-                  {vacancy.company}
+                  {vacancy.company.name}
                 </div>
               </div>
             </TableCell>
-            <TableCell>{vacancy.location || "—"}</TableCell>
-            <TableCell>{vacancy.salary || "—"}</TableCell>
-            <TableCell>{formatDeadline(vacancy.deadline)}</TableCell>
+            <TableCell>
+              <div className="p-2">{vacancy.location || "—"}</div>
+            </TableCell>
+            <TableCell>
+              <div className="p-2">
+                {formatSalary(vacancy.minSalary, vacancy.maxSalary) || "—"}
+              </div>
+            </TableCell>
+            <TableCell>
+              <div className="p-2">{formatDeadline(vacancy.deadline)}</div>
+            </TableCell>
+            <TableCell>
+              <div className="p-2">
+                <StatusBadge
+                  status={vacancy.isActive ? "active" : "inactive"}
+                />
+              </div>
+            </TableCell>
             <TableCell>
-              <StatusBadge isActive={vacancy.isActive} />
+              <div className="p-2">
+                <FormattedDate date={vacancy.createdAt} />
+              </div>
             </TableCell>
-            <TableCell>{formatSimpleDate(vacancy.createdAt)}</TableCell>
             <TableCell>
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2 p-2">
                 <IconButton
                   icon={<EditIcon />}
                   label="Edit vacancy"
-                  variant="ghost"
-                  size="sm"
-                  className="text-ctp-blue hover:bg-ctp-blue/20"
+                  variant="primary"
+                  size="xs"
+                  showColorOnHover={true}
                   onClick={() => {
                     // TODO: Implement edit functionality
                     console.log("Edit vacancy:", vacancy.id);
···
                 <IconButton
                   icon={<DeleteIcon />}
                   label="Delete vacancy"
-                  variant="ghost"
-                  size="sm"
-                  className="text-ctp-red hover:bg-ctp-red/20"
+                  variant="destructive"
+                  size="xs"
+                  showColorOnHover={true}
                   onClick={() => handleDeleteClick(vacancy.id)}
                   disabled={loading}
                 />

apps/client/src/features/vacancies/components/vacancy.schema.ts

···
       .string()
       .min(1, "Company is required")
       .max(100, "Company must be less than 100 characters"),
+    role: z
+      .string()
+      .min(1, "Role is required")
+      .max(100, "Role must be less than 100 characters"),
     description: z.string().optional(),
     requirements: z.string().optional(),
     location: z.string().optional(),
-    salary: z.string().optional(),
+    minSalary: z.number().min(0, "Min salary must be positive").optional(),
+    maxSalary: z.number().min(0, "Max salary must be positive").optional(),
     jobType: z.string().optional(),
     applicationUrl: z
       .string()
       .url("Must be a valid URL")
       .optional()
       .or(z.literal("")),
-    deadline: z.string().optional(),
+    deadline: z.date().optional().nullable(),
     isActive: z.boolean().default(true),
   })
   .refine(

apps/client/src/features/vacancies/queries/create-vacancy.graphql

···
 mutation CreateVacancy(
   $title: String!
-  $company: String!
+  $companyId: String!
+  $roleId: String!
+  $levelId: String
+  $jobTypeId: String
   $description: String
   $requirements: String
   $location: String
-  $salary: String
-  $jobType: String
+  $minSalary: Float
+  $maxSalary: Float
   $applicationUrl: String
   $deadline: DateTime
   $isActive: Boolean
+  $isPublic: Boolean
 ) {
   createVacancy(
     title: $title
-    company: $company
+    companyId: $companyId
+    roleId: $roleId
+    levelId: $levelId
+    jobTypeId: $jobTypeId
     description: $description
     requirements: $requirements
     location: $location
-    salary: $salary
-    jobType: $jobType
+    minSalary: $minSalary
+    maxSalary: $maxSalary
     applicationUrl: $applicationUrl
     deadline: $deadline
     isActive: $isActive
+    isPublic: $isPublic
   ) {
     id
-    userId
     title
-    company
+    ownerId
+    companyId
+    roleId
+    levelId
+    jobTypeId
     description
     requirements
     location
-    salary
-    jobType
+    minSalary
+    maxSalary
     applicationUrl
     deadline
     isActive
+    isPublic
     createdAt
     updatedAt
   }

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

···
-query MyVacancies {
-  myVacancies {
-    id
-    userId
-    title
-    company
-    description
-    requirements
-    location
-    salary
-    jobType
-    applicationUrl
-    deadline
-    isActive
-    createdAt
-    updatedAt
+query MyVacancies($filter: VacancyFilterInput) {
+  me {
+    vacancies(filter: $filter) {
+      edges {
+        node {
+          id
+          title
+          ownerId
+          companyId
+          roleId
+          levelId
+          jobTypeId
+          description
+          requirements
+          location
+          minSalary
+          maxSalary
+          applicationUrl
+          deadline
+          isActive
+          isPublic
+          createdAt
+          updatedAt
+          company {
+            id
+            name
+          }
+          role {
+            id
+            name
+          }
+          level {
+            id
+            name
+          }
+          skills {
+            id
+            name
+          }
+        }
+      }
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        startCursor
+        endCursor
+      }
+      totalCount
+    }
   }
 }