feature : dashboard

backend/src/controllers/dashboard.controller.js

@@ -140,10 +140,17 @@ exports.getDashboard = requestAsyncHandler(async (req, res) => {
     .populate("party", "name")
     .limit(5)
     .exec();
+  const recentPurchases = await Purchase.find({ org: orgId })
+    .sort({ createdAt: -1 })
+    .select("name purchaseNo total totalTax status party date")
+    .populate("party", "name")
+    .limit(5)
+    .exec();
   return res.status(200).json({
     data: {
       invoiceThisMonth,
       quotesThisMonth,
+      recentPurchases,
       expensesThisMonth,
       partysThisMonth,
       recentInvoices,

frontend/src/features/common/form-drawer-layout/index.jsx

@@ -22,8 +22,8 @@ export default function FormDrawerLayout({
   return (
     <Drawer size={"md"} isOpen={isOpen} placement="right" onClose={onClose}>
       <DrawerOverlay />
-      <DrawerContent>
-        <form onSubmit={handleFormSubmit}>
+      <form onSubmit={handleFormSubmit}>
+        <DrawerContent>
           <DrawerCloseButton />
           <DrawerHeader>{formHeading}</DrawerHeader>
           <Divider />
@@ -36,8 +36,8 @@ export default function FormDrawerLayout({
               {formBtnLabel}
             </Button>
           </DrawerFooter>
-        </form>
-      </DrawerContent>
+        </DrawerContent>
+      </form>
     </Drawer>
   );
 }

frontend/src/features/common/main-layout/AvatarProfile.jsx

@@ -13,7 +13,7 @@ export default function AvatarProfile() {
           user?.name
         } (${role.toLocaleUpperCase()})`}</Text>
       </Hide>
-      <Avatar name={user?.name} />
+      <Avatar size={"sm"} name={user?.name} />
     </Flex>
   );
 }

frontend/src/features/common/main-layout/Header.jsx

@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   Flex,
+  IconButton,
   Show,
   Text,
   useColorMode,
@@ -33,6 +34,7 @@ export default function Header({ onSideNavOpen }) {
           alignItems={"center"}
         >
           <Button
+            size={"sm"}
             colorScheme="blue"
             onClick={() => {
               navigate(
@@ -52,6 +54,7 @@ export default function Header({ onSideNavOpen }) {
             </Show>
           </Button>
           <Button
+            size={"sm"}
             colorScheme="blue"
             onClick={openQuickAccess}
             variant="outline"
@@ -61,15 +64,20 @@ export default function Header({ onSideNavOpen }) {
               <Text marginLeft={3}>Quick Access</Text>
             </Show>
           </Button>
-          {colorMode === "dark" ? (
+          <IconButton
+          size={"sm"}
+            icon={colorMode === "dark" ? <MdOutlineWbSunny /> : <CiDark />}
+            onClick={toggleColorMode}
+          />
+          {/* {colorMode === "dark" ? (
             <MdOutlineWbSunny
               onClick={toggleColorMode}
               size={28}
               cursor={"pointer"}
             />
           ) : (
             <CiDark onClick={toggleColorMode} size={28} cursor={"pointer"} />
-          )}
+          )} */}
           <Show below="xl">
             <AvatarProfileWithOptions />
             <MdMenu size={28} cursor={"pointer"} onClick={onSideNavOpen} />

frontend/src/features/common/main-layout/index.jsx

@@ -17,7 +17,7 @@ export default function MainLayout({ children }) {
           <Box boxShadow={"md"} p={2}>
             <Header onSideNavOpen={onOpen} />
           </Box>
-          <Box minH={"50svh"} overflowY={"auto"}>{children}</Box>
+          <Box minH={"70svh"} overflowY={"auto"}>{children}</Box>
         </Flex>
       </Flex>
       <NavDrawer isOpen={isOpen} onClose={onClose} />

frontend/src/features/dashboard/DashboardTable.jsx

@@ -16,7 +16,7 @@ export default function DashboardTable({ heading, tableHeads, tableRows }) {
   return (
     <Box borderRadius={"md"}>
       <Box paddingBlock={5}>
-        <Heading fontSize={"2xl"}>{heading}</Heading>
+        <Heading fontSize={"xl"}>{heading}</Heading>
       </Box>
       <TableContainer>
         <Table variant="simple">

frontend/src/features/dashboard/index.jsx

@@ -19,6 +19,7 @@ import Status from "../estimates/list/Status";
 import DashboardTable from "./DashboardTable";
 import Dashcard from "./Dashcard";
 import GuideTourModal from "./GuideTourModal";
+import { purchaseStatusList } from "../../constants/purchase";
 export default function DashboardPage() {
   const [dashboard, setDashboard] = useState({
     invoiceThisMonth: 0,
@@ -28,6 +29,7 @@ export default function DashboardPage() {
     expensesThisMonth: 0,
     recentInvoices: [],
     recentQuotes: [],
+    recentPurchases: [],
   });
   const { orgId } = useParams();
   const { requestAsyncHandler } = useAsyncCall();
@@ -80,7 +82,7 @@ export default function DashboardPage() {
   return (
     <MainLayout>
       <Box p={5}>
-        <Heading>Dashboard</Heading>
+        <Heading fontSize={"3xl"}>Dashboard</Heading>
         <Stack marginBlock={2} spacing={3}>
           <Flex justifyContent={"flex-end"} alignItems={"center"}>
             <Select
@@ -166,6 +168,26 @@ export default function DashboardPage() {
                 tableHeads={["NUM", "Party name", "Total", "Status", "Date"]}
               />
             </Skeleton>
+            <Skeleton isLoaded={!loading}>
+              <DashboardTable
+                heading={"Recent Purchases"}
+                tableRows={dashboard.recentPurchases.map((purchase) => ({
+                  _id: purchase._id,
+                  num: purchase.purchaseNo,
+                  partyName: purchase.party.name,
+                  total: purchase.total,
+                  totalTax: purchase.totalTax,
+                  status: (
+                    <Status
+                      status={purchase.status}
+                      statusList={purchaseStatusList}
+                    />
+                  ),
+                  date: new Date(purchase.date).toISOString().split("T")[0],
+                }))}
+                tableHeads={["NUM", "Party name", "Total", "Status", "Date"]}
+              />
+            </Skeleton>
           </Stack>
         </Stack>
       </Box>