Skip to content

Commit

Permalink
Add date filtering functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@pratikkabade
pratikkabade committed Mar 11, 2024
1 parent 7752bbc commit 89d94a2
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 30 deletions.
37 changes: 23 additions & 14 deletions src/pages/Accounts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,15 @@ import { useEffect, useState } from 'react'
import { getDate, getDay } from '../hooks/Functions'
import { LoadingComponent } from '../components/LoadingComponent'
import { Link } from 'react-router-dom'
import { DateFilter } from '../hooks/DateFilter.tsx'

export const Accounts = () => {
const [data, setData] = useState<any>([])
const [account, setAccount] = useState<any>(localStorage.getItem('accountName') || '')

const [year, setYear] = useState('')
const [month, setMonth] = useState('')

useEffect(() => {
const theData = localStorage.getItem('theData') || ''
if (theData !== '') setData(JSON.parse(theData))
Expand All @@ -19,7 +23,9 @@ export const Accounts = () => {
)
}

const currentData = data.transactions.filter((item: any) => item.type !== "TRANSFER")
const currentData1 = data.transactions.filter((item: any) => item.type !== "TRANSFER")
const currentData = currentData1.filter((item: any) => item.transactionMonth.toString() === month.toString() &&
item.transactionYear.toString() === year.toString())

// show all accounts
const accounts = data.accounts
Expand All @@ -37,17 +43,20 @@ export const Accounts = () => {

return (
<div className="container mb-32 mx-auto justify-center items-center">
<div className='flex flex-wrap flex-row'>
{sum === 0 ? (
<div className="text-4xl font-bold text-center my-10">
No transactions found
</div>
) : (
<DateFilter yearC={year} setYearC={setYear}
monthC={month} setMonthC={setMonth} />

<div className="text-4xl font-bold text-center my-10">
Total: {sum} {currentData[0].accountCurrency}
</div>
)}
{sum === 0 ? (
<div className="text-4xl font-bold text-center my-10">
No transactions found
</div>
) : (

<div className="text-4xl font-bold text-center my-10">
Total: {sum} {data.settings[0].currency}
</div>
)}
<div className='flex flex-wrap flex-row'>
{
accounts.map((item: any) => (
<div className="p-5 lg:w-48 md:w-72 m-1 bg-slate-100 dark:bg-slate-800 rounded-2xl hover:shadow-lg cursor-pointer hover:brightness-110 transition duration-300 ease-in-out"
Expand All @@ -63,7 +72,7 @@ export const Accounts = () => {
<p
key={item.id + 'day'}
className="text-slate-500 dark:text-slate-300 text-sm font-medium">
{item.currency}
{data.settings[0].currency}
</p>
<p
key={item.id + 'day'}
Expand Down Expand Up @@ -94,7 +103,7 @@ export const Accounts = () => {

<div className="flex flex-row flex-wrap justify-around text-lg font-bold my-5">
<Link to={`/Category/`}
onClick={() => localStorage.setItem('category', item.categoryName)}>
onClick={() => localStorage.setItem('categoryName', item.categoryName)}>
<p key={item.id + 'categoryName'}
className="bg-green-100 dark:bg-green-800 p-2 px-10 m-1 rounded-full hover:shadow-md cursor-pointer">
{/* {item.categoryIcon} */}
Expand All @@ -103,7 +112,7 @@ export const Accounts = () => {
</p>
</Link>
<Link to={`/Accounts/`}
onClick={() => localStorage.setItem('account', item.accountName)}>
onClick={() => localStorage.setItem('accountName', item.accountName)}>
<p key={item.id + 'account name'}
className="bg-white p-2 dark:bg-gray-900 px-10 m-1 rounded-full hover:shadow-md cursor-pointer">
{/* {item.accountIcon} */}
Expand Down
36 changes: 22 additions & 14 deletions src/pages/Category.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,15 @@ import { useEffect, useState } from 'react'
import { getDate, getDay } from '../hooks/Functions'
import { LoadingComponent } from '../components/LoadingComponent'
import { Link } from 'react-router-dom'
import { DateFilter } from '../hooks/DateFilter.tsx'

export const Category = () => {
const [data, setData] = useState<any>([])
const [group, setGroup] = useState<any>(localStorage.getItem('categoryName') || '')

const [year, setYear] = useState('')
const [month, setMonth] = useState('')

useEffect(() => {
const theData = localStorage.getItem('theData') || ''
if (theData !== '') setData(JSON.parse(theData))
Expand All @@ -20,7 +24,9 @@ export const Category = () => {
)
}

const currentData = data.transactions.filter((item: any) => item.type !== "TRANSFER")
const currentData1 = data.transactions.filter((item: any) => item.type !== "TRANSFER")
const currentData = currentData1.filter((item: any) => item.transactionMonth.toString() === month.toString() &&
item.transactionYear.toString() === year.toString())

// show all categories
const categories = data.categories
Expand All @@ -39,17 +45,19 @@ export const Category = () => {

return (
<div className="container mb-32 mx-auto justify-center items-center">
<DateFilter yearC={year} setYearC={setYear}
monthC={month} setMonthC={setMonth} />

{group === '' ? (
<div className="text-4xl font-bold text-center my-10">
No transactions found
</div>
) : (
<div className="text-4xl font-bold text-center my-10">
Total: {sum} {data.settings[0].currency}
</div>
)}
<div className='flex flex-wrap flex-row'>
{sum === 0 ? (
<div className="text-4xl font-bold text-center my-10">
No transactions found
</div>
) : (

<div className="text-4xl font-bold text-center my-10">
Total: {sum} {currentData[0].accountCurrency}
</div>
)}
{
categories.map((item: any) => (
<div className="p-5 lg:w-48 md:w-72 m-1 bg-slate-100 dark:bg-slate-800 rounded-2xl hover:shadow-lg cursor-pointer hover:brightness-110 transition duration-300 ease-in-out"
Expand All @@ -63,7 +71,7 @@ export const Category = () => {
<p
key={item.id + 'day'}
className="text-slate-500 dark:text-slate-300 text-sm font-medium">
{item.currency}
{data.settings[0].currency}
</p>
<p
key={item.id + 'day'}
Expand Down Expand Up @@ -95,7 +103,7 @@ export const Category = () => {

<div className="flex flex-row flex-wrap justify-around text-lg font-bold my-5">
<Link to={`/Category/`}
onClick={() => localStorage.setItem('category', item.categoryName)}>
onClick={() => localStorage.setItem('categoryName', item.categoryName)}>
<p key={item.id + 'categoryName'}
className="bg-green-100 dark:bg-green-800 p-2 px-10 m-1 rounded-full hover:shadow-md cursor-pointer">
{/* {item.categoryIcon} */}
Expand All @@ -104,7 +112,7 @@ export const Category = () => {
</p>
</Link>
<Link to={`/Accounts/`}
onClick={() => localStorage.setItem('account', item.accountName)}>
onClick={() => localStorage.setItem('accountName', item.accountName)}>
<p key={item.id + 'account name'}
className="bg-white p-2 dark:bg-gray-900 px-10 m-1 rounded-full hover:shadow-md cursor-pointer">
{/* {item.accountIcon} */}
Expand Down
10 changes: 8 additions & 2 deletions src/pages/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,14 @@ import { useEffect, useState } from 'react'
import { getDate, getDay } from '../hooks/Functions'
import { LoadingComponent } from '../components/LoadingComponent'
import { Link } from 'react-router-dom'
import { DateFilter } from '../hooks/DateFilter.tsx'

export const Dashboard = () => {
const [data, setData] = useState<any>([])
const [year, setYear] = useState('')
const [month, setMonth] = useState('')

// FETCH THE LOCALLY SAVED DATA
useEffect(() => {
const theData = localStorage.getItem('theData') || ''
if (theData !== '') setData(JSON.parse(theData))
Expand All @@ -18,11 +22,13 @@ export const Dashboard = () => {
)
}

// only show 100 transactions
const currentData = data.transactions.slice(0, 100)
const currentData = data.transactions.filter((item: any) => item.transactionMonth.toString() === month.toString() &&
item.transactionYear.toString() === year.toString())

return (
<div className="container mb-32 flex flex-wrap flex-col mx-auto justify-center items-center">
<DateFilter yearC={year} setYearC={setYear}
monthC={month} setMonthC={setMonth} />
<div className="flex flex-wrap flex-row mx-auto justify-center items-center">
{currentData.map((item: any) => (
<div className="flex justify-center slide-r">
Expand Down

0 comments on commit 89d94a2

Please sign in to comment.