From 0f365986278094de595cefcd2266f38be16a232f Mon Sep 17 00:00:00 2001
From: Ashutosh8215 <ashutosh.j@mindfiresolutions.com>
Date: Thu, 14 Mar 2024 12:40:08 +0530
Subject: [PATCH 01/16] feat: get package stats

---
 updateProject.mjs | 101 +++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 100 insertions(+), 1 deletion(-)

diff --git a/updateProject.mjs b/updateProject.mjs
index fc27f251..b0881f90 100644
--- a/updateProject.mjs
+++ b/updateProject.mjs
@@ -45,7 +45,9 @@ async function getCollaborators(repoData, githubToken) {
 
 // Main function to update projects data
 async function updateProjects() {
-  const githubToken = process.env.GITHUB_TOKEN;
+  // const githubToken = process.env.GITHUB_TOKEN;
+  const githubToken =
+    "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";
 
   try {
     process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0;
@@ -186,10 +188,107 @@ async function updateProjects() {
       JSON.stringify(sortedContributions, null, 2)
     );
     console.log("Contributors list updated successfully.");
+
+    getAllStats(repoNames)
+      .then((statsMap) => {
+        fs.writeFileSync(
+          path.join(__dirname, "src/app/projects/assets/stats.json"),
+          JSON.stringify(statsMap, null, 2)
+        );
+
+        console.log("Status list updated successfully.");
+      })
+      .catch((error) => {
+        console.error("Error fetching stats:", error);
+      });
   } catch (error) {
     console.error("An error occurred:", error);
   }
 }
 
+// Function to fetch download statistics for a given package and period
+async function fetchDownloadStats(packageName, period) {
+  const url = `https://api.npmjs.org/downloads/range/${period}/@mindfiredigital/${packageName}`;
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    console.log(
+      `Failed to fetch download stats for ${packageName} (${period}): ${response.statusText}`
+    );
+  }
+
+  const data = await response.json();
+  return data;
+}
+
+// Function to calculate average downloads from the statistics
+function calculateAverageDownloads(stats) {
+  const totalDownloads = stats.downloads.reduce(
+    (accumulator, download) => accumulator + download.downloads,
+    0
+  );
+  return totalDownloads / stats.downloads.length;
+}
+
+// Function to fetch and process statistics for a package and period
+async function getStats(packageName, period) {
+  try {
+    // Fetch download statistics
+    const stats = await fetchDownloadStats(packageName, period);
+
+    // Check if stats exist
+    if (!stats || !stats.package) return 0;
+
+    // Calculate average downloads
+    const averageDownloads = calculateAverageDownloads(stats);
+
+    switch (period) {
+      case "last-day":
+        return averageDownloads;
+      case "last-week":
+        return averageDownloads * 7;
+      default:
+        return averageDownloads * 365;
+    }
+  } catch (error) {
+    // Log and handle errors
+    console.error(`${packageName} not present`);
+    return null;
+  }
+}
+
+// Function to fetch and aggregate statistics for all packages and periods
+async function getAllStats(npmPackages) {
+  const statsMap = {};
+
+  // Fetch stats for each package and period
+  await Promise.all(
+    npmPackages.map(async (packageName) => {
+      try {
+        // Fetch stats for different periods
+        const [dayStats, weekStats, yearStats] = await Promise.all([
+          getStats(packageName, "last-day"),
+          getStats(packageName, "last-week"),
+          getStats(packageName, "last-year"),
+        ]);
+
+        // If any stats exist, add to the map
+        if (dayStats !== 0 || weekStats !== 0 || yearStats !== 0) {
+          statsMap[packageName] = {
+            day: Math.ceil(dayStats),
+            week: Math.ceil(weekStats),
+            year: Math.ceil(yearStats),
+          };
+        }
+      } catch (error) {
+        // Log and handle errors
+        console.error(`Error fetching stats for ${packageName}:`, error);
+      }
+    })
+  );
+
+  return statsMap;
+}
+
 // Call the main function
 updateProjects();

From 91e85340262adc69b202bce9325354ebca11d4dd Mon Sep 17 00:00:00 2001
From: Ashutosh8215 <ashutosh.j@mindfiresolutions.com>
Date: Tue, 19 Mar 2024 18:15:42 +0530
Subject: [PATCH 02/16] chore: add @headlessui/react package

