Merge branch 'dev' into pocketbase

src/App.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {BrowserRouter, Navigate, Route, Routes} from 'react-router-dom';
-import {FullPageLoader} from './components/Loading/FullPageLoader.component';
-import {DashboardLayout, DashboardView, BudgetView, StocksView} from './routes/Dashboard';
+import {FullPageLoader} from '@/components/Loading';
+import {DashboardLayout, DashboardView, BudgetView, StocksView, AnalyticsView} from './routes/Dashboard';
 import StockRoute from './routes/Stock.route';
 import StocksRoute from './routes/Stocks.route';
 import TransactionsRoute from './routes/Transactions.route';
@@ -26,6 +26,7 @@ const App = () => {
             <Route index element={<DashboardView />} />
             <Route path="budget" element={<BudgetView />} />
             <Route path="stocks" element={<StocksView />} />
+            <Route path="analytics" element={<AnalyticsView navigateOnClose navigateTo="/dashboard" />} />
             <Route path="*" element={<Navigate to="/dashboard" />} />
           </Route>
           <Route path="/stocks">

src/components/Base/Charts/ApexPieChart.component.tsx

@@ -55,7 +55,6 @@ export const ApexPieChart: React.FC<TApexPieChartProps> = ({data, ...props}) =>
           },
         },
         labels: data.map(({label}) => label),
