init

worklenz-frontend/path/to/members-reports-drawer.tsx

@@ -0,0 +1,49 @@
+import MembersReportsTimeLogsTab from './members-reports-time-logs-tab';
+
+type MembersReportsDrawerProps = {
+  memberId: string | null;
+  exportTimeLogs: () => void;
+};
+
+const MembersReportsDrawer = ({ memberId, exportTimeLogs }: MembersReportsDrawerProps) => {
+  return (
+    <Drawer
+      open={isDrawerOpen}
+      onClose={handleClose}
+      width={900}
+      destroyOnClose
+      title={
+        selectedMember && (
+          <Flex align="center" justify="space-between">
+            <Flex gap={8} align="center" style={{ fontWeight: 500 }}>
+              <Typography.Text>{selectedMember.name}</Typography.Text>
+            </Flex>
+
+            <Space>
+              <TimeWiseFilter />
+              <Dropdown
+                menu={{
+                  items: [
+                    { key: '1', label: t('timeLogsButton'), onClick: exportTimeLogs },
+                    { key: '2', label: t('activityLogsButton') },
+                    { key: '3', label: t('tasksButton') },
+                  ],
+                }}
+              >
+                <Button type="primary" icon={<DownOutlined />} iconPosition="end">
+                  {t('exportButton')}
+                </Button>
+              </Dropdown>
+            </Space>
+          </Flex>
+        )
+      }
+    >
+      {selectedMember && <MembersReportsDrawerTabs memberId={selectedMember.id} />}
+      {selectedMember && <MembersOverviewTasksStatsDrawer memberId={selectedMember.id} />}
+      {selectedMember && <MembersOverviewProjectsStatsDrawer memberId={selectedMember.id} />}
+    </Drawer>
+  );
+};
+
+export default MembersReportsDrawer; 

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;