Skip to content

Commit

Permalink
Merge pull request #33 from CristianF09/partial-statistics-lunar
Browse files Browse the repository at this point in the history 
update partial pt lunar si anual
  • Loading branch information
@Miro-wq
Miro-wq authored Nov 7, 2024
2 parents c45ffd2 + fb4a3f6 commit cecfc34
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 76 deletions.
126 changes: 62 additions & 64 deletions src/components/DashboardComponent/DashboadComponent.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,69 @@
import React, { useEffect, useState } from 'react';
import Select from 'react-select';
import styles from './DashboardComponent.module.css';
import { useDispatch } from 'react-redux';
import { fetchTransactionsSummary } from '../../redux/transactions/operations';
// import React, { useEffect, useState } from 'react';
// import Select from 'react-select';
// import styles from './DashboardComponent.module.css';
// import { useDispatch } from 'react-redux';
// import { fetchTransactionsSummary } from '../../redux/transactions/operations';

const StatisticsDashboard = () => {
const dispatch = useDispatch();
const [selectedMonth, setSelectedMonth] = useState({
value: 3,
label: 'March',
});
const [selectedYear, setSelectedYear] = useState({
value: 2024,
label: '2024',
});
// const StatisticsDashboard = () => {
// const dispatch = useDispatch();
// const [selectedMonth, setSelectedMonth] = useState({
// value: 3,
// label: 'March',
// });
// const [selectedYear, setSelectedYear] = useState({
// value: 2024,
// label: '2024',
// });

const onMonthChange = month => setSelectedMonth(month);
const onYearClick = year => setSelectedYear(year);
// const onMonthChange = month => setSelectedMonth(month);
// const onYearClick = year => setSelectedYear(year);

const optionsYears = [
{ value: 2024, label: '2024' },
{ value: 2023, label: '2023' },
{ value: 2022, label: '2022' },
{ value: 2021, label: '2021' },
{ value: 2019, label: '2019' },
{ value: 2018, label: '2018' },
{ value: 2017, label: '2017' },
];
// const optionsYears = [
// { value: 2024, label: '2024' },
// { value: 2023, label: '2023' },
// { value: 2022, label: '2022' },
// { value: 2021, label: '2021' },
// { value: 2019, label: '2019' },
// { value: 2018, label: '2018' },
// { value: 2017, label: '2017' },
// ];

const optionsMonth = [
{ value: 1, label: 'January' },
{ value: 2, label: 'February' },
{ value: 3, label: 'March' },
{ value: 4, label: 'April' },
{ value: 5, label: 'May' },
{ value: 6, label: 'June' },
{ value: 7, label: 'July' },
{ value: 8, label: 'August' },
{ value: 9, label: 'September' },
{ value: 10, label: 'October' },
{ value: 11, label: 'November' },
{ value: 12, label: 'December' },
];
// const optionsMonth = [
// { value: 1, label: 'January' },
// { value: 2, label: 'February' },
// { value: 3, label: 'March' },
// { value: 4, label: 'April' },
// { value: 5, label: 'May' },
// { value: 6, label: 'June' },
// { value: 7, label: 'July' },
// { value: 8, label: 'August' },
// { value: 9, label: 'September' },
// { value: 10, label: 'October' },
// { value: 11, label: 'November' },
// { value: 12, label: 'December' },
// ];

useEffect(() => {
const data = { month: selectedMonth.value, year: selectedYear.value };
dispatch(fetchTransactionsSummary(data));
}, [dispatch, selectedMonth, selectedYear]);
// useEffect(() => {
// const data = { month: selectedMonth.value, year: selectedYear.value };
// dispatch(fetchTransactionsSummary(data));
// }, [dispatch, selectedMonth, selectedYear]);

return (
<div className={styles.mainDiv}>
<Select
value={selectedMonth}
onChange={onMonthChange}
options={optionsMonth}
placeholder={selectedMonth.label}
// styles={customStyles}
/>
<Select
value={selectedYear}
onChange={onYearClick}
options={optionsYears}
placeholder={selectedYear.label}
// styles={customStyles}
/>
</div>
);
};
// return (
// <div className={styles.mainDiv}>
// <Select
// value={selectedMonth}
// onChange={onMonthChange}
// options={optionsMonth}
// placeholder={selectedMonth.label}
// />
// <Select
// value={selectedYear}
// onChange={onYearClick}
// options={optionsYears}
// placeholder={selectedYear.label}
// />
// </div>
// );
// };

