From 80cde4a2a3c0a9e7af32c84595bba9e95b145721 Mon Sep 17 00:00:00 2001
From: Yashgupta9330 <yaahg342@gmail.com>
Date: Thu, 10 Apr 2025 22:45:37 +0530
Subject: [PATCH 1/9] added

---
 backend/apps/owasp/graphql/nodes/snapshot.py  |  5 +++
 backend/apps/owasp/models/snapshot.py         | 31 +++++++++++++++++++
 frontend/src/components/SnapshotCard.tsx      |  9 +++++-
 .../src/server/queries/snapshotQueries.ts     |  1 +
 frontend/src/types/card.ts                    |  1 +
 frontend/src/types/snapshot.ts                |  1 +
 6 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/backend/apps/owasp/graphql/nodes/snapshot.py b/backend/apps/owasp/graphql/nodes/snapshot.py
index 53c15fd78..0f9f6371e 100644
--- a/backend/apps/owasp/graphql/nodes/snapshot.py
+++ b/backend/apps/owasp/graphql/nodes/snapshot.py
@@ -22,6 +22,7 @@ class SnapshotNode(GenericEntityNode):
     new_projects = graphene.List(ProjectNode)
     new_releases = graphene.List(ReleaseNode)
     new_users = graphene.List(UserNode)
+    summary = graphene.String()
 
     class Meta:
         model = Snapshot
@@ -55,3 +56,7 @@ def resolve_new_releases(self, info):
     def resolve_new_users(self, info):
         """Resolve recent new users."""
         return self.new_users.order_by("-created_at")
+
+    def resolve_summary(self, info):
+        """Resolve summary of the snapshot."""
+        return self.generate_summary()
diff --git a/backend/apps/owasp/models/snapshot.py b/backend/apps/owasp/models/snapshot.py
index 6b4edf7ac..a08b0446c 100644
--- a/backend/apps/owasp/models/snapshot.py
+++ b/backend/apps/owasp/models/snapshot.py
@@ -51,3 +51,34 @@ def save(self, *args, **kwargs):
             self.key = now().strftime("%Y-%m")
 
         super().save(*args, **kwargs)
+
+    def generate_summary(self, max_examples=2):
+        """Generate a snapshot summary with counts and examples."""
+        summary_parts = []
+
+        def summarize(queryset, label, example_attr):
+            count = queryset.count()
+            if count == 0:
+                return None
+            examples = list(queryset.values_list(example_attr, flat=True)[:max_examples])
+            example_str = ", ".join(str(e) for e in examples)
+            return f"{count} {label}{'s' if count != 1 else ''} (e.g., {example_str})"
+
+        entities = [
+            (self.new_users, "user", "login"),
+            (self.new_projects, "project", "name"),
+            (self.new_chapters, "chapter", "name"),
+            (self.new_issues, "issue", "title"),
+            (self.new_releases, "release", "tag_name"),
+        ]
+
+        for queryset, label, attr in entities:
+            part = summarize(queryset, label, attr)
+            if part:
+                summary_parts.append(part)
+
+        return (
+            "Snapshot Summary: " + "; ".join(summary_parts)
+            if summary_parts
+            else "No new entities were added."
+        )
diff --git a/frontend/src/components/SnapshotCard.tsx b/frontend/src/components/SnapshotCard.tsx
index 78da8c999..2dbf74558 100644
--- a/frontend/src/components/SnapshotCard.tsx
+++ b/frontend/src/components/SnapshotCard.tsx
@@ -4,12 +4,19 @@ import { Button } from '@heroui/button'
 import { SnapshotCardProps } from 'types/card'
 import { formatDate } from 'utils/dateFormatter'
 
