Ui-Redesign (#203)

* new ui design

* improving ui design

* adding new screenshots

* upgrade dependencies

.gitignore

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

Dockerfile

@@ -31,6 +31,8 @@ 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,15 +21,13 @@ 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, and more** when new
+instantly via **Slack, Telegram, Email, ntfy, discord and more** when new
 listings appear.
 
 With a modern architecture, Fredy provides a **clean Web UI**, removes
 duplicates across platforms, and stores results so you never see the
 same listing twice.
 
-
-
 ------------------------------------------------------------------------
 
 ## ✨ Key Features
@@ -37,7 +35,7 @@ same listing twice.
 -   🏠 Scrapes **ImmoScout24, Immowelt, Immonet, eBay Kleinanzeigen,
     WG-Gesucht**
 -   ⚡ Instant notifications: Slack, Telegram, Email (SendGrid,
-    Mailjet), ntfy
+    Mailjet), ntfy, discord 
 -   🔎 Uses the **ImmoScout Mobile API** (reverse engineered)
 -   🌍 Runs anywhere: Docker, Node.js, self-hosted
 -   🖥️ Intuitive **Web UI** to manage searches
@@ -109,9 +107,9 @@ yarn run start:frontend  # in another terminal
 
 ## 📸 Screenshots
 
-| 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) |
+| 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) |
 
 ------------------------------------------------------------------------
 
@@ -131,7 +129,7 @@ picks up the newest listings first.
 ### Adapter 📡
 
 An **adapter** is the channel through which Fredy notifies you (Slack,
-Telegram, Email, ntfy, ...).\
+Telegram, Email, ntfy, discord ...).\
 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: fredy/fredy
+    image: ghcr.io/orangecoding/fredy
     # map existing config and database
     volumes:
       - ./conf:/conf

lib/api/routes/versionRouter.js

@@ -1,13 +1,21 @@
 import restana from 'restana';
 import fetch from 'node-fetch';
 import { getPackageVersion } from '../../utils.js';
+import semver from 'semver';
 
 const service = restana();
 const versionRouter = service.newRouter();
 
 versionRouter.get('/', async (req, res) => {
   const versionPayload = await getCurrentVersionFromGithub();
-  res.body = versionPayload == null ? { newVersion: false } : versionPayload;
+  const localFredyVersion = await getPackageVersion();
+  res.body =
+    versionPayload == null
+      ? {
+          newVersion: false,
+          localFredyVersion,
+        }
+      : versionPayload;
   res.send();
 });
 
