Spaces:

brestok
/

eu-scrapper-ui

Running

App Files Files Community

brestok commited on Sep 15, 2025

Commit

90723a6

0 Parent(s):

init

Browse files

Files changed (22) hide show

.gitignore +24 -0
README.md +10 -0
index.html +16 -0
package-lock.json +0 -0
package.json +29 -0
public/vite.svg +1 -0
src/api/http.js +18 -0
src/api/jobs.js +29 -0
src/counter.js +9 -0
src/javascript.svg +1 -0
src/main.jsx +24 -0
src/style.css +40 -0
src/ui/AppLayout.jsx +45 -0
src/utils/date.js +15 -0
src/views/JobDetailPage.jsx +151 -0
src/views/JobsPage.jsx +34 -0
src/widgets/FiltersBar.jsx +203 -0
src/widgets/JobsFilters.jsx +38 -0
src/widgets/JobsTable.jsx +91 -0
src/widgets/Pagination.jsx +35 -0
src/widgets/useJobs.js +116 -0
vite.config.js +9 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md ADDED Viewed

	@@ -0,0 +1,10 @@

+---
+title: Eu Scrapper Ui
+emoji: 📊
+colorFrom: yellow
+colorTo: yellow
+sdk: static
+pinned: false
+---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html ADDED Viewed

	@@ -0,0 +1,16 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>EU Job Scraper</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,29 @@

+{
+  "name": "eu-parser-ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.13",
+    "@vitejs/plugin-react": "^5.0.2",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.13",
+    "vite": "^7.1.2"
+  },
+  "dependencies": {
+    "axios": "^1.12.0",
+    "date-fns": "^4.1.0",
+    "react": "^19.1.1",
+    "react-day-picker": "^9.9.0",
+    "react-dom": "^19.1.1",
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^7.8.2",
+    "react-select": "^5.10.2"
+  }
+}

public/vite.svg ADDED Viewed

src/api/http.js ADDED Viewed

	@@ -0,0 +1,18 @@

+import axios from 'axios'
+const http = axios.create({
+  baseURL: 'https://brestok-eu-scrapper.hf.space',
+  timeout: 15000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+})
+http.interceptors.response.use(
+  r => r,
+  err => Promise.reject(err)
+)
+export default http

src/api/jobs.js ADDED Viewed

	@@ -0,0 +1,29 @@

+import http from './http.js'
+export async function fetchJobs({ pageIndex = 0, pageSize = 25 } = {}) {
+  const res = await http.get('/api/job/all', { params: { pageIndex, pageSize } })
+  return res.data
+}
+export async function fetchJobById(jobId) {
+  const res = await http.get(`/api/job/${encodeURIComponent(jobId)}`)
+  return res.data
+}
+export async function searchJobOptions(field, value) {
+  const res = await http.post(`/api/job/option/${encodeURIComponent(field)}/search`, { value })
+  return res.data
+}
+  export async function filterJobs({ filter, pageIndex = 0, pageSize = 25 }) {
+  const res = await http.post('/api/job/filter', { filter, pageIndex, pageSize })
+  return res.data
+}
+export async function fetchStatistics() {
+  const res = await http.get('/api/job/statistics')
+  return res.data
+}

src/counter.js ADDED Viewed

	@@ -0,0 +1,9 @@

+export function setupCounter(element) {
+  let counter = 0
+  const setCounter = (count) => {
+    counter = count
+    element.innerHTML = `count is ${counter}`
+  }
+  element.addEventListener('click', () => setCounter(counter + 1))
+  setCounter(0)
+}

src/javascript.svg ADDED Viewed

src/main.jsx ADDED Viewed

	@@ -0,0 +1,24 @@

+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import './style.css'
+import AppLayout from './ui/AppLayout.jsx'
+import JobsPage from './views/JobsPage.jsx'
+import JobDetailPage from './views/JobDetailPage.jsx'
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <AppLayout />,
+    children: [
+      { index: true, element: <JobsPage /> },
+      { path: 'job/:jobId', element: <JobDetailPage /> },
+    ],
+  },
+])
+const root = createRoot(document.getElementById('root'))
+root.render(<RouterProvider router={router} />)

src/style.css ADDED Viewed

	@@ -0,0 +1,40 @@

