41 lines
1.5 KiB
TypeScript
41 lines
1.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Flex, Skeleton } from 'antd';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useTimeLogs } from '../contexts/TimeLogsContext';
|
|
import { BillableFilter } from './BillableFilter';
|
|
import { TimeLogCard } from './TimeLogCard';
|
|
import { EmptyListPlaceholder } from './EmptyListPlaceholder';
|
|
import { TaskDrawer } from './TaskDrawer';
|
|
import MembersReportsDrawer from './members-reports-drawer';
|
|
|
|
const MembersReportsTimeLogsTab: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
const { timeLogsData, billable, setBillable, exportTimeLogs, exporting } = useTimeLogs();
|
|
|
|
return (
|
|
<Flex vertical gap={24}>
|
|
<BillableFilter billable={billable} onBillableChange={setBillable} />
|
|
|
|
<button onClick={exportTimeLogs} disabled={exporting}>
|
|
{exporting ? t('exporting') : t('exportTimeLogs')}
|
|
</button>
|
|
|
|
<Skeleton active loading={exporting} paragraph={{ rows: 10 }}>
|
|
{timeLogsData.length > 0 ? (
|
|
<Flex vertical gap={24}>
|
|
{timeLogsData.map((logs, index) => (
|
|
<TimeLogCard key={index} data={logs} />
|
|
))}
|
|
</Flex>
|
|
) : (
|
|
<EmptyListPlaceholder text={t('timeLogsEmptyPlaceholder')} />
|
|
)}
|
|
</Skeleton>
|
|
|
|
{createPortal(<TaskDrawer />, document.body)}
|
|
<MembersReportsDrawer memberId={/* pass the memberId here */} exportTimeLogs={exportTimeLogs} />
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default MembersReportsTimeLogsTab;
|