Main bkp 8 march neumorphic

index.html

@@ -20,6 +20,7 @@
     body {
       margin: 0;
     }
+      /* Fix modal positioning in the viewport */
 
     #initSpinner {
       height: 100vh;
@@ -37,6 +38,7 @@
     #hubspot-messages-iframe-container {
       color-scheme: light;
     }
+
   </style>
 
   <!-- Start of HubSpot Embed Code -->

package.json

@@ -27,6 +27,7 @@
     "echarts": "^5.5.1",
     "echarts-for-react": "^3.0.2",
     "elt-react-credit-cards": "^0.0.1",
+    "framer-motion": "^12.4.7",
     "i18next": "^23.15.1",
     "mixpanel-browser": "^2.55.1",
     "qs": "^6.13.0",
@@ -38,6 +39,7 @@
     "react-i18next": "^15.0.2",
     "react-infinite-scroll-component": "^6.1.0",
     "react-insta-stories": "^2.7.0",
+    "react-joyride": "^2.9.3",
     "react-redux": "^9.1.2",
     "react-responsive": "^10.0.0",
     "react-router-dom": "^6.26.2",

src/App.tsx

@@ -10,35 +10,23 @@ import 'typeface-lato';
 import { AppRouter } from './components/router/AppRouter';
 import { useLanguage } from './hooks/useLanguage';
 import { useThemeWatcher } from './hooks/useThemeWatcher';
-import { useAppDispatch, useAppSelector } from './hooks/reduxHooks';
+import { useAppSelector } from './hooks/reduxHooks';
 import { themeObject } from './styles/themes/themeVariables';
 import { getThemeConfig } from './styles/themeConfig';
 import { trackClicks } from './config/mixpanel';
 import { trackGAClicks } from './config/ga';
