Skip to content

Commit 73624b5

Browse files
thisismayureshthisismayuresh
authored
Merging Next Into ---> Main (#1070)
2 parents e3536cf + 1555bad commit 73624b5

File tree

25 files changed

+447
-43
lines changed

25 files changed

+447
-43
lines changed

‎apps/api/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@impler/api",
3-
"version": "1.6.0",
3+
"version": "1.7.0",
44
"author": "implerhq",
55
"license": "MIT",
66
"private": true,

‎apps/queue-manager/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@impler/queue-manager",
3-
"version": "1.6.0",
3+
"version": "1.7.0",
44
"author": "implerhq",
55
"license": "MIT",
66
"private": true,

‎apps/web/assets/icons/Date.icon.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { IconType } from '@types';
2+
import { IconSizes } from 'config';
3+
4+
export const DateIcon = ({ size = 'sm', color }: IconType) => {
5+
return (
6+
<svg
7+
xmlns="http://www.w3.org/2000/svg"
8+
fill="#000000"
9+
width={IconSizes[size]}
10+
height={IconSizes[size]}
11+
color={color}
12+
viewBox="0 0 100 100"
13+
enable-background="new 0 0 100 100"
14+
xml-space="preserve"
15+
>
16+
<path d="M76,42H24c-1.1,0-2,0.9-2,2v30c0,3.3,2.7,6,6,6h44c3.3,0,6-2.7,6-6V44C78,42.9,77.1,42,76,42z M40,70 c0,1.1-0.9,2-2,2h-4c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2V70z M54,70c0,1.1-0.9,2-2,2h-4c-1.1,0-2-0.9-2-2v-4 c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2V70z M54,56c0,1.1-0.9,2-2,2h-4c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2V56z M68,56c0,1.1-0.9,2-2,2h-4c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2V56z M72,26h-5v-2c0-2.2-1.8-4-4-4s-4,1.8-4,4v2 H41v-2c0-2.2-1.8-4-4-4s-4,1.8-4,4v2h-5c-3.3,0-6,2.7-6,6v2c0,1.1,0.9,2,2,2h52c1.1,0,2-0.9,2-2v-2C78,28.7,75.3,26,72,26z" />
17+
</svg>
18+
);
19+
};

‎apps/web/assets/icons/Graph.icon.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { IconType } from '@types';
2+
import { IconSizes } from 'config';
3+
4+
export const GraphIcon = ({ size = 'sm', color, className }: IconType) => {
5+
return (
6+
<svg
7+
width={IconSizes[size]}
8+
height={IconSizes[size]}
9+
color={color}
10+
viewBox="0 0 20 20"
11+
fill="none"
12+
className={className}
13+
xmlns="http://www.w3.org/2000/svg"
14+
>
15+
<path
16+
d="M3 18H17C17.2652 18 17.5196 18.1054 17.7071 18.2929C17.8946 18.4804 18 18.7348 18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H3C2.73478 20 2.48043 19.8946 2.29289 19.7071C2.10536 19.5196 2 19.2652 2 19C2 18.7348 2.10536 18.4804 2.29289 18.2929C2.48043 18.1054 2.73478 18 3 18ZM6 16C5.44772 16 5 15.5523 5 15V9C5 8.44772 5.44772 8 6 8H8C8.55228 8 9 8.44772 9 9V15C9 15.5523 8.55228 16 8 16H6ZM11 16C10.4477 16 10 15.5523 10 15V5C10 4.44772 10.4477 4 11 4H13C13.5523 4 14 4.44772 14 5V15C14 15.5523 13.5523 16 13 16H11ZM16 16C15.4477 16 15 15.5523 15 15V1C15 0.447715 15.4477 0 16 0H18C18.5523 0 19 0.447715 19 1V15C19 15.5523 18.5523 16 18 16H16Z"
17+
fill="currentColor"
18+
/>
19+
</svg>
20+
);
21+
};

‎apps/web/components/import-feed/History.tsx‎

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,24 @@
1-
import { ChangeEvent } from 'react';
2-
import { ActionIcon, Group, LoadingOverlay, Stack, Title, Tooltip, TextInput as Input } from '@mantine/core';
1+
import { Stack, Group, Button, Badge } from '@mantine/core';
2+
import React, { ChangeEvent } from 'react';
3+
import { LoadingOverlay, TextInput as Input, Title } from '@mantine/core';
34

4-
import { Badge } from '@ui/badge';
55
import { Table } from '@ui/table';
6-
import { VARIABLES, colors } from '@config';
6+
import { VARIABLES } from '@config';
77
import { Pagination } from '@ui/pagination';
88
import { DateInput } from '@ui/date-input';
99
import { useHistory } from '@hooks/useHistory';
1010
import { IHistoryRecord } from '@impler/shared';
1111
import { SearchIcon } from '@assets/icons/Search.icon';
12-
import { DownloadIcon } from '@assets/icons/Download.icon';
1312

1413
export function History() {
1514
const {
1615
historyData,
17-
downloadOriginalFile,
1816
isHistoryDataLoading,
1917
onLimitChange,
2018
onPageChange,
2119
onNameChange,
2220
onDateChange,
21+
openViewImportHistoryModal,
2322
name,
2423
date,
2524
} = useHistory();
@@ -48,10 +47,6 @@ export function History() {
4847
<LoadingOverlay visible={isHistoryDataLoading} />
4948
<Table<IHistoryRecord>
5049
headings={[
51-
{
52-
title: 'Import Id',
53-
key: '_id',
54-
},
5550
{
5651
title: 'Name',
5752
key: 'name',
@@ -91,21 +86,21 @@ export function History() {
9186
key: 'totalRecords',
9287
},
9388
{
94-
title: 'Download Original File',
95-
key: 'download',
89+
title: 'View Details',
90+
key: 'details',
9691
width: 100,
97-
Cell(item) {
98-
return item.originalFileName && item._uploadedFileId ? (
99-
<Tooltip label="Download original file" withArrow>
100-
<ActionIcon
101-
radius={0}
102-
variant="transparent"
103-
onClick={() => downloadOriginalFile([item._id, item.originalFileName])}
104-
>
105-
<DownloadIcon color={colors.yellow} />
106-
</ActionIcon>
107-
</Tooltip>
108-
) : null;
92+
Cell(item: IHistoryRecord) {
93+
return (
94+
<Button
95+
size="xs"
96+
variant="subtle"
97+
onClick={() => {
98+
openViewImportHistoryModal(item);
99+
}}
100+
>
101+
View
102+
</Button>
103+
);
109104
},
110105
},
111106
]}

‎apps/web/components/import-feed/ImportHistoryModal/ImportHistoryModal.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React, { useState } from 'react';
2+
import { Tabs, Group, Box } from '@mantine/core';
3+
import { IHistoryRecord } from '@impler/shared';
4+
import { OverviewTab } from './OverviewTab';
5+
import { WebhookLogsTab } from './WebhookLogsTab';
6+
import { Button } from '@ui/button';
7+
8+
interface ImportHistoryModalProps {
9+
onClose?: () => void;
10+
record: IHistoryRecord;
11+
onDownloadFile: (data: [string, string]) => void;
12+
}
13+
14+
export function ImportHistoryModal({ onClose, record, onDownloadFile }: ImportHistoryModalProps) {
15+
const [activeTab, setActiveTab] = useState<string>('overview');
16+
17+
const handleDownloadFile = () => {
18+
if (record.originalFileName && record._uploadedFileId) {
19+
onDownloadFile([record._id, record.originalFileName]);
20+
}
21+
};
22+
23+
return (
24+
<Box style={{ height: '70vh', display: 'flex', flexDirection: 'column' }}>
25+
<Tabs
26+
value={activeTab}
27+
onTabChange={(value) => setActiveTab(value || 'overview')}
28+
style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
29+
>
30+
<Tabs.List grow mb="md">
31+
<Tabs.Tab value="overview">Overview</Tabs.Tab>
32+
<Tabs.Tab value="logs">Webhook Logs</Tabs.Tab>
33+
</Tabs.List>
34+
35+
<Box style={{ flexGrow: 1, overflow: 'auto', marginBottom: 'auto' }}>
36+
<Tabs.Panel value="overview">
37+
<OverviewTab record={record} />
38+
</Tabs.Panel>
39+
40+
<Tabs.Panel value="logs">
41+
<WebhookLogsTab record={record as IHistoryRecord} />
42+
</Tabs.Panel>
43+
</Box>
44+
</Tabs>
45+
46+
<Group position="center" pt="md">
47+
<Button variant="outline" onClick={onClose}>
48+
Close
49+
</Button>
50+
{record.originalFileName && record._uploadedFileId && (
51+
<Button onClick={handleDownloadFile}>Download Original File</Button>
52+
)}
53+
</Group>
54+
</Box>
55+
);
56+
}

‎apps/web/components/import-feed/ImportHistoryModal/OverviewTab.tsx‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import React from 'react';
2+
import {
3+
Stack,
4+
Card,
5+
Group,
6+
Text,
7+
Badge,
8+
Grid,
9+
ThemeIcon,
10+
Timeline,
11+
Code,
12+
CopyButton,
13+
Tooltip,
14+
ActionIcon,
15+
} from '@mantine/core';
16+
import { IHistoryRecord } from '@impler/shared';
17+
import { getStatusColor, getStatusSymbol } from '@shared/utils';
18+
import dayjs from 'dayjs';
19+
import { DATE_FORMATS } from '@config';
20+
import { CopyIcon } from '@assets/icons/Copy.icon';
21+
import { GraphIcon } from '@assets/icons/Graph.icon';
22+
import { DateIcon } from '@assets/icons/Date.icon';
23+
24+
interface OverviewTabProps {
25+
record: IHistoryRecord;
26+
}
27+
28+
export function OverviewTab({ record }: OverviewTabProps) {
29+
return (
30+
<Stack spacing="xl">
31+
{/* Status Card */}
32+
<Card withBorder radius="md" p="lg">
33+
<Group position="apart" mb="md">
34+
<Text size="sm">Status Overview</Text>
35+
<Badge variant="filled" color={getStatusColor(record.status)} size="lg">
36+
{record.status}
37+
</Badge>
38+
</Group>
39+
40+
<Grid>
41+
<Grid.Col span={6}>
42+
<Group spacing="xs" mb="xs">
43+
<ThemeIcon variant="light" size="sm" color="blue">
44+
<Text size="sm">#</Text>
45+
</ThemeIcon>
46+
<Text size="sm">Import ID</Text>
47+
</Group>
48+
<Group spacing="xs">
49+
<Code>{record._id}</Code>
50+
<CopyButton value={record._id}>
51+
{({ copied, copy }) => (
52+
<Tooltip label={copied ? 'Copied' : 'Copy Upload Id'}>
53+
<ActionIcon variant="subtle" size="sm" onClick={copy}>
54+
<Text size="xs">{copied ? '✓' : <CopyIcon />}</Text>
55+
</ActionIcon>
56+
</Tooltip>
57+
)}
58+
</CopyButton>
59+
</Group>
60+
</Grid.Col>
61+
62+
<Grid.Col span={6}>
63+
<Group spacing="xs" mb="xs">
64+
<GraphIcon />
65+
<Text size="sm">Total Records</Text>
66+
</Group>
67+
<Text size="lg" fw={700} c="blue">
68+
{record.totalRecords || 0}
69+
</Text>
70+
</Grid.Col>
71+
</Grid>
72+
</Card>
73+
74+
{/* Timeline Card */}
75+
<Card withBorder radius="md" p="lg">
76+
<Text size="sm" mb="md">
77+
Timeline
78+
</Text>
79+
<Timeline active={1} bulletSize={24} lineWidth={2}>
80+
<Timeline.Item
81+
bullet={
82+
<Text size="sm">
83+
<DateIcon size="md" color="white" />
84+
</Text>
85+
}
86+
title="Upload Date"
87+
>
88+
<Text c="dimmed" size="sm">
89+
{dayjs(record.uploadedDate).format(DATE_FORMATS.LONG)}
90+
</Text>
91+
</Timeline.Item>
92+
<Timeline.Item
93+
bullet={<Text size="sm">{getStatusSymbol(record.status)}</Text>}
94+
title="Current Status"
95+
color={getStatusColor(record.status)}
96+
>
97+
<Badge variant="light" color={getStatusColor(record.status)} size="sm">
98+
{record.status}
99+
</Badge>
100+
</Timeline.Item>
101+
</Timeline>
102+
</Card>
103+
</Stack>
104+
);
105+
}

0 commit comments

Comments
 (0)