@@ -15,7 +23,7 @@ async function getCurrentVersionFromGithub() {
   const raw = await fetch('https://api.github.com/repos/orangecoding/fredy/releases/latest');
   const data = await raw.json();
   const localFredyVersion = await getPackageVersion();
-  if (localFredyVersion === data.tag_name) {
+  if (data.tag_name == null || semver.gte(localFredyVersion, data.tag_name)) {
     return null;
   }
   return {

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}\nink: ${newListing.link}`;
+    const message = `Address: ${newListing.address}\nSize: ${newListing.size}\nPrice: ${newListing.price}\nLink: ${newListing.link}`;
     return fetch(server, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },

lib/notification/adapter/discord_webhook.js

@@ -0,0 +1,130 @@
+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

@@ -0,0 +1,4 @@
+### 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: {
+    body: JSON.stringify({
       channel: channel,
       text: message,
-    },
+    }),
   });
 };
 export const config = {

lib/notification/adapter/ntfy.js

@@ -15,11 +15,17 @@ Size: ${newListing.size == null ? 'N/A' : newListing.size.replace(/2m/g, '$m^2$'
 Price: ${newListing.price}
 Link: ${newListing.link}`;
 
+    const sanitizeHeaderValue = (value) =>
+      String(value ?? '')
+        .replace(/[\r\n]+/g, ' ')
+        .replace(/[^\x20-\x7E]/g, ' ')
+        .trim();
+
     const headers = {
-      Title: newListing.title,
-      Priority: String(priority),
-      Tags: `${serviceName},${jobName}`,
-      Click: newListing.link,
+      Title: sanitizeHeaderValue(newListing.title),
+      Priority: sanitizeHeaderValue(priority),
+      Tags: sanitizeHeaderValue(`${serviceName},${jobName}`),
+      Click: sanitizeHeaderValue(newListing.link),
     };
 
     if (newListing.image && typeof newListing.image === 'string') {

lib/provider/immonet.js

@@ -29,6 +29,7 @@ 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,8 +26,9 @@ 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-card-pictureBox-opacity"] img@src',
+    image: 'div[data-testid="cardmfe-picture-box-opacity-layer-test-id"] img@src',
   },
   normalize: normalize,
   filter: applyBlacklist,

lib/provider/mcMakler.js

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,46 @@
+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 };

lib/utils.js

@@ -109,11 +109,22 @@ function timeStringToMs(timeString, now) {
 }
 
 /**
- * Check whether current time is within configured working hours, or no hours are set.
- * If working hours are missing or incomplete, returns true.
- * @param {{workingHours?: {from?: string, to?: string}}} config
- * @param {number} now - Epoch ms
- * @returns {boolean}
+ * Determine whether the given timestamp is within the configured working hours, or return true when the window is not set.
+ * - If workingHours is missing or either 'from' or 'to' is empty/null, returns true.
+ * - Supports windows that cross midnight (e.g., from '23:00' to '06:00').
+ *
+ * Time parsing is based on the local timezone of the running process.
+ *
+ * @param {{workingHours?: {from?: string|null, to?: string|null}}} config - Configuration object containing working hours in 'HH:mm' format.
+ * @param {number} now - Epoch milliseconds to evaluate.
+ * @returns {boolean} True when execution is allowed at 'now'.
+ * @example
+ * // Same-day window
+ * duringWorkingHoursOrNotSet({ workingHours: { from: '08:00', to: '17:00' } }, someTime);
+ * @example
+ * // Window crossing midnight
+ * // For { from: '05:00', to: '00:30' } → 23:00 => true, 01:00 => false, 06:00 => true
+ * duringWorkingHoursOrNotSet({ workingHours: { from: '05:00', to: '00:30' } }, Date.now());
  */
 function duringWorkingHoursOrNotSet(config, now) {
   const { workingHours } = config;
@@ -122,7 +133,20 @@ function duringWorkingHoursOrNotSet(config, now) {
   }
   const toDate = timeStringToMs(workingHours.to, now);
   const fromDate = timeStringToMs(workingHours.from, now);
-  return fromDate <= now && toDate >= now;
+
+  // If parsing fails (e.g., malformed time), be lenient and allow.
+  if (isNaN(toDate) || isNaN(fromDate)) {
+    return true;
+  }
+
+  if (toDate >= fromDate) {
+    // Same-day window (e.g., 08:00 - 17:00)
+    return now >= fromDate && now <= toDate;
+  }
+
+  // Window crosses midnight (e.g., 05:00 -> 00:30 next day)
+  // Accept if we are after 'from' today OR before 'to' today (which represents next day's cutoff).
+  return now >= fromDate || now <= toDate;
 }
 
 /**
@@ -244,13 +268,13 @@ function sleep(ms) {
 }
 
 /**
- * returns a random into between start and end
- * @param a start int
- * @param b max int
- * @returns {*}
+ * Return a random integer between min and max (inclusive).
+ * @param {number} min - Minimum integer value.
+ * @param {number} max - Maximum integer value.
+ * @returns {number} A random integer N where min <= N <= max.
  */
-function randomBetween(a, b) {
-  return Math.floor(Math.random() * (b - a + 1)) + a;
+function randomBetween(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 
 // Call refreshConfig() from the application entrypoint during startup to populate config.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fredy",
-  "version": "12.2.0",
+  "version": "14.0.0",
   "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.3",
+    "@vitejs/plugin-react": "5.0.4",
     "better-sqlite3": "^12.4.1",
     "body-parser": "2.2.0",
     "cheerio": "^1.1.2",
@@ -82,9 +82,10 @@
     "query-string": "9.3.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-router": "7.9.2",
-    "react-router-dom": "7.9.2",
+    "react-router": "7.9.3",
+    "react-router-dom": "7.9.3",
     "restana": "5.1.0",
+    "semver": "^7.7.2",
     "serve-static": "2.2.0",
     "slack": "11.0.2",
     "vite": "7.1.7",
@@ -96,7 +97,7 @@
     "@babel/eslint-parser": "7.28.4",
     "@babel/preset-env": "7.28.3",
     "@babel/preset-react": "7.27.1",
-    "chai": "6.0.1",
+    "chai": "6.2.0",
     "eslint": "9.36.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-react": "7.37.5",
@@ -104,7 +105,7 @@
     "history": "5.3.0",
     "husky": "9.1.7",
     "less": "4.4.1",
-    "lint-staged": "16.2.0",
+    "lint-staged": "16.2.3",
     "mocha": "11.7.2",
     "nodemon": "^3.1.10",
     "prettier": "3.6.2"

test/provider/immonet.test.js

@@ -8,31 +8,30 @@ describe('#immonet testsuite()', () => {
   after(() => {
     similarityCache.stopCacheCleanup();
   });
-  provider.init(providerConfig.immonet, [], []);
+
   it('should test immonet provider', async () => {
     const Fredy = await mockFredy();
-    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');
+    provider.init(providerConfig.immonet, [], []);
 
-          expect(notify.size).that.does.include('m²');
-          expect(notify.title).to.be.not.empty;
-          expect(notify.address).to.be.not.empty;
-        });
-        resolve();
-      });
+    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;
     });
   });
 });