+@import "tailwindcss";
+@theme {
+  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  --font-display: Montserrat, Inter, ui-sans-serif, system-ui;
+  --color-bg: #141922;
+  --color-card: #171d28;
+  --color-muted: #b2bac7;
+  --color-foreground: #f5f8fb;
+  --color-primary: #8f8cf8;
+  --color-primary-600: #7a76f2;
+  --radius-xl: 18px;
+}
+@layer base {
+  html { font-family: var(--font-sans); }
+  body { @apply bg-[var(--color-bg)] text-[var(--color-foreground)]; }
+}
+.display-gradient { background: radial-gradient(1200px 600px at 70% 10%, rgba(124,104,238,0.12), rgba(0,0,0,0)), radial-gradient(800px 500px at 90% 30%, rgba(159,134,255,0.12), rgba(0,0,0,0)); }
+.glass { @apply bg-[var(--color-card)]/70 backdrop-blur-xl border border-white/10 shadow-xl rounded-2xl; }
+.card-subtle { @apply bg-white/[0.04] border border-white/10 rounded-xl; }
+.prose-md h1, .prose-md h2, .prose-md h3, .prose-md h4 { @apply font-semibold text-white/90 mt-4 mb-2; }
+.prose-md p { @apply text-white/80 leading-relaxed mt-2; }
+.prose-md ul { @apply list-disc pl-6 mt-2; }
+.prose-md ol { @apply list-decimal pl-6 mt-2; }
+.prose-md li { @apply mt-1; }
+.prose-md a { @apply text-[var(--color-primary)] underline; }
+.prose-md code { @apply bg-white/10 rounded px-1 py-0.5 text-white; }
+.prose-md pre { @apply bg-white/10 rounded p-3 overflow-x-auto; }
+.prose-md blockquote { @apply border-l-4 border-white/20 pl-4 italic text-white/80; }
+@layer utilities {
+  .skeleton { position: relative; overflow: hidden; background-color: rgba(255,255,255,0.08); border-radius: 8px; }
+  .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.18), rgba(255,255,255,0)); animation: skeleton-shimmer 1.2s infinite; }
+  @keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }
+}

src/ui/AppLayout.jsx ADDED Viewed

	@@ -0,0 +1,45 @@

+import React from 'react'
+import { Outlet, Link } from 'react-router-dom'
+export default function AppLayout() {
+  return (
+    <div className="min-h-screen display-gradient">
+      <header className="flex items-center justify-between px-8 py-6">
+        <Link to="/" className="flex items-center gap-2">
+          <span className="text-3xl font-extrabold tracking-tight" style={{fontFamily:'Montserrat'}}>hector</span>
+          <span className="w-2 h-2 rounded-sm bg-[var(--color-primary)] block"></span>
+        </Link>
+      </header>
+      <main className="px-8">
+        <Hero />
+        <div className="mt-12">
+          <Outlet />
+        </div>
+      </main>
+      <footer className="px-8 py-10 text-xs text-white/50 text-center">© 2025 EU Job Scraper</footer>
+    </div>
+  )
+}
+function Hero() {
+  return (
+    <section className="relative isolate grid grid-cols-12 items-center rounded-[2.5rem] overflow-hidden bg-gradient-to-br from-[#141922] to-[#0f141c] border border-white/10">
+      <div className="col-span-12 md:col-span-6 px-10 py-16">
+        <p className="text-[16px] text-white/70">unleash a new era of</p>
+        <h1 className="mt-2 text-[56px] leading-[1.05] font-extrabold" style={{fontFamily:'Montserrat'}}>automation</h1>
+        <p className="mt-6 text-white/70 max-w-xl">EU Job Scraper aggregates vacancies across Europe into one searchable platform.</p>
+        <div className="mt-8 flex items-center gap-4">
+          <Link to="/" className="px-5 py-3 rounded-xl bg-gradient-to-r from-[var(--color-primary-600)] to-[var(--color-primary)] text-black font-semibold">Explore jobs</Link>
+        </div>
+      </div>
+      <div className="col-span-12 md:col-span-6 relative py-16">
+        <div className="absolute inset-0 opacity-30 blur-3xl pointer-events-none" aria-hidden="true"></div>
+        <div className="mx-10 glass p-6">
+          <div className="h-64 rounded-xl bg-[radial-gradient(circle_at_70%_30%,#6d28d9_0%,transparent_60%),radial-gradient(circle_at_30%_70%,#a855f7_0%,transparent_55%)]"></div>
+        </div>
+      </div>
+    </section>
+  )
+}

src/utils/date.js ADDED Viewed

	@@ -0,0 +1,15 @@

+export function formatDateTime(input) {
+  if (!input) return ''
+  const date = input instanceof Date ? input : new Date(input)
+  const tz = Intl.DateTimeFormat().resolvedOptions().timeZone
+  return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short', timeZone: tz }).format(date)
+}
+export function formatDate(input) {
+  if (!input) return ''
+  const date = input instanceof Date ? input : new Date(input)
+  const tz = Intl.DateTimeFormat().resolvedOptions().timeZone
+  return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeZone: tz }).format(date)
+}

src/views/JobDetailPage.jsx ADDED Viewed

	@@ -0,0 +1,151 @@

