[DRAFT] feat: create expenses page

Gemfile

@@ -46,7 +46,6 @@ group :development, :test do
   gem 'factory_bot_rails'
   gem 'faker'
   gem 'rspec-rails'
-  gem 'rubocop'
 end
 
 group :development do

Gemfile.lock

@@ -75,7 +75,6 @@ GEM
       minitest (>= 5.1)
       mutex_m
       tzinfo (~> 2.0)
-    ast (2.4.2)
     base64 (0.2.0)
     bcrypt (3.1.20)
     bigdecimal (3.1.5)
@@ -108,9 +107,7 @@ GEM
     irb (1.11.0)
       rdoc
       reline (>= 0.3.8)
-    json (2.7.1)
     jwt (2.7.1)
-    language_server-protocol (3.17.0.3)
     loofah (2.22.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
@@ -142,10 +139,6 @@ GEM
     nokogiri (1.16.0-x86_64-linux)
       racc (~> 1.4)
     openssl (3.2.0)
-    parallel (1.24.0)
-    parser (3.2.2.4)
-      ast (~> 2.4.1)
-      racc
     psych (5.1.2)
       stringio
     puma (5.6.7)
@@ -190,15 +183,12 @@ GEM
       rake (>= 12.2)
       thor (~> 1.0, >= 1.2.2)
       zeitwerk (~> 2.6)
-    rainbow (3.1.1)
     rake (13.1.0)
     rdoc (6.6.2)
       psych (>= 4.0.0)
     redis (4.8.1)
-    regexp_parser (2.8.3)
     reline (0.4.1)
       io-console (~> 0.5)
-    rexml (3.2.6)
     rspec-core (3.12.2)
       rspec-support (~> 3.12.0)
     rspec-expectations (3.12.3)
@@ -216,20 +206,6 @@ GEM
       rspec-mocks (~> 3.12)
       rspec-support (~> 3.12)
     rspec-support (3.12.1)
-    rubocop (1.59.0)
-      json (~> 2.3)
-      language_server-protocol (>= 3.17.0)
-      parallel (~> 1.10)
-      parser (>= 3.2.2.4)
-      rainbow (>= 2.2.2, < 4.0)
-      regexp_parser (>= 1.8, < 3.0)
-      rexml (>= 3.2.5, < 4.0)
-      rubocop-ast (>= 1.30.0, < 2.0)
-      ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.30.0)
-      parser (>= 3.2.1.0)
-    ruby-progressbar (1.13.0)
     ruby2_keywords (0.0.5)
     stringio (3.1.0)
     thor (1.3.0)
@@ -238,7 +214,6 @@ GEM
       concurrent-ruby (~> 1.0)
     tzinfo-data (1.2023.4)
       tzinfo (>= 1.0.0)
-    unicode-display_width (2.5.0)
     webrick (1.8.1)
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
@@ -264,7 +239,6 @@ DEPENDENCIES
   rails (~> 7.1.2, >= 7.0.4.3)
   redis (~> 4.0)
   rspec-rails
-  rubocop
   tzinfo-data
 
 RUBY VERSION

app/helpers/auth_helper.rb

@@ -7,11 +7,12 @@
 
 module AuthHelper
   def self.generate_token_by_type(type, payload)
-    expiry = if type == :REFRESH
-               Time.now.to_i + 2_592_000
-             else
-               expiry = Time.now.to_i + 900
-             end
+    expiry =
+      if type == :REFRESH
+        Time.now.to_i + 2_592_000
+      else
+        expiry = Time.now.to_i + 900
+      end
 
     payload[:exp] = expiry
     JWT.encode(payload, ENV["#{type}_TOKEN_SECRET"], 'HS256')
@@ -46,17 +47,11 @@ def self.generate_cookie_hash(refresh_token)
       secure: true,
       httponly: true,
       same_site: Rails.env.development? ? :None : :Strict,
-      path: Constants::API_PATHS[:SESSIONS_TOKEN]
+      path: Constants::API_PATHS[:SESSIONS_TOKEN],
     }
   end
 
   def self.generate_deleted_cookie
-    {
-      value: nil,
-      expires: Time.at(0),
-      secure: true,
-      httponly: true,
-      same_site: Rails.env.development? ? :None : :Strict
-    }
+    { value: nil, expires: Time.at(0), secure: true, httponly: true, same_site: Rails.env.development? ? :None : :Strict }
   end
 end

client/src/app/App.tsx

