Salary Grade Explorer

import { SalaryGradeExplorer } from "@/components/micto/salary-grade-explorer";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";

export default function EmployeeSalaryPortal() {
  const [grade, setGrade] = useState(11);
  const [step, setStep] = useState(1);
  const [additions, setAdditions] = useState<string[]>([]);
  const [deductions, setDeductions] = useState<string[]>([]);

  // 100% backend-driven audit pipeline!
  const { data: payroll, isLoading } = useQuery({
    queryKey: ["payroll", grade, step, additions, deductions],
    queryFn: async () => {
      const res = await fetch("/api/payroll/calculate", {
        method: "POST",
        body: JSON.stringify({ grade, step, additions, deductions }),
      });
      return res.json();
    },
  });

  return (
    <SalaryGradeExplorer
      employeeName="Nehry Dedoro"
      position="Lead Systems Developer"
      activeGrade={grade}
      activeStep={step}
      payrollResult={payroll}
      isLoading={isLoading}
      onSelectionChange={(g, s, add, ded) => {
        setGrade(g);
        setStep(s);
        setAdditions(add);
        setDeductions(ded);
      }}
    />
  );
}