Calculating the distance (#255)

* migra for distance

* adding distance calculator

* adding ability to store home address

* improve distance calculation

* calculating distance

* show distance in grid view

* upgrading dependencies

* moving to react 19

* ability to clone a job

* fixing tests

* polishing

ui/src/App.jsx

@@ -8,6 +8,7 @@ import React, { useEffect } from 'react';
 import InsufficientPermission from './components/permission/InsufficientPermission';
 import PermissionAwareRoute from './components/permission/PermissionAwareRoute';
 import GeneralSettings from './views/generalSettings/GeneralSettings';
+import UserSettings from './views/userSettings/UserSettings';
 import JobMutation from './views/jobs/mutation/JobMutation';
 import UserMutator from './views/user/mutation/UserMutator';
 import { useActions, useSelector } from './services/state/store';
@@ -18,12 +19,12 @@ 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, Divider } from '@douyinfe/semi-ui-19';
 import VersionBanner from './components/version/VersionBanner.jsx';
 import Listings from './views/listings/Listings.jsx';
 import MapView from './views/listings/Map.jsx';
 import Navigation from './components/navigation/Navigation.jsx';
-import { Layout } from '@douyinfe/semi-ui';
+import { Layout } from '@douyinfe/semi-ui-19';
 import FredyFooter from './components/footer/FredyFooter.jsx';
 import WatchlistManagement from './views/listings/management/WatchlistManagement.jsx';
 import Dashboard from './views/dashboard/Dashboard.jsx';
@@ -123,6 +124,14 @@ export default function FredyApp() {
                   </PermissionAwareRoute>
                 }
               />
+              <Route
+                path="/userSettings"
+                element={
+                  <PermissionAwareRoute currentUser={currentUser} adminOnly={false}>
+                    <UserSettings />
+                  </PermissionAwareRoute>
+                }
+              />
               <Route
                 path="/generalSettings"
                 element={

ui/src/Index.jsx

@@ -7,8 +7,8 @@ import React from 'react';
 
 import { HashRouter } from 'react-router-dom';
 import { createRoot } from 'react-dom/client';
-import en_US from '@douyinfe/semi-ui/lib/es/locale/source/en_US';
-import { LocaleProvider } from '@douyinfe/semi-ui';
+import en_US from '@douyinfe/semi-ui-19/lib/es/locale/source/en_US';
+import { LocaleProvider } from '@douyinfe/semi-ui-19';
 import App from './App';
 import './Index.less';
 

ui/src/components/footer/FredyFooter.jsx

@@ -6,7 +6,7 @@
 import React from 'react';
 import './FredyFooter.less';
 import { useSelector } from '../../services/state/store.js';
-import { Typography } from '@douyinfe/semi-ui';
+import { Typography } from '@douyinfe/semi-ui-19';
 
 export default function FredyFooter() {
   const { Text } = Typography;

ui/src/components/grid/jobs/JobGrid.jsx

@@ -20,12 +20,13 @@ import {
   Pagination,
   Toast,
   Empty,
-} from '@douyinfe/semi-ui';
+} from '@douyinfe/semi-ui-19';
 import {
   IconAlertTriangle,
   IconDelete,
   IconDescend2,
   IconEdit,
+  IconCopy,
   IconPlayCircle,
   IconBriefcase,
   IconBell,
@@ -198,12 +199,14 @@ const JobGrid = () => {
         <div className="jobGrid__searchbar">
           <Input prefix={<IconSearch />} showClear placeholder="Search" onChange={handleFilterChange} />
           <Popover content="Filter / Sort Results" style={{ color: 'white', padding: '.5rem' }}>
-            <Button
-              icon={<IconFilter />}
-              onClick={() => {
-                setShowFilterBar(!showFilterBar);
-              }}
-            />
+            <div>
+              <Button
+                icon={<IconFilter />}
+                onClick={() => {
+                  setShowFilterBar(!showFilterBar);
+                }}
+              />
+            </div>
           </Popover>
         </div>
       </div>
@@ -287,7 +290,9 @@ const JobGrid = () => {
                           'This job has been shared with you by another user, therefor it is read-only.',
                         )}
                       >
-                        <IconAlertTriangle style={{ color: 'rgba(var(--semi-yellow-7), 1)', marginLeft: '8px' }} />
+                        <div>
+                          <IconAlertTriangle style={{ color: 'rgba(var(--semi-yellow-7), 1)', marginLeft: '8px' }} />
+                        </div>
                       </Popover>
                     )}
                   </div>
