fix: payment order table conflic resolved

package.json

@@ -26,10 +26,12 @@
     "@nivo/line": "^0.80.0",
     "@tabler/icons": "^1.119.0",
     "axios": "^1.2.2",
+    "dayjs": "^1.11.7",
     "flowbite": "^1.5.5",
     "flowbite-react": "^0.3.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-query": "^3.39.2",
     "react-router-dom": "^6.5.0"
   },
   "devDependencies": {
@@ -84,4 +86,4 @@
       "npx eslint --fix"
     ]
   }
-}
+}

src/App.tsx

@@ -1,6 +1,7 @@
 import type { ColorScheme } from '@mantine/core'
 import { ColorSchemeProvider, MantineProvider } from '@mantine/core'
 import { useHotkeys, useLocalStorage } from '@mantine/hooks'
+import { useEffect } from 'react'
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
 
 import Layout from '@/components/Layout/Layout'
@@ -13,6 +14,7 @@ import {
   ProductAnalytics,
   Users
 } from '@/screens'
+import { server } from '@/utils/server'
 
 function App() {
   const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
@@ -25,6 +27,25 @@ function App() {
     setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'))
 
   useHotkeys([['mod+J', () => toggleColorScheme()]])
+
+  useEffect(() => {
+    const login = async () => {
+      await server.post(
+        '/users/login',
+        {
+          email: '[email protected]',
+          password: '12345678'
+        },
+        {
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          withCredentials: true
+        }
+      )
+    }
+    login()
+  }, [])
   return (
     <MantineProvider
       theme={{ colorScheme, primaryColor: 'yellow' }}

src/components/Layout/Header/Header.tsx

@@ -33,7 +33,7 @@ const HeaderBar: React.FC<HeaderBarType> = ({ opened, setOpened }) => {
         }}
         src={EcommHub}
       />
-      <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
+      <MediaQuery largerThan="lg" styles={{ display: 'none' }}>
         <Burger
           opened={opened}
           onClick={() => setOpened((o) => !o)}

src/components/Layout/Layout.tsx

@@ -22,12 +22,11 @@ export default function Layout({ children }: LayoutType) {
               : theme.colors.gray[0]
         }
       }}
