@ -1,17 +1,149 @@
import { Table , Tooltip } from "antd" ;
import React from "react" ;
import tagIcon from "../../assets/tagIcon.png" ;
import { QuestionCircleOutlined } from "@ant-design/icons" ;
import {
Button ,
Drawer ,
Input ,
Select ,
Table ,
Tooltip ,
Typography ,
} from "antd" ;
import React , { useEffect , useRef , useState } from "react" ;
import tagIcon from "../../assets/tagIcon.svg" ;
import {
CloseOutlined ,
QuestionCircleOutlined ,
SearchOutlined ,
} from "@ant-design/icons" ;
import { theme } from "antd" ;
import api from "../../API/api" ;
import { useAccountingHistory } from "../../Hooks/Accounting" ;
import { useTeamData } from "../../Hooks/Teams" ;
const { Title } = Typography ;
interface Salary {
id : number ;
month : string ;
year : number ;
number_of_tasks : number ;
total_points : number ;
salary_type : string ;
base_salary : string ;
performance_salary : string ;
total_salary : string ;
}
interface Employee {
id : number ;
first_name : string ;
last_name : string ;
username : string ;
}
interface SalaryData {
employee : Employee ;
salaries : Salary [ ] ;
total : number ;
}
const AccountingHistory : React.FC = ( ) = > {
const { data , refetch , isLoading } = useAccountingHistory ( ) ;
const [ open , setOpen ] = useState ( false ) ;
const [ userData , setUserData ] = useState < SalaryData | null > ( null ) ;
const [ years , setYears ] = useState < number [ ] > ( [ ] ) ;
const [ search , setSearch ] = useState < string > ( "" ) ;
const [ team , setTeam ] = useState < any > ( "" ) ;
const themes = localStorage . getItem ( "theme" ) === "true" ? true : false ;
const { data , refetch , isLoading } = useAccountingHistory ( {
search : search ,
team : team ,
} ) ;
const [ selectedUser , setSelectedUser ] = useState < any > ( null ) ;
const handleRowClick = async ( record : any , e : any ) = > {
setSelectedUser ( record ) ;
setOpen ( true ) ;
const id = record . id ;
try {
const response = await api . get ( ` /employee-salaries/ ${ id } / ` ) ;
setUserData ( response . data ) ;
const newYears = Array . from (
new Set ( response . data . salaries . map ( ( salary : Salary ) = > salary . year ) )
) . map ( ( year ) = > Number ( year ) ) ;
setYears ( newYears ) ;
} catch ( error ) {
console . error ( error ) ;
}
} ;
useEffect ( ( ) = > {
if ( userData && userData . salaries && userData . salaries . length > 0 ) {
const newYears = Array . from (
new Set ( userData . salaries . map ( ( salary : Salary ) = > Number ( salary . year ) ) )
) . sort ( ( a , b ) = > b - a ) ;
setYears ( newYears ) ;
}
} , [ userData ] ) ;
const { token } = theme . useToken ( ) ;
const timerRef = useRef < NodeJS.Timeout | null > ( null ) ;
const handleSearchChange = ( e : React.ChangeEvent < HTMLInputElement > ) = > {
if ( timerRef . current ) {
clearTimeout ( timerRef . current ) ;
}
const searchText = e . target . value ;
timerRef . current = setTimeout ( ( ) = > {
setSearch ( searchText ) ;
} , 1000 ) ;
} ;
const teamData = useTeamData ( { } ) ;
const teamOptions : { label : string ; value : any } [ ] | undefined =
teamData ? . data ? . map ( ( item ) = > ( {
label : item?.name ,
value : item?.name ,
} ) ) ;
const additionalOption = {
label : "all" ,
value : "" ,
} ;
if ( teamOptions ) {
teamOptions . unshift ( additionalOption ) ;
}
return (
< div >
< div style = { { paddingBottom : 40 } } >
< span
style = { {
display : "flex" ,
alignItems : "center" ,
marginBottom : 10 ,
} }
>
< div style = { { marginRight : 12 } } >
< Input
placeholder = "Search"
prefix = { < SearchOutlined / > }
onChange = { handleSearchChange }
/ >
< / div >
< Select
style = { { width : 260 } }
placeholder = "Team"
onChange = { ( value : any ) = > setTeam ( value ) }
options = { teamOptions }
/ >
< / span >
< Table
size = "small"
loading = { isLoading }
@ -25,11 +157,51 @@ const AccountingHistory: React.FC = () => {
dataIndex : "no" ,
key : "no" ,
width : "5%" ,
align : "center" ,
} ,
{
title : "Username" ,
dataIndex : "username" ,
key : "username" ,
render : ( text , record ) = > (
< Tooltip
title = {
record ? . full_name ? . trim ( )
? record . full_name
: "User does not have a name"
}
>
< span > { text } < / span >
< / Tooltip >
) ,
} ,
{
title : "Role" ,
dataIndex : "role" ,
key : "role" ,
filters : [
{
text : "Tech Support" ,
value : "Tech Support" ,
} ,
{
text : "Checker" ,
value : "Checker" ,
} ,
{
text : "Accountant" ,
value : "Accountant" ,
} ,
] ,
filterMultiple : false ,
onFilter : ( value : any , record : any ) = > {
return record . role === value ;
} ,
} ,
{
title : "Team" ,
dataIndex : "team_name" ,
key : "team_name" ,
} ,
{
title : "Total Tasks" ,
@ -42,9 +214,30 @@ const AccountingHistory: React.FC = () => {
key : "total_earned_points" ,
} ,
{
title : "Total worked months" ,
title : (
< Tooltip title = "Total Worked Months" >
< span > TWM < / span > & nbsp ;
< QuestionCircleOutlined / >
< / Tooltip >
) ,
dataIndex : "salary_months_count" ,
key : "salary_months_count" ,
// render: (salary_months_count) => {
// const years = Math.floor(salary_months_count / 12);
// const remainingMonths = salary_months_count % 12;
// let result = "";
// if (years > 0) {
// result += `${years} year${years > 1 ? "s" : ""}`;
// }
// if (remainingMonths > 0) {
// result += `${years > 0 ? " " : ""}${remainingMonths} month${
// remainingMonths > 1 ? "s" : ""
// }`;
// }
// return result || "0 months";
// },
} ,
{
title : "Salary Type" ,
@ -54,8 +247,10 @@ const AccountingHistory: React.FC = () => {
return < p > Task Based < / p > ;
} else if ( record . salary_type === "hybrid" ) {
return < p > Hybrid < / p > ;
} else if ( record . salary_type === "fixed" ) {
return < p > Fixed < / p > ;
} else {
return < p > { record . salary_type } < / p > ;
return < p > { record . salary_type } < / p > ; // Agar boshqa qiymat bo'lsa, oddiy qilib chiqariladi
}
} ,
filters : [
@ -67,8 +262,13 @@ const AccountingHistory: React.FC = () => {
text : "Task Based" ,
value : "task_based" ,
} ,
{
text : "Fixed" ,
value : "fixed" ,
} ,
] ,
filterMultiple : false ,
// defaultFilteredValue: ["hybrid"],
onFilter : ( value : any , record : any ) = > {
return record . salary_type === value ;
} ,
@ -102,21 +302,12 @@ const AccountingHistory: React.FC = () => {
) ,
} ,
{
title : (
< div >
< span > Total Salary < / span > & nbsp ;
< Tooltip title = "The calculation of salary begins at the start of the month and continues to the current day. Select a month to review salary details for prior periods." >
< QuestionCircleOutlined / >
< / Tooltip >
< / div >
) ,
title : "Total Salary" ,
dataIndex : "total_earned_salary" ,
key : "total_earned_salary" ,
render : ( text : string , record : any ) = > (
< span > $ { record . total_earned_salary } < / span >
) ,
// sorter: (a: any, b: any) => a.salary - b.total_points,
// sortDirections: ["ascend", "descend"],
} ,
] }
rowClassName = { ( record , index ) = >
@ -140,7 +331,6 @@ const AccountingHistory: React.FC = () => {
} ,
showLessItems : true ,
} }
// onRow={(record) => ({
// onClick: () => {
// if (record.user && record.user.id) {
@ -150,7 +340,170 @@ const AccountingHistory: React.FC = () => {
// }
// },
// })}
onRow = { ( record ) = > ( {
onClick : ( e ) = > handleRowClick ( record , e ) ,
} ) }
/ >
< Drawer
title = {
< Typography className = "title" >
{ selectedUser ? . full_name ? . trim ( )
? selectedUser . full_name
: selectedUser ? . username }
< / Typography >
}
placement = "right"
width = { 850 }
onClose = { ( ) = > setOpen ( false ) }
closable = { false }
open = { open }
extra = {
< Button
type = "text"
icon = { < CloseOutlined / > }
onClick = { ( ) = > setOpen ( false ) }
/ >
}
>
< div className = "info-div" >
< Typography
style = { {
fontSize : 18 ,
fontWeight : 700 ,
lineHeight : "24px" ,
letterSpacing : "-0.02em" ,
marginBottom : 16 ,
} }
>
Information
< / Typography >
< div className = "info-body" >
< div className = "d-flex" style = { { justifyContent : "space-between" } } >
< div >
< tr >
< p className = { ! themes ? "sub" : "sub-dark" } > Username < / p >
< p className = { ! themes ? "info" : "info-dark" } >
{ selectedUser ? . username }
< / p >
< / tr >
< tr >
< p className = { ! themes ? "sub" : "sub-dark" } > Role < / p >
< p className = { ! themes ? "info" : "info-dark" } >
{ selectedUser ? . role }
< / p >
< / tr >
< tr >
< p className = { ! themes ? "sub" : "sub-dark" } > Total Tasks < / p >
< p className = { ! themes ? "info" : "info-dark" } >
{ selectedUser ? . total_number_of_tasks }
< / p >
< / tr >
< tr >
< p className = { ! themes ? "sub" : "sub-dark" } > Total Points < / p >
< p className = { ! themes ? "info" : "info-dark" } >
{ selectedUser ? . total_earned_points }
< / p >
< / tr >
< / div >
< div >
< tr >
< p className = { ! themes ? "sub" : "sub-dark" } >
Total Worked Months
< / p >
< p className = { ! themes ? "info" : "info-dark" } >
{ selectedUser ? . salary_months_count }
< / p >
< / tr >
< tr >
< p className = { ! themes ? "sub" : "sub-dark" } > Total Bonus < / p >
< p className = { ! themes ? "info" : "info-dark" } >
$
{ new Intl . NumberFormat ( "en-US" ) . format (
selectedUser ? . total_bonuses || 0
) }
< / p >
< / tr >
< tr >
< p className = { ! themes ? "sub" : "sub-dark" } > Total Charge < / p >
< p className = { ! themes ? "info" : "info-dark" } >
$
{ new Intl . NumberFormat ( "en-US" ) . format (
selectedUser ? . total_charges || 0
) }
< / p >
< / tr >
< tr >
< p className = { ! themes ? "sub" : "sub-dark" } > Total Salary < / p >
< p className = { ! themes ? "info" : "info-dark" } >
$
{ new Intl . NumberFormat ( "en-US" ) . format (
selectedUser ? . total_earned_salary || 0
) }
< / p >
< / tr >
< / div >
< / div >
< / div >
< / div >
< div style = { { marginTop : 24 } } >
{ years . length === 0 ? (
< p > No data available for the years . < / p >
) : (
years . map ( ( year ) = > (
< div key = { year } style = { { marginBottom : 32 } } >
< Title level = { 3 } > { year } < / Title >
{ userData &&
userData . salaries
. filter ( ( salary ) = > salary . year === year )
. map ( ( filteredSalary ) = > (
< Table
key = { filteredSalary . id }
dataSource = { [ filteredSalary ] }
columns = { [
{
title : < img src = { tagIcon } alt = "" / > ,
dataIndex : "no" ,
width : "5%" ,
align : "center" ,
render : ( text , record , index ) = > index + 1 ,
} ,
{ title : "Year" , dataIndex : "year" } ,
{ title : "Month" , dataIndex : "month" } ,
{
title : "Total Charges" ,
dataIndex : "total_charges" ,
render : ( text : string , record : any ) = > (
< span > $ { record . total_charges } < / span >
) ,
} ,
{
title : "Total Bonus" ,
dataIndex : "total_bonuses" ,
render : ( text : string , record : any ) = > (
< span > $ { record . total_bonuses } < / span >
) ,
} ,
{
title : "Total Salary" ,
dataIndex : "total_salary" ,
render : ( text : string , record : any ) = > (
< span > $ { record . total_salary } < / span >
) ,
} ,
] }
rowKey = "id"
pagination = { false }
bordered
/ >
) ) }
< / div >
) )
) }
< / div >
< / Drawer >
< / div >
) ;
} ;
