some fixes

app/app/(dashboard)/links/[id]/page.tsx

@@ -108,34 +108,17 @@ export default function Page({
     long_url: "https://example.com/e7b9f3a7-0a15-4b7d-8d62-0d5f1a52e73e",
     created_at: new Date("2023-05-28T12:34:56Z"),
     title: "Sample Title",
+    _count: {
+      click_analytics: 100
+    }
   });
   const router = useRouter();
 
   useEffect(() => {
     setLoading(true);
     getLinkDetails(decodeId(params.id).toString()).then((res) => {
-      if (res.status == HTTP_STATUS.NOT_FOUND) {
-        toast.error("Link not found");
-        router.push("/app/links");
-        return;
-      }
-
-      if (res.link) {
-        //@ts-ignore
-        setfetchLink(res.link);
-        //@ts-ignore
-        setTitle(res.link.title);
-        //@ts-ignore
-        setShortcode(res.link.short_code);
-      }
-      //@ts-ignore
-      // getAnalyticsAction(res.link.short_code).then((e) => {
-      //   //@ts-ignore
-      //   // setLink(e);
-      //   setNoDataSet(Object.keys(e.devices).length);
-      //   setLoading(false);
-      // });
-      setLoading(false);
+      setfetchLink(res.link)
+      setLoading(false)
     });
   }, [router, params.id]);
 
