santizing ntfy header

.gitignore

@@ -5,4 +5,3 @@ db/*.db*
 npm-debug.log
 .DS_Store
 .idea
-.vscode

Dockerfile

@@ -31,8 +31,6 @@ RUN mkdir -p /db /conf \
   && ln -s /conf /fredy/conf
 
 EXPOSE 9998
-VOLUME /db
-VOLUME /conf
 
 # Start application using PM2 runtime
 CMD ["pm2-runtime", "index.js"]

README.md

@@ -21,7 +21,7 @@ Finding an apartment or house in Germany can be stressful and
 time-consuming.\
 **Fredy** makes it easier: it automatically scrapes **ImmoScout24,
 Immowelt, Immonet, eBay Kleinanzeigen, and WG-Gesucht** and notifies you
-instantly via **Slack, Telegram, Email, ntfy, discord and more** when new
+instantly via **Slack, Telegram, Email, ntfy, and more** when new
 listings appear.
 
 With a modern architecture, Fredy provides a **clean Web UI**, removes
@@ -35,7 +35,7 @@ same listing twice.
 -   🏠 Scrapes **ImmoScout24, Immowelt, Immonet, eBay Kleinanzeigen,
     WG-Gesucht**
 -   ⚡ Instant notifications: Slack, Telegram, Email (SendGrid,
-    Mailjet), ntfy, discord 
+    Mailjet), ntfy
 -   🔎 Uses the **ImmoScout Mobile API** (reverse engineered)
 -   🌍 Runs anywhere: Docker, Node.js, self-hosted
 -   🖥️ Intuitive **Web UI** to manage searches
@@ -107,9 +107,9 @@ yarn run start:frontend  # in another terminal
 
 ## 📸 Screenshots
 
-| Fredy Main Overview                              | Job Configuration                                                     | Found Listings                                                              |
-|--------------------------------------------------|-----------------------------------------------------------------------|-----------------------------------------------------------------------------|
-| ![Screenshot showing Fredy](doc/screenshot1.png) | ![Screenshot showing job configuration in Fredy](doc/screenshot3.png) | ![Screenshot showing found listings in Fredy](doc/screenshot2.png) |
+| Job Configuration | Job Analytics | Job Overview |
+|-------------------|--------------|--------------|
+| ![Screenshot showing job configuration in Fredy](doc/screenshot1.png) | ![Screenshot showing job analytics in Fredy](doc/screenshot_2.png) | ![Screenshot showing job overview in Fredy](doc/screenshot_3.png) |
 
 ------------------------------------------------------------------------
 
@@ -129,7 +129,7 @@ picks up the newest listings first.
 ### Adapter 📡
 
 An **adapter** is the channel through which Fredy notifies you (Slack,
-Telegram, Email, ntfy, discord ...).\
+Telegram, Email, ntfy, ...).\
 Each adapter has its own configuration (e.g. API keys, webhook URLs).\
 You can use multiple adapters at once --- Fredy will send new listings
 through all of them.

docker-compose.yml

@@ -5,7 +5,7 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    image: ghcr.io/orangecoding/fredy
+    image: fredy/fredy
     # map existing config and database
     volumes:
       - ./conf:/conf

lib/api/routes/versionRouter.js

@@ -8,14 +8,7 @@ const versionRouter = service.newRouter();
 
 versionRouter.get('/', async (req, res) => {
   const versionPayload = await getCurrentVersionFromGithub();
-  const localFredyVersion = await getPackageVersion();
-  res.body =
-    versionPayload == null
-      ? {
-          newVersion: false,
-          localFredyVersion,
-        }
-      : versionPayload;
+  res.body = versionPayload == null ? { newVersion: false } : versionPayload;
   res.send();
 });
 

lib/notification/adapter/apprise.js

@@ -8,7 +8,7 @@ export const send = ({ serviceName, newListings, notificationConfig, jobKey }) =
   const jobName = job == null ? jobKey : job.name;
   const promises = newListings.map((newListing) => {
     const title = `${jobName} at ${serviceName}: ${newListing.title}`;
-    const message = `Address: ${newListing.address}\nSize: ${newListing.size}\nPrice: ${newListing.price}\nLink: ${newListing.link}`;
+    const message = `Address: ${newListing.address}\nSize: ${newListing.size}\nPrice: ${newListing.price}\nink: ${newListing.link}`;
     return fetch(server, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },

lib/notification/adapter/discord_webhook.js

@@ -1,130 +0,0 @@
-import fetch from 'node-fetch';
-import { getJob } from '../../services/storage/jobStorage.js';
-import { markdown2Html } from '../../services/markdown.js';
-import { normalizeImageUrl } from '../../utils.js';
-
-/**
- * Generates an idempotent decimal color code. The input string-based color code is
- * generated using the djb2 hash algorithm.
- *
- * @param {string} str - Input string as color code base
- * @returns {number} Generated decimal color code (0 - 16777215)
- */
-const generateColorFromString = (str) => {
-  let hash = 5381; // initial value
-  const input = String(str);
-
-  for (let i = 0; i < input.length; i++) {
-    // hash * 33 + charCode
-    hash = (hash << 5) + hash + input.charCodeAt(i);
-    // Ensure the hash is 32 bit
-    hash |= 0;
-  }
-
-  let positiveHash = hash >>> 0;
-  const maxColorValue = 16777215;
-  const colorDecimal = positiveHash % maxColorValue;
-
-  return colorDecimal;
-};
-
-/**
- * Creates an embed per listing
- * (-> see https://birdie0.github.io/discord-webhooks-guide/structure/embeds.html).
- *
- * @param {string} jobKey - Key of job (used to set embed color)
- * @param {object} listing - Object holding listing details
- * @returns {object} Discord webhook embed
- */
-const buildEmbed = (jobKey, listing) => {
-  const maxTitleLength = 252; // Max embed title length is 256 characters
-  let title = String(listing.title ?? 'N/A');
-  if (title.length > maxTitleLength) {
-    title = title.substring(0, maxTitleLength) + '...';
-  }
-
-  const fields = [
-    {
-      name: 'Price',
-      value: String(listing.price ?? 'n/a'),
-      inline: true,
-    },
-    {
-      name: 'Size',
-      value: listing?.size?.replace(/2m/g, 'm²') ?? 'n/a',
-      inline: true,
-    },
-    {
-      name: 'Address',
-      value: String(listing.address ?? 'n/a'),
-      inline: true,
-    },
-  ];
-
-  const embed = {
-    title: title,
-    color: generateColorFromString(jobKey),
-    url: listing.link,
-    fields: fields,
-  };
-
-  if (listing.image) {
-    embed.image = {
-      url: normalizeImageUrl(listing.image),
-    };
-  }
-
-  return embed;
-};
-
-export const send = ({ serviceName, newListings, notificationConfig, jobKey }) => {
-  const adapter = notificationConfig.find((adapter) => adapter.id === config.id);
-  const webhookUrl = adapter?.fields?.webhookUrl;
-  if (!webhookUrl || newListings.length === 0) return Promise.resolve([]);
-
-  const job = getJob(jobKey);
-  const jobName = job?.name || jobKey;
-
-  const embeds = newListings.map((listing) => buildEmbed(jobKey, listing));
-
-  const maxEmbedsPerMessage = 10; // Discord only allows up to 10 embeds
-  const webhookPromises = [];
-
-  for (let i = 0; i < embeds.length; i += maxEmbedsPerMessage) {
-    // Send multiple Discord messages with up to 10 embeds per message
-    const embedChunk = embeds.slice(i, i + maxEmbedsPerMessage);
-
-    const content = i === 0 ? `*${jobName}:* ${serviceName} found **${newListings.length}** new listings.` : '';
-    const body = JSON.stringify({
-      content: content,
-      embeds: embedChunk,
-    });
-
-    const fetchPromise = fetch(webhookUrl, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body,
-    }).catch((error) => {
-      console.error(`Error sending Discord webhook for chunk starting at ${i}:`, error);
-      return Promise.reject(new Error(`Webhook failed: ${error.message}`));
-    });
-
-    webhookPromises.push(fetchPromise);
-  }
-
-  return Promise.allSettled(webhookPromises);
-};
-
-export const config = {
-  id: 'discord_webhook',
-  name: 'Discord Webhook',
-  readme: markdown2Html('lib/notification/adapter/discord_webhook.md'),
-  description: 'Fredy will send new listings to the Discord channel of your choice.',
-  fields: {
-    webhookUrl: {
-      type: 'text',
-      label: 'Webhook URL',
-      description: 'The URL of the Discord webhook to send messages to.',
-    },
-  },
-};

