Task #229075 (#11)

* Initial commit * Task #227980:Header and login page * Task #228047 : Form creation files created * Task #228198: create form general information and routes * Task #228198: create form-issue for chakra UI * fix:folder structure, loader and auth and guest Routes * fix:sonar issue * fix:sonar issue * Task #228198: create schema,create UI schema and create form * Task #228198 created RJFS form Task #228433 created keymatrics section using stat * Task #228496 create login and otp page Task #228497 Create register page Task #228047 create typography * Task #228198 create accordian , check circle,warning icon ,connected line ui add checkbox * Task #228598 Task #228050 add apexcharts and ka-table in Dashboard * Task #228496 Task #228497 * Task #228862 * Task #228862 * Task #228862 * Task #228862 * Task #228862 * Task #228862 * Task #229019 * Task #229075 * Task #228862 * Task #228862 --------- Co-authored-by: Sagar Takle <[email protected]>
PSMRI · Oct 21, 2024 · 99b2d8e · 99b2d8e
1 parent 0b7bfa8
commit 99b2d8e
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 15 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -11,6 +11,7 @@ const theme = extendTheme(customTheme);
 
 initializeI18n("local"); // Initialize i18n with default language
 function App() {
+  const [loading, setLoading] = useState(true);
   const [routes, setRoutes] = useState<
     { path: string; component: React.ElementType }[]
   >([]);
@@ -22,8 +23,13 @@ function App() {
     } else {
       setRoutes(guestRoutes);
     }
+    setLoading(false);
   }, []);
 