+import React, { useEffect, useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import { useParams, Link } from 'react-router-dom'
+import { fetchJobById } from '../api/jobs.js'
+import { formatDateTime } from '../utils/date.js'
+export default function JobDetailPage() {
+  const { jobId } = useParams()
+  const [job, setJob] = useState(null)
+  const [isLoading, setIsLoading] = useState(true)
+  useEffect(() => {
+    let mounted = true
+    async function load() {
+      setIsLoading(true)
+      try {
+        const api = await fetchJobById(jobId)
+        if (!mounted) return
+        setJob(api?.data || null)
+      } catch (e) {
+        if (!mounted) return
+        setJob(null)
+      } finally {
+        if (!mounted) return
+        setIsLoading(false)
+      }
+    }
+    load()
+    return () => { mounted = false }
+  }, [jobId])
+  if (isLoading) {
+    return (
+      <div className="glass p-6 mt-10">
+        <div className="flex items-start justify-between gap-6">
+          <div className="flex-1">
+            <div className="skeleton h-7 w-64"></div>
+            <div className="skeleton h-4 w-80 mt-3"></div>
+          </div>
+          <span className="skeleton h-6 w-16 rounded-full"></span>
+        </div>
+        <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+          <div className="p-4 rounded-xl bg-white/5 border border-white/10">
+            <div className="skeleton h-4 w-24"></div>
+            <div className="skeleton h-5 w-40 mt-3"></div>
+          </div>
+          <div className="p-4 rounded-xl bg-white/5 border border-white/10">
+            <div className="skeleton h-4 w-24"></div>
+            <div className="skeleton h-5 w-32 mt-3"></div>
+          </div>
+        </div>
+        <div className="mt-8 space-y-8">
+          <div>
+            <div className="skeleton h-5 w-36"></div>
+            <div className="space-y-2 mt-3">
+              <div className="skeleton h-4 w-full"></div>
+              <div className="skeleton h-4 w-[90%]"></div>
+              <div className="skeleton h-4 w-[85%]"></div>
+            </div>
+          </div>
+          <div>
+            <div className="skeleton h-5 w-40"></div>
+            <div className="space-y-2 mt-3">
+              <div className="skeleton h-4 w-full"></div>
+              <div className="skeleton h-4 w-[92%]"></div>
+              <div className="skeleton h-4 w-[70%]"></div>
+            </div>
+            <div className="mt-6">
+              <span className="skeleton h-9 w-32 inline-block rounded-lg"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  if (!job) {
+    return (
+      <div className="glass p-6 mt-10">
+        <p className="text-white/70">Job not found.</p>
+        <Link to="/" className="inline-block mt-4 text-[var(--color-primary)]">Back to jobs</Link>
+      </div>
+    )
+  }
+  return (
+    <section className="mt-10">
+      <div className="glass p-8">
+        <div className="flex items-start justify-between gap-6">
+          <div>
+            <h1 className="text-3xl font-bold text-white/90">{job?.title || '—'}</h1>
+            <p className="text-white/70 mt-2">{job?.company || '—'} • {job?.location || '—'}</p>
+          </div>
+          {Boolean(job?.isTop5) && <span className="px-3 py-1 rounded-full text-xs bg-emerald-400/20 text-emerald-300">Top 5</span>}
+        </div>
+        <div className="mt-6 flex flex-col md:flex-row md:items-start gap-4 md:gap-8 text-sm">
+          <div className="p-4 rounded-xl bg-white/5 border border-white/10 w-full md:w-[360px]">
+            <div className="text-white/60">Salary</div>
+            <div className="mt-1 font-semibold">
+              {(() => {
+                const s = job?.salary
+                if (!s || (s.min == null && s.max == null)) return '—'
+                const a = typeof s.min === 'number' ? `€${s.min.toLocaleString()}` : null
+                const b = typeof s.max === 'number' ? `€${s.max.toLocaleString()}` : null
+                if (a && b) return `${a} - ${b}`
+                return a || b || '—'
+              })()}
+            </div>
+          </div>
+          <div className="p-4 rounded-xl bg-white/5 border border-white/10 w-full md:w-[360px]">
+            <div className="text-white/60">Inserted</div>
+            <div className="mt-1 font-semibold">{job?.datetimeInserted ? formatDateTime(job.datetimeInserted) : '—'}</div>
+          </div>
+        </div>
+        <div className="mt-8 space-y-8">
+          <div>
+            <h3 className="text-xl font-semibold">Description</h3>
+            {job?.description ? (
+              <div className="prose-md mt-2">
+                <ReactMarkdown>{job.description}</ReactMarkdown>
+              </div>
+            ) : (
+              <p className="mt-2 text-white/70">—</p>
+            )}
+          </div>
+          <div>
+            <h3 className="text-xl font-semibold">Requirements</h3>
+            {job?.requirements ? (
+              <div className="prose-md mt-2">
+                <ReactMarkdown>{job.requirements}</ReactMarkdown>
+              </div>
+            ) : (
+              <p className="mt-2 text-white/70">—</p>
+            )}
+            <div className="mt-6">
+              {job?.sourceUrl ? (
+                <a href={job.sourceUrl} target="_blank" rel="noreferrer" className="inline-flex items-center justify-center px-4 py-2 rounded-lg bg-gradient-to-r from-[var(--color-primary-600)] to-[var(--color-primary)] text-black font-semibold">Open Source</a>
+              ) : (
+                <span className="inline-flex items-center justify-center px-4 py-2 rounded-lg bg-white/5 border border-white/10 opacity-50">Open Source</span>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

src/views/JobsPage.jsx ADDED Viewed

	@@ -0,0 +1,34 @@

+import React from 'react'
+import { FiltersBar } from '../widgets/FiltersBar.jsx'
+import { JobsTable } from '../widgets/JobsTable.jsx'
+import { Pagination } from '../widgets/Pagination.jsx'
+import { useJobs } from '../widgets/useJobs.js'
+export default function JobsPage() {
+  const { jobs, totalJobs, pageIndex, pageCount, pageSize, setPage, setSize, isLoading, lastUpdatedAt, nextPlannedAt, refresh, setFilters, filters, domain, resetFilters, submitFilters } = useJobs()
+  return (
+    <section id="jobs" className="mt-10">
+      <div className="flex items-center justify-between gap-4 flex-wrap">
+        <div>
+          <h2 className="text-2xl font-semibold">All EU Vacancies</h2>
+          <p className="text-sm text-white/70">Advanced scraping for ATS platforms and hyperscalers</p>
+        </div>
+        <button onClick={refresh} disabled={isLoading} className="px-5 py-3 rounded-xl bg-gradient-to-r from-[var(--color-primary-600)] to-[var(--color-primary)] text-black font-semibold disabled:opacity-60">Refresh</button>
+      </div>
+      <div className="mt-6">
+        <FiltersBar value={filters} onChange={setFilters} domain={domain} onRefresh={refresh} lastUpdatedAt={lastUpdatedAt} nextPlannedAt={nextPlannedAt} onSubmit={submitFilters} onClear={resetFilters} isLoading={isLoading} />
+      </div>
+      <div className="mt-6">
+        <div className="glass p-2">
+          <JobsTable jobs={jobs} isLoading={isLoading} />
+          <Pagination pageIndex={pageIndex} pageCount={pageCount} pageSize={pageSize} total={totalJobs} onPageChange={setPage} onSizeChange={setSize} isLoading={isLoading} />
+        </div>
+      </div>
+    </section>
+  )
+}

src/widgets/FiltersBar.jsx ADDED Viewed

	@@ -0,0 +1,203 @@

+import React, {useMemo, useRef, useState} from 'react'
+import Select from 'react-select'
+import {DayPicker} from 'react-day-picker'
+import 'react-day-picker/dist/style.css'
+import {searchJobOptions} from '../api/jobs.js'
+import { formatDate } from '../utils/date.js'
+export function FiltersBar({value, onChange, domain, onRefresh, lastUpdatedAt, nextPlannedAt, onSubmit, onClear, isLoading}) {
+    function set(partial) {
+        onChange({...value, ...partial})
+    }
+    const hasAny = useMemo(() => {
+        return Boolean(
+            value.titles.length || value.companies.length || value.locations.length ||
+            value.salaryMin !== '' || value.salaryMax !== '' || value.top || value.dateFrom || value.dateTo
+        )
+    }, [value])
+    const [openCalendar, setOpenCalendar] = useState(false)
+    const selectStyles = {
+        control: (base) => ({
+            ...base,
+            minHeight: 44,
+            backgroundColor: 'rgba(255,255,255,0.06)',
+            borderColor: 'rgba(255,255,255,0.2)',
+            color: 'white',
+            boxShadow: 'none',
+        }),
+        menu: (base) => ({
+            ...base,
+            backgroundColor: '#171d28',
+            color: 'white',
+            border: '1px solid rgba(255,255,255,0.12)'
+        }),
+        menuPortal: (base) => ({...base, zIndex: 60}),
+        singleValue: (base) => ({...base, color: 'white'}),
+        input: (base) => ({...base, color: 'white'}),
+        multiValue: (base) => ({...base, backgroundColor: 'rgba(183,116,255,0.25)'}),
+        multiValueLabel: (base) => ({...base, color: 'white'}),
+        multiValueRemove: (base) => ({
+            ...base,
+            color: 'white',
+            ':hover': {backgroundColor: 'rgba(183,116,255,0.4)', color: '#0b0c10'}
+        }),
+        option: (base, s) => ({
+            ...base,
+            background: s.isSelected ? 'rgba(183,116,255,0.25)' : s.isFocused ? 'rgba(255,255,255,0.08)' : 'transparent',
+            color: 'white'
+        }),
+    }
+    const [titleOptions, setTitleOptions] = useState([])
+    const [companyOptions, setCompanyOptions] = useState([])
+    const [locationOptions, setLocationOptions] = useState([])
+    const debounceIdRef = useRef(null)
+    async function loadOptions(field, query, setter) {
+        try {
+            const api = await searchJobOptions(field, query)
+            const arr = api?.data?.data || []
+            setter(arr.map(v => ({value: v, label: v})))
+        } catch (e) {
+            setter([])
+        }
+    }
+    function handleMenuOpen(field, setter) {
+        loadOptions(field, '', setter)
+    }
+    function handleInputChange(field, setter) {
+        return (inputValue, meta) => {
+            if (meta.action === 'input-change') {
+                if (debounceIdRef.current) clearTimeout(debounceIdRef.current)
+                debounceIdRef.current = setTimeout(() => {
+                    loadOptions(field, inputValue || '', setter)
+                }, 500)
+            }
+            return inputValue
+        }
+    }
+    return (
+        <div className="glass p-4 relative z-20">
+            <div className="flex flex-wrap items-center gap-4 justify-between text-xs text-white/60">
+                <div>Last update: <span className="text-white">{isLoading ? <span className="skeleton h-3 w-28 inline-block align-middle"></span> : lastUpdatedAt}</span></div>
+                <div>Next planned: <span className="text-white">{isLoading ? <span className="skeleton h-3 w-28 inline-block align-middle"></span> : nextPlannedAt}</span></div>
+                <div className="flex-1"></div>
+                {hasAny && (
+                    <div className="flex items-center gap-2 order-2 sm:order-none">
+                        <button onClick={onSubmit} disabled={isLoading}
+                                className="px-4 py-2 rounded-lg bg-gradient-to-r from-[var(--color-primary-600)] to-[var(--color-primary)] text-black font-semibold disabled:opacity-60">Submit
+                        </button>
+                        <button onClick={onClear} disabled={isLoading}
+                                className="px-4 py-2 rounded-lg bg-white/5 border border-white/10 text-white/80 disabled:opacity-60">Clear
+                            All
+                        </button>
+                    </div>
+                )}
+            </div>
+            <div className="mt-4 grid grid-cols-12 gap-4">
+                <div className="col-span-12 md:col-span-4">
+                    <label className="text-xs text-white/60">Title</label>
+                    <div className="mt-1">
+                        <Select isMulti isDisabled={isLoading} isLoading={isLoading} options={titleOptions} value={value.titles.map(v => ({value: v, label: v}))}
+                                onChange={vals => set({titles: vals.map(v => v.value)})}
+                                onMenuOpen={() => handleMenuOpen('title', setTitleOptions)}
+                                onInputChange={handleInputChange('title', setTitleOptions)} styles={selectStyles}
+                                classNamePrefix="rs" menuPortalTarget={document.body}/>
+                    </div>
+                </div>
+                <div className="col-span-12 md:col-span-4">
+                    <label className="text-xs text-white/60">Company</label>
+                    <div className="mt-1">
+                        <Select isMulti isDisabled={isLoading} isLoading={isLoading} options={companyOptions}
+                                value={value.companies.map(v => ({value: v, label: v}))}
+                                onChange={vals => set({companies: vals.map(v => v.value)})}
+                                onMenuOpen={() => handleMenuOpen('company', setCompanyOptions)}
+                                onInputChange={handleInputChange('company', setCompanyOptions)} styles={selectStyles}
+                                classNamePrefix="rs" menuPortalTarget={document.body}/>
+                    </div>
+                </div>
+                <div className="col-span-12 md:col-span-4">
+                    <label className="text-xs text-white/60">Location</label>
+                    <div className="mt-1">
+                        <Select isMulti isDisabled={isLoading} isLoading={isLoading} options={locationOptions}
+                                value={value.locations.map(v => ({value: v, label: v}))}
+                                onChange={vals => set({locations: vals.map(v => v.value)})}
+                                onMenuOpen={() => handleMenuOpen('location', setLocationOptions)}
+                                onInputChange={handleInputChange('location', setLocationOptions)} styles={selectStyles}
+                                classNamePrefix="rs" menuPortalTarget={document.body}/>
+                    </div>
+                </div>
+                <div className="col-span-6 md:col-span-3">
+                    <div>
+                        <label className="text-xs text-white/60">Salary from</label>
+                        <input type="number" value={value.salaryMin} onChange={e => set({salaryMin: e.target.value})} disabled={isLoading}
+                               className="mt-1 h-[44px] w-full px-3 rounded-lg bg-white/5 border border-white/10 outline-none focus:border-[var(--color-primary)] disabled:opacity-60"/>
+                    </div>
+                </div>
+                <div className="col-span-6 md:col-span-3">
+                    <div>
+                        <label className="text-xs text-white/60">Salary to</label>
+                        <input type="number" value={value.salaryMax} onChange={e => set({salaryMax: e.target.value})} disabled={isLoading}
+                               className="mt-1 h-[44px] w-full px-3 rounded-lg bg-white/5 border border-white/10 outline-none focus:border-[var(--color-primary)] disabled:opacity-60"/>
+                    </div>
+                </div>
+                <div className="col-span-12 md:col-span-2">
+                    <label className="text-xs text-white/60">Top 5</label>
+                    <div
+                        className="mt-1 h-[44px] w-full rounded-lg bg-white/5 border border-white/10 flex items-center px-3 gap-2">
+                        <input type="checkbox" checked={value.top} onChange={e => set({top: e.target.checked})} disabled={isLoading}
+                               className="size-5 accent-[var(--color-primary-600)]"/>
+                        <span className="text-sm">Only top 5</span>
+                    </div>
+                </div>
+                <div className="col-span-12 md:col-span-4">
+                    <label className="text-xs text-white/60">Date inserted (range)</label>
+                    <button type="button" onClick={() => setOpenCalendar(v => !v)} disabled={isLoading}
+                            className="mt-1 h-[44px] w-full text-left px-3 rounded-lg bg-white/5 border border-white/10 flex items-center justify-between disabled:opacity-60">
+                        <span
+                            className="text-white/80 text-sm">{value.dateFrom ? formatDate(value.dateFrom) : 'Start'} — {value.dateTo ? formatDate(value.dateTo) : 'End'}</span>
+                        <span className="text-white/50">▾</span>
+                    </button>
+                    {openCalendar && (
+                        <div
+                            className="absolute z-50 mt-2 bg-[#0f1117] border border-white/10 rounded-xl shadow-2xl p-2">
+                            <DayPicker
+                                mode="range"
+                                selected={{
+                                    from: value.dateFrom ? new Date(value.dateFrom) : undefined,
+                                    to: value.dateTo ? new Date(value.dateTo) : undefined
+                                }}
+                                onSelect={(range) => {
+                                    let from = range?.from ?? null
+                                    let to = range?.to ?? null
+                                    const isSameDay = from && to && from.toDateString() === to.toDateString()
+                                    if (isSameDay) {
+                                        to = null
+                                    }
+                                    set({dateFrom: from, dateTo: to})
+                                    if (from && to && !isSameDay) setOpenCalendar(false)
+                                }}
+                                styles={{
+                                    caption: {color: 'white'},
+                                    day: {color: 'white'},
+                                    day_selected: {backgroundColor: '#8f8cf8', color: '#0b0c10'},
+                                    day_range_start: {backgroundColor: '#7a76f2', color: '#0b0c10'},
+                                    day_range_end: {backgroundColor: '#7a76f2', color: '#0b0c10'},
+                                    day_range_middle: {backgroundColor: 'rgba(143,140,248,0.4)', color: 'white'},
+                                }}
+                            />
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}

src/widgets/JobsFilters.jsx ADDED Viewed

	@@ -0,0 +1,38 @@

+import React from 'react'
+export function JobsFilters({ value, onChange }) {
+  const companies = ['all', 'Meta', 'AWS']
+  const locations = ['all', 'Dublin, IE', 'Amsterdam, NL', 'Frankfurt, DE', 'Warsaw, PL']
+  function set(partial) { onChange({ ...value, ...partial }) }
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="text-xs text-white/60">Search</label>
+        <input value={value.query} onChange={e => set({ query: e.target.value })} placeholder="Title, company, location" className="mt-1 w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 outline-none focus:border-[var(--color-primary)]" />
+      </div>
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="text-xs text-white/60">Company</label>
+          <select value={value.company} onChange={e => set({ company: e.target.value })} className="mt-1 w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10">
+            {companies.map(c => <option key={c} value={c}>{c}</option>)}
+          </select>
+        </div>
+        <div>
+          <label className="text-xs text-white/60">Location</label>
+          <select value={value.location} onChange={e => set({ location: e.target.value })} className="mt-1 w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10">
+            {locations.map(l => <option key={l} value={l}>{l}</option>)}
+          </select>
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <input id="top5" type="checkbox" checked={value.top} onChange={e => set({ top: e.target.checked })} className="size-4" />
+        <label htmlFor="top5" className="text-sm">Top 5</label>
+      </div>
+    </div>
+  )
+}

src/widgets/JobsTable.jsx ADDED Viewed

	@@ -0,0 +1,91 @@

+import React from 'react'
+import { formatDateTime } from '../utils/date.js'
+import { Link } from 'react-router-dom'
+export function JobsTable({ jobs, isLoading }) {
+  if (isLoading) {
+    const skeletonRows = Array.from({ length: 8 })
+    return (
+      <div className="overflow-x-auto w-full relative z-10">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="text-left text-white/70">
+              <th className="p-3">Title</th>
+              <th className="p-3">Company</th>
+              <th className="p-3">Location</th>
+              <th className="p-3">Salary</th>
+              <th className="p-3">Inserted</th>
+              <th className="p-3"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {skeletonRows.map((_, idx) => (
+              <tr key={idx} className={`border-t border-white/10 ${idx % 2 === 0 ? 'bg-white/[0.02]' : ''}`}>
+                <td className="p-3">
+                  <div className="flex items-center gap-2">
+                    <span className="skeleton h-4 w-48"></span>
+                  </div>
+                </td>
+                <td className="p-3"><span className="skeleton h-4 w-32"></span></td>
+                <td className="p-3"><span className="skeleton h-4 w-24"></span></td>
+                <td className="p-3"><span className="skeleton h-4 w-28"></span></td>
+                <td className="p-3"><span className="skeleton h-4 w-36"></span></td>
+                <td className="p-3 text-right"><span className="skeleton h-7 w-16 inline-block"></span></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    )
+  }
+  function formatSalary(salary) {
+    if (!salary || (salary.min == null && salary.max == null)) return '—'
+    const a = typeof salary.min === 'number' ? `€${salary.min.toLocaleString()}` : null
+    const b = typeof salary.max === 'number' ? `€${salary.max.toLocaleString()}` : null
+    if (a && b) return `${a} - ${b}`
+    return a || b || '—'
+  }
+  return (
+    <div className="overflow-x-auto w-full relative z-10">
+      <table className="min-w-full text-sm">
+        <thead>
+          <tr className="text-left text-white/70">
+            <th className="p-3">Title</th>
+            <th className="p-3">Company</th>
+            <th className="p-3">Location</th>
+            <th className="p-3">Salary</th>
+            <th className="p-3">Inserted</th>
+            <th className="p-3"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {jobs.map((j, idx) => (
+            <tr key={j?.id ?? idx} className={`border-t border-white/10 ${idx % 2 === 0 ? 'bg-white/[0.02]' : ''} hover:bg-white/[0.06]`}>
+              <td className="p-3">
+                <div className="flex items-center gap-2">
+                  {Boolean(j?.isTop5) && <span className="size-2 rounded-full bg-emerald-400"></span>}
+                  <span className="font-medium text-white/90">{j?.title || '—'}</span>
+                </div>
+              </td>
+              <td className="p-3">{j?.company || '—'}</td>
+              <td className="p-3">{j?.location || '—'}</td>
+              <td className="p-3">{formatSalary(j?.salary)}</td>
+              <td className="p-3">{j?.datetimeInserted ? formatDateTime(j.datetimeInserted) : '—'}</td>
+              <td className="p-3 text-right">
+                {j?.id ? (
+                  <Link to={`/job/${j.id}`} className="px-3 py-1 rounded-lg bg-white/5 border border-white/10 hover:border-[var(--color-primary)]">View</Link>
+                ) : (
+                  <span className="px-3 py-1 rounded-lg bg-white/5 border border-white/10 opacity-50">View</span>
+                )}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}

src/widgets/Pagination.jsx ADDED Viewed

	@@ -0,0 +1,35 @@

+import React from 'react'
+export function Pagination({ pageIndex, pageCount, pageSize, total, onPageChange, onSizeChange, isLoading }) {
+  const canPrev = pageIndex > 0
+  const canNext = pageIndex < pageCount - 1
+  const sizes = [10, 25, 50, 100]
+  return (
+    <div className="flex flex-col md:flex-row md:items-center justify-between gap-3 px-2 py-3">
+      <div className="text-sm text-white/70">
+        {isLoading ? (
+          <span className="skeleton h-4 w-40 inline-block"></span>
+        ) : (
+          `${Math.min(pageIndex * pageSize + 1, total)}–${Math.min((pageIndex + 1) * pageSize, total)} of ${total}`
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        <label className="text-sm text-white/70">Rows per page</label>
+        <select value={pageSize} onChange={e => onSizeChange(Number(e.target.value))} disabled={isLoading} className="h-[36px] px-2 rounded-md bg-white/5 border border-white/10 disabled:opacity-60">
+          {sizes.map(s => <option key={s} value={s}>{s}</option>)}
+        </select>
+        <div className="ml-2 flex items-center gap-2">
+          <button onClick={() => onPageChange(0)} disabled={!canPrev || isLoading} className="px-2 py-1 rounded-md bg-white/5 border border-white/10 disabled:opacity-40">«</button>
+          <button onClick={() => onPageChange(pageIndex - 1)} disabled={!canPrev || isLoading} className="px-2 py-1 rounded-md bg-white/5 border border-white/10 disabled:opacity-40">‹</button>
+          <span className="text-sm text-white/70 px-2">{isLoading ? <span className="skeleton h-4 w-28 inline-block align-middle"></span> : `Page ${pageIndex + 1} / ${pageCount}`}</span>
+          <button onClick={() => onPageChange(pageIndex + 1)} disabled={!canNext || isLoading} className="px-2 py-1 rounded-md bg-white/5 border border-white/10 disabled:opacity-40">›</button>
+          <button onClick={() => onPageChange(pageCount - 1)} disabled={!canNext || isLoading} className="px-2 py-1 rounded-md bg-white/5 border border-white/10 disabled:opacity-40">»</button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/widgets/useJobs.js ADDED Viewed

	@@ -0,0 +1,116 @@

+import { useEffect, useMemo, useState } from 'react'
+import { fetchJobs, filterJobs, fetchStatistics } from '../api/jobs.js'
+import { formatDateTime } from '../utils/date.js'
+export const INITIAL_FILTERS = {
+  titles: [],
+  companies: [],
+  locations: [],
+  salaryMin: '',
+  salaryMax: '',
+  top: false,
+  dateFrom: null,
+  dateTo: null,
+}
+export function useJobs() {
+  const [jobs, setJobs] = useState([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [filters, setFilters] = useState(INITIAL_FILTERS)
+  const [lastUpdatedAt, setLastUpdatedAt] = useState(formatDateTime(new Date()))
+  const [nextPlannedAt, setNextPlannedAt] = useState(formatDateTime(new Date(Date.now() + 6 * 36e5)))
+  const [pageIndex, setPageIndex] = useState(0)
+  const [pageSize, setPageSize] = useState(25)
+  const [totalJobs, setTotalJobs] = useState(0)
+  const [serverFilter, setServerFilter] = useState(null)
+  async function load() {
+    setIsLoading(true)
+    try {
+      let api
+      if (serverFilter) {
+        api = await filterJobs({ filter: serverFilter, pageIndex, pageSize })
+      } else {
+        api = await fetchJobs({ pageIndex, pageSize })
+      }
+      const payload = api?.data
+      const items = payload?.data || []
+      const paging = payload?.paging || {}
+      setJobs(items)
+      setTotalJobs(Number(paging.totalCount) || 0)
+      try {
+        const stats = await fetchStatistics()
+        const last = stats?.data?.lastUpdate
+        const next = stats?.data?.nextUpdate
+        setLastUpdatedAt(last ? formatDateTime(last) : formatDateTime(new Date()))
+        setNextPlannedAt(next ? formatDateTime(next) : formatDateTime(new Date(Date.now() + 6 * 36e5)))
+      } catch (_) {
+        setLastUpdatedAt(formatDateTime(new Date()))
+        setNextPlannedAt(formatDateTime(new Date(Date.now() + 6 * 36e5)))
+      }
+    } catch (e) {
+      setJobs([])
+      setTotalJobs(0)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+  useEffect(() => {
+    load()
+  }, [pageIndex, pageSize, serverFilter])
+  const pageCount = useMemo(() => Math.max(1, Math.ceil((totalJobs || 0) / pageSize)), [totalJobs, pageSize])
+  function setPage(newIndex) {
+    const clamped = Math.max(0, Math.min(newIndex, pageCount - 1))
+    setPageIndex(clamped)
+  }
+  function setSize(newSize) {
+    setPageSize(newSize)
+    setPageIndex(0)
+  }
+  function refresh() {
+    load()
+  }
+  function buildServerFilter() {
+    const filter = {}
+    if (filters.titles && filters.titles.length) filter.titles = filters.titles
+    if (filters.companies && filters.companies.length) filter.companies = filters.companies
+    if (filters.locations && filters.locations.length) filter.locations = filters.locations
+    if (filters.salaryMin !== '' && !Number.isNaN(Number(filters.salaryMin))) filter.minSalary = Number(filters.salaryMin)
+    if (filters.salaryMax !== '' && !Number.isNaN(Number(filters.salaryMax))) filter.maxSalary = Number(filters.salaryMax)
+    if (filters.top) filter.isTop5 = true
+    if (filters.dateFrom) filter.minDate = new Date(filters.dateFrom).toISOString().slice(0, 10)
+    if (filters.dateTo) filter.maxDate = new Date(filters.dateTo).toISOString().slice(0, 10)
+    return filter
+  }
+  function submitFilters() {
+    const f = buildServerFilter()
+    setServerFilter(Object.keys(f).length ? f : null)
+    setPageIndex(0)
+  }
+  const domain = useMemo(() => {
+    const unique = (arr) => Array.from(new Set(arr)).sort()
+    return {
+      titles: unique(jobs.map(j => j.title)),
+      companies: unique(jobs.map(j => j.company)),
+      locations: unique(jobs.map(j => j.location)),
+    }
+  }, [jobs])
+  function resetFilters() {
+    setFilters(INITIAL_FILTERS)
+    setServerFilter(null)
+    setPageIndex(0)
+  }
+  return { jobs, totalJobs, pageIndex, pageCount, pageSize, setPage, setSize, isLoading, lastUpdatedAt, nextPlannedAt, refresh, setFilters, filters, domain, resetFilters, submitFilters }
+}

vite.config.js ADDED Viewed

	@@ -0,0 +1,9 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwind from '@tailwindcss/vite'
+export default defineConfig({
+  plugins: [react(), tailwind()],
+})