@@ -19,7 +19,7 @@ import { ToastDefaultOptions } from '@/utils/constants';
 const InteriorLayout = () => (
 	<Box display='flex' flexDirection='row'>
 		<Sidebar />
-		<Box display='flex' flexDirection='column' width='100%'>
+		<Box display='flex' flexDirection='column' width='100%' height='100vh'>
 			<TopBar />
 			<Outlet />
 		</Box>

client/src/components/Avatar.tsx

@@ -1,7 +1,52 @@
-import { Box } from '@chakra-ui/react';
+import { Box, Image, PlacementWithLogical, Tooltip } from '@chakra-ui/react';
 
-const Avatar = () => {
-	return <Box></Box>;
+import { User } from '@/utils/types';
+import userImage from '@/assets/images/user-image.svg';
+import { UserStatusColorMappings } from '@/utils/constants';
+
+const Avatar = ({ user, tooltipPlacement }: { user: User; tooltipPlacement: string }) => {
+	const generateReadableStatus = () => {
+		if (user.status) {
+			const spacedStatus = user.status.replace('_', ' ');
+			return spacedStatus.charAt(0).toUpperCase() + spacedStatus.slice(1);
+		} else {
+			return 'Unknown';
+		}
+	};
+
+	return (
+		<Tooltip label={generateReadableStatus()} placement={tooltipPlacement as PlacementWithLogical}>
+			<Box width='40px' height='40px' position='relative'>
+				<Box
+					backgroundColor={`${user.color}.500`}
+					width='40px'
+					height='40px'
+					borderRadius='14px'
+					display='flex'
+					alignItems='center'
+					justifyContent='center'
+				>
+					<Image src={userImage} width='16px' height='20px' />
+				</Box>
+				<Box
+					width='10px'
+					height='10px'
+					borderRadius='20px'
+					position='absolute'
+					top='0px'
+					right='0px'
+					display='flex'
+					alignItems='center'
+					justifyContent='center'
+					backgroundColor={user.status ? UserStatusColorMappings[user.status] : 'none'}
+				>
+					{user.status === 'do_not_disturb' && (
+						<Box height='1.5px' width='5px' backgroundColor='gray.900' borderRadius='10px' />
+					)}
+				</Box>
+			</Box>
+		</Tooltip>
+	);
 };
 
 export default Avatar;

client/src/components/ExpensesRow.tsx

@@ -0,0 +1,8 @@
+import { Expense } from '@/utils/types';
+import { Box } from '@chakra-ui/react';
+
+const ExpensesRow = ({ expense }: { expense: Expense }) => {
+	return <Box></Box>;
+};
+
+export default ExpensesRow;

client/src/components/Gateway.tsx

@@ -17,6 +17,7 @@ const Gateway = ({ children }: { children: ReactElement }) => {
 
 	const session = useSelector((state: RootState) => state.session);
 	const currentUser = useSelector((state: RootState) => state.user);
+	const hideout = useSelector((state: RootState) => state.hideout);
 	useGetUserQuery(session.userID!, { skip: !session.isLoggedIn || currentUser.id !== null });
 	useGetHideoutQuery(currentUser.hideoutID!, { skip: currentUser.hideoutID === null });
 
@@ -34,7 +35,11 @@ const Gateway = ({ children }: { children: ReactElement }) => {
 	}, [dispatch, data, isLoading, isSuccess, isError]);
 
 	const getRenderContent = () => {
-		if (session.isLoggedIn === null || (session.isLoggedIn && currentUser.id === null)) {
+		if (
+			session.isLoggedIn === null ||
+			(session.isLoggedIn && currentUser.id === null) ||
+			(currentUser.hideoutID !== null && hideout.id === null)
+		) {
 			return (
 				<Box width='100vw' height='100vh' display='flex' alignItems='center' justifyContent='center'>
 					<Spinner size={80} useLogo={true} />
@@ -45,7 +50,11 @@ const Gateway = ({ children }: { children: ReactElement }) => {
 		}
 	};
 
-	return session.isLoggedIn && currentUser.id !== null ? <Navigate to={redirectURL} /> : getRenderContent();
+	return session.isLoggedIn && currentUser.id !== null && (currentUser.hideoutID === null || hideout.id !== null) ? (
+		<Navigate to={redirectURL} />
+	) : (
+		getRenderContent()
+	);
 };
 
 export default Gateway;

client/src/components/index.ts

@@ -2,3 +2,5 @@ export { default as Spinner } from '@/components/Spinner';
 export { default as SidebarTile } from '@/components/SidebarTile';
 export { default as Gateway } from '@/components/Gateway';
 export { default as Protected } from '@/components/Protected';
+export { default as Avatar } from '@/components/Avatar';
+export { default as ExpensesRow } from '@/components/ExpensesRow';

client/src/config/theme.css

@@ -0,0 +1,3 @@
+.chakra-checkbox__control {
+	border-radius: 6px !important;
+}

client/src/config/theme.js

@@ -1,5 +1,6 @@
 import { extendTheme } from '@chakra-ui/react';
 import '@/config/fonts.css';
+import '@/config/theme.css';
 
 const theme = extendTheme({
 	colors: {
@@ -139,6 +140,17 @@ const theme = extendTheme({
 				},
 			},
 		},
+		Tooltip: {
+			baseStyle: {
+				fontSize: '14px',
+				fontFamily: 'Hellix',
+				backgroundColor: 'gray.900',
+				fontWeight: 500,
+				color: 'white',
+				padding: '4px 10px 4px 10px',
+				borderRadius: '8px',
+			},
+		},
 	},
 });