feat: implement TypeScript support and refactor job listing components; add JobsHeaderCard, JobsFiltersCard, JobsTableCard, and utility components for improved functionality and UI

Author: pedrosilvaadev

frontend/eslint.config.js

@@ -2,14 +2,16 @@ import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
 import { defineConfig, globalIgnores } from 'eslint/config'
 
 export default defineConfig([
   globalIgnores(['dist']),
   {
-    files: ['**/*.{js,jsx}'],
+    files: ['**/*.{ts,tsx}'],
     extends: [
       js.configs.recommended,
+      ...tseslint.configs.recommended,
       reactHooks.configs.flat.recommended,
       reactRefresh.configs.vite,
     ],
@@ -23,7 +25,9 @@ export default defineConfig([
       },
     },
     rules: {
-      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+      'react-refresh/only-export-components': 'off',
     },
   },
 ])

frontend/jsconfig.json

@@ -22,6 +22,8 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.1",
     "autoprefixer": "^10.4.27",
     "eslint": "^9.39.4",
     "eslint-plugin-react-hooks": "^7.0.1",
@@ -31,4 +33,4 @@
     "tailwindcss": "^3.4.17",
     "vite": "^8.0.1"
   }
-}
+}

frontend/package.json

@@ -1,22 +1,24 @@
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { JobsFiltersCard } from "@/components/JobsFiltersCard";
 import { JobsHeaderCard } from "@/components/JobsHeaderCard";
 import { JobsTableCard } from "@/components/JobsTableCard";
+import { fetchJobFiles, fetchJobsByFile } from "@/services/jobsService";
+import type { Job, JobFile, JobsMeta } from "@/types/jobs";
 
-function formatDate(timestamp) {
+function formatDate(timestamp: JobsMeta["modifiedAt"]): string {
   if (!timestamp) {
     return "-";
   }
   return new Date(timestamp).toLocaleString("pt-BR");
 }
 
 function App() {
-  const [files, setFiles] = useState([]);
+  const [files, setFiles] = useState<JobFile[]>([]);
   const [selectedFile, setSelectedFile] = useState("");
   const [search, setSearch] = useState("");
   const [keywordFilter, setKeywordFilter] = useState("all");
-  const [jobs, setJobs] = useState([]);
-  const [meta, setMeta] = useState({ file: "", modifiedAt: null, total: 0 });
+  const [jobs, setJobs] = useState<Job[]>([]);
+  const [meta, setMeta] = useState<JobsMeta>({ file: "", modifiedAt: null, total: 0 });
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
@@ -46,39 +48,30 @@ function App() {
     });
   }, [jobs, search, keywordFilter]);
 
