init

worklenz-frontend/path/to/members-reports-time-logs-tab.tsx

@@ -0,0 +1,41 @@
+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;