---
 package-lock.json | 42 ++++++++++++++++++++++++++++++++++++++++++
 package.json      |  1 +
 2 files changed, 43 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 9f7b6065..62a1e7a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "mf-open-source",
       "version": "0.1.0",
       "dependencies": {
+        "@headlessui/react": "^1.7.18",
         "clsx": "^2.0.0",
         "i": "^0.3.7",
         "next": "13.5.4",
@@ -611,6 +612,22 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@headlessui/react": {
+      "version": "1.7.18",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.18.tgz",
+      "integrity": "sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==",
+      "dependencies": {
+        "@tanstack/react-virtual": "^3.0.0-beta.60",
+        "client-only": "^0.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -890,6 +907,31 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.2.0.tgz",
+      "integrity": "sha512-OEdMByf2hEfDa6XDbGlZN8qO6bTjlNKqjM3im9JG+u3mCL8jALy0T/67oDI001raUUPh1Bdmfn4ZvPOV5knpcg==",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.2.0.tgz",
+      "integrity": "sha512-P5XgYoAw/vfW65byBbJQCw+cagdXDT/qH6wmABiLt4v4YBT2q2vqCOhihe+D1Nt325F/S/0Tkv6C5z0Lv+VBQQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.9",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.9.tgz",
diff --git a/package.json b/package.json
index 761c6b05..81e104e9 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "update-projects": "node updateProject.mjs"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.18",
     "clsx": "^2.0.0",
     "i": "^0.3.7",
     "next": "13.5.4",

From 144d99d9cc3a65bf5a0f0589a5501b977fc7dcd8 Mon Sep 17 00:00:00 2001
From: Ashutosh8215 <ashutosh.j@mindfiresolutions.com>
Date: Tue, 19 Mar 2024 18:17:22 +0530
Subject: [PATCH 03/16] feat: add total npm download

---
 src/app/projects/assets/contributors.json     | 183 +++++++++++++++++-
 src/app/projects/assets/projects.json         |  90 ++++++++-
 src/app/projects/assets/stats.json            |  23 +++
 src/app/projects/assets/upcomingProjects.json |  90 +++++++--
 updateProject.mjs                             |  35 ++--
 5 files changed, 370 insertions(+), 51 deletions(-)
 create mode 100644 src/app/projects/assets/stats.json

diff --git a/src/app/projects/assets/contributors.json b/src/app/projects/assets/contributors.json
index 160dbf26..037e40d8 100644
--- a/src/app/projects/assets/contributors.json
+++ b/src/app/projects/assets/contributors.json
@@ -1,9 +1,184 @@
-{
-  "lakinmindfire": {
+[
+  {
+    "id": 116242186,
+    "contributions": 273,
+    "html_url": "https://github.com/ashutosh-jena-mindfire",
+    "avatar_url": "https://avatars.githubusercontent.com/u/116242186?v=4",
+    "login": "ashutosh-jena-mindfire"
+  },
+  {
     "id": 80667930,
-    "contributions": 116,
+    "contributions": 188,
     "html_url": "https://github.com/lakinmindfire",
     "avatar_url": "https://avatars.githubusercontent.com/u/80667930?v=4",
     "login": "lakinmindfire"
+  },
+  {
+    "id": 120394376,
+    "contributions": 126,
+    "html_url": "https://github.com/Bhupesh-MS",
+    "avatar_url": "https://avatars.githubusercontent.com/u/120394376?v=4",
+    "login": "Bhupesh-MS"
+  },
+  {
+    "id": 7521181,
+    "contributions": 121,
+    "html_url": "https://github.com/ssswagatss",
+    "avatar_url": "https://avatars.githubusercontent.com/u/7521181?v=4",
+    "login": "ssswagatss"
+  },
+  {
+    "id": 63102290,
+    "contributions": 57,
+    "html_url": "https://github.com/VershalaTandon",
+    "avatar_url": "https://avatars.githubusercontent.com/u/63102290?v=4",
+    "login": "VershalaTandon"
+  },
+  {
+    "id": 31609471,
+    "contributions": 29,
+    "html_url": "https://github.com/soumyadeep589",
+    "avatar_url": "https://avatars.githubusercontent.com/u/31609471?v=4",
+    "login": "soumyadeep589"
+  },
+  {
+    "id": 64151314,
+    "contributions": 26,
+    "html_url": "https://github.com/BasudevBharatBhushan",
+    "avatar_url": "https://avatars.githubusercontent.com/u/64151314?v=4",
+    "login": "BasudevBharatBhushan"
+  },
+  {
+    "id": 103591425,
+    "contributions": 25,
+    "html_url": "https://github.com/ArnabKMindfire",
+    "avatar_url": "https://avatars.githubusercontent.com/u/103591425?v=4",
+    "login": "ArnabKMindfire"
+  },
+  {
+    "id": 148045555,
+    "contributions": 18,
+    "html_url": "https://github.com/prashant-mindfire",
+    "avatar_url": "https://avatars.githubusercontent.com/u/148045555?v=4",
+    "login": "prashant-mindfire"
+  },
+  {
+    "id": 11457501,
+    "contributions": 17,
+    "html_url": "https://github.com/lakinmohapatra",
+    "avatar_url": "https://avatars.githubusercontent.com/u/11457501?v=4",
+    "login": "lakinmohapatra"
+  },
+  {
+    "id": 85334692,
+    "contributions": 16,
+    "html_url": "https://github.com/hemant-sudhanshu",
+    "avatar_url": "https://avatars.githubusercontent.com/u/85334692?v=4",
+    "login": "hemant-sudhanshu"
+  },
+  {
+    "id": 118360815,
+    "contributions": 15,
+    "html_url": "https://github.com/asishmindfire",
+    "avatar_url": "https://avatars.githubusercontent.com/u/118360815?v=4",
+    "login": "asishmindfire"
+  },
+  {
+    "id": 5602062,
+    "contributions": 15,
+    "html_url": "https://github.com/debabratapatra",
+    "avatar_url": "https://avatars.githubusercontent.com/u/5602062?v=4",
+    "login": "debabratapatra"
+  },
+  {
+    "id": 29296038,
+    "contributions": 13,
+    "html_url": "https://github.com/aryanxorian",
+    "avatar_url": "https://avatars.githubusercontent.com/u/29296038?v=4",
+    "login": "aryanxorian"
+  },
+  {
+    "id": 134675427,
+    "contributions": 13,
+    "html_url": "https://github.com/VershalaT",
+    "avatar_url": "https://avatars.githubusercontent.com/u/134675427?v=4",
+    "login": "VershalaT"
+  },
+  {
+    "id": 160819069,
+    "contributions": 11,
+    "html_url": "https://github.com/konark-mindfire",
+    "avatar_url": "https://avatars.githubusercontent.com/u/160819069?v=4",
+    "login": "konark-mindfire"
+  },
+  {
+    "id": 138189810,
+    "contributions": 10,
+    "html_url": "https://github.com/Satyam-Mindfire",
+    "avatar_url": "https://avatars.githubusercontent.com/u/138189810?v=4",
+    "login": "Satyam-Mindfire"
+  },
+  {
+    "id": 84971366,
+    "contributions": 8,
+    "html_url": "https://github.com/Harshita-mindfire",
+    "avatar_url": "https://avatars.githubusercontent.com/u/84971366?v=4",
+    "login": "Harshita-mindfire"
+  },
+  {
+    "id": 123073226,
+    "contributions": 7,
+    "html_url": "https://github.com/avishekthapamindfire0822",
+    "avatar_url": "https://avatars.githubusercontent.com/u/123073226?v=4",
+    "login": "avishekthapamindfire0822"
+  },
+  {
+    "id": 137804674,
+    "contributions": 7,
+    "html_url": "https://github.com/Bhupesh-mfsi",
+    "avatar_url": "https://avatars.githubusercontent.com/u/137804674?v=4",
+    "login": "Bhupesh-mfsi"
+  },
+  {
+    "id": 87860388,
+    "contributions": 6,
+    "html_url": "https://github.com/iabhishekkumarms",
+    "avatar_url": "https://avatars.githubusercontent.com/u/87860388?v=4",
+    "login": "iabhishekkumarms"
+  },
+  {
+    "id": 10649999,
+    "contributions": 6,
+    "html_url": "https://github.com/chaudharyvivek",
+    "avatar_url": "https://avatars.githubusercontent.com/u/10649999?v=4",
+    "login": "chaudharyvivek"
+  },
+  {
+    "id": 42381761,
+    "contributions": 3,
+    "html_url": "https://github.com/praliptarajoo",
+    "avatar_url": "https://avatars.githubusercontent.com/u/42381761?v=4",
+    "login": "praliptarajoo"
+  },
+  {
+    "id": 11786875,
+    "contributions": 3,
+    "html_url": "https://github.com/taditdash",
+    "avatar_url": "https://avatars.githubusercontent.com/u/11786875?v=4",
+    "login": "taditdash"
+  },
+  {
+    "id": 87357401,
+    "contributions": 2,
+    "html_url": "https://github.com/jagannathmfs",
+    "avatar_url": "https://avatars.githubusercontent.com/u/87357401?v=4",
+    "login": "jagannathmfs"
+  },
+  {
+    "id": 20682504,
+    "contributions": 1,
+    "html_url": "https://github.com/divyarbehera",
+    "avatar_url": "https://avatars.githubusercontent.com/u/20682504?v=4",
+    "login": "divyarbehera"
   }
-}
+]
diff --git a/src/app/projects/assets/projects.json b/src/app/projects/assets/projects.json
index ac3027d5..5071d2ac 100644
--- a/src/app/projects/assets/projects.json
+++ b/src/app/projects/assets/projects.json
@@ -1,32 +1,114 @@
 [
   {
-    "title": "react canvas editor",
+    "id": 1,
+    "title": "React Canvas Editor",
+    "short_description": "Multipage document editing in React with Canvas.",
+    "github_repository_link": "https://github.com/mindfiredigital/react-canvas-editor",
+    "documentation_link": "https://mindfiredigital.github.io/react-canvas-editor/",
+    "project_type": "current",
+    "date_created": "2023-12-20T10:32:42.000Z",
+    "date_updated": null,
+    "status": "published",
     "shortDescription": "Multipage document editing in React with Canvas.",
     "githubUrl": "https://github.com/mindfiredigital/react-canvas-editor",
-    "documentationUrl": "https://mindfiredigital.github.io/react-canvas-editor"
+    "documentationUrl": "https://mindfiredigital.github.io/react-canvas-editor/"
   },
   {
-    "title": "canvas editor",
+    "id": 2,
+    "title": "Canvas Editor",
+    "short_description": "Multipage document editor based on HTML5 canvas.",
+    "github_repository_link": "https://github.com/mindfiredigital/canvas-editor",
+    "documentation_link": "https://mindfiredigital.github.io/canvas-editor",
+    "project_type": "current",
+    "date_created": "2023-12-20T10:35:03.000Z",
+    "date_updated": null,
+    "status": "published",
     "shortDescription": "Multipage document editor based on HTML5 canvas.",
     "githubUrl": "https://github.com/mindfiredigital/canvas-editor",
     "documentationUrl": "https://mindfiredigital.github.io/canvas-editor"
   },
   {
-    "title": "NFT marketplace",
+    "id": 3,
+    "title": "NFT Marketplace",
+    "short_description": "A multi-chain platform for fans to connect with their favorite celebrities.",
+    "github_repository_link": "https://github.com/mindfiredigital/nft-marketplace",
+    "documentation_link": "https://github.com/mindfiredigital/nft-marketplace",
+    "project_type": "current",
+    "date_created": "2023-12-20T10:36:13.000Z",
+    "date_updated": null,
+    "status": "published",
     "shortDescription": "A multi-chain platform for fans to connect with their favorite celebrities.",
     "githubUrl": "https://github.com/mindfiredigital/nft-marketplace",
     "documentationUrl": "https://github.com/mindfiredigital/nft-marketplace"
   },
   {
+    "id": 4,
     "title": "FMDAPI Node Weaver",
+    "short_description": "Seamless frontend integration with Filemaker Database.",
+    "github_repository_link": "https://github.com/mindfiredigital/fmdapi-node-weaver",
+    "documentation_link": "https://github.com/mindfiredigital/fmdapi-node-weaver",
+    "project_type": "current",
+    "date_created": "2023-12-20T10:37:14.000Z",
+    "date_updated": null,
+    "status": "published",
     "shortDescription": "Seamless frontend integration with Filemaker Database.",
     "githubUrl": "https://github.com/mindfiredigital/fmdapi-node-weaver",
     "documentationUrl": "https://github.com/mindfiredigital/fmdapi-node-weaver"
   },
   {
+    "id": 5,
     "title": "Extension Methods",
+    "short_description": "C# utility library with 300+ NuGet extension methods.",
+    "github_repository_link": "https://github.com/mindfiredigital/extension-methods",
+    "documentation_link": "https://github.com/mindfiredigital/extension-methods",
+    "project_type": "current",
+    "date_created": "2023-12-20T10:38:02.000Z",
+    "date_updated": null,
+    "status": "published",
     "shortDescription": "C# utility library with 300+ NuGet extension methods.",
     "githubUrl": "https://github.com/mindfiredigital/extension-methods",
     "documentationUrl": "https://github.com/mindfiredigital/extension-methods"
+  },
+  {
+    "id": 6,
+    "title": "FireKubeX",
+    "short_description": "Simplifies Kubernetes, easing app deployment for developers.",
+    "github_repository_link": "https://github.com/mindfiredigital/FireKubeX",
+    "documentation_link": "https://github.com/mindfiredigital/FireKubeX",
+    "project_type": "current",
+    "date_created": "2023-12-20T10:39:23.000Z",
+    "date_updated": null,
+    "status": "published",
+    "shortDescription": "Simplifies Kubernetes, easing app deployment for developers.",
+    "githubUrl": "https://github.com/mindfiredigital/FireKubeX",
+    "documentationUrl": "https://github.com/mindfiredigital/FireKubeX"
+  },
+  {
+    "id": 12,
+    "title": "MobileQuickLaunchKit-iOS",
+    "short_description": "Simplifies mobile development with pre-built features like login, signup, and settings. Developers integrate efficiently, leveraging diverse themes.",
+    "github_repository_link": "https://github.com/mindfiredigital/MobileQuickLaunchKit-iOS",
+    "documentation_link": "https://github.com/mindfiredigital/MobileQuickLaunchKit-iOS",
+    "project_type": "current",
+    "date_created": "2024-01-30T08:48:28.000Z",
+    "date_updated": null,
+    "status": "published",
+    "shortDescription": "Simplifies mobile development with pre-built features like login, signup, and settings. Developers integrate efficiently, leveraging diverse themes.",
+    "githubUrl": "https://github.com/mindfiredigital/MobileQuickLaunchKit-iOS",
+    "documentationUrl": "https://github.com/mindfiredigital/MobileQuickLaunchKit-iOS"
+  },
+  {
+    "id": 13,
+    "title": "MobileQuickLaunchKit-Android",
+    "short_description": "Simplifies mobile development with pre-built features like login, signup, and settings. Developers integrate efficiently, leveraging diverse themes.",
+    "github_repository_link": "https://github.com/mindfiredigital/MobileQuickLaunchKit-Android",
+    "documentation_link": "https://github.com/mindfiredigital/MobileQuickLaunchKit-Android",
+    "project_type": "current",
+    "date_created": "2024-01-30T08:49:12.000Z",
+    "date_updated": null,
+    "status": "published",
+    "shortDescription": "Simplifies mobile development with pre-built features like login, signup, and settings. Developers integrate efficiently, leveraging diverse themes.",
+    "githubUrl": "https://github.com/mindfiredigital/MobileQuickLaunchKit-Android",
+    "documentationUrl": "https://github.com/mindfiredigital/MobileQuickLaunchKit-Android"
   }
 ]
diff --git a/src/app/projects/assets/stats.json b/src/app/projects/assets/stats.json
new file mode 100644
index 00000000..e03009ca
--- /dev/null
+++ b/src/app/projects/assets/stats.json
@@ -0,0 +1,23 @@
+[
+  {
+    "name": "fmdapi-node-weaver",
+    "day": 0,
+    "week": 3,
+    "year": 70,
+    "total": 70
+  },
+  {
+    "name": "react-canvas-editor",
+    "day": 1,
+    "week": 22,
+    "year": 947,
+    "total": 947
+  },
+  {
+    "name": "canvas-editor",
+    "day": 0,
+    "week": 7,
+    "year": 1063,
+    "total": 1063
+  }
+]
diff --git a/src/app/projects/assets/upcomingProjects.json b/src/app/projects/assets/upcomingProjects.json
index 1bfc37ca..7f7f82bb 100644
--- a/src/app/projects/assets/upcomingProjects.json
+++ b/src/app/projects/assets/upcomingProjects.json
@@ -1,38 +1,86 @@
 [
   {
-    "id": 1,
-    "title": "FireKubeX",
-    "shortDescription": "Simplifies Kubernetes, easing app deployment for developers.",
-    "Summary": "This script simplifies the deployment process for developers by abstracting the complexities of Kubernetes. By providing the necessary configuration in the config.yaml file, developers can quickly deploy their applications to a Kubernetes cluster with ease without the need for in-depth Kubernetes knowledge. It also supports starting and stopping services, along with options for development (dev) and production (prod) modes. The config.yaml is intended for individual microservices. It aims to enhance the efficiency of deploying and scaling microservices by providing a flexible and customizable solution.",
-    "project_type": "Developer Tools and Utilities",
-    "contributors": ["jagannathmfs", "amitshr6779"],
-    "project_goal": "The script is designed to handle multiple services, making it scalable for diverse microservices architectures. Additionally, it can be extended easily to incorporate additional features or adapt to evolving Kubernetes best practices.",
-    "target_users": "Targeted users will be the developers who needs to deploy their applications in a kubernetes cluster on their own local system or in any cloud kubernetes like (EKS,AKS,GKE).",
-    "risk": "Potential risks related to conflicting with proprietary IP or current customer work if any: None"
-  },
-  {
-    "id": 2,
+    "id": 7,
     "title": "SSR Guide",
-    "shortDescription": "The ultimate guide for SSR implementation"
+    "short_description": "The ultimate guide for SSR implementation",
+    "github_repository_link": "NA",
+    "documentation_link": "NA",
+    "project_type": "upcoming",
+    "date_created": "2023-12-20T10:39:55.000Z",
+    "date_updated": null,
+    "status": "draft",
+    "shortDescription": "The ultimate guide for SSR implementation",
+    "githubUrl": "NA",
+    "documentationUrl": "NA"
   },
   {
-    "id": 3,
+    "id": 8,
     "title": "IframeVsWebComponent",
-    "shortDescription": "Benchmarking performance with iframes and web components"
+    "short_description": "Benchmarking performance with iframes and web components",
+    "github_repository_link": "https://github.com/mindfiredigital/IframeVsWebComponents",
+    "documentation_link": "https://github.com/mindfiredigital/IframeVsWebComponents",
+    "project_type": "upcoming",
+    "date_created": "2023-12-20T10:40:36.000Z",
+    "date_updated": null,
+    "status": "draft",
+    "shortDescription": "Benchmarking performance with iframes and web components",
+    "githubUrl": "https://github.com/mindfiredigital/IframeVsWebComponents",
+    "documentationUrl": "https://github.com/mindfiredigital/IframeVsWebComponents"
   },
   {
-    "id": 4,
+    "id": 9,
     "title": "FMDAPI Python Weaver",
-    "shortDescription": "Seamless frontend integration with Filemaker Database"
+    "short_description": "Seamless frontend integration with Filemaker Database",
+    "github_repository_link": "NA",
+    "documentation_link": "NA",
+    "project_type": "upcoming",
+    "date_created": "2023-12-20T10:41:05.000Z",
+    "date_updated": null,
+    "status": "draft",
+    "shortDescription": "Seamless frontend integration with Filemaker Database",
+    "githubUrl": "NA",
+    "documentationUrl": "NA"
   },
   {
-    "id": 5,
+    "id": 10,
     "title": "Angular Canvas Editor",
-    "shortDescription": "Multipage document editing in Angular with Canvas"
+    "short_description": "Multipage document editing in Angular with Canvas",
+    "github_repository_link": "NA",
+    "documentation_link": "NA",
+    "project_type": "upcoming",
+    "date_created": "2023-12-20T10:41:28.000Z",
+    "date_updated": null,
+    "status": "draft",
+    "shortDescription": "Multipage document editing in Angular with Canvas",
+    "githubUrl": "NA",
+    "documentationUrl": "NA"
   },
   {
-    "id": 6,
+    "id": 11,
     "title": "EHRConnect",
-    "shortDescription": "Seamlessly connect with any EHR"
+    "short_description": "Seamlessly connect with any EHR",
+    "github_repository_link": "NA",
+    "documentation_link": "NA",
+    "project_type": "upcoming",
+    "date_created": "2023-12-20T10:42:02.000Z",
+    "date_updated": null,
+    "status": "draft",
+    "shortDescription": "Seamlessly connect with any EHR",
+    "githubUrl": "NA",
+    "documentationUrl": "NA"
+  },
+  {
+    "id": 14,
+    "title": "QuickLaunchReactNativeKit",
+    "short_description": "Simplifies mobile development with pre-built features like login, signup, and settings. Developers integrate efficiently, leveraging diverse themes.",
+    "github_repository_link": "https://github.com/mindfiredigital/QuickLaunchReactNativeKit",
+    "documentation_link": "https://github.com/mindfiredigital/QuickLaunchReactNativeKit",
+    "project_type": "upcoming",
+    "date_created": "2024-02-29T10:55:14.000Z",
+    "date_updated": null,
+    "status": "draft",
+    "shortDescription": "Simplifies mobile development with pre-built features like login, signup, and settings. Developers integrate efficiently, leveraging diverse themes.",
+    "githubUrl": "https://github.com/mindfiredigital/QuickLaunchReactNativeKit",
+    "documentationUrl": "https://github.com/mindfiredigital/QuickLaunchReactNativeKit"
   }
 ]
diff --git a/updateProject.mjs b/updateProject.mjs
index b0881f90..dc5f6192 100644
--- a/updateProject.mjs
+++ b/updateProject.mjs
@@ -45,9 +45,7 @@ async function getCollaborators(repoData, githubToken) {
 
 // Main function to update projects data
 async function updateProjects() {
-  // const githubToken = process.env.GITHUB_TOKEN;
-  const githubToken =
-    "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";
+  const githubToken = process.env.GITHUB_TOKEN;
 
   try {
     process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0;
@@ -223,11 +221,10 @@ async function fetchDownloadStats(packageName, period) {
 
 // Function to calculate average downloads from the statistics
 function calculateAverageDownloads(stats) {
-  const totalDownloads = stats.downloads.reduce(
+  return stats.downloads.reduce(
     (accumulator, download) => accumulator + download.downloads,
     0
   );
-  return totalDownloads / stats.downloads.length;
 }
 
 // Function to fetch and process statistics for a package and period
@@ -240,16 +237,7 @@ async function getStats(packageName, period) {
     if (!stats || !stats.package) return 0;
 
     // Calculate average downloads
-    const averageDownloads = calculateAverageDownloads(stats);
-
-    switch (period) {
-      case "last-day":
-        return averageDownloads;
-      case "last-week":
-        return averageDownloads * 7;
-      default:
-        return averageDownloads * 365;
-    }
+    return calculateAverageDownloads(stats);
   } catch (error) {
     // Log and handle errors
     console.error(`${packageName} not present`);
@@ -259,26 +247,29 @@ async function getStats(packageName, period) {
 
 // Function to fetch and aggregate statistics for all packages and periods
 async function getAllStats(npmPackages) {
-  const statsMap = {};
+  const statsMap = [];
 
   // Fetch stats for each package and period
   await Promise.all(
     npmPackages.map(async (packageName) => {
       try {
         // Fetch stats for different periods
-        const [dayStats, weekStats, yearStats] = await Promise.all([
+        const [dayStats, weekStats, yearStats, totalStats] = await Promise.all([
           getStats(packageName, "last-day"),
           getStats(packageName, "last-week"),
           getStats(packageName, "last-year"),
+          getStats(packageName, "1000-01-01:3000-01-01"),
         ]);
 
         // If any stats exist, add to the map
         if (dayStats !== 0 || weekStats !== 0 || yearStats !== 0) {
-          statsMap[packageName] = {
-            day: Math.ceil(dayStats),
-            week: Math.ceil(weekStats),
-            year: Math.ceil(yearStats),
-          };
+          statsMap.push({
+            name: packageName,
+            day: dayStats,
+            week: weekStats,
+            year: yearStats,
+            total: totalStats,
+          });
         }
       } catch (error) {
         // Log and handle errors

From d865413745f1bdc376682d0083f59ddd92568f6d Mon Sep 17 00:00:00 2001
From: Ashutosh8215 <ashutosh.j@mindfiresolutions.com>
Date: Tue, 19 Mar 2024 18:18:22 +0530
Subject: [PATCH 04/16] feat: add package page

---
 .../social-media/expand-wide-svgrepo-com.svg  |   4 +
 .../images/social-media/npm-svgrepo-com.svg   |   5 +
 src/app/package/page.tsx                      | 166 ++++++++++++++++++
 src/constants/index.ts                        |   4 +
 4 files changed, 179 insertions(+)
 create mode 100644 public/images/social-media/expand-wide-svgrepo-com.svg
 create mode 100644 public/images/social-media/npm-svgrepo-com.svg
 create mode 100644 src/app/package/page.tsx

diff --git a/public/images/social-media/expand-wide-svgrepo-com.svg b/public/images/social-media/expand-wide-svgrepo-com.svg
new file mode 100644
index 00000000..4357c10c
--- /dev/null
+++ b/public/images/social-media/expand-wide-svgrepo-com.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 10V5L8 5M3 14V19L8 19M16 5H21V10M21 14V19H16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/public/images/social-media/npm-svgrepo-com.svg b/public/images/social-media/npm-svgrepo-com.svg
new file mode 100644
index 00000000..9502e11f
--- /dev/null
+++ b/public/images/social-media/npm-svgrepo-com.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 10V20H9V22H16V20H32V10H0Z" fill="#CB3837"/>
+<path d="M5.46205 12H2V18H5.46205V13.6111H7.22344V18H8.98482V12H5.46205ZM10.7462 12V20H14.269V18H17.731V12H10.7462ZM15.9696 16.3889H14.269V13.6111H15.9696V16.3889ZM22.9545 12H19.4924V18H22.9545V13.6111H24.7158V18H26.4772V13.6111H28.2386V18H30V12H22.9545Z" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/src/app/package/page.tsx b/src/app/package/page.tsx
new file mode 100644
index 00000000..1e1f2803
--- /dev/null
+++ b/src/app/package/page.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import React from "react";
+import statsList from "../projects/assets/stats.json";
+import Link from "next/link";
+import npm from "../../../public/images/social-media/npm-svgrepo-com.svg";
+import expand from "../../../public/images/social-media/expand-wide-svgrepo-com.svg";
+import Image from "next/image";
+import { Dialog, Transition } from "@headlessui/react";
+import { Fragment, useState } from "react";
+
+const Stats = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  function closeModal() {
+    setIsOpen(false);
+  }
+
+  function openModal() {
+    setIsOpen(true);
+  }
+
+  return (
+    <div className='container mx-auto'>
+      <h1 className='text-3xl font-bold mb-4'>Download Statistics</h1>
+      <div className='grid grid-cols-3 gap-4'>
+        {statsList.map((stats) => (
+          <div
+            key={stats.name}
+            className='border p-4 rounded bg-white flex flex-col justify-stretch drop-shadow-md hover:scale-105'
+          >
+            <h3 className='font-semibold mb-2 capitalize indent-8 text-mindfire-text-red'>
+              {stats.name.replaceAll("-", " ")}
+            </h3>
+            <div>
+              <div>
+                <Link
+                  href={`https://www.npmjs.com/package/@mindfiredigital/${stats.name}`}
+                  target='_blank'
+                >
+                  <Image
+                    src={npm}
+                    height={20}
+                    width={20}
+                    alt='npm_img'
+                    loading='lazy'
+                    quality={75}
+                  />
+                </Link>
+              </div>
+              <div>
+                <button
+                  className='bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center'
+                  onClick={openModal}
+                >
+                  <Image
+                    src={expand}
+                    height={20}
+                    width={20}
+                    alt='expand_img'
+                    loading='lazy'
+                    quality={75}
+                  />
+                </button>
+              </div>
+            </div>
+            <div className='flex flex-col items-center'>
+              <h5 className='text-mindfire-text-black'>Downloads</h5>
+              <div className='flex justify-around w-full'>
+                <div className='flex flex-col items-center'>
+                  <div>
+                    <h6 className='text-mindfire-text-black'>{stats.day}</h6>
+                  </div>
+                  <div>
+                    <p className='text-slate-500 uppercase text-xs'>Daily</p>
+                  </div>
+                </div>
+                <div className='flex flex-col items-center'>
+                  <div>
+                    <h6 className='text-mindfire-text-black'>{stats.week}</h6>
+                  </div>
+                  <div>
+                    <p className='text-slate-500 uppercase text-xs'>Weekly</p>
+                  </div>
+                </div>
+                <div className='flex flex-col items-center'>
+                  <div>
+                    <h6 className='text-mindfire-text-black'>{stats.year}</h6>
+                  </div>
+                  <div>
+                    <p className='text-slate-500 uppercase text-xs'>Yearly</p>
+                  </div>
+                </div>
+                <div className='flex flex-col items-center'>
+                  <div>
+                    <h6 className='text-mindfire-text-black'>{stats.total}</h6>
+                  </div>
+                  <div>
+                    <p className='text-slate-500 uppercase text-xs'>Total</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as='div' className='relative z-10' onClose={closeModal}>
+          <Transition.Child
+            as={Fragment}
+            enter='ease-out duration-300'
+            enterFrom='opacity-0'
+            enterTo='opacity-100'
+            leave='ease-in duration-200'
+            leaveFrom='opacity-100'
+            leaveTo='opacity-0'
+          >
+            <div className='fixed inset-0 bg-black/25' />
+          </Transition.Child>
+
+          <div className='fixed inset-0 overflow-y-auto'>
+            <div className='flex min-h-full items-center justify-center p-4 text-center'>
+              <Transition.Child
+                as={Fragment}
+                enter='ease-out duration-300'
+                enterFrom='opacity-0 scale-95'
+                enterTo='opacity-100 scale-100'
+                leave='ease-in duration-200'
+                leaveFrom='opacity-100 scale-100'
+                leaveTo='opacity-0 scale-95'
+              >
+                <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'>
+                  <Dialog.Title
+                    as='h3'
+                    className='text-lg font-medium leading-6 text-gray-900'
+                  >
+                    Payment successful
+                  </Dialog.Title>
+                  <div className='mt-2'>
+                    <p className='text-sm text-gray-500'>
+                      Your payment has been successfully submitted. We’ve sent
+                      you an email with all of the details of your order.
+                    </p>
+                  </div>
+
+                  <div className='mt-4'>
+                    <button
+                      type='button'
+                      className='inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
+                      onClick={closeModal}
+                    >
+                      Got it, thanks!
+                    </button>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </div>
+  );
+};
+
+export default Stats;
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 3bf3c226..c8b4f917 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -26,6 +26,10 @@ const navigations: Navigation[] = [
     name: "Contributors",
     path: ["/contributors"],
   },
+  {
+    name: "Package",
+    path: ["/package"],
+  },
   {
     name: "GitHub",
     path: ["https://github.com/mindfiredigital"],

From f2aee8216343f3e7835c303331368803c5d25330 Mon Sep 17 00:00:00 2001
From: Ashutosh8215 <ashutosh.j@mindfiresolutions.com>
Date: Wed, 20 Mar 2024 15:24:26 +0530
Subject: [PATCH 05/16] perf: improve the style

1.Align the buttons 2. Add details to the dialog box
---
 src/app/package/page.tsx | 134 +++++++++++++++++++++++++--------------
 1 file changed, 87 insertions(+), 47 deletions(-)

diff --git a/src/app/package/page.tsx b/src/app/package/page.tsx
index 1e1f2803..9e494687 100644
--- a/src/app/package/page.tsx
+++ b/src/app/package/page.tsx
@@ -11,6 +11,13 @@ import { Fragment, useState } from "react";
 
 const Stats = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const [npmPackage, setNpmPackage] = useState({
+    name: "fmdapi-node-weaver",
+    day: 0,
+    week: 3,
+    year: 70,
+    total: 70,
+  });
 
   function closeModal() {
     setIsOpen(false);
@@ -29,39 +36,45 @@ const Stats = () => {
             key={stats.name}
             className='border p-4 rounded bg-white flex flex-col justify-stretch drop-shadow-md hover:scale-105'
           >
-            <h3 className='font-semibold mb-2 capitalize indent-8 text-mindfire-text-red'>
-              {stats.name.replaceAll("-", " ")}
-            </h3>
-            <div>
+            <div className='flex flex-row items-start justify-between'>
               <div>
-                <Link
-                  href={`https://www.npmjs.com/package/@mindfiredigital/${stats.name}`}
-                  target='_blank'
-                >
-                  <Image
-                    src={npm}
-                    height={20}
-                    width={20}
-                    alt='npm_img'
-                    loading='lazy'
-                    quality={75}
-                  />
-                </Link>
+                <h3 className='font-semibold mb-2 capitalize indent-8 text-mindfire-text-red'>
+                  {stats.name.replaceAll("-", " ")}
+                </h3>
               </div>
-              <div>
-                <button
-                  className='bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center'
-                  onClick={openModal}
-                >
-                  <Image
-                    src={expand}
-                    height={20}
-                    width={20}
-                    alt='expand_img'
-                    loading='lazy'
-                    quality={75}
-                  />
-                </button>
+              <div className='flex flex-row items-center'>
+                <div>
+                  <Link
+                    href={`https://www.npmjs.com/package/@mindfiredigital/${stats.name}`}
+                    target='_blank'
+                  >
+                    <Image
+                      src={npm}
+                      height={20}
+                      width={20}
+                      alt='npm_img'
+                      loading='lazy'
+                      quality={75}
+                    />
+                  </Link>
+                </div>
+                <div>
+                  <button
+                    className='font-bold py-2 px-4 rounded inline-flex items-center'
+                    onClick={() => {
+                      openModal(), setNpmPackage(stats);
+                    }}
+                  >
+                    <Image
+                      src={expand}
+                      height={20}
+                      width={20}
+                      alt='expand_img'
+                      loading='lazy'
+                      quality={75}
+                    />
+                  </button>
+                </div>
               </div>
             </div>
             <div className='flex flex-col items-center'>
@@ -135,23 +148,50 @@ const Stats = () => {
                     as='h3'
                     className='text-lg font-medium leading-6 text-gray-900'
                   >
-                    Payment successful
+                    {npmPackage.name.replaceAll("-", " ")}
                   </Dialog.Title>
-                  <div className='mt-2'>
-                    <p className='text-sm text-gray-500'>
-                      Your payment has been successfully submitted. We’ve sent
-                      you an email with all of the details of your order.
-                    </p>
-                  </div>
-
-                  <div className='mt-4'>
-                    <button
-                      type='button'
-                      className='inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
-                      onClick={closeModal}
-                    >
-                      Got it, thanks!
-                    </button>
+                  <div key={npmPackage.name}>
+                    <div className='flex flex-col items-start'>
+                      <h5 className='text-mindfire-text-black'>Downloads</h5>
+                      <div className='flex flex-row justify-center'>
+                        <div className='flex flex-col items-center'>
+                          <div>
+                            <h6 className='text-mindfire-text-black'>
+                              {npmPackage.day}
+                            </h6>
+                          </div>
+                          <div>
+                            <p className='text-slate-500 uppercase text-xs'>
+                              Daily
+                            </p>
+                          </div>
+                        </div>
+                        <div className='flex flex-col items-center'>
+                          <div>
+                            <h6 className='text-mindfire-text-black'>
+                              {npmPackage.week}
+                            </h6>
+                          </div>
+                          <div>
+                            <p className='text-slate-500 uppercase text-xs'>
+                              Weekly
+                            </p>
+                          </div>
+                        </div>
+                        <div className='flex flex-col items-center'>
+                          <div>
+                            <h6 className='text-mindfire-text-black'>
+                              {npmPackage.year}
+                            </h6>
+                          </div>
+                          <div>
+                            <p className='text-slate-500 uppercase text-xs'>
+                              Yearly
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
                   </div>
                 </Dialog.Panel>
               </Transition.Child>

From b8f995dfcc05b8a092a9eedfb25e9ca3f55fb8ad Mon Sep 17 00:00:00 2001
From: Ashutosh8215 <ashutosh.j@mindfiresolutions.com>
Date: Wed, 20 Mar 2024 15:41:29 +0530
Subject: [PATCH 06/16] style: add download detail in card

---
 src/app/package/page.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/app/package/page.tsx b/src/app/package/page.tsx
index 9e494687..fa2acfc2 100644
--- a/src/app/package/page.tsx
+++ b/src/app/package/page.tsx
@@ -146,14 +146,17 @@ const Stats = () => {
                 <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'>
                   <Dialog.Title
                     as='h3'
-                    className='text-lg font-medium leading-6 text-gray-900'
+                    className='text-lg font-large leading-6 text-gray-900 capitalize text-center mb-4'
                   >
                     {npmPackage.name.replaceAll("-", " ")}
                   </Dialog.Title>
-                  <div key={npmPackage.name}>
-                    <div className='flex flex-col items-start'>
+                  <div
+                    key={npmPackage.name}
+                    className='border p-4 rounded bg-white flex flex-col justify-stretch drop-shadow-md'
+                  >
+                    <div className='flex flex-col items-center'>
                       <h5 className='text-mindfire-text-black'>Downloads</h5>
-                      <div className='flex flex-row justify-center'>
+                      <div className='flex flex-row justify-around w-full'>
                         <div className='flex flex-col items-center'>
                           <div>
                             <h6 className='text-mindfire-text-black'>

From cb2ba61ac8ad6d3d0efccaebbbd0f22c2d8d70a2 Mon Sep 17 00:00:00 2001
From: Ashutosh8215 <ashutosh.j@mindfiresolutions.com>
Date: Fri, 22 Mar 2024 12:34:32 +0530
Subject: [PATCH 07/16] feat: add momentjs and add date range

---
 package-lock.json        |   9 +++
 package.json             |   1 +
 src/app/package/page.tsx | 130 +++++++++++++++++++++++++++++++--------
 3 files changed, 114 insertions(+), 26 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 62a1e7a5..aa9f2ef7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@headlessui/react": "^1.7.18",
         "clsx": "^2.0.0",
         "i": "^0.3.7",
+        "moment": "^2.30.1",
         "next": "13.5.4",
         "npm": "^10.2.0",
         "react": "^18",
@@ -5604,6 +5605,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/package.json b/package.json
index 81e104e9..6e15185e 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@headlessui/react": "^1.7.18",
     "clsx": "^2.0.0",
     "i": "^0.3.7",
+    "moment": "^2.30.1",
     "next": "13.5.4",
     "npm": "^10.2.0",
     "react": "^18",
diff --git a/src/app/package/page.tsx b/src/app/package/page.tsx
index fa2acfc2..3c0dc021 100644
--- a/src/app/package/page.tsx
+++ b/src/app/package/page.tsx
@@ -8,6 +8,16 @@ import expand from "../../../public/images/social-media/expand-wide-svgrepo-com.
 import Image from "next/image";
 import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
+import moment from "moment";
+
+type stats = {
+  downloads: download[];
+};
+
+type download = {
+  downloads: number;
+  day: string;
+};
 
 const Stats = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -27,6 +37,36 @@ const Stats = () => {
     setIsOpen(true);
   }
 
+  const [startDate, setStartDate] = useState(moment().format("YYYY-MM-DD"));
+  const [endDate, setEndDate] = useState(moment().format("YYYY-MM-DD"));
+  const [count, setCount] = useState(0);
+  async function fetchDownloadStats() {
+    const url = `https://api.npmjs.org/downloads/range/${startDate}:${endDate}/@mindfiredigital/${npmPackage.name}`;
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      console.log(
+        `Failed to fetch download stats for ${npmPackage.name} (${startDate}:${endDate}): ${response.statusText}`
+      );
+    }
+
+    const data = await response.json();
+    return data;
+  }
+
+  function calculateAverageDownloads(stats: stats) {
+    return stats.downloads.reduce(
+      (accumulator: number, download: download) =>
+        accumulator + download.downloads,
+      0
+    );
+  }
+
+  const generateChart = async () => {
+    const stats = await fetchDownloadStats();
+    setCount(calculateAverageDownloads(stats));
+  };
+
   return (
     <div className='container mx-auto'>
       <h1 className='text-3xl font-bold mb-4'>Download Statistics</h1>
@@ -62,7 +102,8 @@ const Stats = () => {
                   <button
                     className='font-bold py-2 px-4 rounded inline-flex items-center'
                     onClick={() => {
-                      openModal(), setNpmPackage(stats);
+                      openModal();
+                      setNpmPackage(stats);
                     }}
                   >
                     <Image
@@ -80,30 +121,6 @@ const Stats = () => {
             <div className='flex flex-col items-center'>
               <h5 className='text-mindfire-text-black'>Downloads</h5>
               <div className='flex justify-around w-full'>
-                <div className='flex flex-col items-center'>
-                  <div>
-                    <h6 className='text-mindfire-text-black'>{stats.day}</h6>
-                  </div>
-                  <div>
-                    <p className='text-slate-500 uppercase text-xs'>Daily</p>
-                  </div>
-                </div>
-                <div className='flex flex-col items-center'>
-                  <div>
-                    <h6 className='text-mindfire-text-black'>{stats.week}</h6>
-                  </div>
-                  <div>
-                    <p className='text-slate-500 uppercase text-xs'>Weekly</p>
-                  </div>
-                </div>
-                <div className='flex flex-col items-center'>
-                  <div>
-                    <h6 className='text-mindfire-text-black'>{stats.year}</h6>
-                  </div>
-                  <div>
-                    <p className='text-slate-500 uppercase text-xs'>Yearly</p>
-                  </div>
-                </div>
                 <div className='flex flex-col items-center'>
                   <div>
                     <h6 className='text-mindfire-text-black'>{stats.total}</h6>
@@ -145,7 +162,7 @@ const Stats = () => {
               >
                 <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'>
                   <Dialog.Title
-                    as='h3'
+                    as='h1'
                     className='text-lg font-large leading-6 text-gray-900 capitalize text-center mb-4'
                   >
                     {npmPackage.name.replaceAll("-", " ")}
@@ -196,6 +213,67 @@ const Stats = () => {
                       </div>
                     </div>
                   </div>
+                  <div className='container mx-auto p-4 border rounded bg-white drop-shadow-md mt-4'>
+                    <h5 className='text-center mb-4'>
+                      Daily Downloads Line Chart
+                    </h5>
+                    <div className='flex space-x-4 mb-4'>
+                      <div>
+                        <label
+                          htmlFor='startDate'
+                          className='block font-semibold text-center'
+                        >
+                          Start Date:
+                        </label>
+                        <input
+                          type='date'
+                          id='startDate'
+                          className='border border-gray-300 rounded-md px-2 py-1'
+                          value={startDate}
+                          onChange={(e) => setStartDate(e.target.value)}
+                        />
+                      </div>
+                      <div>
+                        <label
+                          htmlFor='endDate'
+                          className='block font-semibold text-center'
+                        >
+                          End Date:
+                        </label>
+                        <input
+                          type='date'
+                          id='endDate'
+                          className='border border-gray-300 rounded-md px-2 py-1'
+                          value={endDate}
+                          onChange={(e) => setEndDate(e.target.value)}
+                        />
+                      </div>
+                    </div>
+                    <div className='flex flex-col items-center'>
+                      <button
+                        className='bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded'
+                        onClick={generateChart}
+                      >
+                        Generate Chart
+                      </button>
+                      <div className='flex flex-col items-center MT-4'>
+                        <div className='flex flex-row justify-around w-full'>
+                          <div className='flex flex-col items-center'>
+                            <div>
+                              <h6 className='text-mindfire-text-black'>
+                                {count}
+                              </h6>
+                            </div>
+                            <div>
+                              <p className='text-slate-500 uppercase text-xs'>
+                                total
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </Dialog.Panel>
               </Transition.Child>
             </div>

From aa46f8d6ed6ca1c1df623013bde3c7e3e1025ca6 Mon Sep 17 00:00:00 2001
From: Ashutosh8215 <ashutosh.j@mindfiresolutions.com>
Date: Tue, 2 Apr 2024 17:19:38 +0530
Subject: [PATCH 08/16] feat: add dropdown

---
 src/app/package/page.tsx | 182 +++++++++++++++++++++++++++++++++------
 1 file changed, 154 insertions(+), 28 deletions(-)

diff --git a/src/app/package/page.tsx b/src/app/package/page.tsx
index 3c0dc021..67f92eaf 100644
--- a/src/app/package/page.tsx
+++ b/src/app/package/page.tsx
@@ -10,16 +10,19 @@ import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
 import moment from "moment";
 
-type stats = {
-  downloads: download[];
-};
+// type stats = {
+//   downloads: download[];
+// };
 
-type download = {
-  downloads: number;
-  day: string;
-};
+// type download = {
+//   downloads: number;
+//   day: string;
+// };
 
 const Stats = () => {
+  const [startDate, setStartDate] = useState(moment().format("YYYY-MM-DD"));
+  const [endDate, setEndDate] = useState(moment().format("YYYY-MM-DD"));
+  const [count, setCount] = useState(0);
   const [isOpen, setIsOpen] = useState(false);
   const [npmPackage, setNpmPackage] = useState({
     name: "fmdapi-node-weaver",
@@ -37,34 +40,133 @@ const Stats = () => {
     setIsOpen(true);
   }
 
-  const [startDate, setStartDate] = useState(moment().format("YYYY-MM-DD"));
-  const [endDate, setEndDate] = useState(moment().format("YYYY-MM-DD"));
-  const [count, setCount] = useState(0);
-  async function fetchDownloadStats() {
-    const url = `https://api.npmjs.org/downloads/range/${startDate}:${endDate}/@mindfiredigital/${npmPackage.name}`;
-    const response = await fetch(url);
+  // Function to fetch download statistics for a given package and period
+  // async function fetchDownloadStats(packageName: string, period: string) {
+  //   const url = `https://api.npmjs.org/downloads/range/${period}/@mindfiredigital/${packageName}`;
+  //   const response = await fetch(url);
 
-    if (!response.ok) {
-      console.log(
-        `Failed to fetch download stats for ${npmPackage.name} (${startDate}:${endDate}): ${response.statusText}`
-      );
+  //   if (!response.ok) {
+  //     console.log(
+  //       `Failed to fetch download stats for ${packageName} (${period}): ${response.statusText}`
+  //     );
+  //   }
+
+  //   const data = await response.json();
+  //   return data;
+  // }
+
+  // // Function to calculate average downloads from the statistics
+  // function calculateAverageDownloads(stats: stats) {
+  //   return stats.downloads.reduce(
+  //     (accumulator, download) => accumulator + download.downloads,
+  //     0
+  //   );
+  // }
+
+  // // Function to fetch and process statistics for a package and period
+  // async function getStats(packageName: string, period: string) {
+  //   try {
+  //     // Fetch download statistics
+  //     const stats = await fetchDownloadStats(packageName, period);
+
+  //     // Check if stats exist
+  //     if (!stats || !stats.package) return 0;
+
+  //     // Calculate average downloads
+  //     const count = calculateAverageDownloads(stats);
+  //     console.log(count);
+  //   } catch (error) {
+  //     // Log and handle errors
+  //     console.error(`${packageName} not present`);
+  //     return null;
+  //   }
+  // }
+  function handleChange(
+    event: React.ChangeEvent<HTMLSelectElement>,
+    _package: {
+      name: string;
+      day: number;
+      week: number;
+      year: number;
+      total: number;
     }
+  ) {
+    console.log(event.target.value);
+    console.log(_package);
 
-    const data = await response.json();
-    return data;
+    // const range = getDateRange(event.target.value as string);
+    // getStats(_package.name, `${range?.start}:${range?.end}`);
   }
 
-  function calculateAverageDownloads(stats: stats) {
-    return stats.downloads.reduce(
-      (accumulator: number, download: download) =>
-        accumulator + download.downloads,
-      0
-    );
-  }
+  // function formatDate(date: Date) {
+  //   const year = date.getFullYear();
+  //   const month = String(date.getMonth() + 1).padStart(2, "0");
+  //   const day = String(date.getDate()).padStart(2, "0");
+  //   return `${year}-${month}-${day}`;
+  // }
+
+  // function getDateRange(range: string) {
+  //   const currentDate = new Date();
+  //   const currentYear = currentDate.getFullYear();
+  //   const currentMonth = currentDate.getMonth();
+  //   const currentDay = currentDate.getDate();
+
+  //   switch (range.toLowerCase()) {
+  //     case "today":
+  //       return {
+  //         start: formatDate(new Date(currentYear, currentMonth, currentDay)),
+  //         end: formatDate(new Date(currentYear, currentMonth, currentDay)),
+  //       };
+  //     case "yesterday":
+  //       const yesterdayDate = new Date(
+  //         currentYear,
+  //         currentMonth,
+  //         currentDay - 1
+  //       );
+  //       return {
+  //         start: formatDate(yesterdayDate),
+  //         end: formatDate(yesterdayDate),
+  //       };
+  //     case "last month":
+  //       const lastMonthStartDate = new Date(currentYear, currentMonth - 1, 1);
+  //       const lastMonthEndDate = new Date(currentYear, currentMonth, 0);
+  //       return {
+  //         start: formatDate(lastMonthStartDate),
+  //         end: formatDate(lastMonthEndDate),
+  //       };
+  //     case "last quarter":
+  //       const quarterStartMonth = Math.floor(currentMonth / 3) * 3; // Get the start month of the current quarter
+  //       const lastQuarterStartDate = new Date(
+  //         currentYear,
+  //         quarterStartMonth - 3,
+  //         1
+  //       );
+  //       const lastQuarterEndDate = new Date(currentYear, quarterStartMonth, 0);
+  //       return {
+  //         start: formatDate(lastQuarterStartDate),
+  //         end: formatDate(lastQuarterEndDate),
+  //       };
+  //     case "this year":
+  //       const thisYearStartDate = new Date(currentYear, 0, 1);
+  //       return {
+  //         start: formatDate(thisYearStartDate),
+  //         end: formatDate(currentDate),
+  //       };
+  //     case "this month":
+  //       const thisMonthStartDate = new Date(currentYear, currentMonth, 1);
+  //       return {
+  //         start: formatDate(thisMonthStartDate),
+  //         end: formatDate(currentDate),
+  //       };
+  //     default:
+  //       return null;
+  //   }
+  // }
 
   const generateChart = async () => {
-    const stats = await fetchDownloadStats();
-    setCount(calculateAverageDownloads(stats));
+    // const stats = await fetchDownloadStats();
+    // setCount(calculateAverageDownloads(stats));
+    setCount(0);
   };
 
   return (
@@ -119,6 +221,30 @@ const Stats = () => {
               </div>
             </div>
             <div className='flex flex-col items-center'>
+              <form className='max-w-sm mx-auto'>
+                <label
+                  htmlFor='range'
+                  className='block mb-2 text-sm font-medium text-gray-900 dark:text-white'
+                >
+                  Select an option
+                </label>
+                <select
+                  id='range'
+                  className='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
+                  onChange={(e) => {
+                    handleChange(e, stats);
+                  }}
+                >
+                  <option selected>Range</option>
+                  <option value='Today'>Today</option>
+                  <option value='Yesterday'>Yesterday</option>
+                  <option value='Last month'>Last month</option>
+                  <option value='last quarter'>last quarter</option>
+                  <option value='this year'>this year </option>
+                  <option value='total'>Total Year</option>
+                  <option value='this month'>this month</option>
+                </select>
+              </form>
               <h5 className='text-mindfire-text-black'>Downloads</h5>
               <div className='flex justify-around w-full'>
                 <div className='flex flex-col items-center'>

From 74333c89b19eb66fbde67598dbddefa303055cf4 Mon Sep 17 00:00:00 2001
From: Ashutosh8215 <ashutosh.j@mindfiresolutions.com>
Date: Wed, 3 Apr 2024 16:52:34 +0530
Subject: [PATCH 09/16] feat: calc. the total download package of selected date
 range

---
 src/app/package/page.tsx | 253 +++++++++++++++++++++------------------
 1 file changed, 137 insertions(+), 116 deletions(-)

diff --git a/src/app/package/page.tsx b/src/app/package/page.tsx
index 67f92eaf..37bfc0f9 100644
--- a/src/app/package/page.tsx
+++ b/src/app/package/page.tsx
@@ -10,14 +10,14 @@ import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
 import moment from "moment";
 
-// type stats = {
-//   downloads: download[];
-// };
+type stats = {
+  downloads: download[];
+};
 
-// type download = {
-//   downloads: number;
-//   day: string;
-// };
+type download = {
+  downloads: number;
+  day: string;
+};
 
 const Stats = () => {
   const [startDate, setStartDate] = useState(moment().format("YYYY-MM-DD"));
@@ -31,7 +31,7 @@ const Stats = () => {
     year: 70,
     total: 70,
   });
-
+  const [packages, setPackages] = useState(statsList);
   function closeModal() {
     setIsOpen(false);
   }
@@ -41,46 +41,45 @@ const Stats = () => {
   }
 
   // Function to fetch download statistics for a given package and period
-  // async function fetchDownloadStats(packageName: string, period: string) {
-  //   const url = `https://api.npmjs.org/downloads/range/${period}/@mindfiredigital/${packageName}`;
-  //   const response = await fetch(url);
+  async function fetchDownloadStats(packageName: string, period: string) {
+    const url = `https://api.npmjs.org/downloads/range/${period}/@mindfiredigital/${packageName}`;
+    const response = await fetch(url);
 
-  //   if (!response.ok) {
-  //     console.log(
-  //       `Failed to fetch download stats for ${packageName} (${period}): ${response.statusText}`
-  //     );
-  //   }
+    if (!response.ok) {
+      console.log(
+        `Failed to fetch download stats for ${packageName} (${period}): ${response.statusText}`
+      );
+    }
 
-  //   const data = await response.json();
-  //   return data;
-  // }
+    const data = await response.json();
+    return data;
+  }
 
-  // // Function to calculate average downloads from the statistics
-  // function calculateAverageDownloads(stats: stats) {
-  //   return stats.downloads.reduce(
-  //     (accumulator, download) => accumulator + download.downloads,
-  //     0
-  //   );
-  // }
+  // Function to calculate average downloads from the statistics
+  function calculateDownloads(stats: stats): number {
+    return stats.downloads.reduce(
+      (accumulator, download) => accumulator + download.downloads,
+      0
+    );
+  }
 
-  // // Function to fetch and process statistics for a package and period
-  // async function getStats(packageName: string, period: string) {
-  //   try {
-  //     // Fetch download statistics
-  //     const stats = await fetchDownloadStats(packageName, period);
+  // Function to fetch and process statistics for a package and period
+  async function getStats(packageName: string, period: string) {
+    try {
+      // Fetch download statistics
+      const stats = await fetchDownloadStats(packageName, period);
 
-  //     // Check if stats exist
-  //     if (!stats || !stats.package) return 0;
+      // Check if stats exist
+      if (!stats || !stats.package) return 0;
 
-  //     // Calculate average downloads
-  //     const count = calculateAverageDownloads(stats);
-  //     console.log(count);
-  //   } catch (error) {
-  //     // Log and handle errors
-  //     console.error(`${packageName} not present`);
-  //     return null;
-  //   }
-  // }
+      // Calculate average downloads
+      return stats;
+    } catch (error) {
+      // Log and handle errors
+      console.error(`${packageName} not present`);
+      return 0;
+    }
+  }
   function handleChange(
     event: React.ChangeEvent<HTMLSelectElement>,
     _package: {
@@ -91,77 +90,97 @@ const Stats = () => {
       total: number;
     }
   ) {
-    console.log(event.target.value);
-    console.log(_package);
-
-    // const range = getDateRange(event.target.value as string);
-    // getStats(_package.name, `${range?.start}:${range?.end}`);
+    const range: { start: string; end: string } = getDateRange(
+      event.target.value as string
+    );
+    let count: number;
+    getStats(_package.name, `${range?.start}:${range?.end}`).then((res) => {
+      count = calculateDownloads(res);
+      console.log(count);
+      setPackages(
+        packages.map((npmPackage) => {
+          if (npmPackage.name === _package.name) {
+            npmPackage.total = count;
+          }
+          return npmPackage;
+        })
+      );
+    });
   }
 
-  // function formatDate(date: Date) {
-  //   const year = date.getFullYear();
-  //   const month = String(date.getMonth() + 1).padStart(2, "0");
-  //   const day = String(date.getDate()).padStart(2, "0");
-  //   return `${year}-${month}-${day}`;
-  // }
+  function formatDate(date: Date) {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  }
 
-  // function getDateRange(range: string) {
-  //   const currentDate = new Date();
-  //   const currentYear = currentDate.getFullYear();
-  //   const currentMonth = currentDate.getMonth();
-  //   const currentDay = currentDate.getDate();
+  function getDateRange(range: string) {
+    const currentDate = new Date();
+    const currentYear = currentDate.getFullYear();
+    const currentMonth = currentDate.getMonth();
+    const currentDay = currentDate.getDate();
 
-  //   switch (range.toLowerCase()) {
-  //     case "today":
-  //       return {
-  //         start: formatDate(new Date(currentYear, currentMonth, currentDay)),
-  //         end: formatDate(new Date(currentYear, currentMonth, currentDay)),
-  //       };
-  //     case "yesterday":
-  //       const yesterdayDate = new Date(
-  //         currentYear,
-  //         currentMonth,
-  //         currentDay - 1
-  //       );
-  //       return {
-  //         start: formatDate(yesterdayDate),
-  //         end: formatDate(yesterdayDate),
-  //       };
-  //     case "last month":
-  //       const lastMonthStartDate = new Date(currentYear, currentMonth - 1, 1);
-  //       const lastMonthEndDate = new Date(currentYear, currentMonth, 0);
-  //       return {
-  //         start: formatDate(lastMonthStartDate),
-  //         end: formatDate(lastMonthEndDate),
-  //       };
-  //     case "last quarter":
-  //       const quarterStartMonth = Math.floor(currentMonth / 3) * 3; // Get the start month of the current quarter
-  //       const lastQuarterStartDate = new Date(
-  //         currentYear,
-  //         quarterStartMonth - 3,
-  //         1
-  //       );
-  //       const lastQuarterEndDate = new Date(currentYear, quarterStartMonth, 0);
-  //       return {
-  //         start: formatDate(lastQuarterStartDate),
-  //         end: formatDate(lastQuarterEndDate),
-  //       };
-  //     case "this year":
-  //       const thisYearStartDate = new Date(currentYear, 0, 1);
-  //       return {
-  //         start: formatDate(thisYearStartDate),
-  //         end: formatDate(currentDate),
-  //       };
-  //     case "this month":
-  //       const thisMonthStartDate = new Date(currentYear, currentMonth, 1);
-  //       return {
-  //         start: formatDate(thisMonthStartDate),
-  //         end: formatDate(currentDate),
-  //       };
-  //     default:
-  //       return null;
-  //   }
-  // }
+    switch (range.toLowerCase()) {
+      case "today": {
+        return {
+          start: formatDate(new Date(currentYear, currentMonth, currentDay)),
+          end: formatDate(new Date(currentYear, currentMonth, currentDay)),
+        };
+      }
+      case "yesterday": {
+        const yesterdayDate = new Date(
+          currentYear,
+          currentMonth,
+          currentDay - 1
+        );
+        return {
+          start: formatDate(yesterdayDate),
+          end: formatDate(yesterdayDate),
+        };
+      }
+      case "last month": {
+        const lastMonthStartDate = new Date(currentYear, currentMonth - 1, 1);
+        const lastMonthEndDate = new Date(currentYear, currentMonth, 0);
+        return {
+          start: formatDate(lastMonthStartDate),
+          end: formatDate(lastMonthEndDate),
+        };
+      }
+      case "last quarter": {
+        const quarterStartMonth = Math.floor(currentMonth / 3) * 3; // Get the start month of the current quarter
+        const lastQuarterStartDate = new Date(
+          currentYear,
+          quarterStartMonth - 3,
+          1
+        );
+        const lastQuarterEndDate = new Date(currentYear, quarterStartMonth, 0);
+        return {
+          start: formatDate(lastQuarterStartDate),
+          end: formatDate(lastQuarterEndDate),
+        };
+      }
+      case "this year": {
+        const thisYearStartDate = new Date(currentYear, 0, 1);
+        return {
+          start: formatDate(thisYearStartDate),
+          end: formatDate(currentDate),
+        };
+      }
+      case "this month": {
+        const thisMonthStartDate = new Date(currentYear, currentMonth, 1);
+        return {
+          start: formatDate(thisMonthStartDate),
+          end: formatDate(currentDate),
+        };
+      }
+      default:
+        return {
+          start: "1000-01-01",
+          end: "3000-01-01",
+        };
+    }
+  }
 
   const generateChart = async () => {
     // const stats = await fetchDownloadStats();
@@ -173,21 +192,21 @@ const Stats = () => {
     <div className='container mx-auto'>
       <h1 className='text-3xl font-bold mb-4'>Download Statistics</h1>
       <div className='grid grid-cols-3 gap-4'>
-        {statsList.map((stats) => (
+        {packages.map((_package) => (
           <div
-            key={stats.name}
+            key={_package.name}
             className='border p-4 rounded bg-white flex flex-col justify-stretch drop-shadow-md hover:scale-105'
           >
             <div className='flex flex-row items-start justify-between'>
               <div>
                 <h3 className='font-semibold mb-2 capitalize indent-8 text-mindfire-text-red'>
-                  {stats.name.replaceAll("-", " ")}
+                  {_package.name.replaceAll("-", " ")}
                 </h3>
               </div>
               <div className='flex flex-row items-center'>
                 <div>
                   <Link
-                    href={`https://www.npmjs.com/package/@mindfiredigital/${stats.name}`}
+                    href={`https://www.npmjs.com/package/@mindfiredigital/${_package.name}`}
                     target='_blank'
                   >
                     <Image
@@ -205,7 +224,7 @@ const Stats = () => {
                     className='font-bold py-2 px-4 rounded inline-flex items-center'
                     onClick={() => {
                       openModal();
-                      setNpmPackage(stats);
+                      setNpmPackage(_package);
                     }}
                   >
                     <Image
@@ -232,7 +251,7 @@ const Stats = () => {
                   id='range'
                   className='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
                   onChange={(e) => {
-                    handleChange(e, stats);
+                    handleChange(e, _package);
                   }}
                 >
                   <option selected>Range</option>
@@ -249,7 +268,9 @@ const Stats = () => {
               <div className='flex justify-around w-full'>
                 <div className='flex flex-col items-center'>
                   <div>
-                    <h6 className='text-mindfire-text-black'>{stats.total}</h6>
+                    <h6 className='text-mindfire-text-black'>
+                      {_package.total}
+                    </h6>
                   </div>
                   <div>
                     <p className='text-slate-500 uppercase text-xs'>Total</p>

From 0dc4c5c2b1bd5420ac93817181294ae23d3515b2 Mon Sep 17 00:00:00 2001
From: Ashutosh8215 <ashutosh.j@mindfiresolutions.com>
Date: Wed, 3 Apr 2024 17:07:49 +0530
Subject: [PATCH 10/16] fix: fix generateChart method

---
 src/app/package/page.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/app/package/page.tsx b/src/app/package/page.tsx
index 37bfc0f9..01335bd9 100644
--- a/src/app/package/page.tsx
+++ b/src/app/package/page.tsx
@@ -93,9 +93,8 @@ const Stats = () => {
     const range: { start: string; end: string } = getDateRange(
       event.target.value as string
     );
-    let count: number;
     getStats(_package.name, `${range?.start}:${range?.end}`).then((res) => {
-      count = calculateDownloads(res);
+      const count = calculateDownloads(res);
       console.log(count);
       setPackages(
         packages.map((npmPackage) => {
@@ -183,9 +182,11 @@ const Stats = () => {
   }
 
   const generateChart = async () => {
-    // const stats = await fetchDownloadStats();
-    // setCount(calculateAverageDownloads(stats));
-    setCount(0);
+    const stats = await fetchDownloadStats(
+      npmPackage.name,
+      `${startDate}:${endDate}`
+    );
+    setCount(calculateDownloads(stats));
   };
 
   return (

From bbd0c46f60c07ae7583bd07f3234cb688641f14b Mon Sep 17 00:00:00 2001
From: Ashutosh8215 <ashutosh.j@mindfiresolutions.com>
Date: Wed, 3 Apr 2024 17:50:11 +0530
Subject: [PATCH 11/16] style: add style to page

---
 src/app/package/page.tsx | 55 +++++++++++++++++++---------------------
 1 file changed, 26 insertions(+), 29 deletions(-)

diff --git a/src/app/package/page.tsx b/src/app/package/page.tsx
index 01335bd9..b34bec84 100644
--- a/src/app/package/page.tsx
+++ b/src/app/package/page.tsx
@@ -190,13 +190,13 @@ const Stats = () => {
   };
 
   return (
-    <div className='container mx-auto'>
+    <div className='container mx-auto flex flex-col gap-4 items-center'>
       <h1 className='text-3xl font-bold mb-4'>Download Statistics</h1>
-      <div className='grid grid-cols-3 gap-4'>
+      <div className='flex flex-col gap-4 flex-wrap lg:flex-row'>
         {packages.map((_package) => (
           <div
             key={_package.name}
-            className='border p-4 rounded bg-white flex flex-col justify-stretch drop-shadow-md hover:scale-105'
+            className='border p-4 rounded bg-white flex flex-col justify-stretch drop-shadow-md w-80 hover:scale-105'
           >
             <div className='flex flex-row items-start justify-between'>
               <div>
@@ -241,31 +241,26 @@ const Stats = () => {
               </div>
             </div>
             <div className='flex flex-col items-center'>
-              <form className='max-w-sm mx-auto'>
-                <label
-                  htmlFor='range'
-                  className='block mb-2 text-sm font-medium text-gray-900 dark:text-white'
-                >
-                  Select an option
-                </label>
-                <select
-                  id='range'
-                  className='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
-                  onChange={(e) => {
-                    handleChange(e, _package);
-                  }}
-                >
-                  <option selected>Range</option>
-                  <option value='Today'>Today</option>
-                  <option value='Yesterday'>Yesterday</option>
-                  <option value='Last month'>Last month</option>
-                  <option value='last quarter'>last quarter</option>
-                  <option value='this year'>this year </option>
-                  <option value='total'>Total Year</option>
-                  <option value='this month'>this month</option>
-                </select>
-              </form>
-              <h5 className='text-mindfire-text-black'>Downloads</h5>
+              <div className='mb-4'>
+                <form className='max-w-sm'>
+                  <select
+                    id='range'
+                    className='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1'
+                    onChange={(e) => {
+                      handleChange(e, _package);
+                    }}
+                  >
+                    <option selected>Range</option>
+                    <option value='Today'>Today</option>
+                    <option value='Yesterday'>Yesterday</option>
+                    <option value='Last month'>Last month</option>
+                    <option value='last quarter'>last quarter</option>
+                    <option value='this year'>this year </option>
+                    <option value='total'>Total Year</option>
+                    <option value='this month'>this month</option>
+                  </select>
+                </form>
+              </div>
               <div className='flex justify-around w-full'>
                 <div className='flex flex-col items-center'>
                   <div>
@@ -274,7 +269,9 @@ const Stats = () => {
                     </h6>
                   </div>
                   <div>
-                    <p className='text-slate-500 uppercase text-xs'>Total</p>
+                    <p className='text-slate-500 uppercase text-xs'>
+                      Total Downloads
+                    </p>
                   </div>
                 </div>
               </div>

From 8a0f36f978ff7f34d12e2e811f0a84bf8968862a Mon Sep 17 00:00:00 2001
From: Ashutosh8215 <ashutosh.j@mindfiresolutions.com>
Date: Wed, 3 Apr 2024 18:16:49 +0530
Subject: [PATCH 12/16] fix: change the option name

---
 src/app/package/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/package/page.tsx b/src/app/package/page.tsx
index b34bec84..d7bf0a28 100644
--- a/src/app/package/page.tsx
+++ b/src/app/package/page.tsx
@@ -256,7 +256,7 @@ const Stats = () => {
                     <option value='Last month'>Last month</option>
                     <option value='last quarter'>last quarter</option>
                     <option value='this year'>this year </option>
-                    <option value='total'>Total Year</option>
+                    <option value='total'>Total</option>
                     <option value='this month'>this month</option>
                   </select>
                 </form>

From 9cd800a8afce8f9985d64f27f2704e03de2ba0c4 Mon Sep 17 00:00:00 2001
From: anandmindfire <anand.k@mindfiresolutions.com>
Date: Thu, 9 May 2024 11:43:46 +0530
Subject: [PATCH 13/16] feat: add packages

---
 .vscode/settings.json                        |   4 +-
 public/images/bxl-github.svg                 |   1 +
 public/images/bxs-download.svg               |   1 +
 public/images/social-media/bx-filter-alt.svg |   1 +
 src/app/package/page.tsx                     | 432 ----------------
 src/app/packages/page.tsx                    | 518 +++++++++++++++++++
 src/app/projects/assets/packages.json        |  23 +
 src/constants/index.ts                       |   4 +-
 8 files changed, 548 insertions(+), 436 deletions(-)
 create mode 100644 public/images/bxl-github.svg
 create mode 100644 public/images/bxs-download.svg
 create mode 100644 public/images/social-media/bx-filter-alt.svg
 delete mode 100644 src/app/package/page.tsx
 create mode 100644 src/app/packages/page.tsx
 create mode 100644 src/app/projects/assets/packages.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
index c3d22a03..00b8e43f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,7 +2,7 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.format": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.format": "explicit"
   }
 }
diff --git a/public/images/bxl-github.svg b/public/images/bxl-github.svg
new file mode 100644
index 00000000..905bdd3a
--- /dev/null
+++ b/public/images/bxl-github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z"/></svg>
\ No newline at end of file
diff --git a/public/images/bxs-download.svg b/public/images/bxs-download.svg
new file mode 100644
index 00000000..416efdf4
--- /dev/null
+++ b/public/images/bxs-download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: red;"><path d="M19 9h-4V3H9v6H5l7 8zM4 19h16v2H4z"></path></svg>
diff --git a/public/images/social-media/bx-filter-alt.svg b/public/images/social-media/bx-filter-alt.svg
new file mode 100644
index 00000000..f31c1a05
--- /dev/null
+++ b/public/images/social-media/bx-filter-alt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 3H5a1 1 0 0 0-1 1v2.59c0 .523.213 1.037.583 1.407L10 13.414V21a1.001 1.001 0 0 0 1.447.895l4-2c.339-.17.553-.516.553-.895v-5.586l5.417-5.417c.37-.37.583-.884.583-1.407V4a1 1 0 0 0-1-1zm-6.707 9.293A.996.996 0 0 0 14 13v5.382l-2 1V13a.996.996 0 0 0-.293-.707L6 6.59V5h14.001l.002 1.583-5.71 5.71z"/></svg>
\ No newline at end of file
diff --git a/src/app/package/page.tsx b/src/app/package/page.tsx
deleted file mode 100644
index d7bf0a28..00000000
--- a/src/app/package/page.tsx
+++ /dev/null
@@ -1,432 +0,0 @@
-"use client";
-
-import React from "react";
-import statsList from "../projects/assets/stats.json";
-import Link from "next/link";
-import npm from "../../../public/images/social-media/npm-svgrepo-com.svg";
-import expand from "../../../public/images/social-media/expand-wide-svgrepo-com.svg";
-import Image from "next/image";
-import { Dialog, Transition } from "@headlessui/react";
-import { Fragment, useState } from "react";
-import moment from "moment";
-
-type stats = {
-  downloads: download[];
-};
-
-type download = {
-  downloads: number;
-  day: string;
-};
-
-const Stats = () => {
-  const [startDate, setStartDate] = useState(moment().format("YYYY-MM-DD"));
-  const [endDate, setEndDate] = useState(moment().format("YYYY-MM-DD"));
-  const [count, setCount] = useState(0);
-  const [isOpen, setIsOpen] = useState(false);
-  const [npmPackage, setNpmPackage] = useState({
-    name: "fmdapi-node-weaver",
-    day: 0,
-    week: 3,
-    year: 70,
-    total: 70,
-  });
-  const [packages, setPackages] = useState(statsList);
-  function closeModal() {
-    setIsOpen(false);
-  }
-
-  function openModal() {
-    setIsOpen(true);
-  }
-
-  // Function to fetch download statistics for a given package and period
-  async function fetchDownloadStats(packageName: string, period: string) {
-    const url = `https://api.npmjs.org/downloads/range/${period}/@mindfiredigital/${packageName}`;
-    const response = await fetch(url);
-
-    if (!response.ok) {
-      console.log(
-        `Failed to fetch download stats for ${packageName} (${period}): ${response.statusText}`
-      );
-    }
-
-    const data = await response.json();
-    return data;
-  }
-
-  // Function to calculate average downloads from the statistics
-  function calculateDownloads(stats: stats): number {
-    return stats.downloads.reduce(
-      (accumulator, download) => accumulator + download.downloads,
-      0
-    );
-  }
-
-  // Function to fetch and process statistics for a package and period
-  async function getStats(packageName: string, period: string) {
-    try {
-      // Fetch download statistics
-      const stats = await fetchDownloadStats(packageName, period);
-
-      // Check if stats exist
-      if (!stats || !stats.package) return 0;
-
-      // Calculate average downloads
-      return stats;
-    } catch (error) {
-      // Log and handle errors
-      console.error(`${packageName} not present`);
-      return 0;
-    }
-  }
-  function handleChange(
-    event: React.ChangeEvent<HTMLSelectElement>,
-    _package: {
-      name: string;
-      day: number;
-      week: number;
-      year: number;
-      total: number;
-    }
-  ) {
-    const range: { start: string; end: string } = getDateRange(
-      event.target.value as string
-    );
-    getStats(_package.name, `${range?.start}:${range?.end}`).then((res) => {
-      const count = calculateDownloads(res);
-      console.log(count);
-      setPackages(
-        packages.map((npmPackage) => {
-          if (npmPackage.name === _package.name) {
-            npmPackage.total = count;
-          }
-          return npmPackage;
-        })
-      );
-    });
-  }
-
-  function formatDate(date: Date) {
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, "0");
-    const day = String(date.getDate()).padStart(2, "0");
-    return `${year}-${month}-${day}`;
-  }
-
-  function getDateRange(range: string) {
-    const currentDate = new Date();
-    const currentYear = currentDate.getFullYear();
-    const currentMonth = currentDate.getMonth();
-    const currentDay = currentDate.getDate();
-
-    switch (range.toLowerCase()) {
-      case "today": {
-        return {
-          start: formatDate(new Date(currentYear, currentMonth, currentDay)),
-          end: formatDate(new Date(currentYear, currentMonth, currentDay)),
-        };
-      }
-      case "yesterday": {
-        const yesterdayDate = new Date(
-          currentYear,
-          currentMonth,
-          currentDay - 1
-        );
-        return {
-          start: formatDate(yesterdayDate),
-          end: formatDate(yesterdayDate),
-        };
-      }
-      case "last month": {
-        const lastMonthStartDate = new Date(currentYear, currentMonth - 1, 1);
-        const lastMonthEndDate = new Date(currentYear, currentMonth, 0);
-        return {
-          start: formatDate(lastMonthStartDate),
-          end: formatDate(lastMonthEndDate),
-        };
-      }
-      case "last quarter": {
-        const quarterStartMonth = Math.floor(currentMonth / 3) * 3; // Get the start month of the current quarter
-        const lastQuarterStartDate = new Date(
-          currentYear,
-          quarterStartMonth - 3,
-          1
-        );
-        const lastQuarterEndDate = new Date(currentYear, quarterStartMonth, 0);
-        return {
-          start: formatDate(lastQuarterStartDate),
-          end: formatDate(lastQuarterEndDate),
-        };
-      }
-      case "this year": {
-        const thisYearStartDate = new Date(currentYear, 0, 1);
-        return {
-          start: formatDate(thisYearStartDate),
-          end: formatDate(currentDate),
-        };
-      }
-      case "this month": {
-        const thisMonthStartDate = new Date(currentYear, currentMonth, 1);
-        return {
-          start: formatDate(thisMonthStartDate),
-          end: formatDate(currentDate),
-        };
-      }
-      default:
-        return {
-          start: "1000-01-01",
-          end: "3000-01-01",
-        };
-    }
-  }
-
-  const generateChart = async () => {
-    const stats = await fetchDownloadStats(
-      npmPackage.name,
-      `${startDate}:${endDate}`
-    );
-    setCount(calculateDownloads(stats));
-  };
-
-  return (
-    <div className='container mx-auto flex flex-col gap-4 items-center'>
-      <h1 className='text-3xl font-bold mb-4'>Download Statistics</h1>
-      <div className='flex flex-col gap-4 flex-wrap lg:flex-row'>
-        {packages.map((_package) => (
-          <div
-            key={_package.name}
-            className='border p-4 rounded bg-white flex flex-col justify-stretch drop-shadow-md w-80 hover:scale-105'
-          >
-            <div className='flex flex-row items-start justify-between'>
-              <div>
-                <h3 className='font-semibold mb-2 capitalize indent-8 text-mindfire-text-red'>
-                  {_package.name.replaceAll("-", " ")}
-                </h3>
-              </div>
-              <div className='flex flex-row items-center'>
-                <div>
-                  <Link
-                    href={`https://www.npmjs.com/package/@mindfiredigital/${_package.name}`}
-                    target='_blank'
-                  >
-                    <Image
-                      src={npm}
-                      height={20}
-                      width={20}
-                      alt='npm_img'
-                      loading='lazy'
-                      quality={75}
-                    />
-                  </Link>
-                </div>
-                <div>
-                  <button
-                    className='font-bold py-2 px-4 rounded inline-flex items-center'
-                    onClick={() => {
-                      openModal();
-                      setNpmPackage(_package);
-                    }}
-                  >
-                    <Image
-                      src={expand}
-                      height={20}
-                      width={20}
-                      alt='expand_img'
-                      loading='lazy'
-                      quality={75}
-                    />
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div className='flex flex-col items-center'>
-              <div className='mb-4'>
-                <form className='max-w-sm'>
-                  <select
-                    id='range'
-                    className='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1'
-                    onChange={(e) => {
-                      handleChange(e, _package);
-                    }}
-                  >
-                    <option selected>Range</option>
-                    <option value='Today'>Today</option>
-                    <option value='Yesterday'>Yesterday</option>
-                    <option value='Last month'>Last month</option>
-                    <option value='last quarter'>last quarter</option>
-                    <option value='this year'>this year </option>
-                    <option value='total'>Total</option>
-                    <option value='this month'>this month</option>
-                  </select>
-                </form>
-              </div>
-              <div className='flex justify-around w-full'>
-                <div className='flex flex-col items-center'>
-                  <div>
-                    <h6 className='text-mindfire-text-black'>
-                      {_package.total}
-                    </h6>
-                  </div>
-                  <div>
-                    <p className='text-slate-500 uppercase text-xs'>
-                      Total Downloads
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as='div' className='relative z-10' onClose={closeModal}>
-          <Transition.Child
-            as={Fragment}
-            enter='ease-out duration-300'
-            enterFrom='opacity-0'
-            enterTo='opacity-100'
-            leave='ease-in duration-200'
-            leaveFrom='opacity-100'
-            leaveTo='opacity-0'
-          >
-            <div className='fixed inset-0 bg-black/25' />
-          </Transition.Child>
-
-          <div className='fixed inset-0 overflow-y-auto'>
-            <div className='flex min-h-full items-center justify-center p-4 text-center'>
-              <Transition.Child
-                as={Fragment}
-                enter='ease-out duration-300'
-                enterFrom='opacity-0 scale-95'
-                enterTo='opacity-100 scale-100'
-                leave='ease-in duration-200'
-                leaveFrom='opacity-100 scale-100'
-                leaveTo='opacity-0 scale-95'
-              >
-                <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'>
-                  <Dialog.Title
-                    as='h1'
-                    className='text-lg font-large leading-6 text-gray-900 capitalize text-center mb-4'
-                  >
-                    {npmPackage.name.replaceAll("-", " ")}
-                  </Dialog.Title>
-                  <div
-                    key={npmPackage.name}
-                    className='border p-4 rounded bg-white flex flex-col justify-stretch drop-shadow-md'
-                  >
-                    <div className='flex flex-col items-center'>
-                      <h5 className='text-mindfire-text-black'>Downloads</h5>
-                      <div className='flex flex-row justify-around w-full'>
-                        <div className='flex flex-col items-center'>
-                          <div>
-                            <h6 className='text-mindfire-text-black'>
-                              {npmPackage.day}
-                            </h6>
-                          </div>
-                          <div>
-                            <p className='text-slate-500 uppercase text-xs'>
-                              Daily
-                            </p>
-                          </div>
-                        </div>
-                        <div className='flex flex-col items-center'>
-                          <div>
-                            <h6 className='text-mindfire-text-black'>
-                              {npmPackage.week}
-                            </h6>
-                          </div>
-                          <div>
-                            <p className='text-slate-500 uppercase text-xs'>
-                              Weekly
-                            </p>
-                          </div>
-                        </div>
-                        <div className='flex flex-col items-center'>
-                          <div>
-                            <h6 className='text-mindfire-text-black'>
-                              {npmPackage.year}
-                            </h6>
-                          </div>
-                          <div>
-                            <p className='text-slate-500 uppercase text-xs'>
-                              Yearly
-                            </p>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div className='container mx-auto p-4 border rounded bg-white drop-shadow-md mt-4'>
-                    <h5 className='text-center mb-4'>
-                      Daily Downloads Line Chart
-                    </h5>
-                    <div className='flex space-x-4 mb-4'>
-                      <div>
-                        <label
-                          htmlFor='startDate'
-                          className='block font-semibold text-center'
-                        >
-                          Start Date:
-                        </label>
-                        <input
-                          type='date'
-                          id='startDate'
-                          className='border border-gray-300 rounded-md px-2 py-1'
-                          value={startDate}
-                          onChange={(e) => setStartDate(e.target.value)}
-                        />
-                      </div>
-                      <div>
-                        <label
-                          htmlFor='endDate'
-                          className='block font-semibold text-center'
-                        >
-                          End Date:
-                        </label>
-                        <input
-                          type='date'
-                          id='endDate'
-                          className='border border-gray-300 rounded-md px-2 py-1'
-                          value={endDate}
-                          onChange={(e) => setEndDate(e.target.value)}
-                        />
-                      </div>
-                    </div>
-                    <div className='flex flex-col items-center'>
-                      <button
-                        className='bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded'
-                        onClick={generateChart}
-                      >
-                        Generate Chart
-                      </button>
-                      <div className='flex flex-col items-center MT-4'>
-                        <div className='flex flex-row justify-around w-full'>
-                          <div className='flex flex-col items-center'>
-                            <div>
-                              <h6 className='text-mindfire-text-black'>
-                                {count}
-                              </h6>
-                            </div>
-                            <div>
-                              <p className='text-slate-500 uppercase text-xs'>
-                                total
-                              </p>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition>
-    </div>
-  );
-};
-
-export default Stats;
diff --git a/src/app/packages/page.tsx b/src/app/packages/page.tsx
new file mode 100644
index 00000000..0e19ebd2
--- /dev/null
+++ b/src/app/packages/page.tsx
@@ -0,0 +1,518 @@
+"use client";
+
+import React, { useEffect, useState, Fragment } from "react";
+import statsList from "../projects/assets/stats.json";
+// import packageList from "../projects/assets/packages.json";
+import Link from "next/link";
+import npm from "../../../public/images/social-media/npm-svgrepo-com.svg";
+import filter from "../../../public/images/social-media/bx-filter-alt.svg";
+import download from "../../../public/images/bxs-download.svg";
+import github from "../../../public/images/bxl-github.svg";
+import Image from "next/image";
+import { Dialog, Transition } from "@headlessui/react";
+import moment from "moment";
+
+type stats = {
+  downloads: download[];
+};
+
+type download = {
+  downloads: number;
+  day: string;
+};
+
+const Stats = () => {
+  const [startDate, setStartDate] = useState(moment().format("YYYY-MM-DD"));
+  const [endDate, setEndDate] = useState(moment().format("YYYY-MM-DD"));
+
+  const [count, setCount] = useState(0);
+  const [selectedRange, setSelectedRange] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [npmPackage, setNpmPackage] = useState({
+    name: "fmdapi-node-weaver",
+    day: 0,
+    week: 3,
+    year: 70,
+    total: 70,
+  });
+  const [packages, setPackages] = useState(statsList);
+  // const [allPackage, setAllPackage] = useState(packageList);
+
+  function closeModal() {
+    setIsOpen(false);
+    setCount(0);
+    setSelectedRange(false);
+  }
+
+  function openModal() {
+    setIsOpen(true);
+  }
+
+  // Function to fetch download statistics for a given package and period
+  async function fetchDownloadStats(packageName: string, period: string) {
+    const url = `https://api.npmjs.org/downloads/range/${period}/@mindfiredigital/${packageName}`;
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      console.log(
+        `Failed to fetch download stats for ${packageName} (${period}): ${response.statusText}`
+      );
+    }
+
+    const data = await response.json();
+    return data;
+  }
+
+  function calculateDownloads(stats: stats): number {
+    if (!stats || !stats.downloads) {
+      return 0; // Return 0 if stats or stats.downloads is undefined
+    }
+    return stats.downloads.reduce(
+      (accumulator, download) => accumulator + download.downloads,
+      0
+    );
+  }
+
+  // Function to fetch and process statistics for a package and period
+  async function getStats(packageName: string, period: string) {
+    try {
+      // Fetch download statistics
+      const stats = await fetchDownloadStats(packageName, period);
+
+      // Check if stats exist
+      if (!stats || !stats.package) return 0;
+
+      // Calculate average downloads
+      return stats;
+    } catch (error) {
+      // Log and handle errors
+      console.error(`${packageName} not present`);
+      return 0;
+    }
+  }
+  function handleChange(
+    event: React.ChangeEvent<HTMLSelectElement>,
+    _package: {
+      name: string;
+      day: number;
+      week: number;
+      year: number;
+      total: number;
+    }
+  ) {
+    const range: { start: string; end: string } = getDateRange(
+      event.target.value as string
+    );
+    getStats(_package.name, `${range?.start}:${range?.end}`).then((res) => {
+      const count = calculateDownloads(res);
+      console.log(count);
+
+      packages.map((npmPackage) => {
+        if (npmPackage.name === _package.name) {
+          setCount(count);
+        }
+        return npmPackage;
+      });
+    });
+  }
+
+  function formatDate(date: Date) {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  }
+
+  function getDateRange(range: string) {
+    const currentDate = new Date();
+    const currentYear = currentDate.getFullYear();
+    const currentMonth = currentDate.getMonth();
+    const currentDay = currentDate.getDate();
+
+    switch (range.toLowerCase()) {
+      case "today": {
+        setSelectedRange(false);
+        return {
+          start: formatDate(new Date(currentYear, currentMonth, currentDay)),
+          end: formatDate(new Date(currentYear, currentMonth, currentDay)),
+        };
+      }
+      case "yesterday": {
+        setSelectedRange(false);
+        const yesterdayDate = new Date(
+          currentYear,
+          currentMonth,
+          currentDay - 1
+        );
+        return {
+          start: formatDate(yesterdayDate),
+          end: formatDate(yesterdayDate),
+        };
+      }
+      case "last month": {
+        setSelectedRange(false);
+        const lastMonthStartDate = new Date(currentYear, currentMonth - 1, 1);
+        const lastMonthEndDate = new Date(currentYear, currentMonth, 0);
+        return {
+          start: formatDate(lastMonthStartDate),
+          end: formatDate(lastMonthEndDate),
+        };
+      }
+      case "last quarter": {
+        setSelectedRange(false);
+        const quarterStartMonth = Math.floor(currentMonth / 3) * 3; // Get the start month of the current quarter
+        const lastQuarterStartDate = new Date(
+          currentYear,
+          quarterStartMonth - 3,
+          1
+        );
+        const lastQuarterEndDate = new Date(currentYear, quarterStartMonth, 0);
+        return {
+          start: formatDate(lastQuarterStartDate),
+          end: formatDate(lastQuarterEndDate),
+        };
+      }
+      case "this year": {
+        setSelectedRange(false);
+        const thisYearStartDate = new Date(currentYear, 0, 1);
+        return {
+          start: formatDate(thisYearStartDate),
+          end: formatDate(currentDate),
+        };
+      }
+      case "this month": {
+        setSelectedRange(false);
+        const thisMonthStartDate = new Date(currentYear, currentMonth, 1);
+        return {
+          start: formatDate(thisMonthStartDate),
+          end: formatDate(currentDate),
+        };
+      }
+      case "custom": {
+        setSelectedRange(true);
+        setCount(0);
+        return {
+          start: formatDate(new Date(currentYear, currentMonth, currentDay)),
+          end: formatDate(new Date(currentYear, currentMonth, currentDay)),
+        };
+      }
+      default:
+        setSelectedRange(false);
+        return {
+          start: "1000-01-01",
+          end: "3000-01-01",
+        };
+    }
+  }
+
+  const generateChart = async () => {
+    const stats = await fetchDownloadStats(
+      npmPackage.name,
+      `${startDate}:${endDate}`
+    );
+    setCount(calculateDownloads(stats));
+  };
+
+  useEffect(() => {
+    generateChart();
+  }, [startDate, endDate]);
+
+  return (
+    <div className='container mx-auto flex flex-col gap-4 items-center'>
+      <h1 className='text-3xl font-bold mb-4'>Download Statistics</h1>
+      <div className='flex flex-col gap-4 flex-wrap lg:flex-row'>
+        {packages.map((package_list) => (
+          <div
+            key={package_list.name}
+            className='border p-4 rounded bg-white flex flex-col justify-stretch drop-shadow-md w-80 hover:scale-105'
+          >
+            <div className='flex flex-row items-start justify-between'>
+              <div className=''>
+                <h3 className='font-semibold mb-2 ml-2 indent-8 text-mindfire-text-black uppercase'>
+                  {package_list.name.replaceAll("-", " ")}
+                </h3>
+              </div>
+              <div className='flex flex-row'>
+                <div>
+                  <button
+                    className='font-bold px-4 rounded inline-flex items-center'
+                    onClick={() => {
+                      openModal();
+                      setNpmPackage(package_list);
+                    }}
+                    title='Filter'
+                  >
+                    <Image
+                      src={filter}
+                      height={20}
+                      width={20}
+                      alt='expand_img'
+                      loading='lazy'
+                      quality={75}
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div className='flex flex-row items-center mt-4'>
+              <div className='flex justify-around w-full mr-2'>
+                <div className='flex flex-col items-center'>
+                  <div className='flex flex-row items-center space-x-1'>
+                    <Image
+                      src={download}
+                      height={20}
+                      width={20}
+                      alt='expand_img'
+                      loading='lazy'
+                      quality={75}
+                    />
+                    <div>
+                      <h6 className='text-mindfire-text-black font-semibold text-xl'>
+                        {package_list.total}
+                      </h6>
+                    </div>
+                  </div>
+                  <div className='mt-2 ml-2'>
+                    <p className='text-gray-500 text-xm'>Downloads</p>
+                  </div>
+                </div>
+              </div>
+              <div className='mt-8 mr-3 flex flex-row items-center space-x-1'>
+                <div>
+                  <Link
+                    href={`https://www.npmjs.com/package/@mindfiredigital/${package_list.name}`}
+                    target='_blank'
+                    title='View Package'
+                  >
+                    <Image
+                      src={npm}
+                      height={35}
+                      width={35}
+                      alt='npm_img'
+                      loading='lazy'
+                      quality={75}
+                    />
+                  </Link>
+                </div>
+                <div>
+                  <Link
+                    href={`https://github.com/mindfiredigital/${package_list.name}`}
+                    target='_blank'
+                    title='Github'
+                  >
+                    <Image
+                      src={github}
+                      height={30}
+                      width={30}
+                      alt='npm_img'
+                      loading='lazy'
+                      quality={75}
+                    />
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as='div' className='relative z-10' onClose={closeModal}>
+          <Transition.Child
+            as={Fragment}
+            enter='ease-out duration-300'
+            enterFrom='opacity-0'
+            enterTo='opacity-100'
+            leave='ease-in duration-200'
+            leaveFrom='opacity-100'
+            leaveTo='opacity-0'
+          >
+            <div className='fixed inset-0 bg-black/25' />
+          </Transition.Child>
+
+          <div className='fixed inset-0 overflow-y-auto'>
+            <div className='flex min-h-full items-center justify-center p-4 text-center'>
+              <Transition.Child
+                as={Fragment}
+                enter='ease-out duration-300'
+                enterFrom='opacity-0 scale-95'
+                enterTo='opacity-100 scale-100'
+                leave='ease-in duration-200'
+                leaveFrom='opacity-100 scale-100'
+                leaveTo='opacity-0 scale-95'
+              >
+                <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'>
+                  <div className='absolute right-2 top-2'>
+                    <button
+                      onClick={closeModal}
+                      className='text-gray-500 hover:text-gray-700 focus:outline-none'
+                    >
+                      <svg
+                        xmlns='http://www.w3.org/2000/svg'
+                        className='h-6 w-6'
+                        fill='none'
+                        viewBox='0 0 24 24'
+                        stroke='red'
+                      >
+                        <path
+                          strokeLinecap='round'
+                          strokeLinejoin='round'
+                          strokeWidth={2}
+                          d='M6 18L18 6M6 6l12 12'
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                  <Dialog.Title
+                    as='h1'
+                    className='text-lg font-large leading-6 text-gray-900 capitalize text-center mb-4 font-extrabold'
+                  >
+                    {npmPackage.name.replaceAll("-", " ")}
+                  </Dialog.Title>
+                  <div
+                    key={npmPackage.name}
+                    className='border p-4 rounded bg-white flex flex-col justify-stretch'
+                  >
+                    <div className='mb-4 flex justify-center items-center'>
+                      <p className='text-mindfire-text-black text-xm font-bold mr-2'>
+                        Select
+                      </p>
+                      <div className='relative inline-block w-32'>
+                        <select
+                          id='range'
+                          className='bg-gray-50 border text-gray-900 text-sm rounded-lg  block w-full p-1 appearance-none outline-none'
+                          onChange={(e) => handleChange(e, npmPackage)}
+                        >
+                          <option value='filter'>Filter</option>
+                          <option value='total'>Total</option>
+                          <option value='Today'>Today</option>
+                          <option value='Yesterday'>Yesterday</option>
+                          <option value='Last month'>Last month</option>
+                          <option value='this month'>This month</option>
+                          <option value='last quarter'>Last quarter</option>
+                          <option value='this year'>This year</option>
+
+                          <option value='custom'>Custom Range</option>
+                        </select>
+                        <div className='absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none'>
+                          <svg
+                            className='w-4 h-4 fill-current text-gray-500'
+                            viewBox='0 0 20 20'
+                            xmlns='http://www.w3.org/2000/svg'
+                          >
+                            <path
+                              d='M7 7l3-3 3 3m0 6l-3 3-3-3'
+                              stroke='currentColor'
+                              strokeWidth='1.5'
+                              fill='none'
+                              strokeLinecap='round'
+                              strokeLinejoin='round'
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className='flex flex-col items-center'>
+                      {selectedRange === true ? (
+                        <div className='container  bg-white'>
+                          <div className='flex ml-6 mb-4'>
+                            <div className='mr-1'>
+                              <label
+                                htmlFor='startDate'
+                                className='block font-semibold text-center'
+                              >
+                                Start Date:
+                              </label>
+                              <input
+                                type='date'
+                                id='startDate'
+                                className='border border-gray-300 rounded-md px-2 py-1'
+                                value={startDate}
+                                onChange={(e) => setStartDate(e.target.value)}
+                              />
+                            </div>
+                            <div className='ml-1'>
+                              <label
+                                htmlFor='endDate'
+                                className='block font-semibold text-center'
+                              >
+                                End Date:
+                              </label>
+                              <input
+                                type='date'
+                                id='endDate'
+                                className='border border-gray-300 rounded-md px-2 py-1'
+                                value={endDate}
+                                onChange={(e) => setEndDate(e.target.value)}
+                              />
+                            </div>
+                          </div>
+                          <div className='flex flex-col items-center mt-4'>
+                            <div className='flex justify-around w-full'>
+                              <div className='flex flex-col items-center'>
+                                <div className='flex flex-row items-center'>
+                                  <Image
+                                    src={download}
+                                    height={20}
+                                    width={20}
+                                    alt='expand_img'
+                                    loading='lazy'
+                                    quality={75}
+                                  />
+                                  <div>
+                                    <h6 className='text-mindfire-text-black font-semibold'>
+                                      {count}
+                                    </h6>
+                                  </div>
+                                </div>
+                                <div className='mt-2'>
+                                  <p className='text-mindfire-text-black text-xm font-bold'>
+                                    Total Downloads
+                                  </p>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      ) : (
+                        <div className='flex flex-col items-center mt-4'>
+                          <div className='flex justify-around w-full'>
+                            <div className='flex flex-col items-center'>
+                              <div className='flex flex-row items-center'>
+                                <Image
+                                  src={download}
+                                  height={20}
+                                  width={20}
+                                  alt='expand_img'
+                                  loading='lazy'
+                                  quality={75}
+                                />
+                                <div>
+                                  <h6 className='text-mindfire-text-black font-semibold'>
+                                    {count}
+                                  </h6>
+                                </div>
+                              </div>
+                              <div className='mt-2'>
+                                <p className='text-mindfire-text-black text-xm font-bold'>
+                                  Total Downloads
+                                </p>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </div>
+  );
+};
+
+export default Stats;
diff --git a/src/app/projects/assets/packages.json b/src/app/projects/assets/packages.json
new file mode 100644
index 00000000..e03009ca
--- /dev/null
+++ b/src/app/projects/assets/packages.json
@@ -0,0 +1,23 @@
+[
+  {
+    "name": "fmdapi-node-weaver",
+    "day": 0,
+    "week": 3,
+    "year": 70,
+    "total": 70
+  },
+  {
+    "name": "react-canvas-editor",
+    "day": 1,
+    "week": 22,
+    "year": 947,
+    "total": 947
+  },
+  {
+    "name": "canvas-editor",
+    "day": 0,
+    "week": 7,
+    "year": 1063,
+    "total": 1063
+  }
+]
diff --git a/src/constants/index.ts b/src/constants/index.ts
index c8b4f917..19274bc4 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -27,8 +27,8 @@ const navigations: Navigation[] = [
     path: ["/contributors"],
   },
   {
-    name: "Package",
-    path: ["/package"],
+    name: "Packages",
+    path: ["/packages"],
   },
   {
     name: "GitHub",

From fd7c5db4dd41022a4eacee78de40064120e29a35 Mon Sep 17 00:00:00 2001
From: anandmindfire <anand.k@mindfiresolutions.com>
Date: Thu, 9 May 2024 11:45:32 +0530
Subject: [PATCH 14/16] feat: format pritter fix

---
 src/app/packages/page.tsx             |  4 ++--
 src/app/projects/assets/packages.json | 23 -----------------------
 updateProject.mjs                     |  2 ++
 3 files changed, 4 insertions(+), 25 deletions(-)
 delete mode 100644 src/app/projects/assets/packages.json

diff --git a/src/app/packages/page.tsx b/src/app/packages/page.tsx
index 0e19ebd2..c807d532 100644
--- a/src/app/packages/page.tsx
+++ b/src/app/packages/page.tsx
@@ -2,7 +2,6 @@
 
 import React, { useEffect, useState, Fragment } from "react";
 import statsList from "../projects/assets/stats.json";
-// import packageList from "../projects/assets/packages.json";
 import Link from "next/link";
 import npm from "../../../public/images/social-media/npm-svgrepo-com.svg";
 import filter from "../../../public/images/social-media/bx-filter-alt.svg";
@@ -35,6 +34,7 @@ const Stats = () => {
     year: 70,
     total: 70,
   });
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [packages, setPackages] = useState(statsList);
   // const [allPackage, setAllPackage] = useState(packageList);
 
@@ -105,7 +105,7 @@ const Stats = () => {
     );
     getStats(_package.name, `${range?.start}:${range?.end}`).then((res) => {
       const count = calculateDownloads(res);
-      console.log(count);
+      // console.log(count);
 
       packages.map((npmPackage) => {
         if (npmPackage.name === _package.name) {
diff --git a/src/app/projects/assets/packages.json b/src/app/projects/assets/packages.json
deleted file mode 100644
index e03009ca..00000000
--- a/src/app/projects/assets/packages.json
+++ /dev/null
@@ -1,23 +0,0 @@
-[
-  {
-    "name": "fmdapi-node-weaver",
-    "day": 0,
-    "week": 3,
-    "year": 70,
-    "total": 70
-  },
-  {
-    "name": "react-canvas-editor",
-    "day": 1,
-    "week": 22,
-    "year": 947,
-    "total": 947
-  },
-  {
-    "name": "canvas-editor",
-    "day": 0,
-    "week": 7,
-    "year": 1063,
-    "total": 1063
-  }
-]
diff --git a/updateProject.mjs b/updateProject.mjs
index dc5f6192..40569664 100644
--- a/updateProject.mjs
+++ b/updateProject.mjs
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 // updateProjects.mjs
 import fs from "fs";
 import path from "path";
@@ -156,6 +157,7 @@ async function updateProjects() {
     const contributionsMap = {};
 
     for (const repo in contributorsObject) {
+      // eslint-disable-next-line no-prototype-builtins
       if (contributorsObject.hasOwnProperty(repo)) {
         contributorsObject[repo].forEach((contributor) => {
           if (contributor.login === "github-actions[bot]") {

From ba5e5077065acddc8d3590bbfec60c44ef99f004 Mon Sep 17 00:00:00 2001
From: anandmindfire <anand.k@mindfiresolutions.com>
Date: Thu, 9 May 2024 11:59:33 +0530
Subject: [PATCH 15/16] fix: package downloads ui

---
 src/app/packages/page.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/app/packages/page.tsx b/src/app/packages/page.tsx
index c807d532..50aaf00f 100644
--- a/src/app/packages/page.tsx
+++ b/src/app/packages/page.tsx
@@ -451,7 +451,7 @@ const Stats = () => {
                           <div className='flex flex-col items-center mt-4'>
                             <div className='flex justify-around w-full'>
                               <div className='flex flex-col items-center'>
-                                <div className='flex flex-row items-center'>
+                                <div className='flex flex-row items-center space-x-1'>
                                   <Image
                                     src={download}
                                     height={20}
@@ -461,14 +461,14 @@ const Stats = () => {
                                     quality={75}
                                   />
                                   <div>
-                                    <h6 className='text-mindfire-text-black font-semibold'>
+                                    <h6 className='text-mindfire-text-black font-semibold text-xl'>
                                       {count}
                                     </h6>
                                   </div>
                                 </div>
-                                <div className='mt-2'>
-                                  <p className='text-mindfire-text-black text-xm font-bold'>
-                                    Total Downloads
+                                <div className='mt-2 ml-2'>
+                                  <p className='text-mindfire-text-black text-xm'>
+                                    Downloads
                                   </p>
                                 </div>
                               </div>
@@ -479,7 +479,7 @@ const Stats = () => {
                         <div className='flex flex-col items-center mt-4'>
                           <div className='flex justify-around w-full'>
                             <div className='flex flex-col items-center'>
-                              <div className='flex flex-row items-center'>
+                              <div className='flex flex-row items-center space-x-1'>
                                 <Image
                                   src={download}
                                   height={20}
@@ -489,14 +489,14 @@ const Stats = () => {
                                   quality={75}
                                 />
                                 <div>
-                                  <h6 className='text-mindfire-text-black font-semibold'>
+                                  <h6 className='text-mindfire-text-black font-semibold text-xl'>
                                     {count}
                                   </h6>
                                 </div>
                               </div>
-                              <div className='mt-2'>
-                                <p className='text-mindfire-text-black text-xm font-bold'>
-                                  Total Downloads
+                              <div className='mt-2 ml-2'>
+                                <p className='text-mindfire-text-black text-xm'>
+                                  Downloads
                                 </p>
                               </div>
                             </div>

From 67e8d504cef6b9967dd6d5773d497acbbdb78073 Mon Sep 17 00:00:00 2001
From: anandmindfire <anand.k@mindfiresolutions.com>
Date: Thu, 9 May 2024 12:35:39 +0530
Subject: [PATCH 16/16] fix: package title ui camelcase

---
 src/app/packages/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/packages/page.tsx b/src/app/packages/page.tsx
index 50aaf00f..2b92c800 100644
--- a/src/app/packages/page.tsx
+++ b/src/app/packages/page.tsx
@@ -228,7 +228,7 @@ const Stats = () => {
           >
             <div className='flex flex-row items-start justify-between'>
               <div className=''>
-                <h3 className='font-semibold mb-2 ml-2 indent-8 text-mindfire-text-black uppercase'>
+                <h3 className='font-semibold mb-2 ml-2 indent-8 text-mindfire-text-black capitalize'>
                   {package_list.name.replaceAll("-", " ")}
                 </h3>
               </div>