Merge branch 'dev' of http://git.wdipl.com/Siddhesh.More/tanami-admin-panel into dev

2024-08-13 16:56:29 +05:30
parent 94d3e25cce f17f77d409
commit 84fb0d77cf
3 changed files with 82 additions and 78 deletions
--- a/src/Components/Doughnut/ApexDonut.jsx
+++ b/src/Components/Doughnut/ApexDonut.jsx
@@ -25,7 +25,7 @@ const ApexChart = ({ data }) => {
    fill: {
      type: 'gradient',
    },
-    colors: data?.backgroundColor, // Customize your colors here
+    colors: data?.backgroundColor,  
    legend: {
      show: false,
      position: 'right',
@@ -48,7 +48,7 @@ const ApexChart = ({ data }) => {
  });

  return (
-    <ApexCharts options={options} series={data?.values} type="donut" width={350} />
+    <ApexCharts options={options} series={data?.values} type="donut" width={300} />
  );
 };

--- a/src/Components/Doughnut/ApexLine.jsx
+++ b/src/Components/Doughnut/ApexLine.jsx
@@ -1,62 +1,66 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactApexChart from 'react-apexcharts';

-const ApexLine = () => {
-  const [series] = React.useState([{
-    name: 'Rate',
-    data: [45, 23, 70, 65, 5, 34, 32]
-  }]);
-
-  const options = {
-    chart: {
-      height: 350,
-      type: 'line',
-      toolbar: {
-        show: false // Hide the action icons
-      }
-    },
-    stroke: {
-      width: 5,
-      curve: 'smooth',
-      colors: ['#598369'], // Customize the line color here
+function ApexLine() {
+  const [chartOptions, setChartOptions] = useState({
+    series: [{
+      name: 'Rate',
+      data: [45, 23, 70, 65, 5, 34, 32],
+      gradientToColors: ['#004017'],
+    }],
+    options: {
+      chart: {
+        height: 350,
+        type: 'line',
+        toolbar: {
+          show: false // Hide the action icons
+        }
+      },
+      stroke: {
+        width: 5,
+        curve: 'smooth',
+        colors: ['#598369'], // Customize the line color here
+      },
      markers: {
        size: 6, // Size of markers
-        colors: ['#FF0000'], // Marker (dot) color
-        strokeColor: '#000000', // Stroke color of the marker
+        colors: ['#004118'], // Marker (dot) color
+        strokeColor: '#fff', // Stroke color of the marker
        strokeWidth: 2
-      }
-    },
-    xaxis: {
-      type: 'category', // Change from 'datetime' to 'category'
-      categories: ['BH', 'KW', 'OM', 'QA', 'SA', 'UAE', 'IND'],
-      tickAmount: 7
-    },
-    title: {
-      text: 'Exchange rate currency', // Adjust the title if needed
-      align: 'left',
-      style: {
-        fontSize: '15px',
-        color: '#000',
-        fontWeight:400
-      }
-    },
-    fill: {
-      type: 'gradient',
-      gradient: {
-        shade: 'dark',
-        gradientToColors: ['#004017'],
-        shadeIntensity: 4,
-        type: 'horizontal',
-        opacityFrom: 1,
-        opacityTo: 1,
-        stops: [0, 100] // Gradient stops
      },
+      xaxis: {
+        type: 'category', // Change from 'datetime' to 'category'
+        categories: ['BH', 'KW', 'OM', 'QA', 'SA', 'UAE', 'IND'],
+        tickAmount: 7
+      },
+      title: {
+        text: 'Exchange Rate Currency', // Adjust the title if needed
+        align: 'left',
+        style: {
+          fontSize: '15px',
+          color: '#000',
+          fontWeight: 400
+        }
+      },
+      fill: {
+        type: 'gradient',
+        gradient: {
+          shade: 'dark',
+          gradientToColors: ['#004017'],
+          shadeIntensity: 4,
+          type: 'horizontal',
+          opacityFrom: 1,
+          opacityTo: 1,
+          stops: [0, 100] // Gradient stops
+        },
+      }
    }
-  };
+  });

  return (
-    <ReactApexChart options={options} series={series} type="line" height={350} width={700} />
+    <div>
+      <ReactApexChart  options={chartOptions.options} series={chartOptions.series} type="line" height={"100%"} width={"600"} />
+    </div>
  );
-};
+}

 export default ApexLine;
--- a/src/Pages/Dashbaord.jsx
+++ b/src/Pages/Dashbaord.jsx
@@ -16,6 +16,8 @@ import { PiChartLineUpDuotone } from 'react-icons/pi'
 import ApexChart from '../Components/Doughnut/ApexDonut'
 import ApexLine from '../Components/Doughnut/ApexLine'
 import ReactApexChart from 'react-apexcharts'
+import { BsGraphUpArrow } from "react-icons/bs";
+

 const Dashbaord = () => {
  const navigate = useNavigate()
@@ -96,50 +98,48 @@ const Dashbaord = () => {

  return (
    isIoPreLoading || isIoLoading || isInvestorLoading ? <FullscreenLoaders /> :
-    <Box height={'100vh'} bg={'#fff'} roundedTop={0} mt={0}>
+    <Box height={'100vh'} bg={'#fff'} roundedTop={0} pt={5} overflowX={"hidden"}>
      <Box display={'flex'} gap={6} w={'100%'} pt={3} pb={3} p={3} >
-        <Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/investor-details")} boxShadow={'lg'} color={"#fff"} p={4} rounded={'xl'} w={'25%'} display={'flex'} bg={'#004118'} flexDirection={'column'} alignItems={'start'}  >
-          <Icon bg={'#fff'} rounded={9} p={2} color={"#004118"} as={TbTransactionDollar} mb={6} boxSize={12} />
-          <Text as={'span'} fontSize={'xs'}>Total Investors</Text>
-          <Text as={'span'} fontSize={'36px'} fontWeight={700}>{investorDetails?.data?.totalItems}</Text>
-          <Icon position={'absolute'} right={6} bottom={6} boxSize={12} as={PiChartLineUpDuotone} />
-
-
+        <Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/investor-details")} boxShadow={'lg'} color={"#004118"} p={4} rounded={'xl'} w={'25%'} display={'flex'} bg={'#f5f8f6'} flexDirection={'column'} alignItems={'start'}  >
+          <Icon left={"10px"} bg={'#004118'} rounded={9} p={2} color={"#fff"} as={TbTransactionDollar} mb={6} boxSize={12} />
+          <Text as={'span'} fontSize={'xs'} fontWeight={500}>Total Investors</Text>
+          <Text as={'span'} fontSize={'32px'} fontWeight={600}>{investorDetails?.data?.totalItems}</Text>
+          <Icon  position={'absolute'} right={6} bottom={6} boxSize={8} as={BsGraphUpArrow}  />
          {/* <ReactApexChart position={'absolute'} right={6} bottom={6} options={options1} series={series1} type="line" height={35} width={100} /> */}
        </Box>
-        <Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/view-io")} boxShadow={'lg'} bg={'#fff'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} >
+        <Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/view-io")} boxShadow={'lg'} bg={'#f5f8f6'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} >
          <Icon bg={'#004118'} rounded={9} p={2} color={"#fff"} as={HiOutlineChartSquareBar} mb={6} boxSize={12} />
-          <Text as={'span'} fontSize={'xs'}>Total IO</Text>
-          <Text as={'span'} fontSize={'40px'} fontWeight={700}>{IO?.data?.totalItems}</Text>
-          <Icon position={'absolute'} right={6} bottom={6} boxSize={12} as={PiChartLineUpDuotone} />
+          <Text as={'span'} fontSize={'xs'} fontWeight={500}>Total IO</Text>
+          <Text as={'span'} fontSize={'32px'} fontWeight={600}>{IO?.data?.totalItems}</Text>
+          <Icon position={'absolute'} right={6} bottom={6} boxSize={8} as={BsGraphUpArrow} />
        </Box>
-        <Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/sponser")} boxShadow={'lg'} bg={'#fff'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} >
+        <Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/sponser")} boxShadow={'lg'} bg={'#f5f8f6'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} >
          <Icon bg={'#004118'} rounded={9} p={2} color={"#fff"} as={RiMoneyDollarBoxLine} mb={6} boxSize={12} />
-          <Text as={'span'} fontSize={'xs'}>Total sponors</Text>
-          <Text as={'span'} fontSize={'40px'} fontWeight={700}>{data?.data?.sponsor?.length}</Text>
-          <Icon position={'absolute'} right={6} bottom={6} boxSize={12} as={PiChartLineUpDuotone} />
+          <Text as={'span'} fontSize={'xs'} fontWeight={500}>Total sponors</Text>
+          <Text as={'span'} fontSize={'32px'} fontWeight={600}>{data?.data?.sponsor?.length}</Text>
+          <Icon position={'absolute'} right={6} bottom={6} boxSize={8} as={BsGraphUpArrow} />
        </Box>
-        <Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/investment-type")} boxShadow={'lg'} bg={'#fff'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} >
+        <Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/investment-type")} boxShadow={'lg'} bg={'#f5f8f6'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} >
          <Icon bg={'#004118'} rounded={9} p={2} color={"#fff"} as={VscSymbolClass} mb={6} boxSize={12} />
-          <Text as={'span'} fontSize={'xs'}>Total Investment Type</Text>
-          <Text as={'span'} fontSize={'40px'} fontWeight={700}>{data?.data?.investmentType?.length}</Text>
-          <Icon position={'absolute'} right={6} bottom={6} boxSize={12} as={PiChartLineUpDuotone} />
+          <Text as={'span'} fontSize={'xs'} fontWeight={500}>Total Investment Type</Text>
+          <Text as={'span'} fontSize={'32px'} fontWeight={600}>{data?.data?.investmentType?.length}</Text>
+          <Icon position={'absolute'} right={6} bottom={6} boxSize={8} as={BsGraphUpArrow} />
        </Box>
      </Box>
-      <Box h={'45%'} display={'flex'} pe={4} >
+      <Box h={'70%'} w={"100%"} display={'flex'} pe={4} mt={2}>
        <Box w={'60%'} h={'100%'} p={4} pe={6} pt={1}  >
          <Box position={'relative'} h={'100%'} boxShadow={'lg'} display={'flex'} justifyContent={'center'} rounded={'xl'} p={5} ps={0} pe={0}>
-            <Text position={'absolute'} top={3} left={6} as={'span'} fontSize={'sm'}>Exchange rate currency</Text> 
-             <LineChart />
-            {/* <ApexLine/> */}
+            {/* <Text position={'absolute'} top={0} left={6} as={'span'} fontSize={'sm'}>Exchange rate currency</Text>  */}
+             {/* <LineChart /> */}
+            <ApexLine/>
          </Box>
        </Box>




-        <Box  boxShadow={'lg'} bg={'#fff'} rounded={'xl'} w={'50%'} display={'flex'} justifyContent={'space-between'} flexDirection={'column'} h={"95%"} mt={1} p={4}>
-          <Text as={'span'} fontSize={'sm'}>IO Status</Text>
+        <Box  boxShadow={'lg'} position={"relative"} bg={'#fff'} rounded={'xl'} w={'40%'} display={'flex'} justifyContent={'space-between'} flexDirection={'column'} h={"95%"} mt={1} p={4}>
+          <Text  as={'span'} fontSize={'sm'}>IO Status</Text>
          <Box display={'flex'} w={'100%'} h={'100%'} alignItems={'center'}  justifyContent={'space-around'} >
          {/* <Box display={'flex'} w={'70%'} alignItems={'center'} h={325} p={6}> */}
            {/* <DonutChart data={chartData} /> */}