feat: order search added

src/components/common/Elements/OrderSearch.tsx

@@ -1,55 +1,79 @@
-import type { MantineColor, SelectItemProps } from '@mantine/core'
-import { Autocomplete, Group, Text } from '@mantine/core'
-import React, { forwardRef } from 'react'
+/* eslint-disable no-underscore-dangle */
+import { Group, Stack, Text, TextInput } from '@mantine/core'
+import { useState } from 'react'
 
 import { server } from '@/utils/server'
 
-interface ItemProps extends SelectItemProps {
-  color: MantineColor
+interface ItemProps {
+  label: string
+  value: string
   description: string
-  image: string
+  name: string
 }
 
 const OrderSearch = () => {
-  const AutoCompleteItem = forwardRef<HTMLDivElement, ItemProps>(
-    ({ description, value, ...others }: ItemProps, ref) => (
-      <div ref={ref} {...others}>
-        <Group noWrap>
-          <div>
-            <Text>{value}</Text>
-            <Text size="xs" color="dimmed">
-              {description}
-            </Text>
-          </div>
-        </Group>
-      </div>
-    )
-  )
+  const [orderEl, setOrderEl] = useState([])
+  const [orderSearchInput, setOrderSearchInput] = useState('')
   const handleOrderSearch = async (query: string) => {
+    setOrderSearchInput(query)
+    if (!query) {
+      setOrderEl([])
+      return
+    }
+
     const res = await server.get(`/orders/search/${query}`)
-    return res.data
+    const { data } = res
+    if (data.length) {
+      const items = data.map((item: any) => {
+        return {
+          label: item._id,
+          value: item._id,
+          name: `${item.user.firstName} ${item.user.lastName}`,
+          description: item.shippingDetails.note
+        }
+      })
+      setOrderEl(items)
+    }
   }
   return (
-    <Autocomplete
-      styles={(theme) => ({
-        root: {
-          width: 400
-        },
-        input: {
-          color: theme.colors.dark[8]
-        }
-      })}
-      placeholder="Pick one"
-      itemComponent={AutoCompleteItem}
-      onChange={handleOrderSearch}
-      data={[
-        {
-          label: 'Bender Bending Rodríguez',
-          value: 'Blender Blending Rodriguez',
-          description: 'Fascinated with cooking, though has no sense of taste'
-        }
-      ]}
-    />
+    <div className="relative">
+      <TextInput
+        styles={(theme) => ({
+          input: {
+            color: theme.colors.dark[8]
+          }
+        })}
+        value={orderSearchInput}
+        placeholder="Search Order"
+        onChange={(e) => handleOrderSearch(e.target.value)}
+      />
+      {orderEl.length ? (
+        <div className="absolute top-9 z-10 w-full bg-gray-500 p-2">
+          <Stack spacing="xs">
+            {orderEl.map((item: ItemProps) => (
+              <Group
+                className="cursor-pointer"
+                bg="gray"
+                p="sm"
+                key={item.value}
+                noWrap
+                onClick={() => {
+                  setOrderEl([])
+                  setOrderSearchInput(item.name)
+                }}
+              >
+                <div>
+                  <Text>{item.name}</Text>
+                  <Text size="xs" color="dimmed">
+                    {JSON.stringify(item.description)}
+                  </Text>
+                </div>
+              </Group>
+            ))}
+          </Stack>
+        </div>
+      ) : null}
+    </div>
   )
 }
 

src/components/common/Table/OrderTable.tsx

@@ -3,7 +3,6 @@ import {
   Center,
   Chip,
   createStyles,
-  Flex,
   Grid,
   Group,
   ScrollArea,
@@ -89,7 +88,7 @@ function Th({ children, reversed, sorted, onSort }: ThProps) {
 
 export default function OrderTable({ data }: TableSortProps) {
   const [search, setSearch] = useState('')
-  const [paymentMode, setpaymentMode] = useState('')
+  const [paymentMode, setpaymentMode] = useState('All')
   const [filteredData, setFilteredData] = useState(data)
   const [sortBy, setSortBy] = useState<keyof OrderRowType | null>(null)
   const [reverseSortDirection, setReverseSortDirection] = useState(false)
@@ -120,7 +119,7 @@ export default function OrderTable({ data }: TableSortProps) {
     handleFilter(value)
   }
   const handlePaymentMode = (value: string) => {
-    if (value === '') {
+    if (value === 'All') {
       setFilteredData(data)
       return
     }
@@ -189,15 +188,13 @@ export default function OrderTable({ data }: TableSortProps) {
   return (
     <>
       <Grid align="baseline" justify={'center'}>
-        <Grid.Col span={2}>
+        <Grid.Col sm={12} md={3} lg={3}>
           <Title order={2}>Orders</Title>
         </Grid.Col>
-        <Grid.Col span={'auto'}>
-          <Flex justify="end">
-            <OrderSearch />
-          </Flex>
+        <Grid.Col sm={12} md={6} lg={6}>
+          <OrderSearch />
         </Grid.Col>
-        <Grid.Col span={3}>
+        <Grid.Col sm={12} md={3} lg={3}>
           <Chip.Group
             value={paymentMode}
             onChange={handlePaymentMode}
@@ -206,7 +203,7 @@ export default function OrderTable({ data }: TableSortProps) {
           >
             <Chip value="ONLINE">ONLINE</Chip>
             <Chip value="COD">COD</Chip>
-            <Chip value="">All</Chip>
+            <Chip value="All">All</Chip>
           </Chip.Group>
         </Grid.Col>
       </Grid>

src/components/common/Table/Orders/index.tsx

@@ -0,0 +1,144 @@
+import { Badge, CopyButton, Flex, Table, Text, Tooltip } from '@mantine/core'
+import { IconCurrencyRupee } from '@tabler/icons'
+import dayjs from 'dayjs'
+import { useQuery } from 'react-query'
+
+import { getTransactionHistory } from '@/graphql/main'
+import { server } from '@/utils/server'
+
+type OrderElementType = {
+  name: string
+  status: string
+  amount: number
+  orderId: string
+  transactionId?: string
+  date: string
+  paymentMode: 'online' | 'cod'
+}
+
+const fetchTransactions = async () => {
+  const res = await server.post('/graphql', {
+    query: getTransactionHistory
+  })
+  const { docs } = res.data.data.Orders
+  const rows = docs.map((item: any) => {
+    const { firstName } = item.user
+    const orderId = item.id
+    const { paymentMode } = item
+    const transactionId = item.payment.orderCreationId
+    const date = dayjs(item.createdAt).format('MMMM DD, YYYY')
+    return {
+      name: firstName,
+      amount: item.orderAmount,
+      orderId,
+      status: item.orderStatus,
+      date,
+      transactionId,
+      paymentMode
+    }
+  })
+  return rows
+}
+
+export default function TransactionHistory() {
+  const { data, isLoading, error } = useQuery(
+    'order-history',
+    fetchTransactions,
+    {
+      refetchOnWindowFocus: false
+    }
+  )
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+  if (error instanceof Error) {
+    return <div>{error!.message}</div>
+  }
+
+  const rows = data.map((element: OrderElementType) => (
+    <tr key={element.orderId}>
+      <td>
+        <Text weight={700} variant="gradient">
+          {element.name}
+        </Text>
+      </td>
+      <td>
+        <CopyButton value={element.orderId}>
+          {({ copied, copy }) => (
+            <Tooltip
+              color={copied ? 'teal' : 'blue'}
+              label={`${copied ? 'Copied' : 'Copy'}: ${element.orderId}`}
+            >
+              <Text
+                style={{ cursor: 'pointer' }}
+                underline
+                onClick={copy}
+                color={copied ? 'teal' : 'blue'}
+              >
+                {`${element.orderId}`.slice(0, 10)}
+              </Text>
+            </Tooltip>
+          )}
+        </CopyButton>
+      </td>
+      <td>
+        {element.transactionId ? (
+          <CopyButton value={element.transactionId}>
+            {({ copied, copy }) => (
+              <Tooltip
+                color={copied ? 'teal' : 'blue'}
+                label={`${copied ? 'Copied' : 'Copy'}: ${
+                  element.transactionId
+                }`}
+              >
+                <Text
+                  style={{ cursor: 'pointer' }}
+                  underline
+                  onClick={copy}
+                  color={copied ? 'teal' : 'blue'}
+                >
+                  {`${element.transactionId}`.slice(0, 10)}
+                </Text>
+              </Tooltip>
+            )}
+          </CopyButton>
+        ) : (
+          <Text>-:-</Text>
+        )}
+      </td>
+      <td>
+        <Badge color={element.paymentMode === 'cod' ? 'grape' : 'yellow'}>
+          {element.paymentMode}
+        </Badge>
+      </td>
+      <td>
+        <Flex align="center">
+          <IconCurrencyRupee size={16} />
+          <Text mb={1}>{element.amount}</Text>
+        </Flex>
+      </td>
+      <td>
+        <Badge color={'grape'}>{element.status}</Badge>
+      </td>
+      <td>{element.date}</td>
+    </tr>
+  ))
+
+  return (
+    <Table verticalSpacing="md" striped highlightOnHover withBorder>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>OrderId</th>
+          <th>TransactionId</th>
+          <th>Payment Mode</th>
+          <th>Amount</th>
+          <th>Status</th>
+          <th>Date</th>
+        </tr>
+      </thead>
+      <tbody>{rows}</tbody>
+    </Table>
+  )
+}

src/components/common/Table/Transaction/index.tsx

@@ -1,4 +1,4 @@
-import { Badge, Flex, Table, Text, Tooltip } from '@mantine/core'
+import { CopyButton, Flex, Table, Text, Tooltip } from '@mantine/core'
 import { IconCurrencyRupee } from '@tabler/icons'
 import dayjs from 'dayjs'
 import { useQuery } from 'react-query'
@@ -8,7 +8,6 @@ import { server } from '@/utils/server'
 
 type TransactionElementType = {
   name: string
-  status: string
   amount: number
   orderId: string
   date: string
@@ -59,19 +58,31 @@ export default function TransactionHistory() {
         </Text>
       </td>
       <td>
-        <Tooltip label={element.orderId}>
-          <Text underline>{`${element.orderId}`.slice(0, 10)}</Text>
-        </Tooltip>
+        <CopyButton value={element.orderId}>
+          {({ copied, copy }) => (
+            <Tooltip
+              color={copied ? 'teal' : 'blue'}
+              label={`${copied ? 'Copied' : 'Copy'}: ${element.orderId}`}
+            >
+              <Text
+                style={{ cursor: 'pointer' }}
+                underline
+                onClick={copy}
+                color={copied ? 'teal' : 'blue'}
+              >
+                {`${element.orderId}`.slice(0, 10)}
+              </Text>
+            </Tooltip>
+          )}
+        </CopyButton>
       </td>
       <td>
         <Flex align="center">
           <IconCurrencyRupee size={16} />
           <Text mb={1}>{element.amount}</Text>
         </Flex>
       </td>
-      <td>
-        <Badge color={'grape'}>{element.status}</Badge>
-      </td>
+
       <td>{element.date}</td>
     </tr>
   ))
@@ -81,9 +92,8 @@ export default function TransactionHistory() {
       <thead>
         <tr>
           <th>Name</th>
-          <th>OrderId</th>
+          <th>Transaction Id</th>
           <th>Amount</th>
-          <th>Status</th>
           <th>Date</th>
         </tr>
       </thead>

src/components/common/Table/index.ts

@@ -1,2 +1,3 @@
+export { default as RecentOrdersTable } from './Orders'
 export { default as OrderTable } from './OrderTable'
 export { default as TransactionTable } from './Transaction'

src/graphql/main.ts

@@ -6,6 +6,7 @@ query {
         user {
           firstName
         }
+        paymentMode
         orderStatus
         orderAmount
         payment {