diff --git a/src/components/CampaignTracker.tsx b/src/components/CampaignTracker.tsx index a8e5d09..8514132 100644 --- a/src/components/CampaignTracker.tsx +++ b/src/components/CampaignTracker.tsx @@ -79,7 +79,7 @@ const CampaignTracker = ({ handleMenuClick }: { handleMenuClick: () => void }) = {/* Status Cards */} -
+
Indexed:
77%
@@ -95,14 +95,14 @@ const CampaignTracker = ({ handleMenuClick }: { handleMenuClick: () => void }) =
{/* Progress Sections */} -
+
{progressSections.map((section, index) => { const progressPercentage = (section.current / section.total) * 100 return (
{/* Section Title and Progress */} -
+

{section.title}: {section.current}/{section.total}

diff --git a/src/components/DashboardGrid.tsx b/src/components/DashboardGrid.tsx index e9ee31a..82c5295 100644 --- a/src/components/DashboardGrid.tsx +++ b/src/components/DashboardGrid.tsx @@ -4,24 +4,13 @@ import React, { useState } from "react"; import MultiRingCircularProgress from "./MultiRingCircularProgress"; import CampaignTracker from "./CampaignTracker"; import { - ArrowLeft, Menu, FileText, - TrendingUp, - Info, - ArrowUp, - Link, - ChevronDown, - MapPin, + ArrowLeft, Sparkles } from "lucide-react"; -import MetricCard from "./shared/MetricCard"; -import UrlDropdown from "./shared/UrlDropdown"; import HeaderPage from "./shared/HeaderPage"; import Google from "../assets/icons/google-original-logo.svg"; -import Gemini from "../assets/icons/gemini.svg"; import Gemini2 from "../assets/icons/gemini2.svg"; import Perplexity from "../assets/icons/perplexity-dark-logo.svg"; -import Vector from "../assets/icons/Vector.png"; -import Vector2 from "../assets/icons/Vector2.png"; import GPT from "../assets/icons/gpt.svg"; import Map from "../assets/icons/maps.svg"; @@ -336,10 +325,6 @@ const competitors = [ ] -const pillClass = (val: string) => - val === 'Done' ? 'bg-green-100 text-green-700 font-bold' - : val === 'In Progress' ? 'bg-blue-100 text-blue-700 font-bold' - : 'bg-gray-100 text-gray-700 font-bold'; export default function DashboardGrid() { const [selectedCampaigns, setSelectedCampaigns] = useState([]); @@ -380,9 +365,6 @@ export default function DashboardGrid() { setShowKeywordAnalysis(campaignName); }; - const handleCloseKeywordAnalysis = () => { - setShowKeywordAnalysis(null); - }; const TagComponent = ({ content, color = "#4285F4", faded = false }: Tag & { faded?: boolean }) => { const getIconContent = (item: TagContent) => { @@ -473,16 +455,7 @@ export default function DashboardGrid() { return (
{ - if (tooltipText) { - setIsHovered(true) - } - }} - onMouseLeave={() => { - if (tooltipText) { - setIsHovered(false) - } - }}> + > Active Keywords
@@ -490,7 +463,19 @@ export default function DashboardGrid() {
{value} - {tooltipText &&
+ {tooltipText &&
{ + if (tooltipText) { + setIsHovered(true) + } + }} + onMouseLeave={() => { + if (tooltipText) { + setIsHovered(false) + } + }} + > {/* */} Info @@ -534,13 +519,13 @@ export default function DashboardGrid() { {CARDS.map((card, idx) => (
handleCardClick(card.title, card.paused || false)} >
{/* Front of card */} -
{/* New Keyword Badge */} -
+
NEW High-Value Keyword Found @@ -562,12 +547,12 @@ export default function DashboardGrid() {
{/* Keyword Title */} -

Tax Prep Attorney Los Angeles

+

Tax Prep Attorney Los Angeles

{/* Competitors List */} -
+
{competitors.map((competitor, index) => ( -
+
{competitor.domain}
{competitor.tags.map((tag, i) => ( @@ -594,25 +579,45 @@ export default function DashboardGrid() {
: -
+
{card.badge && ( -
-
-
- - +
+
+
+ + - {card.badge}
)} + {idx === 3 && ( +
+
+ + + + Top rankings +
+ +
+ + + Top rankings +
+
+ )} handleRingHover(card.title, index)} - cardId={card.title} />
{card.title} diff --git a/src/components/MultiRingCircularProgress.tsx b/src/components/MultiRingCircularProgress.tsx index b25a997..a279c2d 100644 --- a/src/components/MultiRingCircularProgress.tsx +++ b/src/components/MultiRingCircularProgress.tsx @@ -1,5 +1,4 @@ -import React from "react"; -import { PieChart, Pie, Cell } from "recharts"; +import { PieChart, Pie, Cell } from "recharts"; interface Ring { color: string; @@ -15,17 +14,16 @@ interface MultiRingCircularProgressProps { card: Card; hoveredIndex: number | null; onHover: (index: number | null) => void; - cardId: string; } -export default function MultiRingCircularProgress({ card, hoveredIndex, onHover, cardId }: MultiRingCircularProgressProps) { +export default function MultiRingCircularProgress({ card, hoveredIndex, onHover }: MultiRingCircularProgressProps) { const { percent, rings } = card; // Create ring data with proper outer and inner radius calculations const ringData = rings.map((ring, index) => ({ ...ring, - outerRadius: 125 - (index * 20), // Decrease by 20px for each ring - innerRadius: 110 - (index * 20), // Decrease by 20px for each ring + outerRadius: 110 - (index * 18), // Decrease by 18px for each ring + innerRadius: 95 - (index * 18), // Decrease by 18px for each ring })); // When a ring is hovered, other rings become gray @@ -45,7 +43,7 @@ export default function MultiRingCircularProgress({ card, hoveredIndex, onHover, style={{ outline: "none", border: "none" }} tabIndex={-1} > - + {ringData.map((ring, index) => ( ))} { return (
-

{title}

+

{title}

diff --git a/src/components/shared/MetricCard.tsx b/src/components/shared/MetricCard.tsx index 4a0b204..f14436a 100644 --- a/src/components/shared/MetricCard.tsx +++ b/src/components/shared/MetricCard.tsx @@ -5,14 +5,14 @@ import { useState } from "react"; // Reusable Metric Card Component const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChange, size, extraStyle, disabled }: { icon?: any, img?: any, value?: any, label?: any, tooltipText?: any, valueChange?: any, size?: any, extraStyle?: any, disabled?: any }) => { const [isHovered, setIsHovered] = useState(false); -console.log(Img); + console.log(Img); if (Img) { return (
setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
- Img + Img
{tooltipText && ( @@ -45,12 +45,12 @@ console.log(Img); )}
-
+
{!tooltipText && label} - {value} + {value} {valueChange && ( -
+
{Icon && ( )} @@ -58,9 +58,9 @@ console.log(Img);
)} -
- {tooltipText && label} - {tooltipText && ( + {tooltipText && ( +
+ {label}
{isHovered && ( @@ -71,8 +71,8 @@ console.log(Img);
)}
- )} -
+
+ )}
diff --git a/src/components/shared/UrlDropdown.tsx b/src/components/shared/UrlDropdown.tsx index 7c14947..17bab62 100644 --- a/src/components/shared/UrlDropdown.tsx +++ b/src/components/shared/UrlDropdown.tsx @@ -22,18 +22,18 @@ export default function UrlDropdown() {
{/* Input box */}
{selected}
{isOpen ? ( - + ) : ( - + )}
@@ -41,7 +41,7 @@ export default function UrlDropdown() { {/* Dropdown list */} {isOpen && ( -
+
{urlOptions.map((url, index) => (
{url} {selected === url && ( - - + + + )}
))} diff --git a/src/components/shared/scrollableComponent.css b/src/components/shared/scrollableComponent.css index e39bf7c..e6acda8 100644 --- a/src/components/shared/scrollableComponent.css +++ b/src/components/shared/scrollableComponent.css @@ -6,7 +6,7 @@ } .custom-scrollbar-table { - max-height: 460px; + max-height: 380px; overflow-y: scroll; border: 1px solid #ccc; } diff --git a/src/pages/Portfolio.tsx b/src/pages/Portfolio.tsx index 51b2143..e7609fc 100644 --- a/src/pages/Portfolio.tsx +++ b/src/pages/Portfolio.tsx @@ -25,6 +25,7 @@ const categories = [ { name: 'Social', color: ' border-[#4285F4] bg-[#001EE21C]', + after: "bg-[#4C60E5]", rows: [ { icon: Amazing, title: 'Questions to ask your CPA httpAmazon', DR: 90, DA: 97, traffic: '3,902,293', @@ -40,6 +41,7 @@ const categories = [ { name: 'Citation', color: ' border-[#0ea5e9] bg-[#3C87FF2B]', + after: "bg-[#4285F4]", rows: [ { icon: Amazing, title: 'Substack DR 97 DA 95', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: nA, date: '9/16/25' }, { icon: Amazing, title: 'Questions to ask your CPA Published on Amazon AWS', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: done, date: '9/16/25' }, @@ -49,6 +51,7 @@ const categories = [ { name: 'Web 2.0', color: 'border-[#22c55e] bg-[#f0fdf4]', + after: "bg-[#34A853]", rows: [ { icon: Amazing, title: 'Paypal DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: progress, interlinked: done, date: '9/16/25' }, { icon: Amazing, title: 'Apple Music DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: nA, date: '9/16/25' }, @@ -76,9 +79,9 @@ function Portfolio() { {/* Table Section */} -
+
{/* Title Bar */} -
+
CPA Los Angeles @@ -105,9 +108,9 @@ function Portfolio() { @@ -115,8 +118,8 @@ function Portfolio() {
{/* Global Filter/Sort Header Row */} -
-
+
+
DR @@ -145,6 +148,7 @@ function Portfolio() {
{/* {cat.name === 'Social' ? '💬' : cat.name === 'Citation' ? '📊' : '🌐'} */} +
{cat.name}
{cat.rows.length}