@@ -261,7 +244,7 @@ export default function Page({
       <div className="flex md:flex-row flex-col mt-6 mr-0">
         <div className="flex-1 flex justify-between shadow-md p-4 rounded-xl items-center border-[0.5px]">
           <h1 className="text-md">Engagements</h1>
-          <h1 className="text-2xl font-bold">{link.engagement}</h1>
+          <h1 className="text-2xl font-bold">{fetchLink._count.click_analytics}</h1>
         </div>
         <div className="flex-1 flex justify-between shadow-md ml-0 md:mt-0 mt-4 md:ml-4 p-4 rounded-xl items-center border-[0.5px]">
           <h1 className="text-md">Last 7 days</h1>

components/CardComponents/LinkCard.tsx

@@ -1,5 +1,6 @@
 "use client";
 import {
+  BarChart2,
   Calendar,
   Copy,
   LinkIcon,
@@ -14,21 +15,32 @@ import { linkType } from "@/interfaces/types";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import encodeId from "@/lib/services/encodeId";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@radix-ui/react-hover-card";
 
 const months = [
-  "January", "February", "March", "April", "May", "June",
-  "July", "August", "September", "October", "November", "December"
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
 ];
 
-export function LinkCard({
-  link,
-}: {
-  link: linkType;
-}) {
-  const REDIRECT_URL:string = process.env.REDIRECT_URL || "https://eurl.dev";
-  const [shortCode,setShortcode] = useState<string>(link.short_code); 
-  const shortLink:string = `${REDIRECT_URL}/${shortCode}`
-  const [title,setTitle] = useState<string | null>(link.title)
+export function LinkCard({ link }: { link: linkType }) {
+  const REDIRECT_URL: string = process.env.REDIRECT_URL || "https://eurl.dev";
+  const [shortCode, setShortcode] = useState<string>(link.short_code);
+  const shortLink: string = `${REDIRECT_URL}/${shortCode}`;
+  const [title, setTitle] = useState<string | null>(link.title);
   const router = useRouter();
 
   return (
@@ -39,11 +51,19 @@ export function LinkCard({
         </div>
         <div className="flex flex-col ml-6 w-full">
           <div className="flex justify-between">
-            <h1 onClick={()=>router.push(`/app/links/${encodeId(link.id)}`)} className="text-lg lg:w-[53%] w-full break-all font-bold hover:underline cursor-pointer">
+            <h1
+              onClick={() => router.push(`/app/links/${encodeId(link.id)}`)}
+              className="text-lg lg:w-[53%] w-full break-all font-bold hover:underline cursor-pointer"
+            >
               {title}
             </h1>
             <div className="hidden lg:block">
-              <Button onClick={()=>{copyToClipboard(shortLink)}} variant="outline">
+              <Button
+                onClick={() => {
+                  copyToClipboard(shortLink);
+                }}
+                variant="outline"
+              >
                 <Copy size={15} className="mr-2" />
                 Copy
               </Button>
@@ -53,7 +73,11 @@ export function LinkCard({
                   Share
                 </Button>
               </LinkShareDialog>
-              <EditLinkDialog setShortcode={setShortcode} setParentTitle={setTitle} link={link}>
+              <EditLinkDialog
+                setShortcode={setShortcode}
+                setParentTitle={setTitle}
+                link={link}
+              >
                 <Button variant="outline" className="ml-3">
                   <Pencil size={15} className="mr-2" />
                   Edit
@@ -62,41 +86,69 @@ export function LinkCard({
             </div>
           </div>
 
-          <h1 onClick={()=>{
-            window.open(
-              shortLink,
-              "_blank"
-            )
-          }} className="text-blue-400 mt-1 hover:underline cursor-pointer w-fit">
+          <h1
+            onClick={() => {
+              window.open(shortLink, "_blank");
+            }}
+            className="text-blue-400 mt-1 hover:underline cursor-pointer w-fit"
+          >
             {shortLink}
           </h1>
-          <h1 onClick={()=>{
-            window.open(
-              link.long_url,
-              "_blank"
-            )
-          }} className="mt-2 text-sm hover:underline cursor-pointer">
-            {link.long_url.length >= 10?<>{link.long_url.slice(0,30)}.....</>:<>{link.long_url}</>}
+          <h1
+            onClick={() => {
+              window.open(link.long_url, "_blank");
+            }}
+            className="mt-2 text-sm hover:underline cursor-pointer"
+          >
+            {link.long_url.length >= 10 ? (
+              <>{link.long_url.slice(0, 30)}.....</>
+            ) : (
+              <>{link.long_url}</>
+            )}
           </h1>
 
           <div className="flex mt-6 lg:flex-row flex-col">
+            <div className="flex">
+              <BarChart2 size={20} />
+              <h1 className="text-sm ml-2 hover:underline cursor-pointer">
+                {link._count.click_analytics}{" "}
+                <HoverCard>
+                  <HoverCardTrigger></HoverCardTrigger>
+                  <HoverCardContent>
+                    Includes short link clicks, QR Code scans
+                  </HoverCardContent>
+                </HoverCard>
+              </h1>
+            </div>
             <div className="flex mt-2 lg:mt-0">
               <Calendar className="ml-0 lg:ml-4 " size={20} />
-              <h1 className="text-sm ml-2">{months[link.created_at.getMonth()]} {link.created_at.getDate()},{link.created_at.getFullYear()}</h1>
+              <h1 className="text-sm ml-2">
+                {months[link.created_at.getMonth()]} {link.created_at.getDate()}
+                ,{link.created_at.getFullYear()}
+              </h1>
             </div>
           </div>
         </div>
       </div>
       <div className="mt-8 ml-8 lg:hidden">
-        <Button onClick={()=>{copyToClipboard(shortLink)}} variant="outline">
+        <Button
+          onClick={() => {
+            copyToClipboard(shortLink);
+          }}
+          variant="outline"
+        >
           <Copy size={15} />
         </Button>
         <LinkShareDialog shortCode={shortCode} link={link}>
           <Button variant="outline" className="ml-2">
             <Share2 size={15} />
           </Button>
         </LinkShareDialog>
-        <EditLinkDialog setShortcode={setShortcode} setParentTitle={setTitle} link={link}>
+        <EditLinkDialog
+          setShortcode={setShortcode}
+          setParentTitle={setTitle}
+          link={link}
+        >
           <Button className="ml-2" variant="outline">
             <Pencil size={15} />
           </Button>

interfaces/types.ts

@@ -65,14 +65,17 @@ export type publicLinkType =  {
     clicks? : string
 }
 
+type countType = Record<string,number>
+
 export type linkType = {
   id:number,
   user_id: number;
   short_code: string;
   long_url: string;
   created_at: Date;
   title: string | null;
-  engagements?: number
+  engagements?: number;
+  _count:countType
 }
 
 export type paginationType = {

lib/actions/getAnalyticsAction.ts

@@ -1,3 +1,6 @@
 "use server";
 
-export async function getAnalyticsAction(shortcode: string) {}
+export async function getAnalyticsAction(shortcode: string) {
+
+}
+

lib/actions/getLinksAction.ts

@@ -5,11 +5,9 @@ import { ISessionType } from "@/interfaces/url";
 import authOptions from "@/lib/authOptions";
 import PrismaClientManager from "@/lib/services/pgConnect";
 import { HTTP_STATUS } from "@/lib/constants";
-import { getEngagements } from "../services/getEngagements";
+const prisma = PrismaClientManager.getInstance().getPrismaClient();
 
 export async function getLinks(pageNumber: string) {
-  const posgresInstance = PrismaClientManager.getInstance();
-  const prisma = posgresInstance.getPrismaClient();
   const session: ISessionType | null = await getServerSession(authOptions);
   // const searchParams = req.nextUrl.searchParams;
 
@@ -48,12 +46,17 @@ export async function getLinks(pageNumber: string) {
       },
       skip: (parseInt(page) - 1) * parseInt(page_size),
       take: parseInt(page_size),
+      include: {
+        _count : {
+          select: {
+            click_analytics: true
+          }
+        }
+      }
     });
 
-    const engaged_links = await getEngagements(links);
-
     return {
-        links:engaged_links,
+        links,
         totalLinks,
         total_pages,
         status: HTTP_STATUS.CREATED
@@ -68,7 +71,6 @@ export async function getLinks(pageNumber: string) {
 
 export async function getLinkDetails(linkId:string){
   const session: ISessionType | null = await getServerSession(authOptions);
-  const prisma = PrismaClientManager.getInstance().getPrismaClient();
 
   if (!session?.user) {
     return {
@@ -94,6 +96,13 @@ export async function getLinkDetails(linkId:string){
       where:{
         id : Number.parseInt(linkId),
         user_id : parseInt(session.user.sub)
+      },
+      include: {
+        _count: {
+          select: {
+            click_analytics: true
+          }
+        }
       }
   })
 
@@ -105,4 +114,48 @@ export async function getLinkDetails(linkId:string){
   }
 
   return {status:HTTP_STATUS.OK,link};
-} 
+} 
+
+export const lastSevenDaysAnalytics = async (code: string) => {
+  const todayDate = new Date();
+  const sevenDaysAgo = new Date(todayDate);
+  sevenDaysAgo.setDate(todayDate.getDate() - 7);
+
+  const lastWeekStartDate = new Date(sevenDaysAgo);
+  lastWeekStartDate.setDate(lastWeekStartDate.getDate() - 7);
+  const lastWeekEndDate = new Date(sevenDaysAgo);
+
+  const [thisWeekCount, lastWeekCount] = await Promise.all([
+    prisma.clickAnalytics.count({
+      where: {
+        code,
+        timestamp: {
+          gte: sevenDaysAgo,
+          lte: todayDate,
+        },
+      },
+    }),
+    prisma.clickAnalytics.count({
+      where: {
+        code,
+        timestamp: {
+          gte: lastWeekStartDate,
+          lte: lastWeekEndDate,
+        },
+      },
+    }),
+  ]);
+
+  const percentageChange =
+    lastWeekCount !== 0
+      ? ((thisWeekCount - lastWeekCount) / lastWeekCount) * 100
+      : thisWeekCount !== 0
+      ? 100
+      : 0;
+
+  return {
+    totalVisitsThisWeek: thisWeekCount,
+    totalVisitsLastWeek: lastWeekCount,
+    percentageChange,
+  };
+};

prisma/migrations/20250114095945_reln/migration.sql

@@ -0,0 +1,11 @@
+/*
+  Warnings:
+
+  - Made the column `code` on table `ClickAnalytics` required. This step will fail if there are existing NULL values in that column.
+
+*/
+-- AlterTable
+ALTER TABLE "ClickAnalytics" ALTER COLUMN "code" SET NOT NULL;
+
+-- AddForeignKey
+ALTER TABLE "ClickAnalytics" ADD CONSTRAINT "ClickAnalytics_code_fkey" FOREIGN KEY ("code") REFERENCES "links"("short_code") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/migration_lock.toml

@@ -1,3 +1,3 @@
 # Please do not edit this file manually
-# It should be added in your version-control system (e.g., Git)
+# It should be added in your version-control system (i.e. Git)
 provider = "postgresql"