FEAT: ADDED THE TAB FOR THE BETTER DATA DISPLAY

src/Components/FollowerAnalysis/RatioProgress.tsx

@@ -0,0 +1,19 @@
+import React , {useState} from "react";
+import {Card, Text} from "@tremor/react"
+import {FollowerFollowingRatio} from "@/Interface/api.interface";
+
+
+export const RatioProgress: React.FC<FollowerFollowingRatio> = ({ FollowerToFollowingRatio }) => {
+    const ratio = FollowerToFollowingRatio || ""; // Using default parameter in function body
+    return (
+      <div>
+        <div></div>
+        <Card className="rounded-3xl w-32">
+          <h2 className="i">{ratio}</h2>
+        </Card>
+      </div>
+    );
+  };
+
+
+export default RatioProgress;

src/Interface/api.interface.ts

@@ -1,18 +1,22 @@
 // follower-analysis.interface.ts
 export interface FollowerAnalysis {
-    followerCount: number;
-    increaseOrDecrease: string; // Use lowercase 'string'
-  }
-
-  export interface FollowingAnalysis {
-    followingCount: number;
-    increaseOrDecrease: string;
-  }
+  followerCount: number;
+  increaseOrDecrease: string; // Use lowercase 'string'
+}
 
-  export interface LanguageCountAnalysis{
+export interface FollowingAnalysis {
+  followingCount: number;
+  increaseOrDecrease: string;
+}
 
-      [LangName: string]: number;
+export interface LanguageCountAnalysis {
+  [LangName: string]: number;
+}
 
-
-  }
-
+
+export interface FollowerFollowingRatio {
+
+    FollowerToFollowingRatio: String;
+
+
+}

src/Services/analysis.service.ts

@@ -31,4 +31,15 @@ export const getLanguageCountAnalysis = async(userId:string)=>{
     catch(err){
         return err;
     }
+}
+
+export const getFollowerFollowingRation = async(userId:string)=>{
+  const endPoint = "followerToFollowingRatio"
+  try{
+    const response = await fetch(`${BASE_API}${endPoint}?id=${userId}`)
+    return response
+  }
+  catch(err){
+    return err;
+  }
 }

src/Styles/Dashboard/followerProgress.css

@@ -42,5 +42,9 @@
     margin-left: 10%;
     border-radius: 30px;
   }
+  .i{
+    color: black;
+  }
+
 
 

src/Styles/Dashboard/main.css

@@ -0,0 +1,10 @@
+.tabCard{
+    background-color: black;
+    border-radius: 45px;
+    max-width: 230px;
+    height: auto;
+}
+.tabCardBackGradient{
+ max-width: 240px;
+ border-radius: 45px;
+}

src/app/Dashboard/page.tsx

@@ -1,19 +1,11 @@
-"use client";
-import {
-  getFollowerAnalysis,
-  getFollowingAnalysis,
-  getLanguageCountAnalysis,
-} from "@/Services/analysis.service";
-import {
-  FollowerAnalysis,
-  FollowingAnalysis,
-  LanguageCountAnalysis,
-} from "@/Interface/api.interface";
+"use client"
+import React, { useEffect, useState } from "react";
+import { Grid, Flex, Text, ProgressBar, TabGroup, TabList, Tab, TabPanels, TabPanel ,Card } from "@tremor/react";
+import { getFollowerAnalysis, getFollowingAnalysis, getLanguageCountAnalysis } from "@/Services/analysis.service";
+import { FollowerAnalysis, FollowingAnalysis, LanguageCountAnalysis } from "@/Interface/api.interface";
 import FollowerProgress from "@/Components/FollowerAnalysis/FollowerProgress";
 import FollowingProgress from "@/Components/FollowerAnalysis/FollowingProgress";
-import LanguageCount from "@/Components/LanguageAnalysis/LanguageCount";  // Import the LanguageCount component
-import React, { useEffect, useState } from "react";
-import { Grid, Card, Flex } from "@tremor/react";
+import LanguageCount from "@/Components/LanguageAnalysis/LanguageCount";
 
 const VersionDashboard: React.FC = () => {
   const [followerAnlData, setFollowerAnlData] = useState<FollowerAnalysis>({
@@ -25,7 +17,7 @@ const VersionDashboard: React.FC = () => {
     followingCount: 0,
     increaseOrDecrease: "",
   });
-  
+
   const [langCount, setLangCount] = useState<LanguageCountAnalysis>({});
 
   const getFollowerAnalysisData = async () => {
@@ -64,33 +56,58 @@ const VersionDashboard: React.FC = () => {
     getLanguageCountAnalysisData();
   }, []);
 
-  // ...
-
-return followerAnlData.followerCount !== 0 && followingAnlData.followingCount !== 0 ? (
-  <div>
-    <div className="flex flex-row basis-20 mt-10">
-      <div className="drop-shadow-2xl">
-      <Grid numItems={1} numItemsSm={2} numItemsLg={2} className="gap-3">
-        <FollowerProgress
-          followerCount={followerAnlData.followerCount}
-          increaseOrDecrease={followerAnlData.increaseOrDecrease}
-        />
-
-        <FollowingProgress
-          followingCount={followingAnlData.followingCount}
-          increaseOrDecrease={followerAnlData.increaseOrDecrease}
-        />
-      </Grid>
-</div>
-      <div className="langCountCardContainer drop-shadow-2xl">
-        <LanguageCount languageCounts={langCount} />
-      </div>
+  return followerAnlData.followerCount !== 0 && followingAnlData.followingCount !== 0 ? (
+    <div>
+      <div className="flex flex-row basis-20 mt-10">
+        <div className="drop-shadow-2xl">
+          <Grid numItems={1} numItemsSm={2} numItemsLg={2} className="gap-3">
+            <FollowerProgress
+              followerCount={followerAnlData.followerCount}
+              increaseOrDecrease={followerAnlData.increaseOrDecrease}
+            />
+            <FollowingProgress
+              followingCount={followingAnlData.followingCount}
+              increaseOrDecrease={followerAnlData.increaseOrDecrease}
+            />
+          </Grid>
+          <div className="ml-6 mt-8 relative group items-start justify-cente">
+          <div className="tabCardBackGradient absolute -inset-0.5 bg-gradient-to-r from-green-600 to-blue-600  blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
+            <Card className="tabCard">
+            <TabGroup>
+              <TabList className="mt-8">
+                <Tab>Repos</Tab>
+                <Tab>Ratio</Tab>
+                <Tab>Stars</Tab>
+              </TabList>
+              <TabPanels>
+                <TabPanel className="ml-4">
+                  <div className="mt-10">
+                   <p>nnk</p>
+                  </div>
+                </TabPanel>
+                <TabPanel>
+                  <div className="mt-10">
+                   <p>knkn</p>
+                  </div>
+                </TabPanel>
+                <TabPanel>
+                  <div className="mt-10">
+                   <p>knkn</p>
+                  </div>
+                </TabPanel>
+              </TabPanels>
+            </TabGroup>
+            </Card>
+          </div>
+        </div>
+        <div className="langCountCardContainer drop-shadow-2xl">
+          <LanguageCount languageCounts={langCount} />
+        </div>
       </div>
-  </div>
-) : (
-  <></>
-);
-
+    </div>
+  ) : (
+    <></>
+  );
 };
 
 export default VersionDashboard;

src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import "../Styles/Dashboard/followerProgress.css"
 import "../Styles/Dashboard/langCount.css"
+import "../Styles/Dashboard/main.css";
 
 const inter = Inter({ subsets: ["latin"] });