test/provider/immowelt.test.js

@@ -8,33 +8,32 @@ describe('#immowelt testsuite()', () => {
   after(() => {
     similarityCache.stopCacheCleanup();
   });
+
   it('should test immowelt provider', async () => {
     const Fredy = await mockFredy();
     provider.init(providerConfig.immowelt, [], []);
-    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();
-      });
+
+    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;
     });
   });
 });

test/provider/mcMakler.test.js

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,37 @@
+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,10 +28,22 @@
     "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

test/provider/utils.test.js

@@ -8,6 +8,7 @@ const fakeWorkingHoursConfig = (from, to) => ({
     from,
   },
 });
+
 describe('utils', () => {
   describe('#isOneOf()', () => {
     it('should be false', () => {
@@ -33,5 +34,19 @@ describe('utils', () => {
     it('should be true if only from is set', () => {
       expect(duringWorkingHoursOrNotSet(fakeWorkingHoursConfig('12:00', null), 1622026740000)).to.be.true;
     });
+    it('should handle working hours that cross midnight (e.g., 05:00 → 00:30)', () => {
+      const cfg = fakeWorkingHoursConfig('05:00', '00:30');
+      const mkTs = (h, m = 0) => {
+        const d = new Date();
+        d.setHours(h);
+        d.setMinutes(m);
+        d.setSeconds(0);
+        d.setMilliseconds(0);
+        return d.getTime();
+      };
+      expect(duringWorkingHoursOrNotSet(cfg, mkTs(23, 0))).to.be.true; // 23:00 => within window
+      expect(duringWorkingHoursOrNotSet(cfg, mkTs(1, 0))).to.be.false; // 01:00 => outside window
+      expect(duringWorkingHoursOrNotSet(cfg, mkTs(6, 0))).to.be.true; // 06:00 => within window
+    });
   });
 });

ui/src/App.jsx

@@ -8,18 +8,19 @@ 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 } from '@douyinfe/semi-ui';
+import { Banner, Divider } 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();
@@ -27,6 +28,7 @@ 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() {
@@ -50,6 +52,7 @@ export default function FredyApp() {
   };
 
   const isAdmin = () => currentUser != null && currentUser.isAdmin;
+  const { Footer, Sider, Content } = Layout;
 
   return loading ? null : needsLogin() ? (
     <Routes>
@@ -57,71 +60,80 @@ export default function FredyApp() {
       <Route path="*" element={<Navigate to="/login" replace />} />
     </Routes>
   ) : (
-    <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 />} />
+    <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 />} />
 
-          {/* 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>
-    </div>
+              <Route path="/" element={<Navigate to="/jobs" replace />} />
+            </Routes>
+          </div>
+        </Content>
+      </Layout>
+      <Footer>
+        <FredyFooter />
+      </Footer>
+    </Layout>
   );
 }
 

ui/src/App.less

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

ui/src/components/footer/FredyFooter.jsx

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,17 @@
+.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,19 +2,22 @@ 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() {
+
+const Logout = function Logout({ text }) {
   return (
-    <Button
-      icon={<IconUser />}
-      type="danger"
-      theme="solid"
-      onClick={async () => {
-        await xhrPost('/api/login/logout');
-        location.reload();
-      }}
-    >
-      Logout
-    </Button>
+    <div>
+      <Button
+        icon={<IconUser />}
+        type="danger"
+        theme="solid"
+        onClick={async () => {
+          await xhrPost('/api/login/logout');
+          location.reload();
+        }}
+      >
+        {text && 'Logout'}
+      </Button>
+    </div>
   );
 };
 

ui/src/components/menu/Menu.jsx

@@ -1,65 +0,0 @@
-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 />
-              General
-            </span>
-          }
-        />
-      )}
-    </Tabs>
-  );
-};
-
-export default TopMenu;

ui/src/components/menu/Menu.less

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

ui/src/components/navigation/Navigate.less

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

ui/src/components/navigation/Navigation.jsx

@@ -0,0 +1,50 @@
+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,6 +8,7 @@ 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,4 +1,7 @@
 .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.'}
+    description="No jobs available. Why don't you create one? ;)"
   />
 );
 
@@ -32,7 +32,7 @@ export default function JobTable({ jobs = {}, onJobRemoval, onJobStatusChanged,
           dataIndex: 'name',
         },
         {
-          title: 'Findings',
+          title: 'Listings',
           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 } from '@douyinfe/semi-ui';
+import { Table, Popover, Input, Descriptions, Tag, Image, Empty } 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,6 +8,7 @@ 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 = [
   {
@@ -65,7 +66,7 @@ const columns = [
   },
   {
     title: 'Price',
-    width: 100,
+    width: 110,
     dataIndex: 'price',
     sorter: true,
     render: (text) => text + ' €',
@@ -90,11 +91,19 @@ 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 = 15;
+  const pageSize = 10;
   const [sortData, setSortData] = useState({});
   const [filter, setFilter] = useState(null);
 
@@ -158,6 +167,7 @@ export default function ListingsTable() {
       />
       <Table
         rowKey="id"
+        empty={empty}
         hideExpandedColumn={false}
         sticky={{ top: 5 }}
         columns={columns}

ui/src/components/version/VersionBanner.jsx

@@ -1,18 +1,16 @@
 import React from 'react';
-import { Banner, Descriptions } from '@douyinfe/semi-ui';
+import { Collapse, Descriptions } from '@douyinfe/semi-ui';
 import { useSelector } from '../../services/state/store.js';
+import { MarkdownRender } from '@douyinfe/semi-ui';
 
 import './VersionBanner.less';
 
 export default function VersionBanner() {
   const versionUpdate = useSelector((state) => state.versionUpdate.versionUpdate);
   return (
-    <Banner
-      className="versionBanner"
-      type="success"
-      icon={null}
-      description={
-        <div>
+    <Collapse>
+      <Collapse.Panel header="A new version of Fredy is available" itemKey="1" className="versionBanner">
+        <div className="versionBanner__content">
           <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>
@@ -28,16 +26,9 @@ export default function VersionBanner() {
               <small>Release Notes</small>
             </b>
           </p>
-          <pre>{stripFullChangelog(versionUpdate.body)}</pre>
+          <MarkdownRender raw={versionUpdate.body} />
         </div>
-      }
-    />
+      </Collapse.Panel>
+    </Collapse>
   );
-
-  function stripFullChangelog(text) {
-    if (text == null) {
-      return '';
-    }
-    return text.replace(/(?:\r?\n)\*\*Full Changelog\*\*[\s\S]*$/u, '');
-  }
 }

ui/src/components/version/VersionBanner.less

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

ui/src/hooks/screenWidth.js

@@ -0,0 +1,23 @@
+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,7 +4,6 @@ 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';
@@ -125,7 +124,6 @@ const GeneralSettings = function GeneralSettings() {
     <div>
       {!loading && (
         <React.Fragment>
-          <Headline text="General Settings" />
           <div>
             <SegmentPart
               name="Interval"
@@ -186,7 +184,7 @@ const GeneralSettings = function GeneralSettings() {
             <Divider margin="1rem" />
             <SegmentPart
               name="Working hours"
-              helpText="During this hours, Fredy will search for new apartments. If nothing is configured, Fredy will search around the clock."
+              helpText="During these 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,14 +4,12 @@ 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();
 
@@ -38,7 +36,6 @@ export default function Jobs() {
   return (
     <div>
       <div>
-        {processingTimes != null && <ProcessingTimes processingTimes={processingTimes} />}
         <Button
           type="primary"
           icon={<IconPlusCircle />}

ui/src/views/jobs/Jobs.less

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

ui/src/views/jobs/ProcessingTimes.jsx

@@ -1,47 +1,56 @@
 import React from 'react';
 import { format } from '../../services/time/timeService';
-import { Button, Descriptions, Toast } from '@douyinfe/semi-ui';
+import { Button, Card, Col, Row, 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 (
-    <>
-      <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>
-    </>
+    <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>
   );
 }

ui/src/views/jobs/ProsessingTimes.less

@@ -0,0 +1,5 @@
+.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 a Job' : 'Create a new Job'} />
+      <Headline text={jobToBeEdit ? 'Edit Job' : 'Create 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')}
           >
-            Create new User
+            New User
           </Button>
 
           <UserTable

ui/src/views/user/Users.less

@@ -1,7 +1,8 @@
 .users {
   &__newButton {
     margin-top: 1rem !important;
-    float: right;
+    float: left;
     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.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==
+"@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==
 
 "@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.3":
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-5.0.3.tgz#182ea45406d89e55b4e35c92a4a8c2c8388726c8"
-  integrity sha512-PFVHhosKkofGH0Yzrw1BipSedTH68BFF8ZWy1kfUpCtJcouXXY0+racG8sExw7hw0HoX36813ga5o3LTWZ4FUg==
+"@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==
   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.35"
+    "@rolldown/pluginutils" "1.0.0-beta.38"
     "@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.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/chai/-/chai-6.0.1.tgz#88c2b4682fb56050647e222d2cf9d6772f2607b3"
-  integrity sha512-/JOoU2//6p5vCXh00FpNgtlw0LjvhGttaWc+y7wpW9yjBm3ys0dI8tSKZxIOgNruz5J0RleccatSIC3uxEZP0g==
+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==
 
 chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.2"
@@ -2538,16 +2538,16 @@ comma-separated-tokens@^2.0.0:
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz#4e89c9458acb61bc8fef19f4529973b2392839ee"
   integrity sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==
 
-commander@14.0.1:
-  version "14.0.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-14.0.1.tgz#2f9225c19e6ebd0dc4404dd45821b2caa17ea09b"
-  integrity sha512-2JkV3gUZUVrbNA+1sjBOYLsMZ5cEEl8GTFP2a4AVz5hvasAMCQ1D2l2le/cX+pV4N6ZU17zjUahLpIXRrnWL8A==
-
 commander@2:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^14.0.1:
+  version "14.0.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-14.0.1.tgz#2f9225c19e6ebd0dc4404dd45821b2caa17ea09b"
+  integrity sha512-2JkV3gUZUVrbNA+1sjBOYLsMZ5cEEl8GTFP2a4AVz5hvasAMCQ1D2l2le/cX+pV4N6ZU17zjUahLpIXRrnWL8A==
+
 compute-scroll-into-view@^1.0.20:
   version "1.0.20"
   resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz#1768b5522d1172754f5d0c9b02de3af6be506a43"
@@ -4559,20 +4559,20 @@ 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.0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-16.2.0.tgz#ea7157bf007bdb50d2bb0559bc91c8e77d71c84b"
-  integrity sha512-spdYSOCQ2MdZ9CM1/bu/kDmaYGsrpNOeu1InFFV8uhv14x6YIubGxbCpSmGILFoxkiheNQPDXSg5Sbb5ZuVnug==
+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==
   dependencies:
-    commander "14.0.1"
-    listr2 "9.0.4"
-    micromatch "4.0.8"
-    nano-spawn "1.0.3"
-    pidtree "0.6.0"
-    string-argv "0.3.2"
-    yaml "2.8.1"
+    commander "^14.0.1"
+    listr2 "^9.0.4"
+    micromatch "^4.0.8"
+    nano-spawn "^1.0.3"
+    pidtree "^0.6.0"
+    string-argv "^0.3.2"
+    yaml "^2.8.1"
 
-listr2@9.0.4:
+listr2@^9.0.4:
   version "9.0.4"
   resolved "https://registry.yarnpkg.com/listr2/-/listr2-9.0.4.tgz#2916e633ae6e09d1a3f981172937ac1c5a8fa64f"
   integrity sha512-1wd/kpAdKRLwv7/3OKC8zZ5U8e/fajCfWMxacUvB79S5nLrYGPtUI/8chMQhn3LQjsRVErTb9i1ECAwW0ZIHnQ==
@@ -5271,7 +5271,7 @@ micromark@^4.0.0:
     micromark-util-symbol "^2.0.0"
     micromark-util-types "^2.0.0"
 
-micromatch@4.0.8:
+micromatch@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
   integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
@@ -5401,7 +5401,7 @@ ms@^2.1.1, ms@^2.1.3:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-nano-spawn@1.0.3:
+nano-spawn@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/nano-spawn/-/nano-spawn-1.0.3.tgz#ef8d89a275eebc8657e67b95fc312a6527a05b8d"
   integrity sha512-jtpsQDetTnvS2Ts1fiRdci5rx0VYws5jGyC+4IYOTnIQ/wwdf6JdomlHBwqC3bJYOvaKu0C2GSZ1A60anrYpaA==
@@ -5817,7 +5817,7 @@ picomatch@^4.0.3:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.3.tgz#796c76136d1eead715db1e7bad785dedd695a042"
   integrity sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==
 
-pidtree@0.6.0:
+pidtree@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c"
   integrity sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==
@@ -6121,17 +6121,17 @@ react-resizable@^3.0.5:
     prop-types "15.x"
     react-draggable "^4.0.3"
 
-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==
+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==
   dependencies:
-    react-router "7.9.2"
+    react-router "7.9.3"
 
-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==
+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==
   dependencies:
     cookie "^1.0.1"
     set-cookie-parser "^2.6.0"
@@ -6835,7 +6835,7 @@ streamx@^2.15.0, streamx@^2.21.0:
   optionalDependencies:
     bare-events "^2.2.0"
 
-string-argv@0.3.2:
+string-argv@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
@@ -7583,7 +7583,7 @@ yallist@^3.0.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
-yaml@2.8.1:
+yaml@^2.8.1:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.8.1.tgz#1870aa02b631f7e8328b93f8bc574fac5d6c4d79"
   integrity sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==