JeevaRamanathan · AmithBV0606 · Aug 13, 2025 · Aug 13, 2025 · Aug 13, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,16 +15,17 @@
     "@copilotkit/react-core": "^1.3.2",
     "@copilotkit/react-textarea": "^1.3.2",
     "@copilotkit/react-ui": "^1.3.2",
+    "@copilotkit/runtime": "^1.10.1",
     "@copilotkit/shared": "^1.3.2",
     "@google/generative-ai": "^0.21.0",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-select": "^2.1.2",
-    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-toast": "^1.2.2",
     "@tanstack/react-table": "^8.20.5",
     "@vercel/analytics": "^1.3.1",
@@ -37,7 +38,7 @@
     "next": "14.2.14",
     "next-themes": "^0.3.0",
     "react": "^18",
-    "react-day-picker": "^8.10.1",
+    "react-day-picker": "^9.8.1",
     "react-dom": "^18",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7"

diff --git a/src/app/api/scrape/route.js b/src/app/api/scrape/route.js
diff --git a/src/app/layout.js b/src/app/layout.js
@@ -24,7 +24,7 @@ export const metadata = {
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >

diff --git a/src/app/page.js b/src/app/page.js
@@ -20,10 +20,9 @@ export default function Home() {
           <div className="bg-primary-foreground/40 dark:bg-primary/5">
             <Header />
             <div className="text-center italic mt-3 text-sky-700 font-bold">
-              Track Your GitHub Pull Requests for Various Open Source Events
-              with AI Assistance
+              Track PRs for Open Source Events with AI
             </div>
-            <div className="container">
+            <div className="container mx-auto">
               <UserInput />
               <ResultTable />
             </div>
@@ -35,9 +34,9 @@ export default function Home() {
             }
             defaultOpen={false}
             labels={{
-              title: "AI Powered Github Pull Request Tracker",
+              title: "PR Tracker",
               initial: [
-                "Hello there! 👋 I can assist you in retrieving the details of GitHub pull requests for events like Hacktoberfest, Devfest, or general submissions.",
+                "Hello there! 👋 I can assist you in retrieving the details of GitHub pull requests.",
                 "Please note: I'm currently using a free version of the Groq model, so responses may sometimes be slower or less accurate, and too many frequent requests at same time may result in rate limit exceeded errors with empty responses. Please try after sometime in such cases. But I'm continually improving!",
               ],
             }}

diff --git a/src/components/FromDatePicker.jsx b/src/components/FromDatePicker.jsx
@@ -0,0 +1,73 @@
+"use client";
+
+import * as React from "react";
+import { ChevronDownIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { useData } from "@/lib/hooks/use-data";
+import { useSearchParams } from "next/navigation";
+
+export default function FromDatePicker() {
+  const { dateRange, setDateRange } = useData();
+
+  const [open, setOpen] = React.useState(false);
+
+  const searchParams = useSearchParams();
+  const from = searchParams.get("from");
+
+  React.useEffect(() => {
+    if (from) {
+      const startDate = new Date(from);
+
+      if (!isNaN(startDate)) {
+        setDateRange((prev) => ({ ...prev, from: startDate.toLocaleDateString("en-CA") }));
+      } else {
+        console.error("Invalid date format for 'from':", from);
+      }
+    }
+  }, [from, setDateRange]);
+
+  return (
+    <div className="flex flex-col gap-3 w-full">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-full justify-between font-normal"
+          >
+            {dateRange.from ? dateRange.from : "Start date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            initialFocus
+            mode="single"
+            captionLayout="dropdown"
+            selected={dateRange.from}
+            onSelect={(currDate) => {
+              const FromDate = currDate.toLocaleDateString("en-CA");
+              setDateRange((prev) => ({
+                ...prev,
+                from: FromDate,
+              }));
+              setOpen(false);
+            }}
+            disabled={(currentDate) => {
+              const today = new Date();
+              today.setHours(0, 0, 0, 0);
+              return currentDate > today;
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
diff --git a/src/components/ToDatePicker.jsx b/src/components/ToDatePicker.jsx
@@ -0,0 +1,74 @@
+"use client";
+
+import * as React from "react";
+import { ChevronDownIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { useData } from "@/lib/hooks/use-data";
+import { useSearchParams } from "next/navigation";
+
+export default function ToDatePicker() {
+  const { dateRange, setDateRange } = useData();
+
+  const [open, setOpen] = React.useState(false);
+
+  const searchParams = useSearchParams();
+  const to = searchParams.get("to");
+
+  React.useEffect(() => {
+    if (to) {
+      const endDate = new Date(to);
+
+      if (!isNaN(endDate)) {
+        setDateRange((prev) => ({ ...prev, to: endDate.toLocaleDateString("en-CA") }));
+      } else {
+        console.error("Invalid date format for 'from':", from);
+      }
+    }
+  }, [to, setDateRange]);
+
+  return (
+    <div className="flex flex-col gap-3 w-full">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-full justify-between font-normal"
+          >
+            {dateRange.to ? dateRange.to : "End date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            initialFocus
+            mode="single"
+            captionLayout="dropdown"
+            selected={dateRange.to}
+            onSelect={(currDate) => {
+              const ToDate = currDate.toLocaleDateString("en-CA");
+              setDateRange((prev) => ({
+                ...prev,
+                to: ToDate,
+              }));
+              setOpen(false);
+            }}
+            disabled={(currentDate) => {
+              const today = new Date();
+              today.setHours(0, 0, 0, 0);
+              return currentDate > today;
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}