-import { reloadUserProfile } from './api/user.api';
-import { setUser } from './store/slices/userSlice';
 
 const App: React.FC = () => {
   const { language } = useLanguage();
   const theme = useAppSelector((state) => state.theme.theme);
   const user = useAppSelector(state => state.user.user);
   const currentTheme = themeObject[theme];
   const themeConfig = React.useMemo(() => getThemeConfig(currentTheme), [currentTheme]);
-  const dispatch = useAppDispatch();
-
-  useEffect(() => {
-      if (!user) return;
-
-      reloadUserProfile()
-        .then((data) => dispatch(setUser(data)))
-        .catch((err) => console.error(err));
-    }, [dispatch]);
-
 
   useEffect(() => {
     document.addEventListener('click', event => trackClicks(event, user));
     return () => document.removeEventListener('click', event => trackClicks(event, user));
-  }, [user]);
+  }, []);
 
   useEffect(() => {
     document.addEventListener('click', trackGAClicks);

src/api/apiToken.api.ts

@@ -11,6 +11,7 @@ export interface ApiTableRow {
   key: string;
   isActive: boolean;
   createdAt: Date;
+  updatedAt: Date;
 }
 
 export interface Pagination {
@@ -50,26 +51,29 @@ export const toggleApiToken = (id: number): Promise<Record<string, string>> =>
 
 export const getApiTableData = (pagination: Pagination): Promise<ApiTableData> => {
   return new Promise((res) => {
-    const noPrevData = {
+    const noPrevData: ApiTableRow = {
       id: -1,
-      key: "No API key found, please click an 'Create' button to generate one.",
+      key: "No API key found, please click on 'Create' button to generate one.",
       createdAt: new Date(),
       isActive: false,
+      updatedAt: new Date(),
     };
 
-    const addLastEntry = {
+    const addFirstEntry: ApiTableRow = {
       id: -1,
-      key: "Please click an 'Create' button to generate one.",
+      key: "Please click on 'Create' button to generate one.",
       createdAt: new Date(),
       isActive: false,
+      updatedAt: new Date(),
     };
 
     getAllApiToken()
       .then((resp) => {
         if (resp.length === 0) {
           resp.push(noPrevData);
         } else {
-          resp.push(addLastEntry);
+          ///
+          resp.unshift(addFirstEntry);
         }
 
         res({

src/api/user.api.ts

@@ -2,7 +2,13 @@ import httpApi from '@app/api/http.api';
 import { UserModel } from '@app/domain/UserModel';
 import { UserUpdateModel } from '@app/domain/UserUpdateModel';
 
-export const updateUserProfile = (userPayload: UserUpdateModel): Promise<UserModel> =>
-  httpApi.put<UserModel>(`/v1/users`, { ...userPayload }).then(({ data }) => data);
+export const updateUserProfile = (userPayload: UserUpdateModel): Promise<UserModel> =>{
+  console.log(userPayload)
+  if (!userPayload) {
+    console.error('User payload is required');
+    throw new Error('User payload is required');
+  }
+  return httpApi.put<UserModel>(`/v1/users`, { ...userPayload }).then(({ data }) => data);
+}
 
 export const reloadUserProfile = (): Promise<UserModel> => httpApi.get<UserModel>('v1/user').then(({ data }) => data);

src/components/apiKeys/ApiKeys.tsx

@@ -1,6 +1,5 @@
 import { useAppSelector } from '@app/hooks/reduxHooks';
 import { useResponsive } from '@app/hooks/useResponsive';
-import { BaseCard } from '../common/BaseCard/BaseCard';
 import { ApiKeyTable } from './apiKeysTable/ApiKeysTable';
 import { BaseRow } from '../common/BaseRow/BaseRow';
 import { BaseCol } from '../common/BaseCol/BaseCol';
@@ -13,9 +12,7 @@ export const ApiKeys: React.FC = () => {
   if (!user) return null;
 
   const content = (
-    <BaseCard>
       <ApiKeyTable />
-    </BaseCard>
   );
 
   return isDesktop ? (

src/components/apiKeys/apiKeysTable/ActionRow.tsx

@@ -0,0 +1,58 @@
+import { DeleteOutlined, CheckCircleOutlined, StopOutlined } from '@ant-design/icons';
+import React from 'react';
+import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
+import { ActionRowContainer } from './ApiKeysTable.style';
+import { ApiTableRow } from '@app/api/apiToken.api';
+
+interface ActionRowProps {
+  record: ApiTableRow;
+  handleToggleRow: (id: number) => void;
+  handleDeleteRow: (id: number) => void;
+  isCreating?: boolean; // If record.id === -1
+  t: (key: string) => string;
+}
+
+export const ActionRow: React.FC<ActionRowProps> = ({ 
+  record, 
+  handleToggleRow, 
+  handleDeleteRow,
+  isCreating,
+  t 
+}) => {
+  if (isCreating) {
+    // If your record has id === -1, you might show a "Create" button or something else
+    return (
+      <ActionRowContainer>
+        <BaseButton className="action-btn" onClick={() => handleToggleRow(record.id)}>
+          {t('apiTable.create')}
+        </BaseButton>
+      </ActionRowContainer>
+    );
+  }
+
+  // Normal row: show activate/deactivate and delete
+  return (
+    <ActionRowContainer>
+      <BaseButton
+        className="action-btn"
+        ghost
+        onClick={() => handleToggleRow(record.id)}
+        icon={record.isActive ? <StopOutlined /> : <CheckCircleOutlined />}
+        style={{color: !record.isActive ? '' : '#777777'}}
+      >
+        {record.isActive ? t('apiTable.deactivate') : t('apiTable.activate')}
+      </BaseButton>
+
+      <div className="divider" />
+
+      <BaseButton
+        className="action-btn delete-btn"
+        danger
+        onClick={() => handleDeleteRow(record.id)}
+        icon={<DeleteOutlined />}
+      >
+        {t('apiTable.delete')}
+      </BaseButton>
+    </ActionRowContainer>
+  );
+};

src/components/apiKeys/apiKeysTable/ApiKeysTable.style.ts

@@ -0,0 +1,46 @@
+// ApiKeyTable.styles.ts (example filename)
+import styled from 'styled-components';
+
+export const ActionRowContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center; /* center in the column */
+  gap: 1rem; /* space between buttons */
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+
+  /* Eye-catching gradient for the action area */
+//   background: unset;
+
+  /* Optional subtle shadow for a “raised” look */
+//   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
+
+  /* A small vertical divider between activate/deactivate and delete */
+  .divider {
+    width: 1px;
+    height: 24px;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+
+  /* Style the buttons to match the gradient background */
+  .action-btn {
+    color: #fff;
+    border: none;
+    transition: background-color 0.2s, color 0.2s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.15);
+      color: #fff;
+    }
+
+    /* For “danger” or “delete” buttons, you might want a slight
+       variation in color or an icon. (Example: a red accent.)
+    */
+    &.delete-btn {
+      background-color: rgba(255, 0, 0, 0.2);
+      &:hover {
+        background-color: rgba(255, 0, 0, 0.3);
+      }
+    }
+  }
+`;