export default StatisticsDashboard;
// export default StatisticsDashboard;
1 change: 0 additions & 1 deletion src/components/StatisticsDashboard/StatisticsDashboard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ const StatisticsDashboard = () => {
selectedValue={selectedYear}
onSelect={setSelectedYear}
/>
{/* Poți folosi transactionsSummary aici sau în StatisticsTable */}
</div>
);
};
Expand Down
27 changes: 24 additions & 3 deletions src/components/StatisticsTable/StatisticsTable.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,39 @@
.statisticsTable {
width: 100%;
margin-top: 20px;
border-collapse: collapse;
color: #ffffff;
font-family: Arial, sans-serif;
}

.tableHead {
color: #fbfbfb;
background: #523b7e99;
box-shadow: 0px 4px 60px 0px #00000040;
backdrop-filter: blur(50px);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
overflow: hidden;
position: relative;
}

tr {
.tableHead:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #523b7e99;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
z-index: -1;
}

.tableRow {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

Expand All @@ -38,6 +59,7 @@ tr {
font-weight: bold;
color: #ffffff;
opacity: 0.7;
padding: 17px;
}

.statisticsTable tbody tr td:first-child {
Expand All @@ -55,7 +77,6 @@ tr {
.totalRow,
.incomeRow {
font-weight: bold;
border-top: 1px solid #ffffff33;
}

.totalRow td,
Expand Down
6 changes: 3 additions & 3 deletions src/redux/Statistics/operations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,20 @@ import {
} from '../../config/userTransactionsApi';

export const getTransactionsSummaryByPeriod = createAsyncThunk(
'transactions/summary',
'statistics/getTransactionsSummaryByPeriod',
async ({ month, year }, thunkApi) => {
const savedToken = thunkApi.getState().auth.token;
if (savedToken) {
setToken(savedToken);
} else {
return thunkApi.rejectWithValue('Unable to fetch');
}
try {
const { data } = await userTransactionsApi.get(
`/api/transactions-summary?month=${month}&year=${year}`
);
console.log('Răspuns de la API pentru period summary:', data);
return data;
} catch (error) {
console.error('Eroare la obținerea datelor:', error);
return thunkApi.rejectWithValue(error.message);
}
}
Expand Down
18 changes: 13 additions & 5 deletions src/redux/Statistics/slice.js
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,40 @@
/*Temporar*/
import { createSlice, isAnyOf } from '@reduxjs/toolkit';
import {
getTransactionsCategories,
getTransactionsSummaryByPeriod,
} from './operations';

const initialState = {
summary: [],
summaryByPeriod: {},
categories: [],
selectedMonth: new Date().getMonth() + 1,
selectedYear: new Date().getFullYear(),
isStatisticsLoading: false,
isStatisticsError: null,
};

const slice = createSlice({
name: 'statistics',
initialState,
reducers: {
setSelectedMonth: (state, action) => {
state.selectedMonth = action.payload;
},
setSelectedYear: (state, action) => {
state.selectedYear = action.payload;
},
},
extraReducers: builder => {
builder

.addCase(getTransactionsCategories.fulfilled, (state, action) => {
state.isStatisticsLoading = false;
console.log(action.payload);
state.categories = action.payload;
})
.addCase(
getTransactionsSummaryByPeriod.fulfilled,
(state, { payload }) => {
state.isStatisticsLoading = false;
state.summary = payload;
state.summaryByPeriod = payload;
}
)
.addMatcher(
Expand All @@ -53,4 +60,5 @@ const slice = createSlice({
},
});

export const { setSelectedMonth, setSelectedYear } = slice.actions;
export const statisticsReducer = slice.reducer;

0 comments on commit cecfc34

Please sign in to comment.