lib/notification/adapter/discord_webhook.md

@@ -1,4 +0,0 @@
-### Discord Adapter
-
-To use the [Discord](https://discord.com/) Adapter, you need to create a webhook on the Discord channel of your choice. You can follow the instructions of _Making A Webhook_ on [this support website](https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks).
-Once you have created a webhook, copy and paste the webhook URL.

lib/notification/adapter/mattermost.js

@@ -13,10 +13,10 @@ export const send = ({ serviceName, newListings, notificationConfig, jobKey }) =
   return fetch(webhook, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
+    body: {
       channel: channel,
       text: message,
-    }),
+    },
   });
 };
 export const config = {

lib/provider/immonet.js

@@ -29,7 +29,6 @@ const config = {
     address: 'div[data-testid="cardmfe-description-box-address"] | trim',
     image: 'div[data-testid="cardmfe-picture-box-test-id"] img@src',
     link: 'button@data-base',
-    description: 'div[data-testid="cardmfe-description-text-test-id"] | trim',
   },
   normalize: normalize,
   filter: applyBlacklist,

lib/provider/immowelt.js

@@ -26,9 +26,8 @@ const config = {
     size: 'div[data-testid="cardmfe-keyfacts-testid"] | removeNewline | trim',
     title: 'div[data-testid="cardmfe-description-box-text-test-id"] > div:nth-of-type(2)',
     link: 'a@href',
-    description: 'div[data-testid="cardmfe-description-text-test-id"] > div:nth-of-type(2) | removeNewline | trim',
     address: 'div[data-testid="cardmfe-description-box-address"] | removeNewline | trim',
-    image: 'div[data-testid="cardmfe-picture-box-opacity-layer-test-id"] img@src',
+    image: 'div[data-testid="cardMfe-card-pictureBox-opacity"] img@src',
   },
   normalize: normalize,
   filter: applyBlacklist,

lib/provider/mcMakler.js

@@ -1,47 +0,0 @@
-import { isOneOf, buildHash } from '../utils.js';
-import checkIfListingIsActive from '../services/listings/listingActiveTester.js';
-let appliedBlackList = [];
-
-function normalize(o) {
-  const originalId = o.id.split('/').pop();
-  const id = buildHash(originalId, o.price);
-  const size = o.size ?? 'N/A m²';
-  const title = o.title || 'No title available';
-  const address = o.address?.replace(' / ', ' ') || null;
-  const link = o.link != null ? `https://www.mcmakler.de${o.link}` : config.url;
-  return Object.assign(o, { id, size, title, link, address });
-}
-function applyBlacklist(o) {
-  const titleNotBlacklisted = !isOneOf(o.title, appliedBlackList);
-  const descNotBlacklisted = !isOneOf(o.description, appliedBlackList);
-  return titleNotBlacklisted && descNotBlacklisted;
-}
-const config = {
-  url: null,
-  crawlContainer: 'article[data-testid="propertyCard"]',
-  sortByDateParam: 'sortBy=DATE&sortOn=DESC',
-  waitForSelector: 'ul[data-testid="listsContainer"]',
-  crawlFields: {
-    id: 'h2 a@href',
-    title: 'h2 a | removeNewline | trim',
-    price: 'footer > p:first-of-type | trim',
-    size: 'footer > p:nth-of-type(2) | trim',
-    address: 'div > h2 + p | removeNewline | trim',
-    image: 'img@src',
-    link: 'h2 a@href',
-  },
-  normalize: normalize,
-  filter: applyBlacklist,
-  activeTester: checkIfListingIsActive,
-};
-export const init = (sourceConfig, blacklist) => {
-  config.enabled = sourceConfig.enabled;
-  config.url = sourceConfig.url;
-  appliedBlackList = blacklist || [];
-};
-export const metaInformation = {
-  name: 'McMakler',
-  baseUrl: 'https://www.mcmakler.de/immobilien/',
-  id: 'mcMakler',
-};
-export { config };

lib/provider/regionalimmobilien24.js

@@ -1,49 +0,0 @@
-import { isOneOf, buildHash } from '../utils.js';
-import checkIfListingIsActive from '../services/listings/listingActiveTester.js';
-let appliedBlackList = [];
-
-function normalize(o) {
-  const id = buildHash(o.id, o.price);
-  const address = o.address?.replace(/^adresse /i, '') ?? null;
-  const title = o.title || 'No title available';
-  const link = o.link != null ? decodeURIComponent(o.link) : config.url;
-
-  var urlReg = new RegExp(/url\((.*?)\)/gim);
-  const image = o.image != null ? urlReg.exec(o.image)[1] : null;
-  return Object.assign(o, { id, address, title, link, image });
-}
-function applyBlacklist(o) {
-  const titleNotBlacklisted = !isOneOf(o.title, appliedBlackList);
-  const descNotBlacklisted = !isOneOf(o.description, appliedBlackList);
-  return titleNotBlacklisted && descNotBlacklisted;
-}
-const config = {
-  url: null,
-  crawlContainer: '.listentry-content',
-  sortByDateParam: null, // sort by date is standard
-  waitForSelector: 'body',
-  crawlFields: {
-    id: '.listentry-iconbar-share@data-sid | trim',
-    title: 'h2 | trim',
-    price: '.listentry-details-price .listentry-details-v | trim',
-    size: '.listentry-details-size .listentry-details-v | trim',
-    address: '.listentry-adress | trim',
-    image: '.listentry-img@style',
-    link: '.shariff@data-url',
-    description: '.listentry-extras | trim',
-  },
-  normalize: normalize,
-  filter: applyBlacklist,
-  activeTester: checkIfListingIsActive,
-};
-export const init = (sourceConfig, blacklist) => {
-  config.enabled = sourceConfig.enabled;
-  config.url = sourceConfig.url;
-  appliedBlackList = blacklist || [];
-};
-export const metaInformation = {
-  name: 'Regionalimmobilien24',
-  baseUrl: 'https://www.regionalimmobilien24.de/',
-  id: 'regionalimmobilien24',
-};
-export { config };

lib/provider/sparkasse.js

@@ -1,46 +0,0 @@
-import { isOneOf, buildHash } from '../utils.js';
-import checkIfListingIsActive from '../services/listings/listingActiveTester.js';
-let appliedBlackList = [];
-
-function normalize(o) {
-  const originalId = o.id.split('/').pop().replace('.html', '');
-  const id = buildHash(originalId, o.price);
-  const size = o.size?.replace(' Wohnfläche', '') ?? null;
-  const title = o.title || 'No title available';
-  const link = o.link != null ? `https://immobilien.sparkasse.de${o.link}` : config.url;
-  return Object.assign(o, { id, size, title, link });
-}
-function applyBlacklist(o) {
-  const titleNotBlacklisted = !isOneOf(o.title, appliedBlackList);
-  const descNotBlacklisted = !isOneOf(o.description, appliedBlackList);
-  return titleNotBlacklisted && descNotBlacklisted;
-}
-const config = {
-  url: null,
-  crawlContainer: '.estate-list-item-row',
-  sortByDateParam: 'sortBy=date_desc',
-  waitForSelector: 'body',
-  crawlFields: {
-    id: 'div[data-testid="estate-link"] a@href',
-    title: 'h3 | trim',
-    price: '.estate-list-price | trim',
-    size: '.estate-mainfact:first-child span | trim',
-    address: 'h6 | trim',
-    image: '.estate-list-item-image-container img@src',
-    link: 'div[data-testid="estate-link"] a@href',
-  },
-  normalize: normalize,
-  filter: applyBlacklist,
-  activeTester: checkIfListingIsActive,
-};
-export const init = (sourceConfig, blacklist) => {
-  config.enabled = sourceConfig.enabled;
-  config.url = sourceConfig.url;
-  appliedBlackList = blacklist || [];
-};
-export const metaInformation = {
-  name: 'Sparkasse Immobilien',
-  baseUrl: 'https://immobilien.sparkasse.de/',
-  id: 'sparkasse',
-};
-export { config };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fredy",
-  "version": "14.0.0",
+  "version": "12.2.2",
   "description": "[F]ind [R]eal [E]states [d]amn eas[y].",
   "scripts": {
     "prepare": "husky",
@@ -62,7 +62,7 @@
     "@visactor/react-vchart": "^2.0.5",
     "@visactor/vchart": "^2.0.5",
     "@visactor/vchart-semi-theme": "^1.12.2",
-    "@vitejs/plugin-react": "5.0.4",
+    "@vitejs/plugin-react": "5.0.3",
     "better-sqlite3": "^12.4.1",
     "body-parser": "2.2.0",
     "cheerio": "^1.1.2",
@@ -82,8 +82,8 @@
     "query-string": "9.3.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-router": "7.9.3",
-    "react-router-dom": "7.9.3",
+    "react-router": "7.9.2",
+    "react-router-dom": "7.9.2",
     "restana": "5.1.0",
     "semver": "^7.7.2",
     "serve-static": "2.2.0",
@@ -97,7 +97,7 @@
     "@babel/eslint-parser": "7.28.4",
     "@babel/preset-env": "7.28.3",
     "@babel/preset-react": "7.27.1",
-    "chai": "6.2.0",
+    "chai": "6.0.1",
     "eslint": "9.36.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-react": "7.37.5",
@@ -105,7 +105,7 @@
     "history": "5.3.0",
     "husky": "9.1.7",
     "less": "4.4.1",
-    "lint-staged": "16.2.3",
+    "lint-staged": "16.2.1",
     "mocha": "11.7.2",
     "nodemon": "^3.1.10",
     "prettier": "3.6.2"

test/provider/immonet.test.js

@@ -8,30 +8,31 @@ describe('#immonet testsuite()', () => {
   after(() => {
     similarityCache.stopCacheCleanup();
   });
-
+  provider.init(providerConfig.immonet, [], []);
   it('should test immonet provider', async () => {
     const Fredy = await mockFredy();
-    provider.init(providerConfig.immonet, [], []);
+    return await new Promise((resolve) => {
+      const fredy = new Fredy(provider.config, null, provider.metaInformation.id, 'immonet', similarityCache);
+      fredy.execute().then((listing) => {
+        expect(listing).to.be.a('array');
+        const notificationObj = get();
+        expect(notificationObj).to.be.a('object');
+        expect(notificationObj.serviceName).to.equal('immonet');
+        notificationObj.payload.forEach((notify) => {
+          /** check the actual structure **/
+          expect(notify.id).to.be.a('string');
+          expect(notify.price).to.be.a('string');
+          expect(notify.size).to.be.a('string');
+          expect(notify.title).to.be.a('string');
+          expect(notify.link).to.be.a('string');
+          expect(notify.address).to.be.a('string');
 
-    const fredy = new Fredy(provider.config, null, provider.metaInformation.id, 'immonet', similarityCache);
-    const listing = await fredy.execute();
-
-    expect(listing).to.be.a('array');
-    const notificationObj = get();
-    expect(notificationObj).to.be.a('object');
-    expect(notificationObj.serviceName).to.equal('immonet');
-    notificationObj.payload.forEach((notify) => {
-      /** check the actual structure **/
-      expect(notify.id).to.be.a('string');
-      expect(notify.price).to.be.a('string');
-      expect(notify.size).to.be.a('string');
-      expect(notify.title).to.be.a('string');
-      expect(notify.link).to.be.a('string');
-      expect(notify.address).to.be.a('string');
-      /** check the values if possible **/
-      expect(notify.size).that.does.include('m²');
-      expect(notify.title).to.be.not.empty;
-      expect(notify.address).to.be.not.empty;
+          expect(notify.size).that.does.include('m²');
+          expect(notify.title).to.be.not.empty;
+          expect(notify.address).to.be.not.empty;
+        });
+        resolve();
+      });
     });
   });
 });

test/provider/immowelt.test.js

@@ -8,32 +8,33 @@ describe('#immowelt testsuite()', () => {
   after(() => {
     similarityCache.stopCacheCleanup();
   });
-
   it('should test immowelt provider', async () => {
     const Fredy = await mockFredy();
     provider.init(providerConfig.immowelt, [], []);
-
-    const fredy = new Fredy(provider.config, null, provider.metaInformation.id, 'immowelt', similarityCache);
-    const listing = await fredy.execute();
-
-    expect(listing).to.be.a('array');
-    const notificationObj = get();
-    expect(notificationObj).to.be.a('object');
-    expect(notificationObj.serviceName).to.equal('immowelt');
-    notificationObj.payload.forEach((notify) => {
-      /** check the actual structure **/
-      expect(notify.id).to.be.a('string');
-      expect(notify.price).to.be.a('string');
-      expect(notify.title).to.be.a('string');
-      expect(notify.link).to.be.a('string');
-      expect(notify.address).to.be.a('string');
-      /** check the values if possible **/
-      if (notify.size != null && notify.size.trim().toLowerCase() !== 'k.a.') {
-        expect(notify.size).that.does.include('m²');
-      }
-      expect(notify.title).to.be.not.empty;
-      expect(notify.link).that.does.include('https://www.immowelt.de');
-      expect(notify.address).to.be.not.empty;
+    return await new Promise((resolve) => {
+      const fredy = new Fredy(provider.config, null, provider.metaInformation.id, 'immowelt', similarityCache);
+      fredy.execute().then((listing) => {
+        expect(listing).to.be.a('array');
+        const notificationObj = get();
+        expect(notificationObj).to.be.a('object');
+        expect(notificationObj.serviceName).to.equal('immowelt');
+        notificationObj.payload.forEach((notify) => {
+          /** check the actual structure **/
+          expect(notify.id).to.be.a('string');
+          expect(notify.price).to.be.a('string');
+          expect(notify.title).to.be.a('string');
+          expect(notify.link).to.be.a('string');
+          expect(notify.address).to.be.a('string');
+          /** check the values if possible **/
+          if (notify.size != null && notify.size.trim().toLowerCase() !== 'k.a.') {
+            expect(notify.size).that.does.include('m²');
+          }
+          expect(notify.title).to.be.not.empty;
+          expect(notify.link).that.does.include('https://www.immowelt.de');
+          expect(notify.address).to.be.not.empty;
+        });
+        resolve();
+      });
     });
   });
 });

test/provider/mcMakler.test.js

@@ -1,37 +0,0 @@
-import * as similarityCache from '../../lib/services/similarity-check/similarityCache.js';
-import { get } from '../mocks/mockNotification.js';
-import { mockFredy, providerConfig } from '../utils.js';
-import { expect } from 'chai';
-import * as provider from '../../lib/provider/mcMakler.js';
-
-describe('#mcMakler testsuite()', () => {
-  after(() => {
-    similarityCache.stopCacheCleanup();
-  });
-
-  it('should test mcMakler provider', async () => {
-    const Fredy = await mockFredy();
-    provider.init(providerConfig.mcMakler, []);
-
-    const fredy = new Fredy(provider.config, null, provider.metaInformation.id, 'mcMakler', similarityCache);
-    const listing = await fredy.execute();
-
-    expect(listing).to.be.a('array');
-    const notificationObj = get();
-    expect(notificationObj).to.be.a('object');
-    expect(notificationObj.serviceName).to.equal('mcMakler');
-    notificationObj.payload.forEach((notify) => {
-      /** check the actual structure **/
-      expect(notify.id).to.be.a('string');
-      expect(notify.price).to.be.a('string');
-      expect(notify.size).to.be.a('string');
-      expect(notify.title).to.be.a('string');
-      expect(notify.link).to.be.a('string');
-      expect(notify.address).to.be.a('string');
-      /** check the values if possible **/
-      expect(notify.size).that.does.include('m²');
-      expect(notify.title).to.be.not.empty;
-      expect(notify.address).to.be.not.empty;
-    });
-  });
-});

test/provider/regionalimmobilien24.test.js

@@ -1,43 +0,0 @@
-import * as similarityCache from '../../lib/services/similarity-check/similarityCache.js';
-import { get } from '../mocks/mockNotification.js';
-import { mockFredy, providerConfig } from '../utils.js';
-import { expect } from 'chai';
-import * as provider from '../../lib/provider/regionalimmobilien24.js';
-
-describe('#regionalimmobilien24 testsuite()', () => {
-  after(() => {
-    similarityCache.stopCacheCleanup();
-  });
-
-  it('should test regionalimmobilien24 provider', async () => {
-    const Fredy = await mockFredy();
-    provider.init(providerConfig.regionalimmobilien24, []);
-
-    const fredy = new Fredy(
-      provider.config,
-      null,
-      provider.metaInformation.id,
-      'regionalimmobilien24',
-      similarityCache,
-    );
-    const listing = await fredy.execute();
-
-    expect(listing).to.be.a('array');
-    const notificationObj = get();
-    expect(notificationObj).to.be.a('object');
-    expect(notificationObj.serviceName).to.equal('regionalimmobilien24');
-    notificationObj.payload.forEach((notify) => {
-      /** check the actual structure **/
-      expect(notify.id).to.be.a('string');
-      expect(notify.price).to.be.a('string');
-      expect(notify.size).to.be.a('string');
-      expect(notify.title).to.be.a('string');
-      expect(notify.link).to.be.a('string');
-      expect(notify.address).to.be.a('string');
-      /** check the values if possible **/
-      expect(notify.size).that.does.include('m²');
-      expect(notify.title).to.be.not.empty;
-      expect(notify.address).to.be.not.empty;
-    });
-  });
-});

test/provider/sparkasse.test.js

@@ -1,37 +0,0 @@
-import * as similarityCache from '../../lib/services/similarity-check/similarityCache.js';
-import { get } from '../mocks/mockNotification.js';
-import { mockFredy, providerConfig } from '../utils.js';
-import { expect } from 'chai';
-import * as provider from '../../lib/provider/sparkasse.js';
-
-describe('#sparkasse testsuite()', () => {
-  after(() => {
-    similarityCache.stopCacheCleanup();
-  });
-
-  it('should test sparkasse provider', async () => {
-    const Fredy = await mockFredy();
-    provider.init(providerConfig.sparkasse, []);
-
-    const fredy = new Fredy(provider.config, null, provider.metaInformation.id, 'sparkasse', similarityCache);
-    const listing = await fredy.execute();
-
-    expect(listing).to.be.a('array');
-    const notificationObj = get();
-    expect(notificationObj).to.be.a('object');
-    expect(notificationObj.serviceName).to.equal('sparkasse');
-    notificationObj.payload.forEach((notify) => {
-      /** check the actual structure **/
-      expect(notify.id).to.be.a('string');
-      expect(notify.price).to.be.a('string');
-      expect(notify.size).to.be.a('string');
-      expect(notify.title).to.be.a('string');
-      expect(notify.link).to.be.a('string');
-      expect(notify.address).to.be.a('string');
-      /** check the values if possible **/
-      expect(notify.size).that.does.include('m²');
-      expect(notify.title).to.be.not.empty;
-      expect(notify.address).to.be.not.empty;
-    });
-  });
-});

test/provider/testProvider.json

@@ -28,22 +28,10 @@
     "url": "https://www.kleinanzeigen.de/s-immobilien/duesseldorf/anzeige:angebote/wohnung/k0c195l2068r5",
     "enabled": true
   },
-  "mcMakler": {
-    "url": "https://www.mcmakler.de/immobilien/results?placeId=62649&search=Leipzig%252C+Sachsen&propertyTypes=APARTMENT&page=0",
-    "enabled": true
-  },
   "neubauKompass": {
     "url": "https://www.neubaukompass.de/neubau-immobilien/duesseldorf-region/eigentumswohnung/",
     "enabled": true
   },
-  "regionalimmobilien24": {
-    "url": "https://www.regionalimmobilien24.de/rostock/rostock/kaufen/haus/-/-/-/?rd=5",
-    "enabled": true
-  },
-  "sparkasse": {
-    "url": "https://immobilien.sparkasse.de/immobilien/treffer?marketingType=buy&objectType=flat&perimeter=10&usageType=residential&zipCityEstateId=62782__Hamburg",
-    "enabled": true
-  },
   "wgGesucht": {
     "url": "https://www.wg-gesucht.de/wg-zimmer-in-Duesseldorf.30.0.1.0.html",
     "enabled": true

ui/src/App.jsx

@@ -8,19 +8,18 @@ import UserMutator from './views/user/mutation/UserMutator';
 import JobInsight from './views/jobs/insights/JobInsight.jsx';
 import { useActions, useSelector } from './services/state/store';
 import { Routes, Route, Navigate } from 'react-router-dom';
+import Logout from './components/logout/Logout';
+import Logo from './components/logo/Logo';
+import Menu from './components/menu/Menu';
 import Login from './views/login/Login';
 import Users from './views/user/Users';
 import Jobs from './views/jobs/Jobs';
 
 import './App.less';
 import TrackingModal from './components/tracking/TrackingModal.jsx';
-import { Banner, Divider } from '@douyinfe/semi-ui';
+import { Banner } from '@douyinfe/semi-ui';
 import VersionBanner from './components/version/VersionBanner.jsx';
 import Listings from './views/listings/Listings.jsx';
-import Navigation from './components/navigation/Navigation.jsx';
-import { Layout } from '@douyinfe/semi-ui';
-import FredyFooter from './components/footer/FredyFooter.jsx';
-import ProcessingTimes from './views/jobs/ProcessingTimes.jsx';
 
 export default function FredyApp() {
   const actions = useActions();
@@ -28,7 +27,6 @@ export default function FredyApp() {
   const currentUser = useSelector((state) => state.user.currentUser);
   const versionUpdate = useSelector((state) => state.versionUpdate.versionUpdate);
   const settings = useSelector((state) => state.generalSettings.settings);
-  const processingTimes = useSelector((state) => state.jobs.processingTimes);
 
   useEffect(() => {
     async function init() {
@@ -52,7 +50,6 @@ export default function FredyApp() {
   };
 
   const isAdmin = () => currentUser != null && currentUser.isAdmin;
-  const { Footer, Sider, Content } = Layout;
 
   return loading ? null : needsLogin() ? (
     <Routes>
@@ -60,80 +57,71 @@ export default function FredyApp() {
       <Route path="*" element={<Navigate to="/login" replace />} />
     </Routes>
   ) : (
-    <Layout className="app">
-      <Layout className="app">
-        <Sider>
-          <Navigation isAdmin={isAdmin()} />
-        </Sider>
-        <Content>
-          {versionUpdate?.newVersion && <VersionBanner />}
-          {settings.demoMode && (
-            <>
-              <Banner
-                fullMode={true}
-                type="info"
-                bordered
-                closeIcon={null}
-                description="You're currently viewing the demo version of Fredy. Jobs won't scrape websites, and any changes you make will be reverted at midnight."
-              />
-              <br />
-            </>
-          )}
-          {settings.analyticsEnabled === null && !settings.demoMode && <TrackingModal />}
-          {processingTimes != null && <ProcessingTimes processingTimes={processingTimes} />}
-          <Divider />
-          <div className="app__content">
-            <Routes>
-              <Route path="/403" element={<InsufficientPermission />} />
-              <Route path="/jobs/new" element={<JobMutation />} />
-              <Route path="/jobs/edit/:jobId" element={<JobMutation />} />
-              <Route path="/jobs/insights/:jobId" element={<JobInsight />} />
-              <Route path="/jobs" element={<Jobs />} />
-              <Route path="/listings" element={<Listings />} />
+    <div className="app">
+      <div className="app__container">
+        <Logout />
+        <Logo width={190} white />
+        <Menu isAdmin={isAdmin()} />
+        {versionUpdate?.newVersion && <VersionBanner />}
+        {settings.demoMode && (
+          <>
+            <Banner
+              fullMode={true}
+              type="info"
+              bordered
+              closeIcon={null}
+              description="You're currently viewing the demo version of Fredy. Jobs won't scrape websites, and any changes you make will be reverted at midnight."
+            />
+            <br />
+          </>
+        )}
+        {settings.analyticsEnabled === null && !settings.demoMode && <TrackingModal />}
+        <Routes>
+          <Route path="/403" element={<InsufficientPermission />} />
+          <Route path="/jobs/new" element={<JobMutation />} />
+          <Route path="/jobs/edit/:jobId" element={<JobMutation />} />
+          <Route path="/jobs/insights/:jobId" element={<JobInsight />} />
+          <Route path="/jobs" element={<Jobs />} />
+          <Route path="/listings" element={<Listings />} />
 
-              {/* Permission-aware routes */}
-              <Route
-                path="/users/new"
-                element={
-                  <PermissionAwareRoute currentUser={currentUser}>
-                    <UserMutator />
-                  </PermissionAwareRoute>
-                }
-              />
-              <Route
-                path="/users/edit/:userId"
-                element={
-                  <PermissionAwareRoute currentUser={currentUser}>
-                    <UserMutator />
-                  </PermissionAwareRoute>
-                }
-              />
-              <Route
-                path="/users"
-                element={
-                  <PermissionAwareRoute currentUser={currentUser}>
-                    <Users />
-                  </PermissionAwareRoute>
-                }
-              />
-              <Route
-                path="/generalSettings"
-                element={
-                  <PermissionAwareRoute currentUser={currentUser}>
-                    <GeneralSettings />
-                  </PermissionAwareRoute>
-                }
-              />
+          {/* Permission-aware routes */}
+          <Route
+            path="/users/new"
+            element={
+              <PermissionAwareRoute currentUser={currentUser}>
+                <UserMutator />
+              </PermissionAwareRoute>
+            }
+          />
+          <Route
+            path="/users/edit/:userId"
+            element={
+              <PermissionAwareRoute currentUser={currentUser}>
+                <UserMutator />
+              </PermissionAwareRoute>
+            }
+          />
+          <Route
+            path="/users"
+            element={
+              <PermissionAwareRoute currentUser={currentUser}>
+                <Users />
+              </PermissionAwareRoute>
+            }
+          />
+          <Route
+            path="/generalSettings"
+            element={
+              <PermissionAwareRoute currentUser={currentUser}>
+                <GeneralSettings />
+              </PermissionAwareRoute>
+            }
+          />
 
-              <Route path="/" element={<Navigate to="/jobs" replace />} />
-            </Routes>
-          </div>
-        </Content>
-      </Layout>
-      <Footer>
-        <FredyFooter />
-      </Footer>
-    </Layout>
+          <Route path="/" element={<Navigate to="/jobs" replace />} />
+        </Routes>
+      </div>
+    </div>
   );
 }
 

ui/src/App.less

@@ -1,9 +1,12 @@
 .app {
-  height: 100%;
+  display: flex;
+  flex-direction: column;
   width: 100%;
 
-  &__content {
-    margin: 1rem;
+  &__container {
+    padding: 1rem 1rem;
+    color: var(--semi-color-text-0);
+    background-color: #232429;
   }
 }
 

ui/src/components/footer/FredyFooter.jsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import './FredyFooter.less';
-import { useSelector } from '../../services/state/store.js';
-import { Typography } from '@douyinfe/semi-ui';
-
-export default function FredyFooter() {
-  const { Text } = Typography;
-  const version = useSelector((state) => state.versionUpdate.versionUpdate);
-  return (
-    <div className="fredyFooter">
-      <div className="fredyFooter__version">
-        <Text type="tertiary">Fredy V{version?.localFredyVersion || 'N/A'}</Text>
-      </div>
-      <div className="fredyFooter__copyRight">
-        <Text link={{ href: 'https://github.com/orangecoding', target: '_blank' }}>Made with ❤️</Text>
-      </div>
-    </div>
-  );
-}

ui/src/components/footer/FredyFooter.less

@@ -1,17 +0,0 @@
-.fredyFooter {
-  background:rgb(53, 54, 60);
-  color: white;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  &__version {
-    padding-left: .5rem;
-    font-size: small;
-
-  }
-  &__copyRight {
-    padding-right: 1rem;
-
-  }
-}

ui/src/components/logout/Logout.jsx

@@ -2,22 +2,19 @@ import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
 import { xhrPost } from '../../services/xhr';
 import { IconUser } from '@douyinfe/semi-icons';
-
-const Logout = function Logout({ text }) {
+const Logout = function Logout() {
   return (
-    <div>
-      <Button
-        icon={<IconUser />}
-        type="danger"
-        theme="solid"
-        onClick={async () => {
-          await xhrPost('/api/login/logout');
-          location.reload();
-        }}
-      >
-        {text && 'Logout'}
-      </Button>
-    </div>
+    <Button
+      icon={<IconUser />}
+      type="danger"
+      theme="solid"
+      onClick={async () => {
+        await xhrPost('/api/login/logout');
+        location.reload();
+      }}
+    >
+      Logout
+    </Button>
   );
 };
 

ui/src/components/menu/Menu.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Tabs, TabPane } from '@douyinfe/semi-ui';
+
+import { useLocation } from 'react-router-dom';
+import { IconUser, IconTerminal, IconSetting, IconArchive } from '@douyinfe/semi-icons';
+import './Menu.less';
+
+function parsePathName(name) {
+  const split = name.split('/').filter((s) => s.length !== 0);
+  return '/' + split[0];
+}
+
+const TopMenu = function TopMenu({ isAdmin }) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  return (
+    <Tabs className="menu" type="line" activeKey={parsePathName(location.pathname)} onTabClick={(key) => navigate(key)}>
+      <TabPane
+        itemKey="/jobs"
+        tab={
+          <span>
+            <IconTerminal />
+            Jobs
+          </span>
+        }
+      />
+      <TabPane
+        itemKey="/listings"
+        tab={
+          <span>
+            <IconArchive />
+            Found listings
+          </span>
+        }
+      />
+
+      {isAdmin && (
+        <TabPane
+          itemKey="/users"
+          tab={
+            <span>
+              <IconUser />
+              User
+            </span>
+          }
+        />
+      )}
+
+      {isAdmin && (
+        <TabPane
+          itemKey="/generalSettings"
+          tab={
+            <span>
+              <IconSetting />
+              Settings
+            </span>
+          }
+        />
+      )}
+    </Tabs>
+  );
+};
+
+export default TopMenu;

ui/src/components/menu/Menu.less

@@ -0,0 +1,3 @@
+.menu {
+  margin-top: 3rem;
+}

ui/src/components/navigation/Navigate.less

@@ -1,9 +0,0 @@
-.navigate {
-  &__logout_Button {
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    display: flex;
-
-  }
-}

ui/src/components/navigation/Navigation.jsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { Nav } from '@douyinfe/semi-ui';
-import { IconUser, IconStar, IconSetting, IconTerminal } from '@douyinfe/semi-icons';
-import logoWhite from '../../assets/logo_white.png';
-import Logout from '../logout/Logout.jsx';
-import { useLocation, useNavigate } from 'react-router-dom';
-
-import './Navigate.less';
-import { useScreenWidth } from '../../hooks/screenWidth.js';
-
-export default function Navigation({ isAdmin }) {
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  const width = useScreenWidth();
-  const collapsed = width <= 850;
-
-  const items = [
-    { itemKey: '/jobs', text: 'Jobs', icon: <IconTerminal /> },
-    { itemKey: '/listings', text: 'Found Listings', icon: <IconStar /> },
-  ];
-
-  if (isAdmin) {
-    items.push({ itemKey: '/users', text: 'User Management', icon: <IconUser /> });
-    items.push({ itemKey: '/generalSettings', text: 'Settings', icon: <IconSetting /> });
-  }
-
-  function parsePathName(name) {
-    const split = name.split('/').filter((s) => s.length !== 0);
-    return '/' + split[0];
-  }
-
-  return (
-    <Nav
-      style={{ height: '100%', width: collapsed ? '' : '13rem' }}
-      items={items}
-      isCollapsed={collapsed}
-      selectedKeys={[parsePathName(location.pathname)]}
-      onSelect={(key) => {
-        navigate(key.itemKey);
-      }}
-      header={<img src={logoWhite} width="180" alt="Fredy Logo" />}
-      footer={
-        <div className="navigate__logout_Button">
-          <Logout text={!collapsed} />
-        </div>
-      }
-    />
-  );
-}

ui/src/components/segment/SegmentPart.jsx

@@ -8,7 +8,6 @@ export const SegmentPart = ({ name, Icon = null, children, helpText }) => {
 
   return (
     <Card
-      className="segmentParts"
       title={
         <Meta title={name} description={helpText} avatar={Icon == null ? null : <Icon size="extra-extra-small" />} />
       }

ui/src/components/segment/SegmentParts.less

@@ -1,7 +1,4 @@
 .segmentParts {
   border: 1px solid #323232 !important;
   border-radius: 5px !important;
-  color: rgba(var(--semi-grey-8), 1);
-  background: rgb(53, 54, 60);
-  margin: 2rem;
 }

ui/src/components/table/JobTable.jsx

@@ -10,7 +10,7 @@ const empty = (
   <Empty
     image={<IllustrationNoResult />}
     darkModeImage={<IllustrationNoResultDark />}
-    description="No jobs available. Why don't you create one? ;)"
+    description={'No jobs available.'}
   />
 );
 
@@ -32,7 +32,7 @@ export default function JobTable({ jobs = {}, onJobRemoval, onJobStatusChanged,
           dataIndex: 'name',
         },
         {
-          title: 'Listings',
+          title: 'Findings',
           dataIndex: 'numberOfFoundListings',
           render: (value) => {
             return value || 0;

ui/src/components/table/ListingsTable.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { Table, Popover, Input, Descriptions, Tag, Image, Empty } from '@douyinfe/semi-ui';
+import { Table, Popover, Input, Descriptions, Tag, Image } from '@douyinfe/semi-ui';
 import { useActions, useSelector } from '../../services/state/store.js';
 import { IconClose, IconSearch, IconTick } from '@douyinfe/semi-icons';
 import * as timeService from '../../services/time/timeService.js';
@@ -8,7 +8,6 @@ import no_image from '../../assets/no_image.jpg';
 
 import './ListingsTable.less';
 import { format } from '../../services/time/timeService.js';
-import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
 
 const columns = [
   {
@@ -66,7 +65,7 @@ const columns = [
   },
   {
     title: 'Price',
-    width: 110,
+    width: 100,
     dataIndex: 'price',
     sorter: true,
     render: (text) => text + ' €',
@@ -91,19 +90,11 @@ const columns = [
   },
 ];
 
-const empty = (
-  <Empty
-    image={<IllustrationNoResult />}
-    darkModeImage={<IllustrationNoResultDark />}
-    description="No listings available."
-  />
-);
-
 export default function ListingsTable() {
   const tableData = useSelector((state) => state.listingsTable);
   const actions = useActions();
   const [page, setPage] = useState(1);
-  const pageSize = 10;
+  const pageSize = 15;
   const [sortData, setSortData] = useState({});
   const [filter, setFilter] = useState(null);
 
@@ -167,7 +158,6 @@ export default function ListingsTable() {
       />
       <Table
         rowKey="id"
-        empty={empty}
         hideExpandedColumn={false}
         sticky={{ top: 5 }}
         columns={columns}

ui/src/components/version/VersionBanner.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Collapse, Descriptions } from '@douyinfe/semi-ui';
+import { Banner, Descriptions } from '@douyinfe/semi-ui';
 import { useSelector } from '../../services/state/store.js';
 import { MarkdownRender } from '@douyinfe/semi-ui';
 
@@ -8,9 +8,12 @@ import './VersionBanner.less';
 export default function VersionBanner() {
   const versionUpdate = useSelector((state) => state.versionUpdate.versionUpdate);
   return (
-    <Collapse>
-      <Collapse.Panel header="A new version of Fredy is available" itemKey="1" className="versionBanner">
-        <div className="versionBanner__content">
+    <Banner
+      className="versionBanner"
+      type="success"
+      icon={null}
+      description={
+        <div style={{ overflow: 'auto' }}>
           <p>A new version of Fredy is available. Update now to take advantage of the latest features and bug fixes.</p>
           <Descriptions row size="small">
             <Descriptions.Item itemKey="Your Version">{versionUpdate.localFredyVersion}</Descriptions.Item>
@@ -26,9 +29,9 @@ export default function VersionBanner() {
               <small>Release Notes</small>
             </b>
           </p>
-          <MarkdownRender raw={versionUpdate.body} />
+          <MarkdownRender raw={versionUpdate.body} style={{ height: '200px' }} />
         </div>
-      </Collapse.Panel>
-    </Collapse>
+      }
+    />
   );
 }

ui/src/components/version/VersionBanner.less

@@ -1,7 +1,3 @@
 .versionBanner {
-  background: rgba(var(--semi-teal-1), 1);
-
-  &__content {
-    overflow: auto;
-  }
+  margin-bottom: 1rem;
 }

ui/src/hooks/screenWidth.js

@@ -1,23 +0,0 @@
-import { useState, useEffect } from 'react';
-
-export function useScreenWidth() {
-  const [width, setWidth] = useState(window.innerWidth);
-
-  useEffect(() => {
-    let timeoutId;
-
-    const handleResize = () => {
-      clearTimeout(timeoutId);
-      timeoutId = setTimeout(() => setWidth(window.innerWidth), 100);
-    };
-
-    window.addEventListener('resize', handleResize);
-
-    return () => {
-      clearTimeout(timeoutId);
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
-  return width;
-}

ui/src/views/generalSettings/GeneralSettings.jsx

@@ -4,6 +4,7 @@ import { useActions, useSelector } from '../../services/state/store';
 
 import { Divider, TimePicker, Button, Checkbox, Input } from '@douyinfe/semi-ui';
 import { InputNumber } from '@douyinfe/semi-ui';
+import Headline from '../../components/headline/Headline';
 import { xhrPost } from '../../services/xhr';
 import { SegmentPart } from '../../components/segment/SegmentPart';
 import { Banner, Toast } from '@douyinfe/semi-ui';
@@ -124,6 +125,7 @@ const GeneralSettings = function GeneralSettings() {
     <div>
       {!loading && (
         <React.Fragment>
+          <Headline text="General Settings" />
           <div>
             <SegmentPart
               name="Interval"
@@ -184,7 +186,7 @@ const GeneralSettings = function GeneralSettings() {
             <Divider margin="1rem" />
             <SegmentPart
               name="Working hours"
-              helpText="During these hours, Fredy will search for new apartments. If nothing is configured, Fredy will search around the clock."
+              helpText="During this hours, Fredy will search for new apartments. If nothing is configured, Fredy will search around the clock."
               Icon={IconCalendar}
             >
               <div className="generalSettings__timePickerContainer">

ui/src/views/jobs/Jobs.jsx

@@ -4,12 +4,14 @@ import JobTable from '../../components/table/JobTable';
 import { useSelector, useActions } from '../../services/state/store';
 import { xhrDelete, xhrPut } from '../../services/xhr';
 import { useNavigate } from 'react-router-dom';
+import ProcessingTimes from './ProcessingTimes';
 import { Button, Toast } from '@douyinfe/semi-ui';
 import { IconPlusCircle } from '@douyinfe/semi-icons';
 import './Jobs.less';
 
 export default function Jobs() {
   const jobs = useSelector((state) => state.jobs.jobs);
+  const processingTimes = useSelector((state) => state.jobs.processingTimes);
   const navigate = useNavigate();
   const actions = useActions();
 
@@ -36,6 +38,7 @@ export default function Jobs() {
   return (
     <div>
       <div>
+        {processingTimes != null && <ProcessingTimes processingTimes={processingTimes} />}
         <Button
           type="primary"
           icon={<IconPlusCircle />}

ui/src/views/jobs/Jobs.less

@@ -1,8 +1,7 @@
 .jobs {
   &__newButton {
     margin-top: 1rem !important;
-    float: left;
+    float: right;
     margin-bottom: 1rem !important;
-    margin-left: 1rem;
   }
 }

ui/src/views/jobs/ProcessingTimes.jsx

@@ -1,56 +1,47 @@
 import React from 'react';
 import { format } from '../../services/time/timeService';
-import { Button, Card, Col, Row, Toast } from '@douyinfe/semi-ui';
+import { Button, Descriptions, Toast } from '@douyinfe/semi-ui';
 import { IconPlayCircle } from '@douyinfe/semi-icons';
 import { xhrPost } from '../../services/xhr.js';
 
-import './ProsessingTimes.less';
-
-function InfoCard({ title, value }) {
-  return (
-    <Card style={{ maxWidth: '13rem', margin: '1rem', background: 'rgb(53, 54, 60)' }} title={title}>
-      {value}
-    </Card>
-  );
-}
-
 export default function ProcessingTimes({ processingTimes = {} }) {
   if (Object.keys(processingTimes).length === 0) {
     return null;
   }
   return (
-    <Row>
-      <Col span={6}>
-        <InfoCard title="Processing Interval" value={`${processingTimes.interval} min`} />
-      </Col>
-      {processingTimes.lastRun && (
-        <>
-          <Col span={6}>
-            <InfoCard title="Last run" value={format(processingTimes.lastRun)} />
-          </Col>
-          <Col span={6}>
-            <InfoCard title="Next run" value={format(processingTimes.lastRun + processingTimes.interval * 60000)} />
-          </Col>
-        </>
-      )}
-      <Col span={6}>
-        <InfoCard
-          title="Find Listings Now"
-          value={
-            <Button
-              size="small"
-              icon={<IconPlayCircle />}
-              aria-label="Start now"
-              onClick={async () => {
-                await xhrPost('/api/jobs/startAll', null);
-                Toast.success('Successfully triggered Fredy search.');
-              }}
-            >
-              Search now
-            </Button>
-          }
-        />
-      </Col>
-    </Row>
+    <>
+      <Descriptions
+        row
+        size="small"
+        style={{
+          backgroundColor: '#35363c',
+          borderRadius: '4px',
+          padding: '10px',
+        }}
+      >
+        <Descriptions.Item itemKey="Processing Interval">{processingTimes.interval} min</Descriptions.Item>
+        {processingTimes.lastRun && (
+          <>
+            <Descriptions.Item itemKey="Last run">{format(processingTimes.lastRun)}</Descriptions.Item>
+            <Descriptions.Item itemKey="Next run">
+              {format(processingTimes.lastRun + processingTimes.interval * 60000)}
+            </Descriptions.Item>
+            <Descriptions.Item itemKey="Find Listings now">
+              <Button
+                size="small"
+                icon={<IconPlayCircle />}
+                aria-label="Start now"
+                onClick={async () => {
+                  await xhrPost('/api/jobs/startAll', null);
+                  Toast.success('Successfully triggered Fredy search.');
+                }}
+              >
+                Search now
+              </Button>
+            </Descriptions.Item>
+          </>
+        )}
+      </Descriptions>
+    </>
   );
 }

ui/src/views/jobs/ProsessingTimes.less

@@ -1,5 +0,0 @@
-.processingTimes {
-  display: flex;
-  gap: 1rem;
-  justify-content: space-between;
-}

ui/src/views/jobs/mutation/JobMutation.jsx

@@ -89,7 +89,7 @@ export default function JobMutator() {
         />
       )}
 
-      <Headline text={jobToBeEdit ? 'Edit Job' : 'Create new Job'} />
+      <Headline text={jobToBeEdit ? 'Edit a Job' : 'Create a new Job'} />
       <form>
         <SegmentPart name="Name">
           <Input

ui/src/views/user/Users.jsx

@@ -52,7 +52,7 @@ const Users = function Users() {
             icon={<IconPlus />}
             onClick={() => navigate('/users/new')}
           >
-            New User
+            Create new User
           </Button>
 
           <UserTable

ui/src/views/user/Users.less

@@ -1,8 +1,7 @@
 .users {
   &__newButton {
     margin-top: 1rem !important;
-    float: left;
+    float: right;
     margin-bottom: 1rem !important;
-    margin-left: 1rem;
   }
 }

yarn.lock

@@ -1428,10 +1428,10 @@
     "@resvg/resvg-js-win32-ia32-msvc" "2.4.1"
     "@resvg/resvg-js-win32-x64-msvc" "2.4.1"
 
-"@rolldown/pluginutils@1.0.0-beta.38":
-  version "1.0.0-beta.38"
-  resolved "https://registry.yarnpkg.com/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.38.tgz#95253608c4629eb2a5f3d656009ac9ba031eb292"
-  integrity sha512-N/ICGKleNhA5nc9XXQG/kkKHJ7S55u0x0XUJbbkmdCnFuoRkM1Il12q9q0eX19+M7KKUEPw/daUPIRnxhcxAIw==
+"@rolldown/pluginutils@1.0.0-beta.35":
+  version "1.0.0-beta.35"
+  resolved "https://registry.yarnpkg.com/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.35.tgz#1a477e7742b154b67519d40e4fc17485de338e7a"
+  integrity sha512-slYrCpoxJUqzFDDNlvrOYRazQUNRvWPjXA17dAOISY3rDMxX6k8K4cj2H+hEYMHF81HO3uNd5rHVigAWRM5dSg==
 
 "@rollup/rollup-android-arm-eabi@4.49.0":
   version "4.49.0"
@@ -1895,15 +1895,15 @@
     "@turf/invariant" "^6.5.0"
     eventemitter3 "^4.0.7"
 
-"@vitejs/plugin-react@5.0.4":
-  version "5.0.4"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-5.0.4.tgz#d642058e89c5b712655c8cbd13482f5813519602"
-  integrity sha512-La0KD0vGkVkSk6K+piWDKRUyg8Rl5iAIKRMH0vMJI0Eg47bq1eOxmoObAaQG37WMW9MSyk7Cs8EIWwJC1PtzKA==
+"@vitejs/plugin-react@5.0.3":
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-5.0.3.tgz#182ea45406d89e55b4e35c92a4a8c2c8388726c8"
+  integrity sha512-PFVHhosKkofGH0Yzrw1BipSedTH68BFF8ZWy1kfUpCtJcouXXY0+racG8sExw7hw0HoX36813ga5o3LTWZ4FUg==
   dependencies:
     "@babel/core" "^7.28.4"
     "@babel/plugin-transform-react-jsx-self" "^7.27.1"
     "@babel/plugin-transform-react-jsx-source" "^7.27.1"
-    "@rolldown/pluginutils" "1.0.0-beta.38"
+    "@rolldown/pluginutils" "1.0.0-beta.35"
     "@types/babel__core" "^7.20.5"
     react-refresh "^0.17.0"
 
@@ -2362,10 +2362,10 @@ ccount@^2.0.0:
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.1.tgz#17a3bf82302e0870d6da43a01311a8bc02a3ecf5"
   integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==
 
-chai@6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/chai/-/chai-6.2.0.tgz#181bca6a219cddb99c3eeefb82483800ffa550ce"
-  integrity sha512-aUTnJc/JipRzJrNADXVvpVqi6CO0dn3nx4EVPxijri+fj3LUUDyZQOgVeW54Ob3Y1Xh9Iz8f+CgaCl8v0mn9bA==
+chai@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/chai/-/chai-6.0.1.tgz#88c2b4682fb56050647e222d2cf9d6772f2607b3"
+  integrity sha512-/JOoU2//6p5vCXh00FpNgtlw0LjvhGttaWc+y7wpW9yjBm3ys0dI8tSKZxIOgNruz5J0RleccatSIC3uxEZP0g==
 
 chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.2"
@@ -4559,10 +4559,10 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
-lint-staged@16.2.3:
-  version "16.2.3"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-16.2.3.tgz#790866221d75602510507b5be40b2c7963715960"
-  integrity sha512-1OnJEESB9zZqsp61XHH2fvpS1es3hRCxMplF/AJUDa8Ho8VrscYDIuxGrj3m8KPXbcWZ8fT9XTMUhEQmOVKpKw==
+lint-staged@16.2.1:
+  version "16.2.1"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-16.2.1.tgz#bb82da8ce10059296b220f321980f0ee1ce40c28"
+  integrity sha512-KMeYmH9wKvHsXdUp+z6w7HN3fHKHXwT1pSTQTYxB9kI6ekK1rlL3kLZEoXZCppRPXFK9PFW/wfQctV7XUqMrPQ==
   dependencies:
     commander "^14.0.1"
     listr2 "^9.0.4"
@@ -6121,17 +6121,17 @@ react-resizable@^3.0.5:
     prop-types "15.x"
     react-draggable "^4.0.3"
 
-react-router-dom@7.9.3:
-  version "7.9.3"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-7.9.3.tgz#67ab1655f67b9b6108fe20ed3d4881b53dccf87a"
-  integrity sha512-1QSbA0TGGFKTAc/aWjpfW/zoEukYfU4dc1dLkT/vvf54JoGMkW+fNA+3oyo2gWVW1GM7BxjJVHz5GnPJv40rvg==
+react-router-dom@7.9.2:
+  version "7.9.2"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-7.9.2.tgz#2bb35d226ca23329f4e39c8f86d1db26ee4fdf26"
+  integrity sha512-pagqpVJnjZOfb+vIM23eTp7Sp/AAJjOgaowhP1f1TWOdk5/W8Uk8d/M/0wfleqx7SgjitjNPPsKeCZE1hTSp3w==
   dependencies:
-    react-router "7.9.3"
+    react-router "7.9.2"
 
-react-router@7.9.3:
-  version "7.9.3"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.9.3.tgz#f2d5ff6181851de3df3acb4e7364fce0dee5fba2"
-  integrity sha512-4o2iWCFIwhI/eYAIL43+cjORXYn/aRQPgtFRRZb3VzoyQ5Uej0Bmqj7437L97N9NJW4wnicSwLOLS+yCXfAPgg==
+react-router@7.9.2:
+  version "7.9.2"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.9.2.tgz#f424a14f87e4d7b5b268ce3647876e9504e4fca6"
+  integrity sha512-i2TPp4dgaqrOqiRGLZmqh2WXmbdFknUyiCRmSKs0hf6fWXkTKg5h56b+9F22NbGRAMxjYfqQnpi63egzD2SuZA==
   dependencies:
     cookie "^1.0.1"
     set-cookie-parser "^2.6.0"