Merging Next Into ---> Main

apps/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impler/api",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "author": "implerhq",
   "license": "MIT",
   "private": true,

apps/queue-manager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impler/queue-manager",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "author": "implerhq",
   "license": "MIT",
   "private": true,

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

@@ -0,0 +1,19 @@
+import { IconType } from '@types';
+import { IconSizes } from 'config';
+
+export const DateIcon = ({ size = 'sm', color }: IconType) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#000000"
+      width={IconSizes[size]}
+      height={IconSizes[size]}
+      color={color}
+      viewBox="0 0 100 100"
+      enable-background="new 0 0 100 100"
+      xml-space="preserve"
+    >
+      <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" />
+    </svg>
+  );
+};

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

@@ -0,0 +1,21 @@
+import { IconType } from '@types';
+import { IconSizes } from 'config';
+
+export const GraphIcon = ({ size = 'sm', color, className }: IconType) => {
+  return (
+    <svg
+      width={IconSizes[size]}
+      height={IconSizes[size]}
+      color={color}
+      viewBox="0 0 20 20"
+      fill="none"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        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"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

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

@@ -1,25 +1,24 @@
-import { ChangeEvent } from 'react';
-import { ActionIcon, Group, LoadingOverlay, Stack, Title, Tooltip, TextInput as Input } from '@mantine/core';
+import { Stack, Group, Button, Badge } from '@mantine/core';
+import React, { ChangeEvent } from 'react';
+import { LoadingOverlay, TextInput as Input, Title } from '@mantine/core';
 
-import { Badge } from '@ui/badge';
 import { Table } from '@ui/table';
-import { VARIABLES, colors } from '@config';
+import { VARIABLES } from '@config';
 import { Pagination } from '@ui/pagination';
 import { DateInput } from '@ui/date-input';
 import { useHistory } from '@hooks/useHistory';
 import { IHistoryRecord } from '@impler/shared';
 import { SearchIcon } from '@assets/icons/Search.icon';
-import { DownloadIcon } from '@assets/icons/Download.icon';
 
 export function History() {
   const {
     historyData,
-    downloadOriginalFile,
     isHistoryDataLoading,
     onLimitChange,
     onPageChange,
     onNameChange,
     onDateChange,
+    openViewImportHistoryModal,
     name,
     date,
   } = useHistory();
@@ -48,10 +47,6 @@ export function History() {
         <LoadingOverlay visible={isHistoryDataLoading} />
         <Table<IHistoryRecord>
           headings={[
-            {
-              title: 'Import Id',
-              key: '_id',
-            },
             {
               title: 'Name',
               key: 'name',
@@ -91,21 +86,21 @@ export function History() {
               key: 'totalRecords',
             },
             {
-              title: 'Download Original File',
-              key: 'download',
+              title: 'View Details',
+              key: 'details',
               width: 100,
-              Cell(item) {
-                return item.originalFileName && item._uploadedFileId ? (
-                  <Tooltip label="Download original file" withArrow>
-                    <ActionIcon
-                      radius={0}
-                      variant="transparent"
-                      onClick={() => downloadOriginalFile([item._id, item.originalFileName])}
-                    >
-                      <DownloadIcon color={colors.yellow} />
-                    </ActionIcon>
-                  </Tooltip>
-                ) : null;
+              Cell(item: IHistoryRecord) {
+                return (
+                  <Button
+                    size="xs"
+                    variant="subtle"
+                    onClick={() => {
+                      openViewImportHistoryModal(item);
+                    }}
+                  >
+                    View
+                  </Button>
+                );
               },
             },
           ]}

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

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { Tabs, Group, Box } from '@mantine/core';
+import { IHistoryRecord } from '@impler/shared';
+import { OverviewTab } from './OverviewTab';
+import { WebhookLogsTab } from './WebhookLogsTab';
+import { Button } from '@ui/button';
+
+interface ImportHistoryModalProps {
+  onClose?: () => void;
+  record: IHistoryRecord;
+  onDownloadFile: (data: [string, string]) => void;
+}
+
+export function ImportHistoryModal({ onClose, record, onDownloadFile }: ImportHistoryModalProps) {
+  const [activeTab, setActiveTab] = useState<string>('overview');
+
+  const handleDownloadFile = () => {
+    if (record.originalFileName && record._uploadedFileId) {
+      onDownloadFile([record._id, record.originalFileName]);
+    }
+  };
+
+  return (
+    <Box style={{ height: '70vh', display: 'flex', flexDirection: 'column' }}>
+      <Tabs
+        value={activeTab}
+        onTabChange={(value) => setActiveTab(value || 'overview')}
+        style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
+      >
+        <Tabs.List grow mb="md">
+          <Tabs.Tab value="overview">Overview</Tabs.Tab>
+          <Tabs.Tab value="logs">Webhook Logs</Tabs.Tab>
+        </Tabs.List>
+
+        <Box style={{ flexGrow: 1, overflow: 'auto', marginBottom: 'auto' }}>
+          <Tabs.Panel value="overview">
+            <OverviewTab record={record} />
+          </Tabs.Panel>
+
+          <Tabs.Panel value="logs">
+            <WebhookLogsTab record={record as IHistoryRecord} />
+          </Tabs.Panel>
+        </Box>
+      </Tabs>
+
+      <Group position="center" pt="md">
+        <Button variant="outline" onClick={onClose}>
+          Close
+        </Button>
+        {record.originalFileName && record._uploadedFileId && (
+          <Button onClick={handleDownloadFile}>Download Original File</Button>
+        )}
+      </Group>
+    </Box>
+  );
+}

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import {
+  Stack,
+  Card,
+  Group,
+  Text,
+  Badge,
+  Grid,
+  ThemeIcon,
+  Timeline,
+  Code,
+  CopyButton,
+  Tooltip,
+  ActionIcon,
+} from '@mantine/core';
+import { IHistoryRecord } from '@impler/shared';
+import { getStatusColor, getStatusSymbol } from '@shared/utils';
+import dayjs from 'dayjs';
+import { DATE_FORMATS } from '@config';
+import { CopyIcon } from '@assets/icons/Copy.icon';
+import { GraphIcon } from '@assets/icons/Graph.icon';
+import { DateIcon } from '@assets/icons/Date.icon';
+
+interface OverviewTabProps {
+  record: IHistoryRecord;
+}
+
+export function OverviewTab({ record }: OverviewTabProps) {
+  return (
+    <Stack spacing="xl">
+      {/* Status Card */}
+      <Card withBorder radius="md" p="lg">
+        <Group position="apart" mb="md">
+          <Text size="sm">Status Overview</Text>
+          <Badge variant="filled" color={getStatusColor(record.status)} size="lg">
+            {record.status}
+          </Badge>
+        </Group>
+
+        <Grid>
+          <Grid.Col span={6}>
+            <Group spacing="xs" mb="xs">
+              <ThemeIcon variant="light" size="sm" color="blue">
+                <Text size="sm">#</Text>
+              </ThemeIcon>
+              <Text size="sm">Import ID</Text>
+            </Group>
+            <Group spacing="xs">
+              <Code>{record._id}</Code>
+              <CopyButton value={record._id}>
+                {({ copied, copy }) => (
+                  <Tooltip label={copied ? 'Copied' : 'Copy Upload Id'}>
+                    <ActionIcon variant="subtle" size="sm" onClick={copy}>
+                      <Text size="xs">{copied ? '✓' : <CopyIcon />}</Text>
+                    </ActionIcon>
+                  </Tooltip>
+                )}
+              </CopyButton>
+            </Group>
+          </Grid.Col>
+
+          <Grid.Col span={6}>
+            <Group spacing="xs" mb="xs">
+              <GraphIcon />
+              <Text size="sm">Total Records</Text>
+            </Group>
+            <Text size="lg" fw={700} c="blue">
+              {record.totalRecords || 0}
+            </Text>
+          </Grid.Col>
+        </Grid>
+      </Card>
+
+      {/* Timeline Card */}
+      <Card withBorder radius="md" p="lg">
+        <Text size="sm" mb="md">
+          Timeline
+        </Text>
+        <Timeline active={1} bulletSize={24} lineWidth={2}>
+          <Timeline.Item
+            bullet={
+              <Text size="sm">
+                <DateIcon size="md" color="white" />
+              </Text>
+            }
+            title="Upload Date"
+          >
+            <Text c="dimmed" size="sm">
+              {dayjs(record.uploadedDate).format(DATE_FORMATS.LONG)}
+            </Text>
+          </Timeline.Item>
+          <Timeline.Item
+            bullet={<Text size="sm">{getStatusSymbol(record.status)}</Text>}
+            title="Current Status"
+            color={getStatusColor(record.status)}
+          >
+            <Badge variant="light" color={getStatusColor(record.status)} size="sm">
+              {record.status}
+            </Badge>
+          </Timeline.Item>
+        </Timeline>
+      </Card>
+    </Stack>
+  );
+}