orangecoding · orangecoding · Sep 29, 2025 · Sep 28, 2025 · Sep 28, 2025 · Sep 29, 2025
diff --git a/README.md b/README.md
@@ -107,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) |
 
 ------------------------------------------------------------------------
 

diff --git a/doc/screenshot1.png b/doc/screenshot1.png
diff --git a/doc/screenshot2.png b/doc/screenshot2.png
diff --git a/doc/screenshot3.png b/doc/screenshot3.png
diff --git a/doc/screenshot_2.png b/doc/screenshot_2.png
diff --git a/doc/screenshot_3.png b/doc/screenshot_3.png
diff --git a/lib/api/routes/versionRouter.js b/lib/api/routes/versionRouter.js
@@ -8,7 +8,14 @@ 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();
 });
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fredy",
-  "version": "12.3.2",
+  "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,8 +82,8 @@
     "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",
@@ -97,15 +97,15 @@
     "@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",
     "esmock": "2.7.3",
     "history": "5.3.0",
     "husky": "9.1.7",
     "less": "4.4.1",
-    "lint-staged": "16.2.1",
+    "lint-staged": "16.2.3",
     "mocha": "11.7.2",
     "nodemon": "^3.1.10",
     "prettier": "3.6.2"

diff --git a/ui/src/App.jsx b/ui/src/App.jsx
@@ -8,25 +8,27 @@ 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();
   const [loading, setLoading] = React.useState(true);
   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,78 +52,88 @@ export default function FredyApp() {
   };
 
   const isAdmin = () => currentUser != null && currentUser.isAdmin;
+  const { Footer, Sider, Content } = Layout;
 
   return loading ? null : needsLogin() ? (
     <Routes>
       <Route path="/login" element={<Login />} />
       <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>
   );
 }
 

diff --git a/ui/src/App.less b/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;
   }
 }
 

diff --git a/ui/src/components/footer/FredyFooter.jsx b/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>
+  );
+}
diff --git a/ui/src/components/footer/FredyFooter.less b/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;
+
+  }
+}
diff --git a/ui/src/components/logout/Logout.jsx b/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>
   );
 };