Siddhesh.More/tanami-admin-panel
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 2 Wiki Activity

[ Dashboard design changes done 😎😷 ]

Browse Source
This commit is contained in:
YasinShaikh123
2025-01-15 19:53:02 +05:30
parent 401c9daf75
commit 1beeeed8d3
4 changed files with 39 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/Images/dash_icon_3n.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/Images/dash_icon_6n.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

58
src/Pages/Dashboard/Dashbaord.jsx
View File

@@ -22,10 +22,10 @@ import { useGetDashboardMasterQuery } from "../../Services/dashboard.service";
import InvestmentOpportunities from "./InvestmentOpportunities";
import IconOne from '../../Images/dash_icon_1.svg';
import IconTwo from '../../Images/dash_icon_2.svg';
import IconThree from '../../Images/dash_icon_3.svg';
import IconThree from '../../Images/dash_icon_3n.png';
import IconFour from '../../Images/dash_icon_4.svg'
import IconFive from '../../Images/dash_icon_5.svg';
import IconSix from '../../Images/dash_icon_6.svg';
import IconSix from '../../Images/dash_icon_6n.png';
import IconSeven from '../../Images/dash_icon_7.svg'
// const panddingReguest = [
@@ -225,12 +225,12 @@ const Dashbaord = ({ showSearch = false }) => {
<Heading fontSize={"md"} fontWeight={500}>
Pending Request
</Heading>
<Divider />
<Divider borderBottom={'1px solid #00471785'} />
<SimpleGrid columns={2} spacing={3}>
{panddingReguest.map((item, index) => (
<Box key={index} bg="white" p={4} pb={2} rounded={10} border={'1px solid #0047171f'}>
<Box key={index} bg="white" p={4} pb={2} rounded={10} border={'1px solid #00471785'}>
<Text fontSize={"18px"} mb={2}>
<Image src={item.icon} />
<Image w={"20px"} src={item.icon} />
</Text>
<Text mb={0} mt={0} fontSize={"11px"} fontWeight={500}>
{item.label}
@@ -246,16 +246,22 @@ const Dashbaord = ({ showSearch = false }) => {
<Heading fontSize={"md"} fontWeight={500}>
User Activity
</Heading>
<Divider />
<Divider borderBottom={'1px solid #00471785'} />
<SimpleGrid columns={3} spacing={3}>
{userActivity.map((item, index) => (
<Box key={index} bg="white" p={4} rounded={10} border={'1px solid #0047171f'}>
<Box key={index} bg="white" p={4} rounded={10} border={'1px solid #00471785'}>
<Flex alignContent={"center"}>
<Text fontSize={"18px"}><Image w={'25px'} src={item.icon} /></Text>
<Text fontSize={"18px"} mb={0}>
{item.icon === IconSix ? (
<Image w={"40px"} src={item.icon} />
) : (
<Image w={"25px"} src={item.icon} />
)}
</Text>
<Text
fontSize={"11px"}
fontWeight={500}
mb={2}
mb={0}
minH={"38px"}
ml={1}
mt={0}
@@ -280,7 +286,7 @@ const Dashbaord = ({ showSearch = false }) => {
))}
</SimpleGrid>
<Box display={"flex"} gap={3} mt={4}>
<Box w={"50%"} bg={"#fff"} p={4} rounded={10} border={'1px solid #0047171f'}>
<Box w={"50%"} bg={"#fff"} px={4} rounded={10} border={'1px solid #0047171f'}>
<Box h={"25px"}></Box>
<HStack justifyContent={"space-between"}>
<Box textAlign={"center"}>
@@ -292,11 +298,11 @@ const Dashbaord = ({ showSearch = false }) => {
>
{data?.data?.userActivity?.openedAppToday?.percentage} %
</Text>
<Text fontSize={"11px"} fontWeight={500}>
<Text fontSize={"11px"} fontWeight={500} mb={0}>
Users that opened the app today
</Text>
</Box>
<Divider orientation="vertical" />
<Divider orientation="vertical" h={'70px'} borderLeft={'1px solid #00471785'} />
<Box textAlign={"center"}>
<Text
as={"span"}
@@ -309,7 +315,7 @@ const Dashbaord = ({ showSearch = false }) => {
?.number || 0
).toLocaleString()}
</Text>
<Text fontSize={"11px"} fontWeight={500}>
<Text fontSize={"11px"} fontWeight={500} mb={0}>
Users who logged in during the last month
</Text>
</Box>
@@ -318,19 +324,21 @@ const Dashbaord = ({ showSearch = false }) => {
<Box
w={"50%"}
bg={"#fff"}
p={4}
px={4}
rounded={10}
alignItems={"inherit"}
border={'1px solid #0047171f'}
>
<Box display={"flex"} justifyContent={"end"}>
<Box display={"flex"} justifyContent={"end"} position={'relative'} top={3}>
<Select
bg={"#0047170F"}
w={"110px"}
w={"100px"}
display={"flex"}
alignItems={"center"}
// placeholder="Select"
size="xs"
fontSize={'10px'}
fontWeight={600}
rounded={5}
onChange={(e) => setFilter(e.target.value)}
>
@@ -355,11 +363,11 @@ const Dashbaord = ({ showSearch = false }) => {
? data?.data?.userActivity?.newSignUps?.last7days
: data?.data?.userActivity?.newSignUps?.last30days}
</Text>
<Text fontSize={"11px"} fontWeight={500}>
<Text fontSize={"11px"} fontWeight={500} mb={0}>
New sign-ups{" "}
</Text>
</Box>
<Divider orientation="vertical" />
<Divider orientation="vertical" h={'70px'} borderLeft={'1px solid #00471785'} />
<Box textAlign={"center"}>
<Text
as={"span"}
@@ -374,7 +382,7 @@ const Dashbaord = ({ showSearch = false }) => {
: data?.data?.userActivity?.newKYCVerifications
?.last30days}
</Text>
<Text fontSize={"11px"} fontWeight={500}>
<Text fontSize={"11px"} fontWeight={500} mb={0}>
New KYC verification
</Text>
</Box>
@@ -388,7 +396,7 @@ const Dashbaord = ({ showSearch = false }) => {
<Heading fontSize={"md"} fontWeight={500}>
Investment Opportunities
</Heading>
<Divider />
<Divider borderBottom={'1px solid #00471785'} />
<Box mb={5} bg={"#fff"} py={2} rounded={4} border={'1px solid #0047171f'}>
<HStack
justifyContent={"space-between"}
@@ -416,10 +424,10 @@ const Dashbaord = ({ showSearch = false }) => {
</Box>
<SimpleGrid columns={2} spacing={4}>
{closedOpportunities.map((item, index) => (
<Box key={index} bg="white" p={4} rounded={10} border={'1px solid #0047171f'}>
<Box key={index} bg="white" p={4} rounded={10} border={'1px solid #00471785'}>
<HStack alignItems={"center"}>
<Text fontSize={"17px"} mb={0}>
<Image src={item.icon} />
<Image w={'20px'} src={item.icon} />
</Text>
<Text mb={0} mt={0} fontSize={"11px"} fontWeight={500}>
{item.label}
@@ -440,7 +448,7 @@ const Dashbaord = ({ showSearch = false }) => {
<Heading fontSize={"md"} fontWeight={500}>
Wallet Balances
</Heading>
<Divider />
<Divider borderBottom={'1px solid #00471785'} />
<Box bg={"#fff"} p={4} rounded={4} mb={5} border={'1px solid #0047171f'}>
<Text fontSize={"xxl"} fontWeight={600} mb={2}>
${" "}
@@ -461,7 +469,7 @@ const Dashbaord = ({ showSearch = false }) => {
</Text>
<SimpleGrid columns={2} spacing={2} mb={4}>
{walletCase.slice(0, 4).map((item, index) => (
<Box key={index} bg={"#fff"} p={3} rounded={4} border={'1px solid #0047171f'}>
<Box key={index} bg={"#fff"} p={3} rounded={4} border={'1px solid #00471785'}>
<Text mb={1} fontSize={"md"} fontWeight={500}>
{item.amount}
</Text>
@@ -474,7 +482,7 @@ const Dashbaord = ({ showSearch = false }) => {
<SimpleGrid columns={3} spacing={2}>
{walletCase.slice(4).map((item, index) => (
<Box key={index} bg={"#fff"} p={3} rounded={4} border={'1px solid #0047171f'}>
<Box key={index} bg={"#fff"} p={3} rounded={4} border={'1px solid #00471785'}>
<Text mb={1} fontSize={"md"} fontWeight={500}>
{item.amount}
</Text>

12
src/Pages/Dashboard/InvestmentOpportunities.jsx
View File

@@ -1,4 +1,4 @@
import { Box, HStack, Input, Select, Text, useToast } from "@chakra-ui/react";
import { Badge, Box, HStack, Input, Select, Text, useToast } from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
@@ -60,25 +60,25 @@ const InvestmentOpportunities = ({ showSearch = true, selectStyle = {} }) => {
</Box>
),
"Amount Remaining %": (
<Box w={"110px"} isTruncated>
<Box w={"110px"} textAlign={'end'} isTruncated>
<Text as={"span"} color={"teal.900"}>
{`${parseFloat(item?.Amount_remaining_per || 0).toLocaleString(
{parseFloat(item?.Amount_remaining_per || 0).toLocaleString(
undefined,
{
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}
)} %`}
)}<Badge ms={1} colorScheme="green">%</Badge>
</Text>
</Box>
),
"Total Deal Size": (
<Box w={"auto"} isTruncated>
<Text as={"span"} color={"teal.900"}>
{`$ ${parseFloat(item?.Deal_size || 0).toLocaleString(undefined, {
<Badge me={1} ms={1} colorScheme="green">$</Badge>{parseFloat(item?.Deal_size || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}`}
})}
</Text>
</Box>
),