Minor style updates in the reports.

gjong · gjong · commit 7a7efe507b5d · 2025-04-08T17:14:22.000+02:00
diff --git a/src/components/budget/budget-detail.component.tsx b/src/components/budget/budget-detail.component.tsx
@@ -3,6 +3,7 @@ import { Column } from "primereact/column";
 import { DataTable } from "primereact/datatable";
 import { Dialog } from "primereact/dialog";
 import React, { useEffect, useState } from "react";
+import { Link } from "react-router";
 import { i10n } from "../../config/prime-locale";
 import { useNotification } from "../../context/notification-context";
 import BudgetRepository, { ComputedExpense } from "../../core/repositories/budget.repository";
@@ -33,7 +34,8 @@ const AddExpenseDialog = ({ onChange }: { onChange: () => void }) => {
   }
 
   return <>
-    <Button severity='success' label='page.budget.group.action.addExpense' icon={ mdiPlus } onClick={ () => setVisible(true) }/>
+    <Button severity='success' label='page.budget.group.action.addExpense' icon={ mdiPlus }
+            onClick={ () => setVisible(true) }/>
     <Dialog header={ i10n('page.title.budget.group.expense.add') }
             visible={ visible }
             onHide={ () => setVisible(false) }>
@@ -51,8 +53,8 @@ const AddExpenseDialog = ({ onChange }: { onChange: () => void }) => {
           <Button type='reset'
                   text
                   onClick={ () => setVisible(false) }
-                  label='common.action.cancel' icon={ mdiCancel } />
-          <SubmitButton label='common.action.save' icon={ mdiContentSave } />
+                  label='common.action.cancel' icon={ mdiCancel }/>
+          <SubmitButton label='common.action.save' icon={ mdiContentSave }/>
         </div>
       </Form>
 
@@ -129,15 +131,18 @@ const BudgetDetailComponent = ({ range }: { range: DateRange }) => {
     </div>
 
     <DataTable value={ budget.expenses } loading={ !budget }>
-      <Column field='name' header={ i10n('Budget.Expense.name') }/>
+      <Column field='name' header={ i10n('Budget.Expense.name') }
+              body={ (expense: BudgetExpense) => budgetName(range.year(), range.month(), expense) }/>
       <Column body={ (expense: BudgetExpense) => <MoneyComponent money={ expense.expected }/> }
               header={ i10n('page.budget.group.expense.budgeted') }/>
-      <Column body={ (expense: BudgetExpense) => <MoneyComponent money={ getComputedExpense(expense.id)?.computed.spent }/> }
-              header={ i10n('page.budget.group.expense.spent') }/>
-      <Column body={ (expense: BudgetExpense) => <MoneyComponent money={ getComputedExpense(expense.id)?.computed.left }/> }
-              header={ i10n('page.budget.group.expense.left') }/>
+      <Column
+        body={ (expense: BudgetExpense) => <MoneyComponent money={ getComputedExpense(expense.id)?.computed.spent }/> }
+        header={ i10n('page.budget.group.expense.spent') }/>
+      <Column
+        body={ (expense: BudgetExpense) => <MoneyComponent money={ getComputedExpense(expense.id)?.computed.left }/> }
+        header={ i10n('page.budget.group.expense.left') }/>
       <Column className='w-[2rem]'
-              body={ (expense: BudgetExpense) => <ExpenseActions expense={ expense } callback={ loadBudget } /> }/>
+              body={ (expense: BudgetExpense) => <ExpenseActions expense={ expense } callback={ loadBudget }/> }/>
     </DataTable>
 
     <div className='flex justify-end mt-4'>
@@ -146,4 +151,14 @@ const BudgetDetailComponent = ({ range }: { range: DateRange }) => {
   </>
 }
 
+const budgetName = (year: number, month: number, expense: BudgetExpense) => {
+  return <>
+    <Link to={ `/transactions/income-expense/${ year }/${ month }?budget=${ expense.id }` }
+          title='go to transactions'
+          className='text-blue-500 hover:underline hover:text-blue-700'>
+      { expense.name }
+    </Link>
+  </>
+}
+
 export default BudgetDetailComponent
diff --git a/src/components/form/input/PasswordInput.tsx b/src/components/form/input/PasswordInput.tsx
@@ -1,10 +1,12 @@
+import { InputIcon } from "primereact/inputicon";
 import React, { FC } from "react";
 import Icon from "@mdi/react";
 import { mdiAlertCircle, mdiCheck } from "@mdi/js";
 import { useInputField } from "./InputGroup";
 import { FieldType, ValidatorType } from "../form-types";
 import { i10n } from "../../../config/prime-locale";
 import { InputText } from "primereact/inputtext";
+import { IconField } from "primereact/iconfield";
 
 const validations: ValidatorType[] = [
   { label: 'Account.password.at_least_six_chars', validate: value => value && RegExp(/^.{6,63}$/).test(value) },
@@ -37,14 +39,17 @@ export const PasswordInput: FC<PasswordInputProps> = (props) => {
     <div className="flex flex-col gap-2 mt-2">
       <label htmlFor={ props.id } className='font-bold'
              data-testid={ `${ props.id }-label` }>{ i10n(props.title as string) }{ props.required ? ' *' : '' }</label>
-      <InputText id={ props.id }
-                 type='password'
-                 defaultValue={ field.value || props.value }
-                 required={ props.required }
-                 pattern={ props.pattern }
-                 data-testid={ `${ props.id }-input` }
-                 invalid={ field.touched ? errors.length > 0 : undefined }
-                 onChange={ onChange }/>
+      <IconField iconPosition='left' className='[&.p-icon-field>.p-inputtext]:w-full'>
+        <InputIcon className={ 'pi pi-lock' }/>
+        <InputText id={ props.id }
+                   type='password'
+                   defaultValue={ field.value || props.value }
+                   required={ props.required }
+                   pattern={ props.pattern }
+                   data-testid={ `${ props.id }-input` }
+                   invalid={ field.touched ? errors.length > 0 : undefined }
+                   onChange={ onChange }/>
+      </IconField>
     </div>
 
     <div className='py-4 px-2 my-3 mx-2 rounded-sm border-solid border-[1px] border-separator shadow-xl'>
diff --git a/src/components/form/input/TextInput.tsx b/src/components/form/input/TextInput.tsx
@@ -45,7 +45,7 @@ export const TextInput: FC<TextInputProps> = (props) => {
     <div className={ `flex flex-col gap-2 mt-2 ${ props.className || '' }` }>
       <label htmlFor={ props.id }
              className='font-bold'>{ i10n(props.title as string) }{ props.required ? ' *' : '' }</label>
-      { props.icon && <IconField iconPosition='left'><InputIcon className={ 'pi pi-'+ props.icon }/>{inputField}</IconField> }
+      { props.icon && <IconField iconPosition='left' className='[&.p-icon-field>.p-inputtext]:w-full'><InputIcon className={ 'pi pi-'+ props.icon }/>{inputField}</IconField> }
       { !props.icon && inputField }
       { field.touched && <InputValidationErrors field={ field } errors={ errors }/> }
     </div>
diff --git a/src/components/reports/budget-monthly/monthly-table.component.tsx b/src/components/reports/budget-monthly/monthly-table.component.tsx
@@ -61,7 +61,7 @@ const MonthlyPerBudgetTableComponent = ({ budgets, year, currency }: MonthlyPerB
 
   return <>
     <DataTable value={ expenses } loading={ !expenses } size='small'>
-      <Column header={ i10n('Budget.Expense.name') } field='name' />
+      <Column header={ i10n('Budget.Expense.name') } field='name' sortable />
       { [...new Array(12).keys()].map(month =>
         <Column key={ month }
                 headerClassName='min-w-[7rem]'
diff --git a/src/components/reports/category-monthly/categorized-monthly-spending.component.tsx b/src/components/reports/category-monthly/categorized-monthly-spending.component.tsx
@@ -57,8 +57,8 @@ const CategorizedMonthlySpendingComponent = ({ currency, year }: CategorizedMont
 
 
   return <>
-    <DataTable value={ expenses } loading={ !expenses } size='small'>
-      <Column header={ i10n('Category.label') } field='name' bodyClassName='font-bold' frozen={ true } alignFrozen='left' />
+    <DataTable value={ expenses } loading={ !expenses } size='small' sortField='name' sortOrder={ 1 }>
+      <Column header={ i10n('Category.label') } field='name' bodyClassName='font-bold' sortable frozen />
       { [...new Array(12).keys()].map(month =>
         <Column key={ month }
                 headerClassName='min-w-[7rem]'
diff --git a/src/components/transaction/list-filters.component.tsx b/src/components/transaction/list-filters.component.tsx
@@ -18,10 +18,11 @@ export type TransactionFilter = {
 export type FilterChangeHandler = (_: TransactionFilter) => void
 
 type TransactionFiltersProps = {
-  onChange: FilterChangeHandler
+  onChange: FilterChangeHandler,
+  activeFilter: TransactionFilter
 }
 
-const TransactionFilters: FC<TransactionFiltersProps> = ({ onChange }) => {
+const TransactionFilters: FC<TransactionFiltersProps> = ({ onChange, activeFilter }) => {
 
   const onSubmit = (form: any) => {
     const filter = {
@@ -63,6 +64,7 @@ const TransactionFilters: FC<TransactionFiltersProps> = ({ onChange }) => {
                            title='page.transactions.filter.category'/>
           <Entity.Budget id='budget'
                          className='flex-1'
+                         value={ activeFilter.budget }
                          title='page.transactions.filter.budget'/>
           <div className='flex-1'/>
         </div>
diff --git a/src/components/transaction/transaction-list.component.tsx b/src/components/transaction/transaction-list.component.tsx
@@ -1,16 +1,17 @@
 import React, { FC, useEffect, useState } from "react";
+import { useRouteLoaderData } from "react-router";
+import { i10n } from "../../config/prime-locale";
 import { Resolver } from "../../core";
-import DateRange from "../../types/date-range.type";
-import MoneyComponent from "../format/money.component";
-import { Paginator } from "../layout/paginator.component";
-import { DailyTransactions, groupTransactionByDay } from "../../reducers";
 import { TransactionRepository } from "../../core/RestAPI";
-import { Pagination } from "../../types/types";
 import useQueryParam from "../../hooks/query-param.hook";
-import TransactionItem from "./transaction-detail.component";
+import { DailyTransactions, groupTransactionByDay } from "../../reducers";
+import DateRange from "../../types/date-range.type";
+import { Pagination } from "../../types/types";
+import MoneyComponent from "../format/money.component";
 import Loading from "../layout/loading.component";
-import Translation from "../localization/translation.component";
+import { Paginator } from "../layout/paginator.component";
 import TransactionFilters, { TransactionFilter } from "./list-filters.component";
+import TransactionItem from "./transaction-detail.component";
 
 type TransactionOverviewProps = {
   range: DateRange,
@@ -19,7 +20,10 @@ type TransactionOverviewProps = {
 
 const TransactionOverview: FC<TransactionOverviewProps> = ({ range, transfers }) => {
   const [page] = useQueryParam({ key: 'page', initialValue: "1" })
-  const [searchCommand, setSearchCommand] = useState({})
+  const [searchCommand, setSearchCommand] = useState<TransactionFilter>(() => {
+    const { searchCommand } = useRouteLoaderData('income-expense')
+    return searchCommand
+  })
   const [transactions, setTransactions] = useState<DailyTransactions | undefined>(undefined)
   const [pagination, setPagination] = useState<Pagination>()
 
@@ -60,7 +64,7 @@ const TransactionOverview: FC<TransactionOverviewProps> = ({ range, transfers })
   const showPagination = pagination && pagination?.records > pagination?.pageSize
 
   return <>
-    { !transfers && <TransactionFilters onChange={ onFilterChange }/> }
+    { !transfers && <TransactionFilters onChange={ onFilterChange } activeFilter={ searchCommand }/> }
 
     { !isLoaded && <Loading/> }
 
@@ -75,18 +79,14 @@ const TransactionOverview: FC<TransactionOverviewProps> = ({ range, transfers })
 
       return <div key={ key } className='flex flex-col gap-0.5 pb-3'>
         <div
-          className='flex gap-2 items-center border-b-[1px] pb-1 mb-1 px-2 md:rounded-lg bg-blue-300/10 md:bg-blue-200/20'>
-          <div className='font-bold text-lg[1.5em] text-muted'>
+          className='flex gap-2 items-center border-b-[1px] py-1 mb-1 px-2 md:rounded-lg bg-blue-300/10 md:bg-blue-200/20'>
+          <div className='font-bold text-[1.25em] text-muted'>
             { date.getDate() }
           </div>
-          <div className='flex flex-col'>
-                        <span className='text-[.9em] text-neutral-500'>
-                            { `${ date.getFullYear() }.${ date.getMonth() }` }
-                        </span>
-            <span className='rounded-sm bg-gray-300 py-0.5 text-[.75em] text-white text-center font-bold'>
-                            <Translation label={ `common.weekday.${ date.getDay() }` }/>
-                        </span>
+          <div className='rounded-sm bg-gray-300 text-[.75em] text-white text-center font-bold px-1 py-0.25'>
+            { i10n(`common.weekday.${ date.getDay() }`) }
           </div>
+          <span className='text-xs text-muted'>{ date.getFullYear() }.{ date.getMonth() }</span>
           { !transfers && <>
             <div className='flex-1 justify-end flex gap-16 font-bold'>
               { income !== 0 && <MoneyComponent money={ income }/> }
diff --git a/src/hooks/date-range.hook.ts b/src/hooks/date-range.hook.ts
@@ -6,15 +6,16 @@ import DateRangeService from "../service/date-range.service";
 /**
  * Consume a range from the path params {@code year} and {@code month}.
  */
-const useDateRange = () : [DateRange] => {
-    const { year, month } = useParams()
-    const [range, setRange] = useState(() => DateRangeService.currentMonth())
+const useDateRange = (): [DateRange] => {
+  const { year, month } = useParams()
+  const [range, setRange] = useState(() => DateRangeService.currentMonth())
 
-    useEffect(() => {
-        if (year && month) setRange(DateRangeService.forMonth(parseInt(year), parseInt(month)))
-    }, [year, month])
+  useEffect(() => {
+    if (year && !month) setRange(DateRangeService.forYear(parseInt(year)))
+    if (year && month) setRange(DateRangeService.forMonth(parseInt(year), parseInt(month)))
+  }, [year, month])
 
-    return [range]
+  return [range]
 }
 
-export default useDateRange
+export default useDateRange
diff --git a/src/pages/budget/routes.ts b/src/pages/budget/routes.ts
@@ -2,25 +2,25 @@ import { lazy } from "react";
 import { RouteObject } from "react-router";
 
 const routes = {
-    id: 'budget',
-    path: 'budgets',
-    children: [
-        {
-            id: 'budget-overview',
-            path: '',
-            Component: lazy(() => import('./index')),
-        },
-        {
-            id: 'budget-overview-monthly',
-            path: ':year/:month',
-            Component: lazy(() => import('./index')),
-        },
-        {
-            id: 'budget-initial',
-            path: 'first-setup',
-            Component: lazy(() => import('./initial-budget')),
-        }
-    ]
+  id: 'budget',
+  path: 'budgets',
+  children: [
+    {
+      id: 'budget-overview',
+      path: '',
+      Component: lazy(() => import('./index')),
+    },
+    {
+      id: 'budget-overview-monthly',
+      path: ':year/:month',
+      Component: lazy(() => import('./index')),
+    },
+    {
+      id: 'budget-initial',
+      path: 'first-setup',
+      Component: lazy(() => import('./initial-budget')),
+    }
+  ]
 } as RouteObject
 
-export default routes
+export default routes
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
@@ -35,16 +35,15 @@ const LoginCard = () => {
     { label: 'Deutsch', icon: () => <Flag language='de'/>, command: () => setLocale('de') }
   ]
 
-  const header = <div className='p-4 flex justify-between relative overflow-hidden'>
-    <span className="text-2xl font-bold text-primary">Pledger.io</span>
+  const header = <div className='p-4 flex justify-between items-center relative overflow-hidden bg-gray-700/20 border-b-gray-500/20 border-b-1'>
+    <span/>
+    <span className="text-2xl font-bold text-blue-800/70">Pledger.io</span>
     <Menu model={ languageMenu } popup ref={ configMenu }/>
     <button type='button' className="cursor-pointer z-10 p-2 hover:bg-gray-100 rounded-full transition-all"
             onClick={ (e) => configMenu?.current?.toggle(e) }
             role='button'>
       <Icon path={ mdiWeb } size={ 1 }/>
     </button>
-    <img src='/ui/images/login-bg.png' className='z-[0] opacity-60 absolute left-0 right-0 top-0 bottom-0'
-         alt='background'/>
   </div>
 
   const onSubmit = (entity: LoginForm) =>
@@ -84,15 +83,13 @@ const LoginCard = () => {
                     autocomplete='username'
                     type='text'
                     icon='user'
-                    className='[&>.p-icon-field>.p-inputtext]:w-full'
                     required/>
 
         <Input.Text id='password'
                     title='UserAccount.password'
                     autocomplete='current-password'
                     icon='lock'
                     type='password'
-                    className='[&>.p-icon-field>.p-inputtext]:w-full'
                     required/>
 
         <div className='flex pt-3 items-stretch'>
@@ -107,7 +104,7 @@ const LoginCard = () => {
       </Divider>
 
       <div className='flex justify-center mt-3'>
-        <Link to={ `/register?from=${ from }` } className='p-button p-button-outlined p-button-lg flex gap-2 items-center w-full justify-center'>
+        <Link to={ `/register?from=${ from }` } className='p-button p-button-info p-button-outlined p-button-lg flex gap-2 items-center w-full justify-center'>
           <Icon path={ mdiAccountPlus } size={ 1 }/>
           { i10n('page.login.register') }
         </Link>
diff --git a/src/pages/register.tsx b/src/pages/register.tsx
diff --git a/src/pages/reports/category-monthly.tsx b/src/pages/reports/category-monthly.tsx
diff --git a/src/pages/reports/income-expense.tsx b/src/pages/reports/income-expense.tsx
diff --git a/src/pages/transaction/routes.ts b/src/pages/transaction/routes.ts