-  async function loadJobs(fileName) {
+  const loadJobs = useCallback(async (fileName: string) => {
     setLoading(true);
     setError("");
     try {
-      const suffix = fileName ? `?file=${encodeURIComponent(fileName)}` : "";
-      const response = await fetch(`/api/jobs${suffix}`);
-      const payload = await response.json();
-
-      if (!response.ok) {
-        throw new Error(payload.message || "Falha ao carregar vagas.");
-      }
-
-      setJobs(Array.isArray(payload.jobs) ? payload.jobs : []);
+      const data = await fetchJobsByFile(fileName);
+      setJobs(data.jobs);
       setMeta({
-        file: payload.file || "",
-        modifiedAt: payload.modifiedAt || null,
-        total: Number(payload.total || 0),
+        file: data.file,
+        modifiedAt: data.modifiedAt,
+        total: data.total,
       });
-      setSelectedFile(payload.file || fileName || "");
-    } catch (err) {
+      setSelectedFile(data.file || fileName || "");
+    } catch (err: unknown) {
       setJobs([]);
       setMeta({ file: "", modifiedAt: null, total: 0 });
-      setError(err.message || "Erro inesperado ao carregar vagas.");
+      setError(err instanceof Error ? err.message : "Erro inesperado ao carregar vagas.");
     } finally {
       setLoading(false);
     }
-  }
+  }, []);
 
   useEffect(() => {
     async function initializeFiles() {
-      const response = await fetch("/api/jobs/files");
-      const payload = await response.json();
-      const foundFiles = Array.isArray(payload.files) ? payload.files : [];
+      const foundFiles = await fetchJobFiles();
       setFiles(foundFiles);
       if (foundFiles[0]?.file) {
         setSelectedFile(foundFiles[0].file);
@@ -94,7 +87,7 @@ function App() {
     if (selectedFile) {
       loadJobs(selectedFile);
     }
-  }, [selectedFile]);
+  }, [selectedFile, loadJobs]);
 
   return (
     <main className="relative min-h-screen overflow-hidden bg-background px-4 py-8 md:px-8">

frontend/src/App.jsx frontend/src/App.tsxfrontend/src/App.jsx renamed to frontend/src/App.tsx

@@ -1,7 +1,22 @@
 import { RefreshCcw, Search } from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
+import type { JobFile } from "@/types/jobs";
+
+interface JobsFiltersCardProps {
+  search: string;
+  setSearch: Dispatch<SetStateAction<string>>;
+  keywordFilter: string;
+  setKeywordFilter: Dispatch<SetStateAction<string>>;
+  keywords: string[];
+  selectedFile: string;
+  setSelectedFile: Dispatch<SetStateAction<string>>;
+  files: JobFile[];
+  loading: boolean;
+  onRefresh: () => void;
+}
 
 export function JobsFiltersCard({
   search,
@@ -14,7 +29,7 @@ export function JobsFiltersCard({
   files,
   loading,
   onRefresh,
-}) {
+}: JobsFiltersCardProps) {
   return (
     <Card className="border-white/30 bg-card/85 backdrop-blur">
       <CardContent className="grid gap-3 pt-6 md:grid-cols-4">

…ntend/src/components/JobsFiltersCard.jsx …ntend/src/components/JobsFiltersCard.tsxfrontend/src/components/JobsFiltersCard.jsx renamed to frontend/src/components/JobsFiltersCard.tsx frontend/src/components/JobsFiltersCard.jsx renamed to frontend/src/components/JobsFiltersCard.tsx

@@ -1,8 +1,13 @@
 import { BriefcaseBusiness, FileSpreadsheet } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import type { JobsMeta } from "@/types/jobs";
 
-export function JobsHeaderCard({ meta }) {
+interface JobsHeaderCardProps {
+  meta: JobsMeta;
+}
+
+export function JobsHeaderCard({ meta }: JobsHeaderCardProps) {
   return (
     <Card className="border-white/30 bg-card/85 backdrop-blur">
       <CardHeader className="gap-4 pb-4 md:flex-row md:items-center md:justify-between">

…ontend/src/components/JobsHeaderCard.jsx …ontend/src/components/JobsHeaderCard.tsxfrontend/src/components/JobsHeaderCard.jsx renamed to frontend/src/components/JobsHeaderCard.tsx frontend/src/components/JobsHeaderCard.jsx renamed to frontend/src/components/JobsHeaderCard.tsx

@@ -1,7 +1,17 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import type { Job, JobsMeta } from "@/types/jobs";
 
-export function JobsTableCard({ meta, filteredJobs, jobs, loading, error, formatDate }) {
+interface JobsTableCardProps {
+  meta: JobsMeta;
+  filteredJobs: Job[];
+  jobs: Job[];
+  loading: boolean;
+  error: string;
+  formatDate: (timestamp: JobsMeta["modifiedAt"]) => string;
+}
+
+export function JobsTableCard({ meta, filteredJobs, jobs, loading, error, formatDate }: JobsTableCardProps) {
   return (
     <Card className="border-white/30 bg-card/90 backdrop-blur">
       <CardHeader>

frontend/src/components/JobsTableCard.jsx frontend/src/components/JobsTableCard.tsxfrontend/src/components/JobsTableCard.jsx renamed to frontend/src/components/JobsTableCard.tsx

@@ -1,4 +1,5 @@
-import { cva } from "class-variance-authority";
+import type { HTMLAttributes } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
@@ -16,7 +17,9 @@ const badgeVariants = cva(
   },
 );
 
-function Badge({ className, variant, ...props }) {
+type BadgeProps = HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants>;
+
+function Badge({ className, variant, ...props }: BadgeProps) {
   return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
 }
 

frontend/src/components/ui/badge.jsx frontend/src/components/ui/badge.tsxfrontend/src/components/ui/badge.jsx renamed to frontend/src/components/ui/badge.tsx

@@ -1,4 +1,5 @@
-import { cva } from "class-variance-authority";
+import type { ButtonHTMLAttributes } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
@@ -21,7 +22,9 @@ const buttonVariants = cva(
   },
 );
 
-function Button({ className, variant, size, ...props }) {
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>;
+
+function Button({ className, variant, size, ...props }: ButtonProps) {
   return <button className={cn(buttonVariants({ variant, size, className }))} {...props} />;
 }
 

frontend/src/components/ui/button.jsx frontend/src/components/ui/button.tsxfrontend/src/components/ui/button.jsx renamed to frontend/src/components/ui/button.tsx

@@ -1,22 +1,23 @@
+import type { HTMLAttributes } from "react";
 import { cn } from "@/lib/utils";
 
-function Card({ className, ...props }) {
+function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
   return <div className={cn("rounded-xl border bg-card text-card-foreground shadow-sm", className)} {...props} />;
 }
 
-function CardHeader({ className, ...props }) {
+function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
   return <div className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />;
 }
 
-function CardTitle({ className, ...props }) {
+function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {
   return <h3 className={cn("text-xl font-semibold leading-none tracking-tight", className)} {...props} />;
 }
 
-function CardDescription({ className, ...props }) {
+function CardDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) {
   return <p className={cn("text-sm text-muted-foreground", className)} {...props} />;
 }
 
-function CardContent({ className, ...props }) {
+function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
   return <div className={cn("p-6 pt-0", className)} {...props} />;
 }