Repository: AquaStark/Aqua-Stark
Pull request #47: Breeding Laboratory Page
Author: login: Elite-tch
Created: 2025-03-23T17:40:14Z | Merged: 2025-03-30T00:56:43Z

## 🔥 Pull Request: [I implemented Breeding Laboratory Page]

### 📌 Related Issue  
Closes #32  

### 📝 Description  
_i create Breeding Laboratory Page . 
- i created client/src/pages/breeding-laboratory.tsx
-Added a new file mock-breeding-laboratory.ts to hold all static and dynamic data used in the breeding-laboratory.tsxcomponent.
- Made the component more modular and reusable by decoupling data from the UI.
- Simplified the component logic by separating concerns (data management vs. UI rendering).

### ✅ Changes Made  
- [ ] Backend  
- [x] Frontend   

### 📷 Evidence  
- **Frontend:** Attach a screenshot.  

![Screenshot (494)](https://github.com/user-attachments/assets/df2a8064-3e8d-45e8-a862-c2a6ab0ce8b6)
![Screenshot (495)](https://github.com/user-attachments/assets/562a0f77-a61b-477c-8604-8eccba7cc39c
![Screenshot (496)](https://github.com/user-attachments/assets/38418411-04d1-49c7-a9d7-28fa280474e7)
- **Backend:** Attach an image of the test execution results.
)

### 🚀 Additional Notes  
_Any extra comments about this PR (if applicable)._  



Linked issue #32: [Frontend] Discoveries Tab Implementation (Breeding Laboratory Page)
## 📜 [Frontend] Discoveries Tab Implementation (Breeding Laboratory Page)  

### 📝 Description  
The **Breeding Laboratory** page has not been implemented yet, but multiple contributors will work on it simultaneously. This issue focuses specifically on the **Discoveries** tab. Since the main page does not exist, the first merged PR will establish the structure (`breeding-laboratory.tsx`).  

If this issue is merged first, it must create the **base page** and set up the tab navigation. If the page already exists due to another merged issue, contributors must **work within the existing structure** and add only the **Discoveries** tab functionality.  

### ✅ Tasks  

#### **General Setup (If Page Does Not Exist)**  
- [ ] Create `breeding-laboratory.tsx` inside `src/app/`.  
- [ ] Implement the **tab navigation** for:  
  - [ ] **Breeding** (Handled in a separate issue).  
  - [ ] **Genetics** (Handled in a separate issue).  
  - [ ] **Discoveries** (This issue).  
  - [ ] **Genealogy** (Handled in a separate issue).  
- [ ] Use **@/** for importing reusable components.  

#### **Discoveries Tab Functionality**  
- [ ] Implement the **Breeding Discoveries** header, displaying:  
  - [ ] **Total Discoveries** count.  
  - [ ] **Rare+ Discoveries** count.  
  - [ ] **Special Traits** count.  
  - [ ] **Completion Progress Bar (% of discoveries completed).**  

- [ ] Implement the **Discovery Registry**, displaying:  
  - [ ] Fish image in a transparent water orb.  
  - [ ] Fish name and rarity.  
  - [ ] Parent fish names.  
  - [ ] Traits of the discovered fish (Color, Pattern, Fins, Size, Special Traits).  
  - [ ] Discovery date.  
  - [ ] **"View Details"** button for each fish.  

- [ ] Implement the **Undiscovered Species** section, displaying:  
  - [ ] "Undiscovered Species" placeholder card.  
  - [ ] Hint text (e.g., "Try breeding fish with special traits").  
  - [ ] **"Research"** button.  

#### **Interactivity & Styling**  
- [ ] Reuse the **existing animated bubble background**.  
- [ ] All animations must look exactly like in the attached video.  
- [ ] Ensure all buttons match the design and are visually consistent.  

#### **Mock Data**  
- [ ] Create/update the mock data file: `src/data/mock-breeding-laboratory.ts`.  
- [ ] Define sample data for:  
  - [ ] Breeding discoveries.  
  - [ ] Undiscovered species hints.  

### 📸 Images  
https://drive.google.com/file/d/1GXnh9HlNjS8n21rF9mq4j3qDFf9nw_Ci/view?usp=sharing

### 🔗 Resources  
- [[Frontend README](https://github.com/AquaStark/Aqua-Stark-V.2/blob/main/client/README.md)](https://github.com/AquaStark/Aqua-Stark-V.2/blob/main/client/README.md)  
- **Use `@/` for importing reusable components.**  
- **Mock data must be stored in `src/data/mock-breeding-laboratory.ts`.**  

### 🏷️ Additional Notes  
- The **bubble animation** already exists and must be reused.  
- **Do not add a footer** to this page.  
- All components **must be reusable**.  
- **All animations must look exactly like in the attached video.**  
- **If the main page (`breeding-laboratory.tsx`) does not exist yet, this issue should create it. Otherwise, work within the existing structure.**
Linked issue comments: user: login: kocohira
created_at: 2025-03-20T23:35:33Z
body: Can I try solving this issue?
author_association: NONE
user: login: Clement-coder
created_at: 2025-03-21T19:28:15Z
body: May I take this issue on?
author_association: NONE
user: login: Elite-tch
created_at: 2025-03-22T13:40:25Z
body: Is this issue still available?
ETA 12hrs
author_association: CONTRIBUTOR

Diff:
diff --git a/client/package-lock.json b/client/package-lock.json
index fbe2d96c..ec8fbc66 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -5668,7 +5668,6 @@
       }
     },
     "node_modules/sucrase": {
-      "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
       "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
       "license": "MIT",
diff --git a/client/src/components/breeding-laboratory/discoveries-page.tsx b/client/src/components/breeding-laboratory/discoveries-page.tsx
new file mode 100644
index 00000000..35d26cd7
--- /dev/null
+++ b/client/src/components/breeding-laboratory/discoveries-page.tsx
@@ -0,0 +1,47 @@
+import { DiscoveriesStats } from "./discoveries-stats"
+import { DiscoveryRegistry } from "./discovery-registry";
+import { UndiscoveredSpecies } from "./undiscovered-species";
+import { Filter, Search } from "lucide-react";
+
+import { discoveriesData, undiscoveredSpeciesData } from "@/data/breeding-data";
+const stats = [
+    { title: 'Total Discoveries', value: discoveriesData.length },
+    { 
+      title: 'Rare+ Discoveries', 
+      value: discoveriesData.filter(d => d.rarity === 'Rare' || d.rarity === 'Epic').length 
+    },
+    { 
+      title: 'Special Traits', 
+      value: discoveriesData.filter(d => d.traits.includes('Special')).length 
+    },
+    { 
+      title: 'Completion', 
+      value: `${Math.round((discoveriesData.length / (discoveriesData.length + undiscoveredSpeciesData.length)) * 100)}%` 
+    }
+  ];
+
+export default function DiscoveriesPage() {
+
+    return (
+        <div>
+             <div className="flex items-center justify-between my-8">
+          <h2 className="text-gray-100 text-lg">Breeding Discoveries</h2>
+          <div className="flex justify-center items-center gap-8">
+            <div className="bg-blue-600/30 flex items-center px-2 py-1 gap-6 rounded border border-blue-600/60">
+              <input type="text" placeholder="Search discoveries" className="bg-transparent px-2 py-1" />
+              <Search size={16} />
+            </div>
+            <div className="relative">
+              <div className="flex items-center rounded gap-2 bg-blue-900/40 px-3 py-2 cursor-pointer hover:bg-blue-800/60 transition-colors duration-200">
+                <Filter size={16} />
+                <span>Filter</span>
+              </div>
+            </div>
+          </div>
+        </div>
+<DiscoveriesStats stats={stats} />
+<DiscoveryRegistry discoveries={discoveriesData} />
+<UndiscoveredSpecies species={undiscoveredSpeciesData} />
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/breeding-laboratory/discoveries-stats.tsx b/client/src/components/breeding-laboratory/discoveries-stats.tsx
new file mode 100644
index 00000000..3d7cef62
--- /dev/null
+++ b/client/src/components/breeding-laboratory/discoveries-stats.tsx
@@ -0,0 +1,24 @@
+interface StatItem {
+    title: string;
+    value: string | number;
+  }
+  
+  interface DiscoveriesStatsProps {
+    stats: StatItem[];
+  }
+  
+  export function DiscoveriesStats({ stats }: DiscoveriesStatsProps) {
+    return (
+      <div className="bg-blue-900/40 backdrop-blur-sm px-4 py-4 rounded flex items-center justify-between gap-6">
+        {stats.map((stat, index) => (
+          <div
+            key={index}
+            className="bg-blue-600/30 backdrop-blur-sm rounded w-full py-4"
+          >
+            <h3 className="text-center text-md">{stat.title}</h3>
+            <p className="text-gray-100 text-center text-xl">{stat.value}</p>
+          </div>
+        ))}
+      </div>
+    );
+  }
\ No newline at end of file
diff --git a/client/src/components/breeding-laboratory/discovery-registry.tsx b/client/src/components/breeding-laboratory/discovery-registry.tsx
new file mode 100644
index 00000000..5ea13af4
--- /dev/null
+++ b/client/src/components/breeding-laboratory/discovery-registry.tsx
@@ -0,0 +1,54 @@
+import { FishTank } from "@/components/fish-tank";
+
+interface Discovery {
+  id: number;
+  date: string;
+  image: string;
+  name: string;
+  rarity: string;
+  parents: string;
+  traits: string;
+}
+
+interface DiscoveryRegistryProps {
+  discoveries: Discovery[];
+}
+
+export function DiscoveryRegistry({ discoveries }: DiscoveryRegistryProps) {
+  return (
+    <div className="bg-blue-900/40 backdrop-blur-sm px-4 py-4 rounded mt-8">
+      <h2 className="text-gray-100 text-lg">Discovery Registry</h2>
+      <div className="rounded p-4 mt-4 flex gap-6 justify-center items-center bg-blue-500/30 backdrop-blur-sm">
+        {discoveries.map((discovery) => (
+          <div key={discovery.id} className="shadow-xl hover:scale-105 transition-all duration-200 transform">
+            <div>
+              <div className="flex justify-end items-end text-end mr-3">
+                <h3 className="text-center bg-blue-900/40 px-3 py-1 rounded text-sm">{discovery.date}</h3>
+              </div>
+              <div>
+                <FishTank>
+                  <img src={discovery.image} className="w-36" />
+                </FishTank>
+                <div className="bg-blue-600/30 flex flex-col gap-4 p-4 rounded">
+                  <div className="flex items-center justify-between">
+                    <h4 className="text-gray-100">{discovery.name}</h4>
+                    <h5 className={`bg-${discovery.rarity === 'Epic' ? 'purple' : 'blue'}-900/40 w-fit px-3 py-1 text-sm rounded text-gray-200`}>
+                      {discovery.rarity}
+                    </h5>
+                  </div>
+                  <div>
+                    <h3 className="text-primary">Parents: <span className="text-gray-300 text-sm">{discovery.parents}</span></h3>
+                    <h3 className="text-primary">Traits: <span className="text-gray-300 text-sm">{discovery.traits}</span></h3>
+                  </div>
+                  <div className="flex justify-center items-center">
+                    <button className="bg-primary py-2 w-full rounded hover:bg-primary/70">View Details</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/breeding-laboratory/laboratory-header.tsx b/client/src/components/breeding-laboratory/laboratory-header.tsx
new file mode 100644
index 00000000..19c4f128
--- /dev/null
+++ b/client/src/components/breeding-laboratory/laboratory-header.tsx
@@ -0,0 +1,30 @@
+import { ArrowLeft, Beaker, Search } from "lucide-react";
+import { Link } from "react-router-dom";
+
+export function LaboratoryHeader() {
+  return (
+    <div className="bg-blue-900/40 backdrop-blur-sm px-3 py-4">
+      <div className="text-gray-200 flex items-center justify-between w-[85%] mx-auto">
+        <div className="flex items-center gap-4">
+          <Link to='/' className="flex itemes-center gap-2 text-sm">
+            <ArrowLeft size={20} /> Back to Game
+          </Link>
+          <h2 className="text-2xl font-semibold">Breeding Laboratory</h2>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <div className="bg-blue-600/30 flex items-center px-2 py-1 gap-6 rounded border border-blue-600/60">
+            <input type="text" placeholder="Search discoveries" className="bg-transparent px-2 py-1" />
+            <Search size={16} />
+          </div>
+
+          <div className="bg-purple-700 py-2 px-5 w-full rounded">
+            <button className="justify-center flex items-center gap-2">
+              <Beaker size={20} /> Lab Status
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/breeding-laboratory/laboratory-tabs.tsx b/client/src/components/breeding-laboratory/laboratory-tabs.tsx
new file mode 100644
index 00000000..61d3a9f8
--- /dev/null
+++ b/client/src/components/breeding-laboratory/laboratory-tabs.tsx
@@ -0,0 +1,51 @@
+import { Heart, Tangent, FileText, SatelliteDish } from "lucide-react";
+import { useState } from "react";
+import DiscoveriesPage from "./discoveries-page";
+type Tab = 'breeding' | 'genetics' | 'discoveries' | 'genealogy';
+
+interface TabItem {
+  id: Tab;
+  label: string;
+  icon: React.ReactNode;
+}
+
+export function LaboratoryTabs() {
+  const [activeTab, setActiveTab] = useState<Tab>('discoveries');
+
+  const tabs: TabItem[] = [
+    { id: 'breeding', label: 'Breeding', icon: <Heart size={14} /> },
+    { id: 'genetics', label: 'Genetics', icon: <Tangent size={14} /> },
+    { id: 'discoveries', label: 'Discoveries', icon: <SatelliteDish size={14} /> },
+    { id: 'genealogy', label: 'Genealogy', icon: <FileText size={14} /> },
+  ];
+
+  return (
+    <div>
+      <nav className="bg-blue-700 backdrop-blur-sm px-3 py-2 rounded-xl mt-8">
+      <div className="text-gray-300 text-md flex justify-between w-[90%] mx-auto">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            className={`py-1 flex-1 mx-2 text-xs md:text-sm font-normal rounded-lg transition-all duration-200 flex items-center justify-center gap-1 ${
+              activeTab === tab.id 
+                ? 'bg-blue-600 text-white' 
+                : 'bg-blue-700 text-blue-100 hover:bg-blue-600/70'
+            }`}
+            onClick={() => setActiveTab(tab.id)}
+          >
+            {tab.icon} {tab.label}
+          </button>
+        ))}
+      </div>
+     
+         
+    </nav>
+    {activeTab === "breeding" && <h4>hello breeding</h4>}
+          {activeTab === "genetics" && <h4>hello genetics</h4>}
+           {activeTab === "discoveries" && (
+                      <DiscoveriesPage />
+                    )}
+          {activeTab === "genealogy" && <h4>hello genealogy</h4>}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/breeding-laboratory/undiscovered-species.tsx b/client/src/components/breeding-laboratory/undiscovered-species.tsx
new file mode 100644
index 00000000..6218d13d
--- /dev/null
+++ b/client/src/components/breeding-laboratory/undiscovered-species.tsx
@@ -0,0 +1,48 @@
+import { Sparkles } from "lucide-react";
+
+interface UndiscoveredSpecies {
+  id: number;
+  name: string;
+  rarity: string;
+  hints: string;
+}
+
+interface UndiscoveredSpeciesProps {
+  species: UndiscoveredSpecies[];
+}
+
+export function UndiscoveredSpecies({ species }: UndiscoveredSpeciesProps) {
+  return (
+    <div className="bg-blue-900/40 backdrop-blur-sm px-4 py-4 rounded mt-8">
+      <h2 className="text-gray-100 text-lg">Undiscovered Species</h2>
+      <div className="rounded p-4 mt-4 flex gap-6 justify-center items-center bg-blue-500/30 backdrop-blur-sm">
+        {species.map((specimen) => (
+          <div key={specimen.id} className="shadow-xl">
+            <div>
+              <div className="flex justify-center items-center text-center flex-col gap-3 mb-3">
+                <div className="bg-blue-600/30 h-16 w-16 rounded-full flex justify-center items-center">
+                  <Sparkles className="text-primary" />
+                </div>
+                <h4 className="text-gray-100">{specimen.name}</h4>
+              </div>
+              <div className="bg-blue-600/30 flex flex-col gap-4 p-4 rounded">
+                <div className="flex items-center justify-between">
+                  <h4 className="text-gray-100">??</h4>
+                  <h5 className="bg-purple-900/40 w-fit px-3 py-1 text-sm rounded text-gray-200">
+                    {specimen.rarity}
+                  </h5>
+                </div>
+                <div>
+                  <h3 className="text-primary">Hints: <span className="text-gray-300 text-sm">{specimen.hints}</span></h3>
+                </div>
+                <div className="flex justify-center items-center">
+                  <button className="bg-purple-700 py-2 rounded hover:bg-purple-700/90 w-full">Research</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/data/breeding-data.ts b/client/src/data/breeding-data.ts
new file mode 100644
index 00000000..1101387f
--- /dev/null
+++ b/client/src/data/breeding-data.ts
@@ -0,0 +1,80 @@
+
+// dataStore.ts
+
+export const bubblesData = Array.from({ length: 20 }, (_, i) => ({
+    id: i,
+    size: Math.random() * 30 + 10,
+    left: Math.random() * 100,
+    animationDuration: Math.random() * 15 + 5,
+  }));
+  
+  export const backgroundBubblesData = Array.from({ length: 15 }, (_, i) => ({
+    id: i,
+    size: Math.random() * 60 + 40,
+    left: Math.random() * 100,
+    duration: Math.random() * 25 + 15,
+    delay: Math.random() * 10,
+    drift: (Math.random() - 0.5) * 100,
+  }));
+  
+  export const particlesData = Array.from({ length: 30 }, (_, i) => ({
+    id: i,
+    size: Math.random() * 3 + 1,
+    top: Math.random() * 100,
+    left: Math.random() * 100,
+    duration: Math.random() * 20 + 10,
+    delay: Math.random() * 5,
+    floatX: (Math.random() - 0.5) * 200,
+    floatY: (Math.random() - 0.5) * 200,
+  }));
+  
+  export const discoveriesData = [
+    {
+      id: 1,
+      date: "Discovered Apr 10, 2025",
+      image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/fish1-ioYn5CvkJkCHPwgx1jBGoqibnAu5to.png",
+      name: "Azure Driffer",
+      rarity: "Common",
+      parents: "Royal Crowntail Ems\\arald Whisker",
+      traits: "Gold, Metallic, Green, Medium",
+    },
+    {
+      id: 2,
+      date: "Discovered Apr 10, 2025",
+      image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/fish3-LOteAGqWGR4lDQ8VBBAlRSUByZL2KX.png",
+      name: "Azure Driffer",
+      rarity: "Epic",
+      parents: "Royal Crowntail Ems\\arald Whisker",
+      traits: "Gold, Metallic, Green, Medium",
+    },
+    {
+      id: 3,
+      date: "Discovered Apr 10, 2025",
+      image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/fish1-ioYn5CvkJkCHPwgx1jBGoqibnAu5to.png",
+      name: "Azure Driffer",
+      rarity: "Common",
+      parents: "Royal Crowntail Ems\\arald Whisker",
+      traits: "Gold, Metallic, Green, Medium",
+    },
+  ];
+  
+  export const undiscoveredSpeciesData = [
+    {
+      id: 1,
+      name: "Undiscovered Species",
+      rarity: "Unknown",
+      hints: "Try breeding fishes with species trait",
+    },
+    {
+      id: 2,
+      name: "Undiscovered Species",
+      rarity: "Unknown",
+      hints: "Try breeding fishes with species trait",
+    },
+    {
+      id: 3,
+      name: "Undiscovered Species",
+      rarity: "Unknown",
+      hints: "Try breeding fishes with species trait",
+    },
+  ];
\ No newline at end of file
diff --git a/client/src/pages/breeding-laboratory.tsx b/client/src/pages/breeding-laboratory.tsx
new file mode 100644
index 00000000..b1119203
--- /dev/null
+++ b/client/src/pages/breeding-laboratory.tsx
@@ -0,0 +1,82 @@
+"use client";
+import { useState } from "react";
+import { LaboratoryHeader } from "@/components/breeding-laboratory/laboratory-header";
+import { LaboratoryTabs } from "@/components/breeding-laboratory/laboratory-tabs";
+//import { DiscoveriesStats } from "@/components/breeding-laboratory/discoveries-stats";
+//import { DiscoveryRegistry } from "@/components/breeding-laboratory/discovery-registry";
+//import { UndiscoveredSpecies } from "@/components/breeding-laboratory/undiscovered-species";
+import { bubblesData, backgroundBubblesData, particlesData,  } from "@/data/breeding-data";
+
+export default function BreedingLaboratory() {
+  const [bubbles] = useState(bubblesData);
+  const [backgroundBubbles] = useState(backgroundBubblesData);
+  const [particles] = useState(particlesData);
+
+ 
+
+  return (
+    <div className="relative min-h-screen overflow-hidden bg-gradient-to-b from-blue-500 to-blue-700 animated-background">
+      {/* Background elements */}
+      <div className="water-movement"></div>
+
+      {backgroundBubbles.map((bubble) => (
+        <div
+          key={`bg-bubble-${bubble.id}`}
+          className="background-bubble"
+          style={{
+            width: `${bubble.size}px`,
+            height: `${bubble.size}px`,
+            left: `${bubble.left}%`,
+            bottom: "-100px",
+            "--duration": `${bubble.duration}s`,
+            "--delay": `${bubble.delay}s`,
+            "--drift": `${bubble.drift}px`,
+          } as React.CSSProperties}
+        />
+      ))}
+
+      {particles.map((particle) => (
+        <div
+          key={`particle-${particle.id}`}
+          className="floating-particle"
+          style={{
+            width: `${particle.size}px`,
+            height: `${particle.size}px`,
+            top: `${particle.top}%`,
+            left: `${particle.left}%`,
+            "--float-duration": `${particle.duration}s`,
+            "--float-delay": `${particle.delay}s`,
+            "--float-x": `${particle.floatX}px`,
+            "--float-y": `${particle.floatY}px`,
+          } as React.CSSProperties}
+        />
+      ))}
+
+      {bubbles.map((bubble) => (
+        <div
+          key={bubble.id}
+          className="bubble"
+          style={{
+            width: `${bubble.size}px`,
+            height: `${bubble.size}px`,
+            left: `${bubble.left}%`,
+            "--duration": `${bubble.animationDuration}s`,
+          } as React.CSSProperties}
+        />
+      ))}
+
+      <LaboratoryHeader />
+      
+      <div className="w-[90%] mx-auto text-gray-300">
+        <LaboratoryTabs />
+        </div>
+
+      {/* Footer */}
+      <footer className="relative z-10 mt-8 bg-blue-800 py-6 border-t-2 border-blue-400/50">
+        <div className="container mx-auto px-4 text-center">
+          <p className="text-white/80">© 2025 Aqua Stark - All rights reserved</p>
+        </div>
+      </footer>
+    </div>
+  );
+}
\ No newline at end of file


