feat: re-implement individual statistic pages on next

14 files changed, 423 insertions, 35 deletions

diff --git a/src/app/_componenets/TitleBar/TitleBar.tsx b/src/app/_componenets/TitleBar/TitleBar.tsx
deleted file mode 100644
index 27bebfc..0000000
--- a/src/app/_componenets/TitleBar/TitleBar.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import Image from 'next/image';
-
-interface TitleBarProps {
-    title: string;
-}
-
-const TitleBar: React.FC<TitleBarProps> = ({ title }) => {
-    return (
-        <div className="title-bar p-5 shadow-md" style={{ backgroundColor: '#2D4B71' }}>
-            <div style={{ width: 'fit-content', whiteSpace: 'nowrap', overflow: 'hidden' }}>
-                <span className="text-white text-4xl font-bold">{title}</span>
-            </div>
-        </div>
-    );
-};
-
-export default TitleBar;
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ae0349f..3fdc727 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
-import Footer from './_componenets/Footer/Footer'
+import Footer from '../components/Footer/Footer'
 import './globals.css'
 
 const inter = Inter({ subsets: ['latin'] })
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7a40c0a..6016d89 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,5 @@
-import SubscriberTable, {SubscriberDataTableProp} from './_componenets/SubscriberTable/SubscriberTable';
-import TitleBar from './_componenets/TitleBar/TitleBar';
+import SubscriberTable, {SubscriberDataTableProp} from '../components/SubscriberTable/SubscriberTable';
+import TitleBar from '../components/TitleBar/TitleBar';
 
 async function Home(){
     const apiUrl = process.env.NEXT_PUBLIC_API_URL
diff --git a/src/components/DataChart/DataChart.tsx b/src/components/DataChart/DataChart.tsx
new file mode 100644
index 0000000..b51d592
--- /dev/null
+++ b/src/components/DataChart/DataChart.tsx
@@ -0,0 +1,108 @@
+
+
+import React, {useEffect, useState} from 'react';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+import { Line } from 'react-chartjs-2';
+
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+
+
+
+
+interface Dataset {
+  label: string;
+  data: number[];
+  borderColor: string;
+  backgroundColor: string;
+}
+
+interface DataChartResponseProps {
+  labels: string[];
+  datasets: Dataset[];
+}
+
+interface DataChartProps {
+  channel_name: string;
+  requestUrl?: string;
+  graphTitle?: string;
+}
+
+const DataChart: React.FC<DataChartProps> = ({ channel_name, requestUrl, graphTitle }) => {
+  const [data, setData] = useState<DataChartResponseProps | null>();
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch(requestUrl || `${apiUrl}/api/subscribers/${channel_name}`);
+        const json = await response.json();
+        setData({
+          labels: json.labels,
+          datasets: [
+            {
+              label: 'Subscriber Count',
+              data: json.datasets,
+              borderColor: 'rgb(255, 99, 132)',
+              backgroundColor: 'rgba(255, 99, 132, 0.5)',
+            },
+          ],
+        });
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
+
+    fetchData();
+  }, [apiUrl, channel_name, requestUrl]);
+
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: 'top' as const,
+      },
+      title: {
+        display: true,
+        text: graphTitle || 'Historical Subscriber Data',
+        font: {
+          size: 18
+        }
+      },
+    },
+    scales: {
+      x: {
+        ticks: {
+          autoSkip: true,
+          maxTicksLimit: 10
+        }
+      }
+    }
+  };
+
+  if (!data) {
+    return <div>Loading...</div>;
+  }
+
+  return <Line options={options} data={data} />;
+};
+
+export default DataChart;
\ No newline at end of file
diff --git a/src/app/_componenets/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index f23c677..6585e52 100644
--- a/src/app/_componenets/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -17,7 +17,6 @@ const Footer = () => {
         </p>
         <p className="p-4">
             <a className="hover:underline text-bold" href="https://github.com/pinapelz/Nijitrack">Source Code</a><br/>
-            We are currently under construction!
         </p>
       </div>
     </footer>
diff --git a/src/app/_componenets/SubscriberTable/SubscriberTable.tsx b/src/components/SubscriberTable/SubscriberTable.tsx
index a538bdd..8094e21 100644
--- a/src/app/_componenets/SubscriberTable/SubscriberTable.tsx
+++ b/src/components/SubscriberTable/SubscriberTable.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import Image from "next/image";
 import ChannelRow from "./SubscriberTableRow";
 
 interface ChannelDataProp {
diff --git a/src/app/_componenets/SubscriberTable/SubscriberTableRow.tsx b/src/components/SubscriberTable/SubscriberTableRow.tsx
index 619a5b8..e97af1c 100644
--- a/src/app/_componenets/SubscriberTable/SubscriberTableRow.tsx
+++ b/src/components/SubscriberTable/SubscriberTableRow.tsx
@@ -9,7 +9,7 @@ interface ChannelRowProps {
 }
 
 const ChannelRow: React.FC<ChannelRowProps> = ({ channel, index }) => (
-<tr key={index} className="border-b hover:bg-gray-100 cursor-pointer">
+<tr key={index} className="border-b hover:bg-gray-100 cursor-pointer" onClick={() => window.location.href = "/stats/"+channel.channel_name}>
         <td className="py-3 px-1 sm:px-3 hidden sm:table-cell">{index + 1}</td>
         <td className="py-3 px-1 sm:px-3 flex items-center">
             <Image
diff --git a/src/components/TitleBar/TitleBar.tsx b/src/components/TitleBar/TitleBar.tsx
new file mode 100644
index 0000000..85fbfbd
--- /dev/null
+++ b/src/components/TitleBar/TitleBar.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface TitleBarProps {
+    title: string;
+    redirectUrl?: string;
+    showHomeButton?: boolean;
+}
+
+const TitleBar: React.FC<TitleBarProps> = ({ title, redirectUrl, showHomeButton }) => {
+    return (
+        <div className="title-bar p-5 shadow-md" style={{ backgroundColor: '#2D4B71' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <a href={redirectUrl}>
+                    <span className="text-white text-4xl font-bold">{title}</span>
+                </a>
+                {showHomeButton && (
+                    <a href="/">
+                        <button className="bg-white text-blue-500 hover:bg-blue-500 hover:text-white font-bold py-2 px-4 rounded-full">Home</button>
+                    </a>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default TitleBar;
\ No newline at end of file
diff --git a/src/components/channel-card.tsx b/src/components/channel-card.tsx
new file mode 100644
index 0000000..f2eed59
--- /dev/null
+++ b/src/components/channel-card.tsx
@@ -0,0 +1,53 @@
+import { AvatarImage, AvatarFallback, Avatar } from "@/components/ui/avatar"
+import { CardTitle, CardHeader, CardContent, Card } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+
+interface ChannelCardProps {
+  name: string
+  avatarUrl: string
+  subscriberCount: number
+  videoCount: number
+  suborg: string
+  nextMilestone: string
+  nextMilestoneDays: string
+  nextMilestoneDate: string
+}
+
+export function ChannelCard(props: ChannelCardProps) {
+  const { name, avatarUrl, subscriberCount, videoCount, suborg, nextMilestone, nextMilestoneDays, nextMilestoneDate } = props
+  return (
+    <Card className="w-[500px] shadow-lg rounded-lg overflow-hidden mt-4 py-4">
+      <CardHeader>
+        <div className="flex items-center space-x-4 p-4">
+          <Avatar>
+            <AvatarImage src={avatarUrl}/>
+            <AvatarFallback>PR</AvatarFallback>
+          </Avatar>
+          <div>
+            <CardTitle>{name}</CardTitle>
+            <Badge variant="secondary">{suborg}</Badge>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="px-4 py-2 space-y-4">
+        <div className="flex flex-col items-center">
+          <span className="text-l text-gray-600">Subscribers</span>
+            <span className="font-semibold">{subscriberCount.toLocaleString()}</span>
+        </div>
+        <div className="flex flex-col items-center">
+          <span className="text-l text-gray-600">Videos</span>
+          <span className="font-semibold">{videoCount}</span>
+        </div>
+        <div className="flex flex-col items-center">
+          <span className="text-l text-gray-600">Next Milestone</span>
+          <span className="font-semibold">{nextMilestone}</span>
+          <div className="flex justify-center items-center">
+            <span className="text-sm text-gray-600 px-2">{nextMilestoneDays} days</span>
+            <span className="text-sm text-gray-600 px-2">{nextMilestoneDate}</span>
+          </div>
+
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..1c69f50
--- /dev/null
+++ b/src/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-12 w-12 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..f000e3e
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..0f7034b
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1 px-4", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..d084cca
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/src/pages/stats/[slug].tsx b/src/pages/stats/[slug].tsx
index 03f8adf..1971c1e 100644
--- a/src/pages/stats/[slug].tsx
+++ b/src/pages/stats/[slug].tsx
@@ -1,16 +1,66 @@
-"use client"
-import { useRouter } from 'next/router'
- 
+"use client";
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import "../../app/globals.css";
+import TitleBar from "../../components/TitleBar/TitleBar";
+import { ChannelCard } from "@/components/channel-card";
+import DataChart from "@/components/DataChart/DataChart";
+import axios from "axios";
+
+interface ChannelDataProp {
+  channel_name: string;
+  profile_pic: string;
+  subscribers: number;
+  sub_org: string;
+  video_count: number;
+  next_milestone: string;
+  days_until_next_milestone: string;
+  next_milestone_date: string;
+}
+
 export default function Page() {
+  const [channelData, setChannelData] = useState<ChannelDataProp | null>(null);
   const router = useRouter();
+  const { slug } = router.query;
+  useEffect(() => {
+    const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+    if (slug) {
+      const encodedSlug = encodeURIComponent(slug as string);
+      console.log(apiUrl + `/api/channel/${encodedSlug}`);
+      axios.get(apiUrl + `/api/channel/${encodedSlug}`).then((response) => {
+        console.log(response);
+        setChannelData(response.data);
+      });
+    }
+  }, [slug]);
+
   return (
-    <div className="flex items-center justify-center h-screen">
-      <div className="bg-black p-8 rounded-lg shadow-lg">
-        <h1 className="text-2xl font-bold mb-4">Under Construction</h1>
-        <p className="text-gray-600">We are currently working on this page. Please check back later.</p>
-        <p className="text-gray-600">Thank you for your patience</p>
-        <p className="text-gray-600">Slug: {router.query.slug}</p>
+    <>
+      <TitleBar title={slug as string} redirectUrl="/" showHomeButton />
+      <div className="flex justify-center">
+        <div className="flex flex-col items-center">
+          {channelData && (
+            <ChannelCard
+              name={channelData.channel_name}
+              avatarUrl={channelData.profile_pic}
+              subscriberCount={channelData.subscribers}
+              videoCount={channelData.video_count}
+              suborg={channelData.sub_org}
+              nextMilestone={channelData.next_milestone}
+              nextMilestoneDays={channelData.days_until_next_milestone}
+              nextMilestoneDate={channelData.next_milestone_date}
+            />
+          )}
+        </div>
       </div>
-    </div>
+      <div className="px-48 mb-10 mt-10">
+        <div className="mb-12">
+          <DataChart channel_name={slug as string}/>
+        </div>
+        <div className="mb-4">
+          <DataChart channel_name={slug as string} requestUrl={`${process.env.NEXT_PUBLIC_API_URL}/api/subscribers/${slug as string}/7d`} graphTitle="7 Day Historical"/>
+        </div>
+      </div>
+    </>
   );
-}
\ No newline at end of file
+}