-const SnapshotCard = ({ title, button, startAt, endAt }: SnapshotCardProps) => {
+const SnapshotCard = ({ title, button, startAt, endAt, summary }: SnapshotCardProps) => {
+
   return (
     <Button
       onClick={button.onclick}
       className="group flex h-40 w-full flex-col items-center rounded-lg bg-white p-6 text-left shadow-lg transition-transform duration-500 hover:scale-105 hover:shadow-xl dark:bg-gray-800 dark:shadow-gray-900/30"
     >
+
+        <div className="mb-2 w-full text-xs text-gray-500 dark:text-gray-300 text-center">
+          {summary}
+        </div>
+
+
       <div className="text-center">
         <h3 className="max-w-[250px] text-balance text-lg font-semibold text-gray-900 group-hover:text-blue-400 dark:text-white sm:text-xl">
           <p>{title}</p>
diff --git a/frontend/src/server/queries/snapshotQueries.ts b/frontend/src/server/queries/snapshotQueries.ts
index a69d6fcc0..33411eae7 100644
--- a/frontend/src/server/queries/snapshotQueries.ts
+++ b/frontend/src/server/queries/snapshotQueries.ts
@@ -63,6 +63,7 @@ export const GET_COMMUNITY_SNAPSHOTS = gql`
       title
       startAt
       endAt
+      summary
     }
   }
 `
diff --git a/frontend/src/types/card.ts b/frontend/src/types/card.ts
index 8eaff7339..7caef185c 100644
--- a/frontend/src/types/card.ts
+++ b/frontend/src/types/card.ts
@@ -67,4 +67,5 @@ export interface SnapshotCardProps {
   endAt: string
   title: string
   button: ButtonType
+  summary: string
 }
diff --git a/frontend/src/types/snapshot.ts b/frontend/src/types/snapshot.ts
index 8ba77ec10..faa7e264f 100644
--- a/frontend/src/types/snapshot.ts
+++ b/frontend/src/types/snapshot.ts
@@ -23,4 +23,5 @@ export interface Snapshots {
   key: string
   startAt: string
   title: string
+  summary: string
 }

From 414dd1d4794979884974ffd1c4141072c8e594fb Mon Sep 17 00:00:00 2001
From: Yashgupta9330 <yaahg342@gmail.com>
Date: Fri, 18 Apr 2025 21:19:02 +0530
Subject: [PATCH 2/9] fixed

---
 frontend/src/app/snapshots/[id]/page.tsx       | 3 +++
 frontend/src/components/SnapshotCard.tsx       | 9 +--------
 frontend/src/server/queries/snapshotQueries.ts | 2 +-
 frontend/src/types/card.ts                     | 1 -
 frontend/src/types/snapshot.ts                 | 2 +-
 5 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/snapshots/[id]/page.tsx b/frontend/src/app/snapshots/[id]/page.tsx
index 37fb9f1fb..0f79ee8ee 100644
--- a/frontend/src/app/snapshots/[id]/page.tsx
+++ b/frontend/src/app/snapshots/[id]/page.tsx
@@ -117,6 +117,9 @@ const SnapshotDetailsPage: React.FC = () => {
             <h1 className="mb-2 text-3xl font-bold text-gray-700 dark:text-gray-200">
               {snapshot?.title}
             </h1>
+            <h1 className="mb-2 text-3xl font-bold text-gray-700 dark:text-gray-200">
+              {snapshot?.summary}
+            </h1>
             <div className="flex flex-wrap items-center gap-2 text-gray-600 dark:text-gray-300">
               <div className="flex items-center">
                 <FontAwesomeIcon icon={faCalendar} className="mr-1 h-4 w-4" />
diff --git a/frontend/src/components/SnapshotCard.tsx b/frontend/src/components/SnapshotCard.tsx
index 2dbf74558..78da8c999 100644
--- a/frontend/src/components/SnapshotCard.tsx
+++ b/frontend/src/components/SnapshotCard.tsx
@@ -4,19 +4,12 @@ import { Button } from '@heroui/button'
 import { SnapshotCardProps } from 'types/card'
 import { formatDate } from 'utils/dateFormatter'
 
-const SnapshotCard = ({ title, button, startAt, endAt, summary }: SnapshotCardProps) => {
-
+const SnapshotCard = ({ title, button, startAt, endAt }: SnapshotCardProps) => {
   return (
     <Button
       onClick={button.onclick}
       className="group flex h-40 w-full flex-col items-center rounded-lg bg-white p-6 text-left shadow-lg transition-transform duration-500 hover:scale-105 hover:shadow-xl dark:bg-gray-800 dark:shadow-gray-900/30"
     >
-
-        <div className="mb-2 w-full text-xs text-gray-500 dark:text-gray-300 text-center">
-          {summary}
-        </div>
-
-
       <div className="text-center">
         <h3 className="max-w-[250px] text-balance text-lg font-semibold text-gray-900 group-hover:text-blue-400 dark:text-white sm:text-xl">
           <p>{title}</p>
diff --git a/frontend/src/server/queries/snapshotQueries.ts b/frontend/src/server/queries/snapshotQueries.ts
index 33411eae7..fc2e28d37 100644
--- a/frontend/src/server/queries/snapshotQueries.ts
+++ b/frontend/src/server/queries/snapshotQueries.ts
@@ -7,6 +7,7 @@ export const GET_SNAPSHOT_DETAILS = gql`
       key
       startAt
       title
+      summary
       newReleases {
         name
         publishedAt
@@ -63,7 +64,6 @@ export const GET_COMMUNITY_SNAPSHOTS = gql`
       title
       startAt
       endAt
-      summary
     }
   }
 `
diff --git a/frontend/src/types/card.ts b/frontend/src/types/card.ts
index 7abe36390..1412ccb9c 100644
--- a/frontend/src/types/card.ts
+++ b/frontend/src/types/card.ts
@@ -69,5 +69,4 @@ export interface SnapshotCardProps {
   endAt: string
   title: string
   button: ButtonType
-  summary: string
 }
diff --git a/frontend/src/types/snapshot.ts b/frontend/src/types/snapshot.ts
index faa7e264f..5d6dc14a2 100644
--- a/frontend/src/types/snapshot.ts
+++ b/frontend/src/types/snapshot.ts
@@ -16,6 +16,7 @@ export interface SnapshotDetailsProps {
   newReleases: ReleaseType[]
   newProjects: ProjectTypeGraphql[]
   newChapters: ChapterTypeGraphQL[]
+  summary: string
 }
 
 export interface Snapshots {
@@ -23,5 +24,4 @@ export interface Snapshots {
   key: string
   startAt: string
   title: string
-  summary: string
 }

From de77bfa03011b280bd79a9fd3bc0813ee82a81b5 Mon Sep 17 00:00:00 2001
From: Yashgupta9330 <yaahg342@gmail.com>
Date: Fri, 18 Apr 2025 21:42:18 +0530
Subject: [PATCH 3/9] added

---
 frontend/src/app/snapshots/[id]/page.tsx | 74 ++++++++++++++++++++++--
 1 file changed, 70 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/snapshots/[id]/page.tsx b/frontend/src/app/snapshots/[id]/page.tsx
index 0f79ee8ee..80d6e6310 100644
--- a/frontend/src/app/snapshots/[id]/page.tsx
+++ b/frontend/src/app/snapshots/[id]/page.tsx
@@ -1,6 +1,13 @@
 'use client'
 import { useQuery } from '@apollo/client'
-import { faCalendar } from '@fortawesome/free-solid-svg-icons'
+import {
+  faCalendar,
+  faUsers,
+  faFolder,
+  faBook,
+  faBug,
+  faTag,
+} from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useRouter, useParams } from 'next/navigation'
 import React, { useState, useEffect } from 'react'
@@ -117,9 +124,6 @@ const SnapshotDetailsPage: React.FC = () => {
             <h1 className="mb-2 text-3xl font-bold text-gray-700 dark:text-gray-200">
               {snapshot?.title}
             </h1>
-            <h1 className="mb-2 text-3xl font-bold text-gray-700 dark:text-gray-200">
-              {snapshot?.summary}
-            </h1>
             <div className="flex flex-wrap items-center gap-2 text-gray-600 dark:text-gray-300">
               <div className="flex items-center">
                 <FontAwesomeIcon icon={faCalendar} className="mr-1 h-4 w-4" />
@@ -132,6 +136,68 @@ const SnapshotDetailsPage: React.FC = () => {
         </div>
       </div>
 
+      <div className="mb-8 rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+        <h2 className="mb-4 text-2xl font-semibold text-gray-700 dark:text-gray-200">
+          Snapshot Summary
+        </h2>
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {/* Users */}
+          <div className="flex items-center rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+            <FontAwesomeIcon icon={faUsers} className="mr-3 h-6 w-6 text-blue-500" />
+            <div>
+              <h3 className="text-lg font-semibold text-gray-700 dark:text-gray-200">10 Users</h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                e.g., abhayymishraaaa, vithobasatish
+              </p>
+            </div>
+          </div>
+
+          {/* Projects */}
+          <div className="flex items-center rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+            <FontAwesomeIcon icon={faFolder} className="mr-3 h-6 w-6 text-green-500" />
+            <div>
+              <h3 className="text-lg font-semibold text-gray-700 dark:text-gray-200">3 Projects</h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                e.g., OWASP Top 10, ProdSecMan
+              </p>
+            </div>
+          </div>
+
+          {/* Chapters */}
+          <div className="flex items-center rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+            <FontAwesomeIcon icon={faBook} className="mr-3 h-6 w-6 text-purple-500" />
+            <div>
+              <h3 className="text-lg font-semibold text-gray-700 dark:text-gray-200">
+                14 Chapters
+              </h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                e.g., OWASP Oshawa, Juiz de Fora
+              </p>
+            </div>
+          </div>
+
+          {/* Issues */}
+          <div className="flex items-center rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+            <FontAwesomeIcon icon={faBug} className="mr-3 h-6 w-6 text-red-500" />
+            <div>
+              <h3 className="text-lg font-semibold text-gray-700 dark:text-gray-200">422 Issues</h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400">e.g., Duplicate Components</p>
+            </div>
+          </div>
+
+          {/* Releases */}
+          <div className="flex items-center rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+            <FontAwesomeIcon icon={faTag} className="mr-3 h-6 w-6 text-yellow-500" />
+            <div>
+              <h3 className="text-lg font-semibold text-gray-700 dark:text-gray-200">
+                71 Releases
+              </h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400">e.g., 2.0.1, v5.0.1</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
       {snapshot?.newChapters && snapshot?.newChapters.length > 0 && (
         <div className="mb-8">
           <h2 className="mb-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">

From a5eba956dbeb57429cefaaff7fe08e8af26516b1 Mon Sep 17 00:00:00 2001
From: Yashgupta9330 <yaahg342@gmail.com>
Date: Fri, 18 Apr 2025 22:07:35 +0530
Subject: [PATCH 4/9] pulled

---
 frontend/src/app/snapshots/[id]/page.tsx | 271 +++++++++++------------
 1 file changed, 133 insertions(+), 138 deletions(-)

diff --git a/frontend/src/app/snapshots/[id]/page.tsx b/frontend/src/app/snapshots/[id]/page.tsx
index 80d6e6310..fb05195fe 100644
--- a/frontend/src/app/snapshots/[id]/page.tsx
+++ b/frontend/src/app/snapshots/[id]/page.tsx
@@ -1,4 +1,5 @@
 'use client'
+
 import { useQuery } from '@apollo/client'
 import {
   faCalendar,
@@ -11,6 +12,7 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useRouter, useParams } from 'next/navigation'
 import React, { useState, useEffect } from 'react'
+
 import { GET_SNAPSHOT_DETAILS } from 'server/queries/snapshotQueries'
 import { ChapterTypeGraphQL } from 'types/chapter'
 import { ProjectTypeGraphql } from 'types/project'
@@ -18,53 +20,91 @@ import { SnapshotDetailsProps } from 'types/snapshot'
 import { level } from 'utils/data'
 import { formatDate } from 'utils/dateFormatter'
 import { getFilteredIconsGraphql, handleSocialUrls } from 'utils/utility'
+
 import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
 import Card from 'components/Card'
 import ChapterMapWrapper from 'components/ChapterMapWrapper'
 import LoadingSpinner from 'components/LoadingSpinner'
 import { handleAppError, ErrorDisplay } from 'app/global-error'
 
+type ParsedSummary = {
+  users: { count: number; examples: string[] }
+  projects: { count: number; examples: string[] }
+  chapters: { count: number; examples: string[] }
+  issues: { count: number; examples: string[] }
+  releases: { count: number; examples: string[] }
+}
+
+const parseSnapshotSummary = (summary: string): ParsedSummary => {
+  const result: ParsedSummary = {
+    users: { count: 0, examples: [] },
+    projects: { count: 0, examples: [] },
+    chapters: { count: 0, examples: [] },
+    issues: { count: 0, examples: [] },
+    releases: { count: 0, examples: [] },
+  }
+
+  if (!summary) return result
+
+  const sections = [
+    { key: 'users', pattern: /(\d+) users \(e\.g\.,\s*([^)]+)\)/i },
+    { key: 'projects', pattern: /(\d+) projects \(e\.g\.,\s*([^)]+)\)/i },
+    { key: 'chapters', pattern: /(\d+) chapters \(e\.g\.,\s*([^)]+)\)/i },
+    { key: 'issues', pattern: /(\d+) issues \(e\.g\.,\s*([^)]+)\)/i },
+    { key: 'releases', pattern: /(\d+) releases \(e\.g\.,\s*([^)]+)\)/i },
+  ]
+
+  sections.forEach((section) => {
+    const match = summary.match(section.pattern)
+    if (match && match.length >= 3) {
+      result[section.key as keyof ParsedSummary] = {
+        count: parseInt(match[1], 10),
+        examples: match[2].split(',').map((s) => s.trim()),
+      }
+    }
+  })
+
+  return result
+}
+
 const SnapshotDetailsPage: React.FC = () => {
-  const { id: snapshotKey } = useParams()
+  const params = useParams()
+  const snapshotKey = params?.id as string
+
   const [snapshot, setSnapshot] = useState<SnapshotDetailsProps | null>(null)
-  const [isLoading, setIsLoading] = useState<boolean>(true)
+  const [isLoading, setIsLoading] = useState(true)
+  const [summaryData, setSummaryData] = useState<ParsedSummary | null>(null)
   const router = useRouter()
 
-  const { data: graphQLData, error: graphQLRequestError } = useQuery(GET_SNAPSHOT_DETAILS, {
+  const { data, error } = useQuery(GET_SNAPSHOT_DETAILS, {
     variables: { key: snapshotKey },
   })
 
   useEffect(() => {
-    if (graphQLData) {
-      setSnapshot(graphQLData.snapshot)
-      setIsLoading(false)
+    if (data) {
+      setSnapshot(data.snapshot)
+      setSummaryData(parseSnapshotSummary(data.snapshot.summary))
     }
-    if (graphQLRequestError) {
-      handleAppError(graphQLRequestError)
-      setIsLoading(false)
+    if (error) {
+      handleAppError(error)
     }
-  }, [graphQLData, graphQLRequestError, snapshotKey])
+    setIsLoading(false)
+  }, [data, error])
 
   const renderProjectCard = (project: ProjectTypeGraphql) => {
     const params: string[] = ['forksCount', 'starsCount', 'contributorsCount']
     const filteredIcons = getFilteredIconsGraphql(project, params)
 
-    const handleButtonClick = () => {
-      router.push(`/projects/${project.key}`)
-    }
-
-    const SubmitButton = {
-      label: 'View Details',
-      icon: <FontAwesomeIconWrapper icon="fa-solid fa-right-to-bracket" />,
-      onclick: handleButtonClick,
-    }
-
     return (
       <Card
-        button={SubmitButton}
+        button={{
+          label: 'View Details',
+          icon: <FontAwesomeIconWrapper icon="fa-solid fa-right-to-bracket" />,
+          onclick: () => router.push(`/projects/${project.key}`),
+        }}
         icons={filteredIcons}
         key={project.key}
-        level={level[`${project.level.toLowerCase() as keyof typeof level}`]}
+        level={level[project.level.toLowerCase() as keyof typeof level]}
         summary={project.summary}
         title={project.name}
         topContributors={project.topContributors}
@@ -74,20 +114,9 @@ const SnapshotDetailsPage: React.FC = () => {
   }
 
   const renderChapterCard = (chapter: ChapterTypeGraphQL) => {
-    const params: string[] = ['updatedAt']
-    const filteredIcons = getFilteredIconsGraphql(chapter, params)
+    const filteredIcons = getFilteredIconsGraphql(chapter, ['updatedAt'])
     const formattedUrls = handleSocialUrls(chapter.relatedUrls)
 
-    const handleButtonClick = () => {
-      router.push(`/chapters/${chapter.key}`)
-    }
-
-    const SubmitButton = {
-      label: 'View Details',
-      icon: <FontAwesomeIconWrapper icon="fa-solid fa-right-to-bracket" />,
-      onclick: handleButtonClick,
-    }
-
     return (
       <Card
         key={chapter.key}
@@ -96,17 +125,18 @@ const SnapshotDetailsPage: React.FC = () => {
         summary={chapter.summary}
         icons={filteredIcons}
         topContributors={chapter.topContributors}
-        button={SubmitButton}
+        button={{
+          label: 'View Details',
+          icon: <FontAwesomeIconWrapper icon="fa-solid fa-right-to-bracket" />,
+          onclick: () => router.push(`/chapters/${chapter.key}`),
+        }}
         social={formattedUrls}
       />
     )
   }
 
-  if (isLoading) {
-    return <LoadingSpinner />
-  }
-
-  if (!isLoading && snapshot == null) {
+  if (isLoading) return <LoadingSpinner />
+  if (!snapshot) {
     return (
       <ErrorDisplay
         statusCode={404}
@@ -118,139 +148,104 @@ const SnapshotDetailsPage: React.FC = () => {
 
   return (
     <div className="mx-auto mt-16 min-h-screen max-w-6xl p-4">
+      {/* Header */}
       <div className="mb-8 rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
-        <div className="flex flex-wrap items-start justify-between gap-4">
-          <div>
-            <h1 className="mb-2 text-3xl font-bold text-gray-700 dark:text-gray-200">
-              {snapshot?.title}
-            </h1>
-            <div className="flex flex-wrap items-center gap-2 text-gray-600 dark:text-gray-300">
-              <div className="flex items-center">
-                <FontAwesomeIcon icon={faCalendar} className="mr-1 h-4 w-4" />
-                <span>
-                  {formatDate(snapshot?.startAt ?? '')} - {formatDate(snapshot?.endAt ?? '')}
-                </span>
-              </div>
-            </div>
-          </div>
+        <h1 className="mb-2 text-3xl font-bold text-gray-700 dark:text-gray-200">
+          {snapshot.title}
+        </h1>
+        <div className="flex items-center text-gray-600 dark:text-gray-300">
+          <FontAwesomeIcon icon={faCalendar} className="mr-1 h-4 w-4" />
+          <span>
+            {formatDate(snapshot.startAt)} - {formatDate(snapshot.endAt)}
+          </span>
         </div>
       </div>
 
-      <div className="mb-8 rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
-        <h2 className="mb-4 text-2xl font-semibold text-gray-700 dark:text-gray-200">
-          Snapshot Summary
-        </h2>
-        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-          {/* Users */}
-          <div className="flex items-center rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
-            <FontAwesomeIcon icon={faUsers} className="mr-3 h-6 w-6 text-blue-500" />
-            <div>
-              <h3 className="text-lg font-semibold text-gray-700 dark:text-gray-200">10 Users</h3>
-              <p className="text-sm text-gray-500 dark:text-gray-400">
-                e.g., abhayymishraaaa, vithobasatish
-              </p>
-            </div>
-          </div>
-
-          {/* Projects */}
-          <div className="flex items-center rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
-            <FontAwesomeIcon icon={faFolder} className="mr-3 h-6 w-6 text-green-500" />
-            <div>
-              <h3 className="text-lg font-semibold text-gray-700 dark:text-gray-200">3 Projects</h3>
-              <p className="text-sm text-gray-500 dark:text-gray-400">
-                e.g., OWASP Top 10, ProdSecMan
-              </p>
-            </div>
-          </div>
-
-          {/* Chapters */}
-          <div className="flex items-center rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
-            <FontAwesomeIcon icon={faBook} className="mr-3 h-6 w-6 text-purple-500" />
-            <div>
-              <h3 className="text-lg font-semibold text-gray-700 dark:text-gray-200">
-                14 Chapters
-              </h3>
-              <p className="text-sm text-gray-500 dark:text-gray-400">
-                e.g., OWASP Oshawa, Juiz de Fora
-              </p>
-            </div>
-          </div>
-
-          {/* Issues */}
-          <div className="flex items-center rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
-            <FontAwesomeIcon icon={faBug} className="mr-3 h-6 w-6 text-red-500" />
-            <div>
-              <h3 className="text-lg font-semibold text-gray-700 dark:text-gray-200">422 Issues</h3>
-              <p className="text-sm text-gray-500 dark:text-gray-400">e.g., Duplicate Components</p>
-            </div>
-          </div>
-
-          {/* Releases */}
-          <div className="flex items-center rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
-            <FontAwesomeIcon icon={faTag} className="mr-3 h-6 w-6 text-yellow-500" />
-            <div>
-              <h3 className="text-lg font-semibold text-gray-700 dark:text-gray-200">
-                71 Releases
-              </h3>
-              <p className="text-sm text-gray-500 dark:text-gray-400">e.g., 2.0.1, v5.0.1</p>
-            </div>
+      {/* Summary */}
+      {summaryData && (
+        <div className="mb-8 rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+          <h2 className="mb-4 text-2xl font-semibold text-gray-700 dark:text-gray-200">
+            Snapshot Summary
+          </h2>
+          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {[
+              { label: 'Users', data: summaryData.users, icon: faUsers },
+              { label: 'Projects', data: summaryData.projects, icon: faFolder },
+              { label: 'Chapters', data: summaryData.chapters, icon: faBook },
+              { label: 'Issues', data: summaryData.issues, icon: faBug },
+              { label: 'Releases', data: summaryData.releases, icon: faTag },
+            ].map(({ label, data, icon }) => (
+              <div
+                key={label}
+                className="flex items-start gap-4 rounded-lg border p-4 shadow-sm dark:border-gray-700"
+              >
+                <FontAwesomeIcon icon={icon} className="h-6 w-6 text-blue-500" />
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-100">
+                    {data.count} {label}
+                  </h3>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    e.g., {data.examples.join(', ')}
+                  </p>
+                </div>
+              </div>
+            ))}
           </div>
         </div>
-      </div>
+      )}
 
-      {snapshot?.newChapters && snapshot?.newChapters.length > 0 && (
+      {/* Chapters */}
+      {snapshot.newChapters?.length > 0 && (
         <div className="mb-8">
           <h2 className="mb-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
             New Chapters
           </h2>
-          <div className="mb-4">
-            <ChapterMapWrapper
-              geoLocData={snapshot?.newChapters}
-              showLocal={false}
-              style={{ height: '400px', width: '100%', zIndex: '0' }}
-            />
-          </div>
-          <div className="flex flex-col gap-6">
-            {snapshot?.newChapters.filter((chapter) => chapter.isActive).map(renderChapterCard)}
+          <ChapterMapWrapper
+            geoLocData={snapshot.newChapters}
+            showLocal={false}
+            style={{ height: '400px', width: '100%' }}
+          />
+          <div className="mt-6 flex flex-col gap-6">
+            {snapshot.newChapters.filter((ch) => ch.isActive).map(renderChapterCard)}
           </div>
         </div>
       )}
 
-      {snapshot?.newProjects && snapshot?.newProjects.length > 0 && (
+      {/* Projects */}
+      {snapshot.newProjects?.length > 0 && (
         <div className="mb-8">
           <h2 className="mb-4 text-2xl font-semibold text-gray-700 dark:text-gray-200">
             New Projects
           </h2>
           <div className="flex flex-col gap-6">
-            {snapshot?.newProjects.filter((project) => project.isActive).map(renderProjectCard)}
+            {snapshot.newProjects.filter((p) => p.isActive).map(renderProjectCard)}
           </div>
         </div>
       )}
 
-      {snapshot?.newReleases && snapshot?.newReleases.length > 0 && (
+      {/* Releases */}
+      {snapshot.newReleases?.length > 0 && (
         <div className="mb-8">
-          <h2 className="mb-4 text-2xl font-semibold">New Releases</h2>
+          <h2 className="mb-4 text-2xl font-semibold text-gray-700 dark:text-gray-200">
+            New Releases
+          </h2>
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-            {snapshot?.newReleases.map((release, index) => (
+            {snapshot.newReleases.map((release, index) => (
               <div
                 key={`${release.tagName}-${index}`}
                 className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md dark:border-gray-700 dark:bg-gray-800"
               >
                 <div className="p-4">
-                  <div className="mb-3 flex items-center justify-between">
-                    <div className="truncate text-lg font-medium text-gray-700 dark:text-gray-200">
-                      {release.name}
-                    </div>
+                  <div className="mb-3 truncate text-lg font-medium text-gray-700 dark:text-gray-200">
+                    {release.name}
                   </div>
-                  <div className="mb-3 flex items-center gap-2">
-                    <span className="truncate text-sm font-medium text-gray-700 dark:text-gray-300">
-                      {release.projectName}
-                    </span>
-                    <span className="shrink-0 px-2.5 py-0.5 text-xs font-medium text-gray-500 dark:bg-transparent dark:text-blue-200">
+                  <div className="mb-3 flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
+                    <span>{release.projectName}</span>
+                    <span className="px-2.5 py-0.5 text-xs font-medium text-gray-500 dark:text-blue-200">
                       {release.tagName}
                     </span>
                   </div>
-                  <div className="flex items-center text-xs text-gray-500 dark:text-gray-400">
+                  <div className="text-xs text-gray-500 dark:text-gray-400">
                     <FontAwesomeIcon icon={faCalendar} className="mr-1.5 h-3 w-3" />
                     Released: {formatDate(release.publishedAt)}
                   </div>

From eb190a23c812a2536f576d9fc6528cf4b1f8f568 Mon Sep 17 00:00:00 2001
From: Yashgupta9330 <yaahg342@gmail.com>
Date: Fri, 18 Apr 2025 22:36:10 +0530
Subject: [PATCH 5/9] fixed

---
 frontend/src/app/snapshots/[id]/page.tsx | 142 +++++++++++++----------
 1 file changed, 81 insertions(+), 61 deletions(-)

diff --git a/frontend/src/app/snapshots/[id]/page.tsx b/frontend/src/app/snapshots/[id]/page.tsx
index fb05195fe..ca4cdad16 100644
--- a/frontend/src/app/snapshots/[id]/page.tsx
+++ b/frontend/src/app/snapshots/[id]/page.tsx
@@ -68,43 +68,48 @@ const parseSnapshotSummary = (summary: string): ParsedSummary => {
 }
 
 const SnapshotDetailsPage: React.FC = () => {
-  const params = useParams()
-  const snapshotKey = params?.id as string
-
+  const { id: snapshotKey } = useParams()
   const [snapshot, setSnapshot] = useState<SnapshotDetailsProps | null>(null)
-  const [isLoading, setIsLoading] = useState(true)
-  const [summaryData, setSummaryData] = useState<ParsedSummary | null>(null)
+  const [isLoading, setIsLoading] = useState<boolean>(true)
   const router = useRouter()
+  const [summaryData, setSummaryData] = useState<ParsedSummary | null>(null)
 
-  const { data, error } = useQuery(GET_SNAPSHOT_DETAILS, {
+  const { data: graphQLData, error: graphQLRequestError } = useQuery(GET_SNAPSHOT_DETAILS, {
     variables: { key: snapshotKey },
   })
 
   useEffect(() => {
-    if (data) {
-      setSnapshot(data.snapshot)
-      setSummaryData(parseSnapshotSummary(data.snapshot.summary))
+    if (graphQLData) {
+      setSnapshot(graphQLData.snapshot)
+      setSummaryData(parseSnapshotSummary(graphQLData.snapshot.summary))
+      setIsLoading(false)
     }
-    if (error) {
-      handleAppError(error)
+    if (graphQLRequestError) {
+      handleAppError(graphQLRequestError)
+      setIsLoading(false)
     }
-    setIsLoading(false)
-  }, [data, error])
+  }, [graphQLData, graphQLRequestError, snapshotKey])
 
   const renderProjectCard = (project: ProjectTypeGraphql) => {
     const params: string[] = ['forksCount', 'starsCount', 'contributorsCount']
     const filteredIcons = getFilteredIconsGraphql(project, params)
 
+    const handleButtonClick = () => {
+      router.push(`/projects/${project.key}`)
+    }
+
+    const SubmitButton = {
+      label: 'View Details',
+      icon: <FontAwesomeIconWrapper icon="fa-solid fa-right-to-bracket" />,
+      onclick: handleButtonClick,
+    }
+
     return (
       <Card
-        button={{
-          label: 'View Details',
-          icon: <FontAwesomeIconWrapper icon="fa-solid fa-right-to-bracket" />,
-          onclick: () => router.push(`/projects/${project.key}`),
-        }}
+        button={SubmitButton}
         icons={filteredIcons}
         key={project.key}
-        level={level[project.level.toLowerCase() as keyof typeof level]}
+        level={level[`${project.level.toLowerCase() as keyof typeof level}`]}
         summary={project.summary}
         title={project.name}
         topContributors={project.topContributors}
@@ -114,9 +119,20 @@ const SnapshotDetailsPage: React.FC = () => {
   }
 
   const renderChapterCard = (chapter: ChapterTypeGraphQL) => {
-    const filteredIcons = getFilteredIconsGraphql(chapter, ['updatedAt'])
+    const params: string[] = ['updatedAt']
+    const filteredIcons = getFilteredIconsGraphql(chapter, params)
     const formattedUrls = handleSocialUrls(chapter.relatedUrls)
 
+    const handleButtonClick = () => {
+      router.push(`/chapters/${chapter.key}`)
+    }
+
+    const SubmitButton = {
+      label: 'View Details',
+      icon: <FontAwesomeIconWrapper icon="fa-solid fa-right-to-bracket" />,
+      onclick: handleButtonClick,
+    }
+
     return (
       <Card
         key={chapter.key}
@@ -125,18 +141,17 @@ const SnapshotDetailsPage: React.FC = () => {
         summary={chapter.summary}
         icons={filteredIcons}
         topContributors={chapter.topContributors}
-        button={{
-          label: 'View Details',
-          icon: <FontAwesomeIconWrapper icon="fa-solid fa-right-to-bracket" />,
-          onclick: () => router.push(`/chapters/${chapter.key}`),
-        }}
+        button={SubmitButton}
         social={formattedUrls}
       />
     )
   }
 
-  if (isLoading) return <LoadingSpinner />
-  if (!snapshot) {
+  if (isLoading) {
+    return <LoadingSpinner />
+  }
+
+  if (!isLoading && snapshot == null) {
     return (
       <ErrorDisplay
         statusCode={404}
@@ -148,20 +163,24 @@ const SnapshotDetailsPage: React.FC = () => {
 
   return (
     <div className="mx-auto mt-16 min-h-screen max-w-6xl p-4">
-      {/* Header */}
       <div className="mb-8 rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
-        <h1 className="mb-2 text-3xl font-bold text-gray-700 dark:text-gray-200">
-          {snapshot.title}
-        </h1>
-        <div className="flex items-center text-gray-600 dark:text-gray-300">
-          <FontAwesomeIcon icon={faCalendar} className="mr-1 h-4 w-4" />
-          <span>
-            {formatDate(snapshot.startAt)} - {formatDate(snapshot.endAt)}
-          </span>
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          <div>
+            <h1 className="mb-2 text-3xl font-bold text-gray-700 dark:text-gray-200">
+              {snapshot?.title}
+            </h1>
+            <div className="flex flex-wrap items-center gap-2 text-gray-600 dark:text-gray-300">
+              <div className="flex items-center">
+                <FontAwesomeIcon icon={faCalendar} className="mr-1 h-4 w-4" />
+                <span>
+                  {formatDate(snapshot?.startAt ?? '')} - {formatDate(snapshot?.endAt ?? '')}
+                </span>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
 
-      {/* Summary */}
       {summaryData && (
         <div className="mb-8 rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
           <h2 className="mb-4 text-2xl font-semibold text-gray-700 dark:text-gray-200">
@@ -194,58 +213,59 @@ const SnapshotDetailsPage: React.FC = () => {
         </div>
       )}
 
-      {/* Chapters */}
-      {snapshot.newChapters?.length > 0 && (
+      {snapshot?.newChapters && snapshot?.newChapters.length > 0 && (
         <div className="mb-8">
           <h2 className="mb-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
             New Chapters
           </h2>
-          <ChapterMapWrapper
-            geoLocData={snapshot.newChapters}
-            showLocal={false}
-            style={{ height: '400px', width: '100%' }}
-          />
-          <div className="mt-6 flex flex-col gap-6">
-            {snapshot.newChapters.filter((ch) => ch.isActive).map(renderChapterCard)}
+          <div className="mb-4">
+            <ChapterMapWrapper
+              geoLocData={snapshot?.newChapters}
+              showLocal={false}
+              style={{ height: '400px', width: '100%', zIndex: '0' }}
+            />
+          </div>
+          <div className="flex flex-col gap-6">
+            {snapshot?.newChapters.filter((chapter) => chapter.isActive).map(renderChapterCard)}
           </div>
         </div>
       )}
 
-      {/* Projects */}
-      {snapshot.newProjects?.length > 0 && (
+      {snapshot?.newProjects && snapshot?.newProjects.length > 0 && (
         <div className="mb-8">
           <h2 className="mb-4 text-2xl font-semibold text-gray-700 dark:text-gray-200">
             New Projects
           </h2>
           <div className="flex flex-col gap-6">
-            {snapshot.newProjects.filter((p) => p.isActive).map(renderProjectCard)}
+            {snapshot?.newProjects.filter((project) => project.isActive).map(renderProjectCard)}
           </div>
         </div>
       )}
 
-      {/* Releases */}
-      {snapshot.newReleases?.length > 0 && (
+      {snapshot?.newReleases && snapshot?.newReleases.length > 0 && (
         <div className="mb-8">
-          <h2 className="mb-4 text-2xl font-semibold text-gray-700 dark:text-gray-200">
-            New Releases
-          </h2>
+          <h2 className="mb-4 text-2xl font-semibold">New Releases</h2>
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-            {snapshot.newReleases.map((release, index) => (
+            {snapshot?.newReleases.map((release, index) => (
               <div
                 key={`${release.tagName}-${index}`}
                 className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md dark:border-gray-700 dark:bg-gray-800"
               >
                 <div className="p-4">
-                  <div className="mb-3 truncate text-lg font-medium text-gray-700 dark:text-gray-200">
-                    {release.name}
+                  <div className="mb-3 flex items-center justify-between">
+                    <div className="truncate text-lg font-medium text-gray-700 dark:text-gray-200">
+                      {release.name}
+                    </div>
                   </div>
-                  <div className="mb-3 flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
-                    <span>{release.projectName}</span>
-                    <span className="px-2.5 py-0.5 text-xs font-medium text-gray-500 dark:text-blue-200">
+                  <div className="mb-3 flex items-center gap-2">
+                    <span className="truncate text-sm font-medium text-gray-700 dark:text-gray-300">
+                      {release.projectName}
+                    </span>
+                    <span className="shrink-0 px-2.5 py-0.5 text-xs font-medium text-gray-500 dark:bg-transparent dark:text-blue-200">
                       {release.tagName}
                     </span>
                   </div>
-                  <div className="text-xs text-gray-500 dark:text-gray-400">
+                  <div className="flex items-center text-xs text-gray-500 dark:text-gray-400">
                     <FontAwesomeIcon icon={faCalendar} className="mr-1.5 h-3 w-3" />
                     Released: {formatDate(release.publishedAt)}
                   </div>

From 3965f774cae3e4a0092a9f5d2129527fbb26ff1a Mon Sep 17 00:00:00 2001
From: Yashgupta9330 <yaahg342@gmail.com>
Date: Fri, 18 Apr 2025 23:08:27 +0530
Subject: [PATCH 6/9] fixed

---
 .../unit/pages/SnapshotDetails.test.tsx       | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/frontend/__tests__/unit/pages/SnapshotDetails.test.tsx b/frontend/__tests__/unit/pages/SnapshotDetails.test.tsx
index e5256e146..68049ffda 100644
--- a/frontend/__tests__/unit/pages/SnapshotDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/SnapshotDetails.test.tsx
@@ -99,6 +99,25 @@ describe('SnapshotDetailsPage', () => {
     })
   })
 
+  test('renders snapshot summary correctly', async () => {
+    ;(useQuery as jest.Mock).mockReturnValue({
+      data: mockSnapshotDetailsData,
+      error: null,
+    })
+
+    render(<SnapshotDetailsPage />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Snapshot Summary')).toBeInTheDocument()
+    })
+
+    expect(screen.getByText('10 Users')).toBeInTheDocument()
+    expect(screen.getByText('3 Projects')).toBeInTheDocument()
+    expect(screen.getByText('14 Chapters')).toBeInTheDocument()
+    expect(screen.getByText('422 Issues')).toBeInTheDocument()
+    expect(screen.getByText('71 Releases')).toBeInTheDocument()
+  })
+
   test('navigates to project page when project card is clicked', async () => {
     ;(useQuery as jest.Mock).mockReturnValue({
       data: mockSnapshotDetailsData,

From 9be431d3fcf6d4a7983ff45d418ed03ef0dd5d72 Mon Sep 17 00:00:00 2001
From: Yashgupta9330 <yaahg342@gmail.com>
Date: Fri, 18 Apr 2025 23:29:17 +0530
Subject: [PATCH 7/9] fixed

---
 .../unit/pages/SnapshotDetails.test.tsx       | 67 +++++++++++++------
 1 file changed, 48 insertions(+), 19 deletions(-)

diff --git a/frontend/__tests__/unit/pages/SnapshotDetails.test.tsx b/frontend/__tests__/unit/pages/SnapshotDetails.test.tsx
index 68049ffda..031808e29 100644
--- a/frontend/__tests__/unit/pages/SnapshotDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/SnapshotDetails.test.tsx
@@ -79,6 +79,54 @@ describe('SnapshotDetailsPage', () => {
     expect(screen.getByText('New Releases')).toBeInTheDocument()
   })
 
+  test('correctly parses and displays summary data', async () => {
+    // Create mock data with specific summary text
+    const summaryText =
+      'Snapshot Summary: 10 users (e.g., abhayymishraaaa, vithobasatish); 3 projects (e.g., OWASP Top 10 for Business Logic Abuse, OWASP ProdSecMan); 14 chapters (e.g., OWASP Oshawa, OWASP Juiz de Fora); 422 issues (e.g., Duplicate Components, Cyclonedx seems to ignore some configuration options); 71 releases (e.g., 2.0.1, v5.0.1)'
+
+    const mockDataWithSummary = {
+      snapshot: {
+        ...mockSnapshotDetailsData.snapshot,
+        summary: summaryText,
+      },
+    }
+
+    ;(useQuery as jest.Mock).mockReturnValue({
+      data: mockDataWithSummary,
+      error: null,
+    })
+
+    render(<SnapshotDetailsPage />)
+
+    // Wait for the page to render
+    await waitFor(() => {
+      expect(screen.getByText('New Snapshot')).toBeInTheDocument()
+    })
+
+    // Check that summary section exists
+    expect(screen.getByText('Snapshot Summary')).toBeInTheDocument()
+
+    // Check for correctly parsed user count
+    expect(screen.getByText('10 Users')).toBeInTheDocument()
+    expect(screen.getByText(/abhayymishraaaa/)).toBeInTheDocument()
+
+    // Check for correctly parsed project count
+    expect(screen.getByText('3 Projects')).toBeInTheDocument()
+    expect(screen.getByText(/OWASP Top 10 for Business Logic Abuse/)).toBeInTheDocument()
+
+    // Check for correctly parsed chapter count
+    expect(screen.getByText('14 Chapters')).toBeInTheDocument()
+    expect(screen.getByText(/OWASP Oshawa/)).toBeInTheDocument()
+
+    // Check for correctly parsed issues count
+    expect(screen.getByText('422 Issues')).toBeInTheDocument()
+    expect(screen.getByText(/Duplicate Components/)).toBeInTheDocument()
+
+    // Check for correctly parsed releases count
+    expect(screen.getByText('71 Releases')).toBeInTheDocument()
+    expect(screen.getByText(/2\.0\.1/)).toBeInTheDocument()
+  })
+
   test('renders error message when GraphQL request fails', async () => {
     ;(useQuery as jest.Mock).mockReturnValue({
       data: null,
@@ -99,25 +147,6 @@ describe('SnapshotDetailsPage', () => {
     })
   })
 
-  test('renders snapshot summary correctly', async () => {
-    ;(useQuery as jest.Mock).mockReturnValue({
-      data: mockSnapshotDetailsData,
-      error: null,
-    })
-
-    render(<SnapshotDetailsPage />)
-
-    await waitFor(() => {
-      expect(screen.getByText('Snapshot Summary')).toBeInTheDocument()
-    })
-
-    expect(screen.getByText('10 Users')).toBeInTheDocument()
-    expect(screen.getByText('3 Projects')).toBeInTheDocument()
-    expect(screen.getByText('14 Chapters')).toBeInTheDocument()
-    expect(screen.getByText('422 Issues')).toBeInTheDocument()
-    expect(screen.getByText('71 Releases')).toBeInTheDocument()
-  })
-
   test('navigates to project page when project card is clicked', async () => {
     ;(useQuery as jest.Mock).mockReturnValue({
       data: mockSnapshotDetailsData,

From cc724e81ac67d87cb44faade8dbd3451545fa0d1 Mon Sep 17 00:00:00 2001
From: Yashgupta9330 <yaahg342@gmail.com>
Date: Fri, 18 Apr 2025 23:36:30 +0530
Subject: [PATCH 8/9] added

---
 frontend/__tests__/unit/data/mockSnapshotData.ts    |  2 ++
 .../__tests__/unit/pages/SnapshotDetails.test.tsx   | 13 +------------
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/frontend/__tests__/unit/data/mockSnapshotData.ts b/frontend/__tests__/unit/data/mockSnapshotData.ts
index b420ab141..d92832aff 100644
--- a/frontend/__tests__/unit/data/mockSnapshotData.ts
+++ b/frontend/__tests__/unit/data/mockSnapshotData.ts
@@ -6,6 +6,8 @@ export const mockSnapshotDetailsData = {
     createdAt: '2025-03-01T22:00:34.361937+00:00',
     startAt: '2024-12-01T00:00:00+00:00',
     endAt: '2024-12-31T22:00:30+00:00',
+    summary:
+      'Snapshot Summary: 10 users (e.g., abhayymishraaaa, vithobasatish); 3 projects (e.g., OWASP Top 10 for Business Logic Abuse, OWASP ProdSecMan); 14 chapters (e.g., OWASP Oshawa, OWASP Juiz de Fora); 422 issues (e.g., Duplicate Components, Cyclonedx seems to ignore some configuration options); 71 releases (e.g., 2.0.1, v5.0.1)',
     status: 'completed',
     errorMessage: '',
     newReleases: [
diff --git a/frontend/__tests__/unit/pages/SnapshotDetails.test.tsx b/frontend/__tests__/unit/pages/SnapshotDetails.test.tsx
index 031808e29..4f5692c46 100644
--- a/frontend/__tests__/unit/pages/SnapshotDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/SnapshotDetails.test.tsx
@@ -80,19 +80,8 @@ describe('SnapshotDetailsPage', () => {
   })
 
   test('correctly parses and displays summary data', async () => {
-    // Create mock data with specific summary text
-    const summaryText =
-      'Snapshot Summary: 10 users (e.g., abhayymishraaaa, vithobasatish); 3 projects (e.g., OWASP Top 10 for Business Logic Abuse, OWASP ProdSecMan); 14 chapters (e.g., OWASP Oshawa, OWASP Juiz de Fora); 422 issues (e.g., Duplicate Components, Cyclonedx seems to ignore some configuration options); 71 releases (e.g., 2.0.1, v5.0.1)'
-
-    const mockDataWithSummary = {
-      snapshot: {
-        ...mockSnapshotDetailsData.snapshot,
-        summary: summaryText,
-      },
-    }
-
     ;(useQuery as jest.Mock).mockReturnValue({
-      data: mockDataWithSummary,
+      data: mockSnapshotDetailsData,
       error: null,
     })
 

From d89aede8a723e0bfc0237247d4e977b39730b883 Mon Sep 17 00:00:00 2001
From: Yashgupta9330 <yaahg342@gmail.com>
Date: Fri, 18 Apr 2025 23:45:59 +0530
Subject: [PATCH 9/9] added

---
 cspell/custom-dict.txt | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/cspell/custom-dict.txt b/cspell/custom-dict.txt
index a41738a56..845f7bcb3 100644
--- a/cspell/custom-dict.txt
+++ b/cspell/custom-dict.txt
@@ -1,4 +1,7 @@
 a2eeef
+abhayymishraaaa
+vithobasatish
+Juiz
 Agsoc
 Aichi
 Aissue
@@ -20,6 +23,7 @@ csrfguard
 csrfprotector
 csrftoken
 cva
+Cyclonedx
 dismissable
 DRF
 dsn