Merge branch 'feature/project-finance' into finance-module

worklenz-frontend/src/App.tsx

@@ -39,7 +39,6 @@ const App: React.FC<{ children: React.ReactNode }> = ({ children }) => {
     <Suspense fallback={<SuspenseFallback />}>
       <ThemeWrapper>
         <RouterProvider router={router} future={{ v7_startTransition: true }} />
-        <PreferenceSelector />
       </ThemeWrapper>
     </Suspense>
   );

worklenz-frontend/src/app/routes/main-routes.tsx

@@ -34,6 +34,7 @@ const mainRoutes: RouteObject[] = [
     path: '/worklenz',
     element: <MainLayout />,
     children: [
+      { index: true, element: <Navigate to="home" replace /> },
       { path: 'home', element: <HomePage /> },
       { path: 'projects', element: <ProjectList /> },
       {

worklenz-frontend/src/components/AuthPageHeader.tsx

@@ -1,6 +1,6 @@
 import { Flex, Typography } from 'antd';
-import logo from '../assets/images/logo.png';
-import logoDark from '@/assets/images/logo-dark-mode.png';
+import logo from '@/assets/images/worklenz-light-mode.png';
+import logoDark from '@/assets/images/worklenz-dark-mode.png';
 import { useAppSelector } from '@/hooks/useAppSelector';
 
 type AuthPageHeaderProp = {

worklenz-frontend/src/components/EmptyListPlaceholder.tsx

@@ -8,7 +8,7 @@ type EmptyListPlaceholderProps = {
 };
 
 const EmptyListPlaceholder = ({
-  imageSrc = '/assets/images/empty-box.webp',
+  imageSrc = '/src/assets/images/empty-box.webp',
   imageHeight = 60,
   text,
 }: EmptyListPlaceholderProps) => {

worklenz-frontend/src/components/PreferenceSelector.tsx

@@ -1,7 +1,7 @@
 import { FloatButton, Space, Tooltip } from 'antd';
 import { FormatPainterOutlined } from '@ant-design/icons';
-import LanguageSelector from '../features/i18n/language-selector';
-import ThemeSelector from '../features/theme/ThemeSelector';
+// import LanguageSelector from '../features/i18n/language-selector';
+// import ThemeSelector from '../features/theme/ThemeSelector';
 
 const PreferenceSelector = () => {
   return (
@@ -17,7 +17,7 @@ const PreferenceSelector = () => {
               justifyContent: 'center',
             }}
           >
-            <ThemeSelector />
+            {/* <ThemeSelector /> */}
           </Space>
         </FloatButton.Group>
       </div>

worklenz-frontend/src/features/navbar/navbar-logo.tsx

@@ -1,8 +1,8 @@
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
-import logo from '@/assets/images/logo.png';
-import logoDark from '@/assets/images/logo-dark-mode.png';
+import logo from '@/assets/images/worklenz-light-mode.png';
+import logoDark from '@/assets/images/worklenz-dark-mode.png';
 
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useSelector } from 'react-redux';
@@ -20,23 +20,6 @@ const NavbarLogo = () => {
           alt={t('logoAlt')}
           style={{ width: '100%', maxWidth: 140 }}
         />
-        <span
-          style={{
-            position: 'absolute',
-            top: -1,
-            right: 0,
-            backgroundColor: '#ff5722',
-            color: 'white',
-            fontSize: '7px',
-            padding: '0px 3px',
-            borderRadius: '3px',
-            fontWeight: 'bold',
-            textTransform: 'uppercase',
-            lineHeight: '1.8',
-          }}
-        >
-          Beta
-        </span>
       </div>
     </Link>
   );

worklenz-frontend/src/features/theme/ThemeSelector.tsx

@@ -1,28 +0,0 @@
-// ThemeSelector.tsx
-import { Button } from 'antd';
-import React from 'react';
-import { useAppDispatch } from '@/hooks/useAppDispatch';
-import { useAppSelector } from '@/hooks/useAppSelector';
-import { toggleTheme } from './themeSlice';
-import { MoonOutlined, SunOutlined } from '@ant-design/icons';
-
-const ThemeSelector = () => {
-  const themeMode = useAppSelector(state => state.themeReducer.mode);
-  const dispatch = useAppDispatch();
-
-  const handleDarkModeToggle = () => {
-    dispatch(toggleTheme());
-  };
-
-  return (
-    <Button
-      type={themeMode === 'dark' ? 'primary' : 'default'}
-      icon={themeMode === 'dark' ? <SunOutlined /> : <MoonOutlined />}
-      shape="circle"
-      onClick={handleDarkModeToggle}
-      className="transition-all duration-300" // Optional: add smooth transition
-    />
-  );
-};
-
-export default ThemeSelector;

worklenz-frontend/src/lib/settings/settings-constants.ts

@@ -12,6 +12,7 @@ import {
   TeamOutlined,
   UserOutlined,
   UserSwitchOutlined,
+  BulbOutlined,
 } from '@ant-design/icons';
 import React, { ReactNode } from 'react';
 import ProfileSettings from '../../pages/settings/profile/profile-settings';
@@ -27,6 +28,7 @@ import TeamsSettings from '../../pages/settings/teams/teams-settings';
 import ChangePassword from '@/pages/settings/change-password/change-password';
 import LanguageAndRegionSettings from '@/pages/settings/language-and-region/language-and-region-settings';
 import RatecardSettings from '@/pages/settings/ratecard/ratecard-settings';
+import AppearanceSettings from '@/pages/settings/appearance/appearance-settings';
 
 // type of menu item in settings sidebar
 type SettingMenuItems = {
@@ -54,6 +56,13 @@ export const settingsItems: SettingMenuItems[] = [
     icon: React.createElement(NotificationOutlined),
     element: React.createElement(NotificationsSettings),
   },
+  {
+    key: 'appearance',
+    name: 'appearance',
+    endpoint: 'appearance',
+    icon: React.createElement(BulbOutlined),
+    element: React.createElement(AppearanceSettings),
+  },
   {
     key: 'change-password',
     name: 'change-password',

worklenz-frontend/src/pages/account-setup/account-setup.tsx

@@ -24,8 +24,8 @@ import { useDocumentTitle } from '@/hooks/useDoumentTItle';
 import { getUserSession, setSession } from '@/utils/session-helper';
 import { validateEmail } from '@/utils/validateEmail';
 import { sanitizeInput } from '@/utils/sanitizeInput';
-import logo from '@/assets/images/logo.png';
-import logoDark from '@/assets/images/logo-dark-mode.png';
+import logo from '@/assets/images/worklenz-light-mode.png';
+import logoDark from '@/assets/images/worklenz-dark-mode.png';
 
 import './account-setup.css';
 import { IAccountSetupRequest } from '@/types/project-templates/project-templates.types';

worklenz-frontend/src/pages/projects/projectView/insights/project-view-insights.tsx

@@ -17,7 +17,7 @@ import {
 import { format } from 'date-fns';
 import html2canvas from 'html2canvas';
 import jsPDF from 'jspdf';
-import logo from '@/assets/images/logo.png';
+import logo from '@/assets/images/worklenz-light-mode.png';
 import { evt_project_insights_members_visit, evt_project_insights_overview_visit, evt_project_insights_tasks_visit } from '@/shared/worklenz-analytics-events';
 import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
 

worklenz-frontend/src/pages/settings/appearance/appearance-settings.tsx

@@ -0,0 +1,44 @@
+import { Card, Divider, Flex, Switch, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { toggleTheme } from '@/features/theme/themeSlice';
+import { useDocumentTitle } from '@/hooks/useDoumentTItle';
+import { MoonOutlined, SunOutlined } from '@ant-design/icons';
+
+const AppearanceSettings = () => {
+  const { t } = useTranslation('settings/appearance');
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const dispatch = useAppDispatch();
+
+  useDocumentTitle(t('title'));
+
+  const handleThemeToggle = () => {
+    dispatch(toggleTheme());
+  };
+
+  return (
+    <Card style={{ width: '100%' }}>
+      <Flex vertical gap={4}>
+        <Flex gap={8} align="center">
+          <Switch
+            checked={themeMode === 'dark'}
+            onChange={handleThemeToggle}
+            checkedChildren={<MoonOutlined />}
+            unCheckedChildren={<SunOutlined />}
+          />
+          <Typography.Title level={4} style={{ marginBlockEnd: 0 }}>
+            {t('darkMode')}
+          </Typography.Title>
+        </Flex>
+        <Typography.Text
+          style={{ fontSize: 14, color: themeMode === 'dark' ? '#9CA3AF' : '#00000073' }}
+        >
+          {t('darkModeDescription')}
+        </Typography.Text>
+      </Flex>
+    </Card>
+  );
+};
+
+export default AppearanceSettings;