@@ -343,40 +348,59 @@ const JobGrid = () => {
 
                 <div className="jobGrid__actions">
                   <Popover content={getPopoverContent('Run Job')}>
-                    <Button
-                      type="primary"
-                      theme="solid"
-                      icon={<IconPlayCircle />}
-                      disabled={job.isOnlyShared || job.running}
-                      onClick={() => onJobRun(job.id)}
-                    />
+                    <div>
+                      <Button
+                        type="primary"
+                        theme="solid"
+                        icon={<IconPlayCircle />}
+                        disabled={job.isOnlyShared || job.running}
+                        onClick={() => onJobRun(job.id)}
+                      />
+                    </div>
                   </Popover>
                   <Popover content={getPopoverContent('Edit a Job')}>
-                    <Button
-                      type="secondary"
-                      theme="solid"
-                      icon={<IconEdit />}
-                      disabled={job.isOnlyShared}
-                      onClick={() => navigate(`/jobs/edit/${job.id}`)}
-                    />
+                    <div>
+                      <Button
+                        type="secondary"
+                        theme="solid"
+                        icon={<IconEdit />}
+                        disabled={job.isOnlyShared}
+                        onClick={() => navigate(`/jobs/edit/${job.id}`)}
+                      />
+                    </div>
+                  </Popover>
+                  <Popover content={getPopoverContent('Clone Job')}>
+                    <div>
+                      <Button
+                        type="tertiary"
+                        theme="solid"
+                        icon={<IconCopy />}
+                        disabled={job.isOnlyShared}
+                        onClick={() => navigate('/jobs/new', { state: { cloneFrom: job.id } })}
+                      />
+                    </div>
                   </Popover>
                   <Popover content={getPopoverContent('Delete all found Listings of this Job')}>
-                    <Button
-                      type="danger"
-                      theme="solid"
-                      icon={<IconDescend2 />}
-                      disabled={job.isOnlyShared}
-                      onClick={() => onListingRemoval(job.id)}
-                    />
+                    <div>
+                      <Button
+                        type="danger"
+                        theme="solid"
+                        icon={<IconDescend2 />}
+                        disabled={job.isOnlyShared}
+                        onClick={() => onListingRemoval(job.id)}
+                      />
+                    </div>
                   </Popover>
                   <Popover content={getPopoverContent('Delete Job')}>
-                    <Button
-                      type="danger"
-                      theme="solid"
-                      icon={<IconDelete />}
-                      disabled={job.isOnlyShared}
-                      onClick={() => onJobRemoval(job.id)}
-                    />
+                    <div>
+                      <Button
+                        type="danger"
+                        theme="solid"
+                        icon={<IconDelete />}
+                        disabled={job.isOnlyShared}
+                        onClick={() => onJobRemoval(job.id)}
+                      />
+                    </div>
                   </Popover>
                 </div>
               </div>

ui/src/components/grid/listings/ListingsGrid.jsx

@@ -19,7 +19,7 @@ import {
   Select,
   Popover,
   Empty,
-} from '@douyinfe/semi-ui';
+} from '@douyinfe/semi-ui-19';
 import {
   IconBriefcase,
   IconCart,
@@ -31,6 +31,7 @@ import {
   IconStarStroked,
   IconSearch,
   IconFilter,
+  IconActivity,
 } from '@douyinfe/semi-icons';
 import no_image from '../../../assets/no_image.jpg';
 import * as timeService from '../../../services/time/timeService.js';
@@ -107,12 +108,14 @@ const ListingsGrid = () => {
       <div className="listingsGrid__searchbar">
         <Input prefix={<IconSearch />} showClear placeholder="Search" onChange={handleFilterChange} />
         <Popover content="Filter / Sort Results" style={{ color: 'white', padding: '.5rem' }}>
-          <Button
-            icon={<IconFilter />}
-            onClick={() => {
-              setShowFilterBar(!showFilterBar);
-            }}
-          />
+          <div>
+            <Button
+              icon={<IconFilter />}
+              onClick={() => {
+                setShowFilterBar(!showFilterBar);
+              }}
+            />
+          </div>
         </Popover>
       </div>
       {showFilterBar && (
@@ -272,6 +275,15 @@ const ListingsGrid = () => {
                   <Text type="tertiary" size="small" icon={<IconBriefcase />}>
                     {item.provider.charAt(0).toUpperCase() + item.provider.slice(1)}
                   </Text>
+                  {item.distance_to_destination ? (
+                    <Text type="tertiary" size="small" icon={<IconActivity />}>
+                      {item.distance_to_destination} m to chosen address
+                    </Text>
+                  ) : (
+                    <Text type="tertiary" size="small" icon={<IconActivity />}>
+                      Distance cannot be calculated, provide an address
+                    </Text>
+                  )}
                 </Space>
                 <Divider margin=".6rem" />
                 <div style={{ display: 'flex', justifyContent: 'space-between' }}>

ui/src/components/headline/Headline.jsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { Typography } from '@douyinfe/semi-ui';
+import { Typography } from '@douyinfe/semi-ui-19';
 
 export default function Headline({ text, size = 3 } = {}) {
   const { Title } = Typography;

ui/src/components/logout/Logout.jsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { Button } from '@douyinfe/semi-ui';
+import { Button } from '@douyinfe/semi-ui-19';
 import { xhrPost } from '../../services/xhr';
 import { IconUser } from '@douyinfe/semi-icons';
 

ui/src/components/navigation/Navigation.jsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { Button, Nav } from '@douyinfe/semi-ui';
+import { Button, Nav } from '@douyinfe/semi-ui-19';
 import { IconStar, IconSetting, IconTerminal, IconHistogram, IconSidebar } from '@douyinfe/semi-icons';
 import logoWhite from '../../assets/logo_white.png';
 import heart from '../../assets/heart.png';
@@ -12,7 +12,6 @@ import Logout from '../logout/Logout.jsx';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import './Navigate.less';
-import { useFeature } from '../../hooks/featureHook.js';
 import { useScreenWidth } from '../../hooks/screenWidth.js';
 
 export default function Navigation({ isAdmin }) {
@@ -21,7 +20,6 @@ export default function Navigation({ isAdmin }) {
 
   const width = useScreenWidth();
   const [collapsed, setCollapsed] = useState(width <= 850);
-  const watchlistFeature = useFeature('WATCHLIST_MANAGEMENT') || false;
 
   useEffect(() => {
     if (width <= 850) {
@@ -46,11 +44,9 @@ export default function Navigation({ isAdmin }) {
   if (isAdmin) {
     const settingsItems = [
       { itemKey: '/users', text: 'User Management' },
+      { itemKey: '/userSettings', text: 'User Specific Settings' },
       { itemKey: '/generalSettings', text: 'General Settings' },
     ];
-    if (watchlistFeature) {
-      settingsItems.push({ itemKey: '/watchlistManagement', text: 'Watchlist Management' });
-    }
 
     items.push({
       itemKey: 'settings',
@@ -58,6 +54,13 @@ export default function Navigation({ isAdmin }) {
       icon: <IconSetting />,
       items: settingsItems,
     });
+  } else {
+    items.push({
+      itemKey: 'settings',
+      text: 'Settings',
+      icon: <IconSetting />,
+      items: [{ itemKey: '/userSettings', text: 'User Specific Settings' }],
+    });
   }
 
   function parsePathName(name) {

ui/src/components/segment/SegmentPart.jsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { Card } from '@douyinfe/semi-ui';
+import { Card } from '@douyinfe/semi-ui-19';
 
 import './SegmentParts.less';
 

ui/src/components/table/NotificationAdapterTable.jsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { Empty, Table, Button } from '@douyinfe/semi-ui';
+import { Empty, Table, Button } from '@douyinfe/semi-ui-19';
 import { IconDelete, IconEdit } from '@douyinfe/semi-icons';
 
 export default function NotificationAdapterTable({ notificationAdapter = [], onRemove, onEdit } = {}) {

ui/src/components/table/ProviderTable.jsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { Empty, Table, Button } from '@douyinfe/semi-ui';
+import { Empty, Table, Button } from '@douyinfe/semi-ui-19';
 import { IconDelete, IconEdit } from '@douyinfe/semi-icons';
 
 export default function ProviderTable({ providerData = [], onRemove, onEdit } = {}) {

ui/src/components/table/UserTable.jsx

@@ -7,7 +7,7 @@ import React from 'react';
 
 import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
 import { format } from '../../services/time/timeService';
-import { Table, Button, Empty } from '@douyinfe/semi-ui';
+import { Table, Button, Empty } from '@douyinfe/semi-ui-19';
 import { IconDelete, IconEdit } from '@douyinfe/semi-icons';
 
 const empty = (

ui/src/components/tracking/TrackingModal.jsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { Modal } from '@douyinfe/semi-ui';
+import { Modal } from '@douyinfe/semi-ui-19';
 import Logo from '../logo/Logo.jsx';
 import { xhrPost } from '../../services/xhr.js';
 

ui/src/components/version/VersionBanner.jsx

@@ -4,9 +4,9 @@
  */
 
 import React from 'react';
-import { Collapse, Descriptions } from '@douyinfe/semi-ui';
+import { Collapse, Descriptions } from '@douyinfe/semi-ui-19';
 import { useSelector } from '../../services/state/store.js';
-import { MarkdownRender } from '@douyinfe/semi-ui';
+import { MarkdownRender } from '@douyinfe/semi-ui-19';
 
 import './VersionBanner.less';
 

ui/src/views/dashboard/Dashboard.jsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { Button, Col, Row, Toast } from '@douyinfe/semi-ui';
+import { Button, Col, Row, Toast } from '@douyinfe/semi-ui-19';
 import {
   IconTerminal,
   IconStar,

ui/src/views/generalSettings/GeneralSettings.jsx

@@ -7,11 +7,11 @@ import React from 'react';
 
 import { useActions, useSelector } from '../../services/state/store';
 
-import { Divider, TimePicker, Button, Checkbox, Input, Modal } from '@douyinfe/semi-ui';
-import { InputNumber } from '@douyinfe/semi-ui';
+import { Divider, TimePicker, Button, Checkbox, Input, Modal } from '@douyinfe/semi-ui-19';
+import { InputNumber } from '@douyinfe/semi-ui-19';
 import { xhrPost } from '../../services/xhr';
 import { SegmentPart } from '../../components/segment/SegmentPart';
-import { Banner, Toast } from '@douyinfe/semi-ui';
+import { Banner, Toast } from '@douyinfe/semi-ui-19';
 import {
   downloadBackup as downloadBackupZip,
   precheckRestore as clientPrecheckRestore,

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

@@ -12,8 +12,8 @@ import ProviderMutator from './components/provider/ProviderMutator';
 import Headline from '../../../components/headline/Headline';
 import { useActions, useSelector } from '../../../services/state/store';
 import { xhrPost } from '../../../services/xhr';
-import { useNavigate, useParams } from 'react-router-dom';
-import { Divider, Input, Switch, Button, TagInput, Toast, Select } from '@douyinfe/semi-ui';
+import { useNavigate, useParams, useLocation } from 'react-router-dom';
+import { Divider, Input, Switch, Button, TagInput, Toast, Select } from '@douyinfe/semi-ui-19';
 import './JobMutation.less';
 import { SegmentPart } from '../../../components/segment/SegmentPart';
 import {
@@ -30,14 +30,20 @@ export default function JobMutator() {
   const jobs = useSelector((state) => state.jobsData.jobs);
   const shareableUserList = useSelector((state) => state.jobsData.shareableUserList);
   const params = useParams();
+  const location = useLocation();
 
+  const cloneFromId = location.state?.cloneFrom;
+  const jobToClone = cloneFromId ? jobs.find((job) => job.id === cloneFromId) : null;
   const jobToBeEdit = params.jobId == null ? null : jobs.find((job) => job.id === params.jobId);
 
-  const defaultBlacklist = jobToBeEdit?.blacklist || [];
-  const defaultName = jobToBeEdit?.name || null;
-  const defaultProviderData = jobToBeEdit?.provider || [];
-  const defaultNotificationAdapter = jobToBeEdit?.notificationAdapter || [];
-  const defaultEnabled = jobToBeEdit?.enabled ?? true;
+  const sourceJob = jobToBeEdit || jobToClone;
+
+  const defaultBlacklist = sourceJob?.blacklist || [];
+  const defaultName = jobToClone ? `Copy of - ${sourceJob?.name}` : sourceJob?.name || null;
+  const defaultProviderData = sourceJob?.provider || [];
+  const defaultNotificationAdapter = sourceJob?.notificationAdapter || [];
+  const defaultEnabled = sourceJob?.enabled ?? true;
+  const defaultShareWithUsers = sourceJob?.shared_with_user ?? [];
 
   const [providerToEdit, setProviderToEdit] = useState(null);
   const [providerCreationVisible, setProviderCreationVisibility] = useState(false);
@@ -47,7 +53,7 @@ export default function JobMutator() {
   const [name, setName] = useState(defaultName);
   const [blacklist, setBlacklist] = useState(defaultBlacklist);
   const [notificationAdapterData, setNotificationAdapterData] = useState(defaultNotificationAdapter);
-  const [shareWithUsers, setShareWithUsers] = useState(jobToBeEdit?.shared_with_user ?? []);
+  const [shareWithUsers, setShareWithUsers] = useState(defaultShareWithUsers);
   const [enabled, setEnabled] = useState(defaultEnabled);
   const navigate = useNavigate();
   const actions = useActions();

ui/src/views/jobs/mutation/components/notificationAdapter/NotificationAdapterMutator.jsx

@@ -9,7 +9,7 @@ import { transform } from '../../../../../services/transformer/notificationAdapt
 import { xhrPost } from '../../../../../services/xhr';
 import Help from './NotificationHelpDisplay';
 import { useSelector } from '../../../../../services/state/store';
-import { Banner, Button, Form, Modal, Select, Switch } from '@douyinfe/semi-ui';
+import { Banner, Button, Form, Modal, Select, Switch } from '@douyinfe/semi-ui-19';
 
 import './NotificationAdapterMutator.less';
 import { useScreenWidth } from '../../../../../hooks/screenWidth.js';

ui/src/views/jobs/mutation/components/notificationAdapter/NotificationHelpDisplay.jsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { Banner, MarkdownRender } from '@douyinfe/semi-ui';
+import { Banner, MarkdownRender } from '@douyinfe/semi-ui-19';
 
 export default function Help({ readme }) {
   return (

ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx

@@ -5,7 +5,7 @@
 
 import React, { useState, useEffect } from 'react';
 
-import { Banner, Modal, Select, Input } from '@douyinfe/semi-ui';
+import { Banner, Modal, Select, Input } from '@douyinfe/semi-ui-19';
 import { transform } from '../../../../../services/transformer/providerTransformer';
 import { useSelector } from '../../../../../services/state/store';
 import { IconLikeHeart } from '@douyinfe/semi-icons';

ui/src/views/listings/Map.jsx

@@ -7,7 +7,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { useSelector, useActions } from '../../services/state/store.js';
-import { Select, Space, Typography, Button, Popover, Divider, Switch, Banner } from '@douyinfe/semi-ui';
+import { Select, Space, Typography, Button, Popover, Divider, Switch, Banner } from '@douyinfe/semi-ui-19';
 import { IconFilter } from '@douyinfe/semi-icons';
 import no_image from '../../assets/no_image.jpg';
 import RangeSlider from 'react-range-slider-input';
@@ -281,12 +281,14 @@ export default function MapView() {
           </div>
         </div>
         <Popover content="Filter Results" style={{ color: 'white', padding: '.5rem' }}>
-          <Button
-            icon={<IconFilter />}
-            onClick={() => {
-              setShowFilterBar(!showFilterBar);
-            }}
-          />
+          <div>
+            <Button
+              icon={<IconFilter />}
+              onClick={() => {
+                setShowFilterBar(!showFilterBar);
+              }}
+            />
+          </div>
         </Popover>
       </div>
 

ui/src/views/listings/management/WatchlistManagement.jsx

@@ -6,7 +6,7 @@
 import React, { useState } from 'react';
 import { IconHorn } from '@douyinfe/semi-icons';
 import { SegmentPart } from '../../../components/segment/SegmentPart.jsx';
-import { Banner, Button, Checkbox, Space } from '@douyinfe/semi-ui';
+import { Banner, Button, Checkbox, Space } from '@douyinfe/semi-ui-19';
 import NotificationAdapterMutator from '../../jobs/mutation/components/notificationAdapter/NotificationAdapterMutator.jsx';
 import Headline from '../../../components/headline/Headline.jsx';
 

ui/src/views/login/Login.jsx

@@ -10,7 +10,7 @@ import Logo from '../../components/logo/Logo';
 import { xhrPost } from '../../services/xhr';
 import { useNavigate } from 'react-router-dom';
 import { useActions, useSelector } from '../../services/state/store';
-import { Input, Button, Banner, Toast } from '@douyinfe/semi-ui';
+import { Input, Button, Banner, Toast } from '@douyinfe/semi-ui-19';
 
 import './login.less';
 import { IconUser, IconLock } from '@douyinfe/semi-icons';

ui/src/views/user/UserRemovalModal.jsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { Modal } from '@douyinfe/semi-ui';
+import { Modal } from '@douyinfe/semi-ui-19';
 const UserRemovalModal = function UserRemovalModal({ onOk, onCancel }) {
   return (
     <Modal title="Removing user" visible={true} closable={false} onOk={onOk} onCancel={onCancel}>

ui/src/views/user/Users.jsx

@@ -5,11 +5,11 @@
 
 import React from 'react';
 
-import { Toast } from '@douyinfe/semi-ui';
+import { Toast } from '@douyinfe/semi-ui-19';
 import UserTable from '../../components/table/UserTable';
 import { useActions, useSelector } from '../../services/state/store';
 import { IconPlus } from '@douyinfe/semi-icons';
-import { Button } from '@douyinfe/semi-ui';
+import { Button } from '@douyinfe/semi-ui-19';
 import UserRemovalModal from './UserRemovalModal';
 import { xhrDelete } from '../../services/xhr';
 import { useNavigate } from 'react-router-dom';

ui/src/views/user/mutation/UserMutator.jsx

@@ -8,7 +8,7 @@ import React from 'react';
 import { xhrGet, xhrPost } from '../../../services/xhr';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useActions } from '../../../services/state/store';
-import { Divider, Input, Switch, Button, Toast } from '@douyinfe/semi-ui';
+import { Divider, Input, Switch, Button, Toast } from '@douyinfe/semi-ui-19';
 import './UserMutator.less';
 import { SegmentPart } from '../../../components/segment/SegmentPart';
 import { IconPlusCircle } from '@douyinfe/semi-icons';

ui/src/views/userSettings/UserSettings.jsx

@@ -0,0 +1,119 @@
+/*
+ * Copyright (c) 2026 by Christian Kellner.
+ * Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
+ */
+
+import React, { useEffect, useState, useMemo } from 'react';
+import { Divider, Button, AutoComplete, Toast, Typography, Banner } from '@douyinfe/semi-ui-19';
+import { IconSave, IconHome } from '@douyinfe/semi-icons';
+import { xhrGet, xhrPost } from '../../services/xhr';
+import { SegmentPart } from '../../components/segment/SegmentPart';
+import debounce from 'lodash/debounce';
+
+const { Title } = Typography;
+
+const UserSettings = () => {
+  const [address, setAddress] = useState('');
+  const [coords, setCoords] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [dataSource, setDataSource] = useState([]);
+
+  useEffect(() => {
+    fetchUserSettings();
+  }, []);
+
+  const fetchUserSettings = async () => {
+    try {
+      const response = await xhrGet('/api/user/settings');
+      if (response.status === 200) {
+        const homeAddress = response.json.home_address;
+        setAddress(homeAddress?.address || '');
+        setCoords(homeAddress?.coords || null);
+      }
+    } catch {
+      Toast.error('Failed to fetch user settings');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      const response = await xhrPost('/api/user/settings', { home_address: address });
+      if (response.status === 200) {
+        setCoords(response.json.coords);
+        Toast.success('Settings saved successfully');
+      } else {
+        Toast.error(response.json.error || 'Failed to save settings');
+      }
+    } catch (error) {
+      Toast.error(error.json?.error || 'Error while saving settings');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const debouncedSearch = useMemo(
+    () =>
+      debounce((value) => {
+        xhrGet(`/api/user/settings/autocomplete?q=${encodeURIComponent(value)}`)
+          .then((response) => {
+            if (response.status === 200) {
+              setDataSource(response.json);
+            }
+          })
+          .catch(() => {
+            // Silently fail for autocomplete
+          });
+      }, 300),
+    [],
+  );
+
+  const searchAddress = (value) => {
+    if (!value) {
+      setDataSource([]);
+      return;
+    }
+    debouncedSearch(value);
+  };
+
+  if (loading) {
+    return null;
+  }
+
+  return (
+    <div className="user-settings">
+      <Title heading={2}>User Specific Settings</Title>
+      <Divider />
+      <SegmentPart
+        name="Distance claculation"
+        Icon={IconHome}
+        helpText="The address you enter is used to calculate the distance between your chosen location and each listing. The distance is computed using an approximate mathematical method and is intended to give you a rough indication of commute time. If you update your address, we will recalculate the distance for all active listings."
+      >
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', maxWidth: '600px' }}>
+          <AutoComplete
+            data={dataSource}
+            value={address}
+            onChange={(v) => setAddress(v)}
+            onSearch={searchAddress}
+            placeholder="Enter your home address"
+            style={{ width: '100%' }}
+          />
+          {coords && coords.lat === -1 && (
+            <Banner type="danger" description="Address found but could not be geocoded accurately." closeIcon={null} />
+          )}
+        </div>
+      </SegmentPart>
+      <Divider />
+      <div style={{ marginTop: '20px' }}>
+        <Button icon={<IconSave />} theme="solid" type="primary" onClick={handleSave} loading={saving}>
+          Save Settings
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default UserSettings;