Reviews:
user: login: BrayanMQ
body: Greetings, we appreciate your work very much. We are moving in the right direction. I need you to make these small changes to approve your PR:

1. In “Discovery Registry” I need you to add the hover effect on each of the records (you can see it in the second 2 of the video attached in the issue description).

2. In “Discovery Registry” I want to make the buttons longer as in the video. I also want the hover effect of these to look like the one shown.

3. In “Discovery Registry” I need you to reduce the gap between each registry. In the video you can see that the gap is maintained regardless of the screen resolution (check the attached image to understand which gaps I am referring to).
![PR](https://github.com/user-attachments/assets/a50c0a58-bb7f-464f-b003-540af3728810)


4. In “Undiscovered Species” we have the same gap, please reduce it.

5. I want the filter bar and its button to be selectable (you can see it in the second 11 of the video).

6. Please modify the file “client/src/App.tsx”. Add the breedingLaboratory import and its respective path “/breedingLaboratory”.

7. Please check the bold font of the titles and subtitles. They look a little different compared to the video.

8. Finally, fix the existing merge conflicts. 

Thank you very much!
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-24T17:05:20Z
user: login: Josue19-08
body: @BrayanMQ will continue with the review
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-26T06:26:46Z
user: login: Elite-tch
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-26T07:13:27Z
user: login: Josue19-08
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-26T07:26:46Z
user: login: BrayanMQ
body: Hello! Thanks for your work. We want to change a few things in order to approve your PR. 

1. I need you to change the way tabs are implemented. If you go to http://localhost:5173/achievements you can find an example of exactly how we are looking to implement this functionality. 

Use this code to be able to create the tabs functionality and part of your page. Please adapt these new changes to your PR.

![achievements](https://github.com/user-attachments/assets/31839a11-9513-4f32-97d1-1f124e5ede42)

2. Please remove these lines from App.tsx

- `<Route path="/" element={<StorePage />} />`
-  `<Route path="/store" element={<BreedingLaboratory />} />`

Add only:

- `<Route path="/breedingLaboratory " element={<BreedingLaboratory />} `

Thanks for your job. We'll be waiting.
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-27T01:53:28Z

Review comments:
path: client/src/pages/breeding-laboratory.tsx
user: login: Josue19-08
body: After update fork:

<html>
<body>
<!--StartFragment--><html><head></head><body><h2>🧬 Refactoring the <code inline="">breeding-laboratory</code> Component</h2>
<h3>🎯 Objective</h3>
<p>Split the <code inline="">breeding-laboratory</code> component into reusable and specific subcomponents, using <strong>kebab-case</strong> for all file names.<br>
<p>All mock data used in the page must be moved to:<br>
<code src/data/mock-breeding-laboratory.ts</code></p>
<p>The animated background (bubbles, particles, etc.) is already implemented in <code inline="">bubble-background.tsx</code> inside <code inline="">src/components/</code> and <strong>must be reused</strong>.</p>
<h3>🧩 Components to Create</h3>
<h4>📁 <code inline="">src/components/breeding-laboratory/</code></h4>

File | Description
-- | --
laboratory-header.tsx | Header with back button, title, search bar, and lab status button
laboratory-tabs.tsx | Tab navigation: breeding, genetics, discoveries, genealogy
discoveries-stats.tsx | Cards showing stats: total discoveries, rarities, special traits, etc.
discovery-registry.tsx | Container that renders multiple discovery-card components
undiscovered-species.tsx | Container that renders multiple undiscovered-card components


<h3>📦 Mock Data</h3>
<p>Move the following to <code inline="">src/data/breeding-data.ts</code>:</p>
<ul>
<li>
<p><code inline="">bubblesData</code></p>
</li>
<li>
<p><code inline="">backgroundBubblesData</code></p>
</li>
<li>
<p><code inline="">particlesData</code></p>
</li>
<li>
<p><code inline="">discoveriesData</code></p>
</li>
<li>
<p><code inline="">undiscoveredSpeciesData</code></p>
</li>
<li>
<p><code inline="">stats</code> (optional, if precomputed)</p>
</li>
</ul>
<h3>📌 Rules</h3>
<ul>
<li>
<p>All file names must be in <strong>kebab-case</strong></p>
</li>
<li>
<p>Use the <code inline="">@/</code> alias for imports</p>
</li>
<li>
<p>Do not include comments in the code</p>
</li>
<li>
<p>Components must be pure and receive props when appropriate</p>
</li>
</ul></body></html><!--EndFragment-->
</body>
</html>
created_at: 2025-03-26T06:26:07Z
author_association: CONTRIBUTOR
path: client/src/pages/breeding-laboratory.tsx
user: login: Elite-tch
body: this is not in my project description and i dont no where you are getting this from 
created_at: 2025-03-26T07:13:27Z
author_association: CONTRIBUTOR
path: client/src/pages/breeding-laboratory.tsx
user: login: Josue19-08
body: It's not explicitly defined, but it's inferred that the way you're doing it is poorly implemented and doesn't allow for scalability. It's a matter of following project standards. If you don't want to make the requested changes, I understand, but I don't reserve the right to merge it.

Regards :) 
created_at: 2025-03-26T07:26:46Z
author_association: CONTRIBUTOR

PR comments:
user: login: Elite-tch
created_at: 2025-03-24T20:30:42Z
body: 
https://github.com/user-attachments/assets/0d4643a8-632f-42fe-948c-fe8fbf9d3529


author_association: CONTRIBUTOR
user: login: Elite-tch
created_at: 2025-03-25T23:26:43Z
body: @BrayanMQ  please my PR is still pending
author_association: CONTRIBUTOR
user: login: Josue19-08
created_at: 2025-03-26T06:11:29Z
body: Hi @Elite-tch, first, update your fork. It's an old version, and we need you to use the reusable components that already exist.
author_association: CONTRIBUTOR
user: login: Elite-tch
created_at: 2025-03-26T07:50:44Z
body: Old version a PR I created more than 4 days ago

On Wed, Mar 26, 2025, 8:27 AM Josué Araya Marín ***@***.***>
wrote:

> ***@***.**** commented on this pull request.
> ------------------------------
>
> On client/src/pages/breeding-laboratory.tsx
> <https://github.com/AquaStark/Aqua-Stark/pull/47#discussion_r2013529920>:
>
> It's not explicitly defined, but it's inferred that the way you're doing
> it is poorly implemented and doesn't allow for scalability. It's a matter
> of following project standards. If you don't want to make the requested
> changes, I understand, but I don't reserve the right to merge it.
>
> Regards :)
>
> —
> Reply to this email directly, view it on GitHub
> <https://github.com/AquaStark/Aqua-Stark/pull/47#discussion_r2013529920>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/BDXVYINJZC73TKFF72WOQDT2WJJEXAVCNFSM6AAAAABZTIQ6QKVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDOMJWGEZDMNRYHE>
> .
> You are receiving this because you were mentioned.Message ID:
> ***@***.***>
>

author_association: CONTRIBUTOR
user: login: Josue19-08
created_at: 2025-03-26T16:22:45Z
body: > Hi @Elite-tch, first, update your fork. It's an old version, and we need you to use the reusable components that already exist.

@Elite-tch you have to do this, follow the instructions.

In addition to following the commit standards😐.
author_association: CONTRIBUTOR
user: login: Elite-tch
created_at: 2025-03-27T21:19:36Z
body: 
https://github.com/user-attachments/assets/6e52fcf5-7b37-4e4f-acc7-f7789f272f15

@BrayanMQ 
author_association: CONTRIBUTOR
user: login: Elite-tch
created_at: 2025-03-29T03:49:18Z
body: please review @Josue19-08  @BrayanMQ 
author_association: CONTRIBUTOR