-      navbarOffsetBreakpoint="sm"
-      asideOffsetBreakpoint="sm"
+      navbarOffsetBreakpoint="lg"
       navbar={
         <Navbar
           p="md"
-          hiddenBreakpoint="sm"
+          hiddenBreakpoint="lg"
           hidden={!opened}
           width={{ sm: 200, lg: 300 }}
         >

src/components/common/Charts/RevenueChart.tsx

@@ -7,7 +7,7 @@ const MyResponsiveLine = ({ data /* see data tab */ }: { data: any }) => {
       data={data}
       margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
       xScale={{ type: 'point' }}
-      lineWidth={'3px'}
+      lineWidth={3}
       yScale={{
         type: 'linear',
         min: 'auto',

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

@@ -0,0 +1,93 @@
+import { Badge, 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 TransactionElementType = {
+  name: string
+  status: string
+  amount: number
+  orderId: string
+  date: string
+}
+
+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.payment.orderCreationId
+    const date = dayjs(item.createdAt).format('MMMM DD, YYYY')
+    return {
+      name: firstName,
+      amount: item.orderAmount,
+      orderId,
+      status: item.orderStatus,
+      date
+    }
+  })
+  return rows
+}
+
+export default function TransactionHistory() {
+  const { data, isLoading, error } = useQuery(
+    'transaction-history',
+    fetchTransactions,
+    {
+      retry: 1,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false
+    }
+  )
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+  if (error instanceof Error) {
+    return <div>{error!.message}</div>
+  }
+  const rows = data.map((element: TransactionElementType) => (
+    <tr key={element.orderId}>
+      <td>
+        <Text weight={700} variant="gradient">
+          {element.name}
+        </Text>
+      </td>
+      <td>
+        <Tooltip label={element.orderId}>
+          <Text underline>{`${element.orderId}`.slice(0, 10)}</Text>
+        </Tooltip>
+      </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>Amount</th>
+          <th>Status</th>
+          <th>Date</th>
+        </tr>
+      </thead>
+      <tbody>{rows}</tbody>
+    </Table>
+  )
+}

src/components/common/Table/index.ts

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

src/data/cards.ts

@@ -17,3 +17,24 @@ export const viewStats: StatItemType[] = [
     icon: 'up'
   }
 ]
+
+export const websiteViewsData = [
+  {
+    color: '#47D6AB',
+    count: '2,824',
+    label: 'Mobile',
+    part: 70
+  },
+  {
+    color: '#333',
+    count: '1,200',
+    label: 'Tablet',
+    part: 30
+  },
+  {
+    color: '#333',
+    count: '1,200',
+    label: 'Desktop',
+    part: 30
+  }
+]

src/graphql/main.ts

@@ -0,0 +1,17 @@
+export const getTransactionHistory = `
+query {
+    Orders {
+      docs {
+        id
+        user {
+          firstName
+        }
+        orderStatus
+        orderAmount
+        payment {
+          orderCreationId
+        }
+      }
+    }
+  }
+`

src/main.tsx

@@ -3,13 +3,18 @@ import './index.css'
 import { ThemeProvider } from '@material-tailwind/react'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from 'react-query'
 
 import App from './App'
 
+const queryClient = new QueryClient()
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <ThemeProvider>
-      <App />
+      <QueryClientProvider client={queryClient}>
+        <App />
+      </QueryClientProvider>
     </ThemeProvider>
   </React.StrictMode>
 )

src/screens/Dashboard/index.tsx

@@ -1,9 +1,10 @@
-import { Paper, Stack, Title } from '@mantine/core'
+import { Box, Flex, Grid, Paper, Stack, Title } from '@mantine/core'
+import { IconBasket, IconCards } from '@tabler/icons'
 
-import { StatsGrid } from '@/components/common'
+import { StatsGrid, TransactionTable } from '@/components/common'
 import { RevenueStatCard, ViewStatBars } from '@/components/common/Cards'
 import { RevenueChart } from '@/components/common/Charts'
-import { viewStats } from '@/data/cards'
+import { viewStats, websiteViewsData } from '@/data/cards'
 import { data } from '@/data/revenue'
 import { statCards } from '@/utils/data'
 
@@ -30,32 +31,36 @@ function Home() {
           </Stack>
           <Stack>
             <RevenueStatCard
-              data={[
-                {
-                  color: '#47D6AB',
-                  count: '2,824',
-                  label: 'Mobile',
-                  part: 70
-                },
-                {
-                  color: '#333',
-                  count: '1,200',
-                  label: 'Tablet',
-                  part: 30
-                },
-                {
-                  color: '#333',
-                  count: '1,200',
-                  label: 'Desktop',
-                  part: 30
-                }
-              ]}
+              data={websiteViewsData}
               diff={844}
               total={'12,434'}
             />
           </Stack>
         </div>
       </div>
+      <Grid>
+        <Grid.Col sm={12} md={6} lg={6}>
+          <Box aria-label="transactions" title="Transactions">
+            <Paper p="xs">
+              <Flex gap="md" align="center">
+                <Title order={2}>Transaction History</Title>
+                <IconCards />
+              </Flex>
+            </Paper>
+            <TransactionTable />
+          </Box>
+        </Grid.Col>
+        <Grid.Col sm={12} md={6} lg={6}>
+          <Box h={100}>
+            <Paper p="xs">
+              <Flex gap="md" align="center">
+                <Title order={2}>Recent Orders</Title>
+                <IconBasket />
+              </Flex>
+            </Paper>
+          </Box>
+        </Grid.Col>
+      </Grid>
     </div>
   )
 }

src/utils/constants.ts

@@ -1,4 +1,3 @@
-/* eslint-disable prettier/prettier */
 export const COLORS = {
   primary: '#DAB444',
   secondary: '#099268'

src/utils/server.ts

@@ -1,5 +1,6 @@
 import axios from 'axios'
 
 export const server = axios.create({
-  baseURL: 'http://localhost:5000/api'
+  baseURL: 'http://localhost:5000/api',
+  withCredentials: true
 })