+  if (loading) {
+    return <Loading />;
+  }
+
   return (
     <ChakraProvider theme={theme}>
       <Suspense fallback={<Loading />}>

diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx
@@ -27,7 +27,7 @@ export default function Login() {
   const [open, setOpen] = React.useState(false);
   const [showAlert, setShowAlert] = React.useState(false);
   const [message, setMessage] = React.useState("");
-
+  const [showTooltip, setTooltip] = React.useState(false); // conficts
   const handleLogin = async () => {
     setIsLoading(true);
     localStorage.setItem("Email", email);
@@ -129,9 +129,15 @@ export default function Login() {
                   <HStack marginLeft={"24px"}>
                     <Tooltip
                       label="Please click on Terms and Condition Link"
+                      isOpen={showTooltip}
+                      onClose={() => setTooltip(false)}
                       placement="top"
                     >
-                      <Checkbox isChecked={isChecked}>
+                      <Checkbox
+                        isChecked={isChecked}
+                        onMouseEnter={() => setTooltip(true)}
+                        onMouseLeave={() => setTooltip(false)}
+                      >
                         <Text
                           fontSize={"16px"}
                           fontWeight={400}

diff --git a/src/pages/auth/OTP.tsx b/src/pages/auth/OTP.tsx
@@ -65,8 +65,7 @@ export default function OTP() {
           setIsLoading(false);
           localStorage.setItem("token", "true");
           localStorage.setItem("user", JSON.stringify(registerResponse?.user));
-          navigate("/");
-          window.location.reload();
+          navigate("0");
         } else {
           setIsLoading(false);
           setMessage("Please contact admin!");
@@ -85,8 +84,7 @@ export default function OTP() {
           localStorage.setItem("token", "true");
           setIsLoading(false);
           localStorage.setItem("user", JSON.stringify(otpLoginResponse?.user));
-          navigate("/");
-          window.location.reload();
+          navigate("0");
         } else {
           setIsLoading(false);
           setMessage("Please contact admin!");
@@ -108,7 +106,7 @@ export default function OTP() {
       {isLoading ? (
         <Loading />
       ) : (
-        <HStack w="full" h="lg" spacing={8} align="stretch">
+        <HStack w="full" h="88vh" spacing={8} align="stretch">
           <LeftSideBar />
           <VStack p={8} flex={1} align={"center"} justify={"center"}>
             <Stack spacing={4} w={"full"}>

diff --git a/src/pages/auth/UserRegister.tsx b/src/pages/auth/UserRegister.tsx
@@ -28,6 +28,8 @@ export default function UserRegister() {
   const [open, setOpen] = React.useState(false);
   const [showAlert, setShowAlert] = React.useState(false);
   const [message, setMessage] = React.useState("");
+  const [showTooltip, setShowTooltip] = React.useState(false);
+
   const handleRegister = async () => {
     localStorage.setItem("Email", email);
     setIsLoading(true);
@@ -121,10 +123,16 @@ export default function UserRegister() {
                     </Text>
                   </HStack>
                   <Tooltip
+                    isOpen={showTooltip}
+                    onClose={() => setShowTooltip(false)}
                     label="Please click on Terms and Condition Link"
                     placement="top"
                   >
-                    <Checkbox isChecked={isChecked}>
+                    <Checkbox
+                      isChecked={isChecked}
+                      onMouseEnter={() => setShowTooltip(true)}
+                      onMouseLeave={() => setShowTooltip(false)}
+                    >
                       <Text fontSize={"16px"} fontWeight={400}>
                         {t("LOGIN_AGREE")}
                       </Text>

diff --git a/src/pages/dashboard/CommonBarChart.tsx b/src/pages/dashboard/CommonBarChart.tsx
@@ -14,6 +14,7 @@ interface VisualData {
   gender: DataItem[];
   caste: DataItem[];
   ratio: DataItem[];
+  standard: DataItem[];
 }
 
 interface ChartData {
@@ -25,6 +26,11 @@ interface ChartData {
 const CommonBarChart: React.FC<ChartData> = ({ chartData }) => {
   const { t } = useTranslation();
   const visualdata = chartData?.visualData;
+  console.log(
+    visualdata?.standard?.length > 0
+      ? visualdata?.standard?.reduce((acc, item) => acc + item.count, 0)
+      : 0
+  );
   // Pie chart data
   const data = [
     {
@@ -71,6 +77,7 @@ const CommonBarChart: React.FC<ChartData> = ({ chartData }) => {
           },
           style: {
             colors: ["#000"], // Set the color of the labels
+            fontSize: "10px", // font size 10
           },
           offsetY: -20, // Adjust the position above the bar
         },
@@ -158,11 +165,17 @@ const CommonBarChart: React.FC<ChartData> = ({ chartData }) => {
     },
     {
       title: "Breakdown by Level of Study",
-      count: "547",
+      count:
+        visualdata?.standard?.length > 0
+          ? visualdata?.standard?.reduce((acc, item) => acc + item.count, 0)
+          : 0,
       footerText: "Standard",
       type: "pie",
       options: {
-        labels: visualRepresentation?.age?.map((e) => e.label),
+        labels:
+          visualdata?.standard?.length > 0
+            ? visualdata?.standard?.map((e) => e.label)
+            : [],
         colors: ["#867fa5", "#06164B", "#DDE1FF"],
         dataLabels: {
           enabled: false,
@@ -178,7 +191,10 @@ const CommonBarChart: React.FC<ChartData> = ({ chartData }) => {
           },
         },
       },
-      series: visualRepresentation?.age?.map((e) => e.count),
+      series:
+        visualdata?.standard?.length > 0
+          ? visualdata?.standard?.map((e) => e.count)
+          : [],
     },
     {
       title: "Day Scholar / Hostler Ratio",

diff --git a/src/pages/dashboard/Dashboard.tsx b/src/pages/dashboard/Dashboard.tsx
@@ -53,7 +53,7 @@ function Dashboard() {
       showLanguage={false}
     >
       {isLoading && <Loading />}
-      <VStack gap="60px" py="60px">
+      <VStack gap="60px" py="60px" overflowX={"hidden"}>
         <KeyMatrics matricsData={data} />
         <BenefitSummary tableData={data} />
         <CommonBarChart chartData={data} />

diff --git a/src/utils/dataJSON/BenefitSummary.tsx b/src/utils/dataJSON/BenefitSummary.tsx
@@ -14,9 +14,10 @@ export const visualRepresentation = {
   applicantsDisbursals: Array.from(
     { length: 7 },
     (_, i) => ({
-      label: new Date(Date.now() + i * 24 * 60 * 60 * 1000)
-        .toLocaleString("en-us", { weekday: "short" })
-        .slice(0, 2),
+      label: new Date(Date.now() + i * 24 * 60 * 60 * 1000).toLocaleString(
+        "en-us",
+        { weekday: "long" }
+      ),
       count: Math.floor(Math.random() * 100),
     }) // Extract the first 2 letters
   ),