-
         dataLabels: {
           // @ts-ignore
           formatter(val, opts) {

src/components/Base/FullScreenDialog.component.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {AppBar, Box, type BoxProps, Dialog, type DialogProps, IconButton, Toolbar, Typography} from '@mui/material';
+import {CloseRounded} from '@mui/icons-material';
+import {Transition} from '@/components/DeleteDialog.component.tsx';
+
+export type TFullScreenDialogProps = DialogProps & {
+  title: string;
+  onClose: () => void;
+  appBarActions?: React.ReactNode;
+  boxProps?: BoxProps;
+};
+
+export const FullScreenDialog: React.FC<TFullScreenDialogProps> = ({
+  title,
+  onClose,
+  appBarActions,
+  boxProps,
+  ...dialogProps
+}) => {
+  return (
+    <Dialog fullScreen TransitionComponent={Transition} PaperProps={{elevation: 0}} {...dialogProps}>
+      <AppBar
+        elevation={0}
+        sx={{position: 'relative', border: 0, borderBottom: theme => `1px solid ${theme.palette.divider}`}}>
+        <Toolbar sx={{border: 'none'}}>
+          <Typography
+            sx={{
+              flex: 1,
+              fontWeight: 700,
+              color: 'inherit',
+              textDecoration: 'none',
+            }}
+            variant="h5"
+            component="div">
+            {title}
+          </Typography>
+
+          {appBarActions}
+          <IconButton edge="start" color="inherit" onClick={onClose} aria-label="close">
+            <CloseRounded />
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+
+      <Box {...boxProps} sx={{p: 2, ...boxProps?.sx}}>
+        {dialogProps.children}
+      </Box>
+    </Dialog>
+  );
+};

src/components/Base/Input/index.ts

@@ -3,4 +3,3 @@ export * from './ReceiverAutocomplete.component';
 export * from './DateRange.component';
 export * from './PasswordInput.component';
 export * from './FileUpload.component';
-export * from './FileUploadPreview.component';

src/components/Base/index.ts

@@ -12,3 +12,4 @@ export * from './Charts';
 export * from './SparklineWidget.component';
 export * from './LabelBadge.component';
 export * from './TabPanel.component';
+export * from './FullScreenDialog.component.tsx';

src/components/Category/Chart/IncomeChart.component.tsx

@@ -75,7 +75,7 @@ export const CategoryIncomeChart: React.FC<TCategoryIncomeChartProps> = () => {
           <NoResults
             sx={{m: 2}}
             text={
-              chart === 'MONTH' ? 'There are no information about this month!' : 'There are no information in general!'
+              chart === 'MONTH' ? 'There are no transactions for this month!' : "You haven't receive any income yet!"
             }
           />
         )}

src/components/Category/Chip.component.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
-import {Chip, type ChipProps} from '@mui/material';
-import {useFilterStore} from '../Filter';
+import {Chip, Tooltip, type ChipProps} from '@mui/material';
+import {useFilterStore} from '@/components/Filter';
 import {type TCategory} from '@budgetbuddyde/types';
+import {useTransactionStore} from '@/components/Transaction';
 
-export type TCategoryChipProps = ChipProps & {category: TCategory};
+export type TCategoryChipProps = ChipProps & {category: TCategory; showUsage?: boolean};
 
-export const CategoryChip: React.FC<TCategoryChipProps> = ({category, ...otherProps}) => {
+export const CategoryChip: React.FC<TCategoryChipProps> = ({category, showUsage = false, ...otherProps}) => {
   const {filters, setFilters} = useFilterStore();
+  const {categoryUsage} = useTransactionStore();
 
   const handleChipClick = () => {
     if (!filters.categories) {
@@ -30,6 +32,22 @@ export const CategoryChip: React.FC<TCategoryChipProps> = ({category, ...otherPr
     });
   };
 
+  if (showUsage) {
+    return (
+      <Tooltip
+        title={`Used ${categoryUsage.has(category.id) ? categoryUsage.get(category.id) : 0} times`}
+        placement="top"
+        arrow>
+        <Chip
+          onClick={handleChipClick}
+          onDelete={filters.categories && filters.categories.includes(category.id) ? handleChipDelete : undefined}
+          label={category.name}
+          variant="outlined"
+          {...otherProps}
+        />
+      </Tooltip>
+    );
+  }
   return (
     <Chip
       onClick={handleChipClick}

src/components/Download/DownloadButton.component.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {Button, Tooltip, type ButtonProps} from '@mui/material';
+import {useSnackbarContext} from '@/components/Snackbar';
+
+export type TDownloadButtonProps = ButtonProps & {
+  exportFormat: /*'CSV' |*/ 'JSON';
+  exportFileName: string;
+  data: object;
+  withTooltip?: boolean;
+};
+
+export const DownloadButton: React.FC<TDownloadButtonProps> = ({
+  exportFormat,
+  exportFileName,
+  data,
+  ...buttonProps
+}) => {
+  const {showSnackbar} = useSnackbarContext();
+  const downloadBtnRef = React.useRef<HTMLAnchorElement | null>(null);
+
+  const downloadContent = () => {
+    if (!downloadBtnRef.current)
+      return showSnackbar({
+        message: 'Download button not found',
+        action: <Button onClick={downloadContent}>Retry</Button>,
+      });
+    downloadBtnRef.current.setAttribute(
+      'href',
+      `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(data, null, 2))}`,
+    );
+    downloadBtnRef.current?.setAttribute('download', `${exportFileName}.${exportFormat.toLowerCase()}`);
+    downloadBtnRef.current.click();
+    showSnackbar({message: 'Download started'});
+  };
+
+  return (
+    <React.Fragment>
+      {buttonProps.withTooltip ? (
+        <Tooltip title={`Download as ${exportFormat}`}>
+          <Button {...buttonProps} onClick={downloadContent} />
+        </Tooltip>
+      ) : (
+        <Button {...buttonProps} onClick={downloadContent} />
+      )}
+      <a aria-hidden ref={downloadBtnRef} />
+    </React.Fragment>
+  );
+};

src/components/Download/index.ts

@@ -0,0 +1 @@
+export * from './DownloadButton.component';

src/components/Drawer/FormDrawer/FormDrawer.component.tsx

@@ -4,7 +4,8 @@ import {Box, Drawer, Typography, type DrawerProps, Button, IconButton, Alert, Ci
 import React from 'react';
 import {ActionPaper} from '@/components/Base';
 import {CloseRounded, DoneRounded, ErrorRounded} from '@mui/icons-material';
-import {type TFormDrawerState} from './FormDrawer.reducer';
+import {type TFormDrawerState} from '@/components/Drawer';
+import {useKeyPress} from '@/hooks/useKeyPress.hook.ts';
 
 export type TFormDrawerProps = {
   state?: TFormDrawerState;
@@ -24,14 +25,29 @@ export const FormDrawer: React.FC<React.PropsWithChildren<TFormDrawerProps>> = (
   heading = 'Drawer',
   children,
 }) => {
+  const drawerRef = React.useRef<HTMLDivElement | null>(null);
+  const saveBtnRef = React.useRef<HTMLButtonElement | null>(null);
   const screenSize = useScreenSize();
 
+  useKeyPress(
+    ['s'],
+    e => {
+      if (saveBtnRef.current) {
+        e.preventDefault();
+        saveBtnRef.current.click();
+      }
+    },
+    drawerRef.current,
+    true,
+  );
+
   const DrawerAnchor: DrawerProps['anchor'] = React.useMemo(() => {
     return screenSize === 'small' ? 'bottom' : 'right';
   }, [screenSize]);
 
   return (
     <Drawer
+      ref={drawerRef}
       anchor={DrawerAnchor}
       open={open}
       onClose={(_event, reason) => {
@@ -85,13 +101,14 @@ export const FormDrawer: React.FC<React.PropsWithChildren<TFormDrawerProps>> = (
               p: 2,
               pt: 0,
             }}>
-            <Button onClick={onClose} sx={{mr: 2}}>
+            <Button onClick={onClose} sx={{mr: 2}} tabIndex={2}>
               Cancel
             </Button>
 
             <Button
               type="submit"
               variant="contained"
+              ref={saveBtnRef}
               {...(state !== undefined
                 ? {
                     startIcon: state.loading ? (
@@ -103,7 +120,8 @@ export const FormDrawer: React.FC<React.PropsWithChildren<TFormDrawerProps>> = (
                     ) : null,
                     disabled: state.loading,
                   }
-                : {})}>
+                : {})}
+              tabIndex={1}>
               Save
             </Button>
           </Box>