frontend some fix and clean

dcorroyer · Oct 28, 2024 · 24e8307 · 24e8307
1 parent 0c4e18f
commit 24e8307
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 12 deletions.
diff --git a/app/assets/components/sidebar.tsx b/app/assets/components/sidebar.tsx
@@ -6,7 +6,15 @@ import cx from 'clsx'
 
 import { Group, useComputedColorScheme, useMantineColorScheme } from '@mantine/core'
 import { useMediaQuery } from '@mantine/hooks'
-import { IconHome2, IconLogout, IconMoon, IconSun, IconWallet } from '@tabler/icons-react'
+import {
+  IconChartLine,
+  IconCreditCard,
+  IconHome2,
+  IconLogout,
+  IconMoon,
+  IconSun,
+  IconWallet,
+} from '@tabler/icons-react'
 
 import { useAuth } from '@/features/auth/hooks/useAuth'
 
@@ -16,6 +24,8 @@ import classes from './sidebar.module.css'
 const data = [
   { icon: IconHome2, label: 'Dashboard', path: '/' },
   { icon: IconWallet, label: 'Budget Planner', path: '/budgets' },
+  { icon: IconChartLine, label: 'Savings', path: '/savings' },
+  { icon: IconCreditCard, label: 'Accounts', path: '/accounts' },
 ]
 
 export function Sidebar() {

diff --git a/app/assets/features/budgets/components/budget-items.tsx b/app/assets/features/budgets/components/budget-items.tsx
@@ -1,5 +1,15 @@
-import { ActionIcon, Badge, Card, Group, SimpleGrid, Text, rem } from '@mantine/core'
-import { IconCopy, IconEye, IconTrash } from '@tabler/icons-react'
+import {
+  ActionIcon,
+  Badge,
+  Card,
+  Container,
+  Group,
+  SimpleGrid,
+  Stack,
+  Text,
+  rem,
+} from '@mantine/core'
+import { IconCopy, IconDatabaseOff, IconEye, IconTrash } from '@tabler/icons-react'
 import React from 'react'
 import { Link } from 'react-router-dom'
 
@@ -27,6 +37,19 @@ export const BudgetItems = ({
 
   if (isFetching) return <Loader />
 
+  if (!budgetList?.data.length) {
+    return (
+      <Container h={100} display='flex'>
+        <Stack justify='center' align='center' style={{ flex: 1 }} gap='xs'>
+          <IconDatabaseOff style={{ width: rem(24), height: rem(24) }} stroke={1.5} color='gray' />
+          <Text size='lg' fw={500} c='gray'>
+            No data
+          </Text>
+        </Stack>
+      </Container>
+    )
+  }
+
   const budgets = budgetList?.data.map((budget) => (
     <div key={budget.id}>
       <Card radius='lg' pb='xl'>

diff --git a/app/assets/features/budgets/hooks/useBudget.ts b/app/assets/features/budgets/hooks/useBudget.ts
@@ -23,7 +23,7 @@ export const useBudget = () => {
 
   const useBudgetList = (year: number) => {
     const { data: budgetList, isFetching } = useQuery({
-      queryKey: ['budgets', year],
+      queryKey: ['budgets', 'list', year],
       queryFn: () => getBudgetList(year),
       enabled: !!year,
     })
@@ -33,7 +33,7 @@ export const useBudget = () => {
 
   const useBudgetDetail = (id: number) => {
     const { data: budget, isFetching } = useQuery({
-      queryKey: ['budgets', { id: id }],
+      queryKey: ['budgets', 'detail', id],
       queryFn: () => getBudgetDetail(id.toString()),
     })
 
@@ -47,7 +47,10 @@ export const useBudget = () => {
   const createBudgetMutation = useMutation({
     mutationFn: postBudget,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['budgets'] })
+      queryClient.invalidateQueries({
+        queryKey: ['budgets', 'list'],
+        refetchType: 'all',
+      })
       navigate('/budgets')
       notifications.show({
         withBorder: true,
@@ -77,7 +80,9 @@ export const useBudget = () => {
     mutationFn: ({ id, ...data }: { id: number } & BudgetParams) =>
       updateBudgetId(id.toString(), data),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['budgets'] })
+      queryClient.invalidateQueries({
+        queryKey: ['budgets'],
+      })
       navigate('/budgets')
       notifications.show({
         withBorder: true,
@@ -106,7 +111,9 @@ export const useBudget = () => {
   const deleteBudgetMutation = useMutation({
     mutationFn: deleteBudgetId,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['budgets'] })
+      queryClient.invalidateQueries({
+        queryKey: ['budgets'],
+      })
       notifications.show({
         withBorder: true,
         radius: 'md',
@@ -134,7 +141,9 @@ export const useBudget = () => {
   const duplicateBudgetMutation = useMutation({
     mutationFn: postDuplicateBudgetId,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['budgets'] })
+      queryClient.invalidateQueries({
+        queryKey: ['budgets', 'list'],
+      })
       navigate('/budgets')
       notifications.show({
         withBorder: true,
@@ -163,7 +172,9 @@ export const useBudget = () => {
   const duplicateLatestBudgetMutation = useMutation({
     mutationFn: postDuplicateBudget,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['budgets'] })
+      queryClient.invalidateQueries({
+        queryKey: ['budgets', 'list'],
+      })
       navigate('/budgets')
       notifications.show({
         withBorder: true,

diff --git a/app/assets/features/budgets/pages/list.tsx b/app/assets/features/budgets/pages/list.tsx
@@ -7,7 +7,7 @@ import {
   IconChevronLeft,
   IconChevronRight,
   IconCopy,
-  IconSquarePlus2,
+  IconPencil,
   IconTrash,
 } from '@tabler/icons-react'
 
@@ -52,7 +52,7 @@ const BudgetList: React.FC = () => {
           component={Link}
           to={'/budgets/create'}
         >
-          <IconSquarePlus2 className={classes.linkIcon} stroke={1.5} />
+          <IconPencil className={classes.linkIcon} stroke={1.5} />
           <span style={{ padding: rem(2.5) }}>Create</span>
         </ActionIcon>
       </Text>