diff --git a/src/App.tsx b/src/App.tsx index 617bbbb..a3194b5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,8 @@ import Portfolio from './pages/Portfolio'; import Settings from './pages/Settings'; import Strategy from './pages/Strategy'; +import Login from './pages/login'; +import ProtectedRoute from './components/ProtectedRoute'; function App() { return ( @@ -15,10 +17,12 @@ function App() {
- } /> - } /> - } /> - } /> + } /> + + } /> + } /> + } /> + } />
diff --git a/src/assets/icons/Google.png b/src/assets/icons/Google.png new file mode 100644 index 0000000..6f43cad Binary files /dev/null and b/src/assets/icons/Google.png differ diff --git a/src/assets/icons/InProgress.png b/src/assets/icons/InProgress.png new file mode 100644 index 0000000..f351aa6 Binary files /dev/null and b/src/assets/icons/InProgress.png differ diff --git a/src/assets/icons/Share2.png b/src/assets/icons/Share2.png new file mode 100644 index 0000000..ae682a1 Binary files /dev/null and b/src/assets/icons/Share2.png differ diff --git a/src/assets/icons/amazon.png b/src/assets/icons/amazon.png new file mode 100644 index 0000000..8c4a808 Binary files /dev/null and b/src/assets/icons/amazon.png differ diff --git a/src/assets/icons/gemini-border.png b/src/assets/icons/gemini-border.png new file mode 100644 index 0000000..2f6c219 Binary files /dev/null and b/src/assets/icons/gemini-border.png differ diff --git a/src/assets/icons/gemini.png b/src/assets/icons/gemini.png new file mode 100644 index 0000000..a567733 Binary files /dev/null and b/src/assets/icons/gemini.png differ diff --git a/src/assets/icons/gemini1.png b/src/assets/icons/gemini1.png new file mode 100644 index 0000000..4dfcd9c Binary files /dev/null and b/src/assets/icons/gemini1.png differ diff --git a/src/assets/icons/iconheader/Info-badge.png b/src/assets/icons/iconheader/Info-badge.png new file mode 100644 index 0000000..da4f032 Binary files /dev/null and b/src/assets/icons/iconheader/Info-badge.png differ diff --git a/src/assets/icons/iconheader/active.png b/src/assets/icons/iconheader/active.png new file mode 100644 index 0000000..e267f03 Binary files /dev/null and b/src/assets/icons/iconheader/active.png differ diff --git a/src/assets/icons/iconheader/portfolio.png b/src/assets/icons/iconheader/portfolio.png new file mode 100644 index 0000000..f081843 Binary files /dev/null and b/src/assets/icons/iconheader/portfolio.png differ diff --git a/src/assets/icons/iconheader/total.png b/src/assets/icons/iconheader/total.png new file mode 100644 index 0000000..3606b4d Binary files /dev/null and b/src/assets/icons/iconheader/total.png differ diff --git a/src/assets/icons/map.png b/src/assets/icons/map.png new file mode 100644 index 0000000..eda15a6 Binary files /dev/null and b/src/assets/icons/map.png differ diff --git a/src/assets/icons/no.png b/src/assets/icons/no.png new file mode 100644 index 0000000..5897d1e Binary files /dev/null and b/src/assets/icons/no.png differ diff --git a/src/components/CampaignTracker.tsx b/src/components/CampaignTracker.tsx index 9871532..38254e2 100644 --- a/src/components/CampaignTracker.tsx +++ b/src/components/CampaignTracker.tsx @@ -1,137 +1,137 @@ - - -const CampaignTracker = () => { - const progressSections = [ - { - title: "Social", - current: 42, - total: 80, - color: "bg-blue-500", - bgColor: "bg-blue-100", - icons: [ - { name: "Pinterest", color: "bg-red-600", text: "P", textColor: "text-white" }, - { name: "Amazon", color: "bg-black", text: "a", textColor: "text-white" }, - { name: "PayPal", color: "bg-blue-600", text: "P", textColor: "text-white" }, - { name: "Yelp", color: "bg-red-600", text: "★", textColor: "text-white" }, - { name: "Uber", color: "bg-black", text: "uber", textColor: "text-white", fontSize: "text-xs" }, - ], - }, - { - title: "Citation", - current: 30, - total: 80, - color: "bg-blue-500", - bgColor: "bg-blue-100", - icons: [ - { name: "Service", color: "bg-blue-400", text: "◐", textColor: "text-white" }, - { name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" }, - { name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" }, - { name: "Yelp", color: "bg-red-600", text: "★", textColor: "text-white" }, - { name: "Pinterest", color: "bg-red-600", text: "P", textColor: "text-white" }, - ], - }, - { - title: "Web 2.0", - current: 15, - total: 70, - color: "bg-green-500", - bgColor: "bg-green-100", - icons: [ - { name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" }, - { name: "Fox", color: "bg-red-600", text: "FOX", textColor: "text-white", fontSize: "text-xs" }, - { name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" }, - { name: "Service", color: "bg-green-600", text: "≡", textColor: "text-white" }, - { name: "Platform", color: "bg-red-600", text: "⬜", textColor: "text-white" }, - ], - }, - { - title: "Multimedia", - current: 5, - total: 15, - color: "bg-yellow-500", - bgColor: "bg-yellow-100", - icons: [ - { name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" }, - { name: "Service", color: "bg-green-600", text: "≡", textColor: "text-white" }, - { name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" }, - { name: "Uber", color: "bg-black", text: "uber", textColor: "text-white", fontSize: "text-xs" }, - { name: "Amazon", color: "bg-black", text: "a", textColor: "text-white" }, - ], - }, - { - title: "Crowd", - current: 5, - total: 15, - color: "bg-red-500", - bgColor: "bg-red-100", - icons: [ - { name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" }, - { name: "PayPal", color: "bg-blue-600", text: "P", textColor: "text-white" }, - { name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" }, - { name: "Service", color: "bg-green-600", text: "≡", textColor: "text-white" }, - { name: "Platform", color: "bg-red-600", text: "⬜", textColor: "text-white" }, - ], - }, - ] - - return ( -
- - - {/* Status Cards */} -
-
-
Indexed:
-
77%
-
-
-
Interlinked:
-
5%
-
-
-
Publishing:
-
Locked
-
-
- - {/* Progress Sections */} -
- {progressSections.map((section, index) => { - const progressPercentage = (section.current / section.total) * 100 - - return ( -
- {/* Section Title and Progress */} -
-

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

-
- {section.icons.map((icon, iconIndex) => ( -
- {icon.text} -
- ))} -
-
- - {/* Progress Bar */} -
-
-
-
- ) - })} -
-
- ) -} - -export default CampaignTracker + + +const CampaignTracker = ({ handleMenuClick }: { handleMenuClick: () => void }) => { + const progressSections = [ + { + title: "Social", + current: 42, + total: 80, + color: "bg-blue-500", + bgColor: "bg-blue-100", + icons: [ + { name: "Pinterest", color: "bg-red-600", text: "P", textColor: "text-white" }, + { name: "Amazon", color: "bg-black", text: "a", textColor: "text-white" }, + { name: "PayPal", color: "bg-blue-600", text: "P", textColor: "text-white" }, + { name: "Yelp", color: "bg-red-600", text: "★", textColor: "text-white" }, + { name: "Uber", color: "bg-black", text: "uber", textColor: "text-white", fontSize: "text-xs" }, + ], + }, + { + title: "Citation", + current: 30, + total: 80, + color: "bg-blue-500", + bgColor: "bg-blue-100", + icons: [ + { name: "Service", color: "bg-blue-400", text: "◐", textColor: "text-white" }, + { name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" }, + { name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" }, + { name: "Yelp", color: "bg-red-600", text: "★", textColor: "text-white" }, + { name: "Pinterest", color: "bg-red-600", text: "P", textColor: "text-white" }, + ], + }, + { + title: "Web 2.0", + current: 15, + total: 70, + color: "bg-green-500", + bgColor: "bg-green-100", + icons: [ + { name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" }, + { name: "Fox", color: "bg-red-600", text: "FOX", textColor: "text-white", fontSize: "text-xs" }, + { name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" }, + { name: "Service", color: "bg-green-600", text: "≡", textColor: "text-white" }, + { name: "Platform", color: "bg-red-600", text: "⬜", textColor: "text-white" }, + ], + }, + { + title: "Multimedia", + current: 5, + total: 15, + color: "bg-yellow-500", + bgColor: "bg-yellow-100", + icons: [ + { name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" }, + { name: "Service", color: "bg-green-600", text: "≡", textColor: "text-white" }, + { name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" }, + { name: "Uber", color: "bg-black", text: "uber", textColor: "text-white", fontSize: "text-xs" }, + { name: "Amazon", color: "bg-black", text: "a", textColor: "text-white" }, + ], + }, + { + title: "Crowd", + current: 5, + total: 15, + color: "bg-red-500", + bgColor: "bg-red-100", + icons: [ + { name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" }, + { name: "PayPal", color: "bg-blue-600", text: "P", textColor: "text-white" }, + { name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" }, + { name: "Service", color: "bg-green-600", text: "≡", textColor: "text-white" }, + { name: "Platform", color: "bg-red-600", text: "⬜", textColor: "text-white" }, + ], + }, + ] + + return ( +
+ + + {/* Status Cards */} +
+
+
Indexed:
+
77%
+
+
+
Interlinked:
+
5%
+
+
+
Publishing:
+
Locked
+
+
+ + {/* Progress Sections */} +
+ {progressSections.map((section, index) => { + const progressPercentage = (section.current / section.total) * 100 + + return ( +
+ {/* Section Title and Progress */} +
+

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

+
+ {section.icons.map((icon, iconIndex) => ( +
+ {icon.text} +
+ ))} +
+
+ + {/* Progress Bar */} +
+
+
+
+ ) + })} +
+
+ ) +} + +export default CampaignTracker diff --git a/src/components/DashboardGrid.tsx b/src/components/DashboardGrid.tsx index 6a36d82..b6193ba 100644 --- a/src/components/DashboardGrid.tsx +++ b/src/components/DashboardGrid.tsx @@ -1,6 +1,6 @@ // DashboardGrid.tsx -import { useState } from "react"; +import React, { useState } from "react"; import MultiRingCircularProgress from "./MultiRingCircularProgress"; import CampaignTracker from "./CampaignTracker"; import { @@ -14,79 +14,188 @@ import { import MetricCard from "./shared/MetricCard"; import UrlDropdown from "./shared/UrlDropdown"; import HeaderPage from "./shared/HeaderPage"; +import Google from "../assets/icons/Google.png"; +import Gemini from "../assets/icons/gemini.png"; +import Perplexity from "../assets/icons/preplextiy.png"; +import Vector from "../assets/icons/Vector.png"; +import Vector2 from "../assets/icons/Vector2.png"; +import GPT from "../assets/icons/gpt.png"; +import Map from "../assets/icons/map.png"; + +import TotalBacklinks from "../assets/icons/iconheader/total.png"; +import ActiveKeywords from "../assets/icons/iconheader/active.png"; +import PortfolioPerformance from "../assets/icons/iconheader/portfolio.png"; +import InfoBadge from "../assets/icons/iconheader/Info-badge.png"; +import Amazon from "../assets/icons/amazon.png"; + +interface TagContent { + icon: string; + text?: string; + value?: string; + extra?: string; +} + +interface Tag { + content: TagContent[]; + color?: string; +} + +interface HoverState { + cardId: string | null; + ringIndex: number | null; +} const CARDS = [ { - title: "Richard Bower CPA", + title: "CPA Hollywood", percent: 99, rings: [ - { color: "#4285F4", value: 99 }, // blue - { color: "#34A853", value: 80 }, // green - { color: "#FBBC05", value: 60 }, // yellow - { color: "#EA4335", value: 40 } // red + { color: "#4c60e5", value: 99 }, // blue + { color: "#4285f4", value: 50 }, // blue + { color: "#34a853", value: 80 }, // green + { color: "#fbbc05", value: 90 }, // yellow + { color: "#ea4335", value: 40 } // red ], tags: [ - { text: "G 14", extra: "+1", color: "#4285F4" }, - { text: "Ai" }, - { text: "LLM" }, + { + content: [ + { icon: "Google", value: "14", extra: "+1" } + ], + color: "#4285F4" + }, + { + content: [ + { icon: "Map", value: "7", extra: "+2" } + ], + color: "#4285F4" + }, + { + content: [ + { icon: "Ai" }, + { icon: "Perplexity" }, + { icon: "GPT" } + ] + } ] }, { title: "CPA Los Angeles", percent: 24, rings: [ - { color: "#4285F4", value: 24 }, - { color: "#34A853", value: 18 }, - { color: "#FBBC05", value: 14 }, - { color: "#EA4335", value: 8 } + { color: "#4c60e5", value: 25 }, // blue + { color: "#4285f4", value: 21 }, // blue + { color: "#34a853", value: 40 }, // green + { color: "#fbbc05", value: 30 }, // yellow + { color: "#ea4335", value: 20 } // red ], tags: [ - { text: "G 14", extra: "-2", color: "#4285F4" } + { + content: [ + { icon: "Google", value: "14", extra: "-2" } + ], + color: "#4285F4" + }, + { + content: [ + { icon: "Ai" }, + { icon: "GPT" } + ] + } ] }, { title: "CPA Los Angeles4", percent: 45, rings: [ - { color: "#4285F4", value: 45 }, - { color: "#34A853", value: 42 }, - { color: "#FBBC05", value: 32 }, - { color: "#EA4335", value: 24 } + { color: "#4c60e5", value: 45 }, // blue + { color: "#4285f4", value: 42 }, // blue + { color: "#34a853", value: 32 }, // green + { color: "#fbbc05", value: 28 }, // yellow + { color: "#ea4335", value: 24 } // red ], tags: [ - { text: "G 14", extra: "-2", color: "#4285F4" }, - { text: "+7" }, - { text: "Ai" } + { + content: [ + { icon: "Google", value: "14", extra: "-2" } + ], + color: "#4285F4" + }, + { + content: [ + { icon: "Map", value: "5", extra: "+1" } + ], + color: "#4285F4" + }, + { + content: [ + { icon: "Ai" }, + { icon: "Perplexity" } + ] + } ] }, { title: "Best CPA Los Angeles5", percent: 89, rings: [ - { color: "#4285F4", value: 89 }, - { color: "#34A853", value: 80 }, - { color: "#FBBC05", value: 72 }, - { color: "#EA4335", value: 57 } + { color: "#4c60e5", value: 89 }, // blue + { color: "#4285f4", value: 80 }, // blue + { color: "#34a853", value: 72 }, // green + { color: "#fbbc05", value: 65 }, // yellow + { color: "#ea4335", value: 57 } // red ], tags: [ - { text: "G 14", extra: "+1", color: "#4285F4" }, - { text: "+7" }, - { text: "Ai" } + { + content: [ + { icon: "Google", value: "14", extra: "+1" } + ], + color: "#4285F4" + }, + { + content: [ + { icon: "Map", value: "9", extra: "+3" } + ], + color: "#4285F4" + }, + { + content: [ + { icon: "Ai" }, + { icon: "GPT" }, + { icon: "Perplexity" } + ] + } ] }, { - title: "CPA Hollywood", - percent: 100, + title: "CPA Hollywood 2", + percent: 98, rings: [ - { color: "#4285F4", value: 100 }, - { color: "#34A853", value: 100 }, - { color: "#FBBC05", value: 100 }, - { color: "#EA4335", value: 100 } + { color: "#4c60e5", value: 98 }, // blue + { color: "#4285f4", value: 98 }, // blue + { color: "#34a853", value: 98 }, // green + { color: "#fbbc05", value: 98 }, // yellow + { color: "#ea4335", value: 100 } // red ], tags: [ - { text: "G 14", extra: "+1", color: "#4285F4" }, - { text: "+7" }, - { text: "Ai" } + { + content: [ + { icon: "Google", value: "14", extra: "+1" } + ], + color: "#4285F4" + }, + { + content: [ + { icon: "Map", value: "7", extra: "+2" } + ], + color: "#4285F4" + }, + { + content: [ + { icon: "Ai" }, + { icon: "Perplexity" }, + { icon: "GPT" } + ] + } ], badge: "Content Unlocked", actionLink: "View Published Content " @@ -95,15 +204,32 @@ const CARDS = [ title: "Best CPA Los Angeles21", percent: 89, rings: [ - { color: "#cccccc", value: 89 }, - { color: "#cccccc", value: 80 }, - { color: "#cccccc", value: 72 }, - { color: "#cccccc", value: 57 } + { color: "#cccccc", value: 89 }, // gray + { color: "#cccccc", value: 80 }, // gray + { color: "#cccccc", value: 72 }, // gray + { color: "#cccccc", value: 65 }, // gray + { color: "#cccccc", value: 57 } // gray ], tags: [ - { text: "G 14", extra: "+1", color: "#cccccc" }, - { text: "+7", color: "#cccccc" }, - { text: "Ai", color: "#cccccc" } + { + content: [ + { icon: "Google", value: "14", extra: "+1" } + ], + color: "#cccccc" + }, + { + content: [ + { icon: "Map", value: "7", extra: "+2" } + ], + color: "#cccccc" + }, + { + content: [ + { icon: "Ai" }, + { icon: "Perplexity" }, + { icon: "GPT" } + ] + } ], faded: true, paused: true @@ -116,33 +242,140 @@ const pillClass = (val: string) => : 'bg-gray-100 text-gray-700 font-bold'; export default function DashboardGrid() { - const [selectedCampaigns, setSelectedCampaigns] = useState([]) - const [tableView, setTableView] = useState(null) - const [activeCard, setActiveCard] = useState(null) + const [selectedCampaigns, setSelectedCampaigns] = useState([]); + const [tableView, setTableView] = useState(null); + const [activeCard, setActiveCard] = useState(null); + const [hoverState, setHoverState] = useState({ cardId: null, ringIndex: null }); + const [isHovered, setIsHovered] = useState(false); const handleCardClick = (campaignName: string, paused: boolean) => { if (paused) return; + setSelectedCampaigns([campaignName]); + setActiveCard(campaignName); + if (activeCard) { - if (!selectedCampaigns.includes(campaignName)) { - setSelectedCampaigns(prev => [...prev, campaignName]) } - setActiveCard(campaignName) - } + }; - const handleBackClick = () => { + const handleBackClick = (e: React.MouseEvent) => { + e.stopPropagation(); // Prevent event bubbling to card click if (tableView) { - setTableView(null) + setTableView(null); } else if (activeCard) { - // Remove only the active card from selected campaigns - setSelectedCampaigns(prev => prev.filter(card => card !== activeCard)) - setActiveCard(null) + setSelectedCampaigns(prev => prev.filter(card => card !== activeCard)); + setActiveCard(null); } - } + }; const handleMenuClick = (campaignName: string) => { - setTableView(campaignName) - } + setTableView(campaignName); + }; + const handleRingHover = (cardId: string, ringIndex: number | null) => { + setHoverState({ cardId, ringIndex }); + }; + + const TagComponent = ({ content, color = "#4285F4", faded = false }: Tag & { faded?: boolean }) => { + const getIconContent = (item: TagContent) => { + switch (item.icon) { + case "Google": + return ( + <> + Google + {item.value && {item.value}} + {item.extra && ( + + {item.extra} + + )} + + ); + case "Map": + return ( + <> + Map + {item.value && {item.value}} + {item.extra && ( + + {item.extra} + + )} + + ); + case "Ai": + return AI; + case "GPT": + return GPT; + case "Perplexity": + return Perplexity; + default: + return item.text || null; + } + }; + + return ( + + {content.map((item, index) => ( +
+ {getIconContent(item)} +
+ ))} + + ); + }; + + + const CardHeader = ({ title, value, valueChange, icon, tooltipText }: { title: string, value: string, valueChange?: string, icon: string, tooltipText?: string }) => { + + return ( +
{ + if (tooltipText) { + setIsHovered(true) + } + }} + onMouseLeave={() => { + if (tooltipText) { + setIsHovered(false) + } + }}> + Active Keywords + +
+ +
+ {value} + + {tooltipText &&
+ {/* */} + + Info + {isHovered && ( +
+ {/* Tooltip triangle */} +
+ {tooltipText} +
+ )} +
} +
+
{title}
+
+ {valueChange} +
+ +
+ + +
+ + ) + } return ( <> @@ -150,28 +383,11 @@ export default function DashboardGrid() { {/* Main content area with new metric cards */}
-
- - - +
+ + + +
@@ -179,141 +395,138 @@ export default function DashboardGrid() { {CARDS.map((card, idx) => (
handleCardClick(card.title, card.paused)} - style={{ - transform: selectedCampaigns.includes(card.title) - ? 'translateY(-5px) scale(1.02)' - : 'translateY(0px) scale(1)' - }} + className="[perspective:1000px] h-[560px]" + onClick={() => handleCardClick(card.title, card.paused || false)} > - {selectedCampaigns.includes(card.title) && activeCard === card.title ? ( -
- {/* Header */} -
-
- +
+ )} +
+
+ + {/* Back of card */} +
+
+ {/* Header */} +
+
+ +

{card.title}

+
+ {/* -

{card.title}

+ + */}
- -
- - {/* Content with smooth transitions */} -
- -
- - {/* Table View with smooth transitions */} -
-
- - - {[ - { icon: '🅰️', title: 'Questions to ask your CPA httpAmazon' }, - { icon: '🅰️', title: 'Questions to ask your CPA Published on Amazon' }, - { icon: '🎵', title: 'Questions to ask your CPA Published on Amazon AWS' }, - { icon: '🅰️', title: 'Questions to ask your CPA httpAmazon' }, - { icon: '🅰️', title: 'Questions to ask your CPA Published on Amazon' }, - { icon: '🎵', title: 'Questions to ask your CPA Published on Amazon AWS' }, - { icon: '🅰️', title: 'Questions to ask your CPA httpAmazon' }, - { icon: '🅰️', title: 'Questions to ask your CPA Published on Amazon' }, - { icon: '🎵', title: 'Questions to ask your CPA Published on Amazon AWS' }, - { icon: '🅿️', title: 'Pinterest DR 97 DA 95 Traffic 3,989,220' }, - { icon: '📄', title: 'Questions to ask your CPA Substack DR 97 DA 95' } - ].map((row, rIdx) => ( - - - - - ))} - - -
{row.icon} -
{row.title}
-
- +
+ + + {[ + { icon: Amazon, title: 'Questions to ask your CPA httpAmazon' }, + { icon: Amazon, title: 'Questions to ask your CPA Published on Amazon' }, + { icon: Amazon, title: 'Questions to ask your CPA Published on Amazon AWS' }, + { icon: Amazon, title: 'Questions to ask your CPA httpAmazon' }, + { icon: Amazon, title: 'Questions to ask your CPA Published on Amazon' }, + { icon: Amazon, title: 'Questions to ask your CPA Published on Amazon AWS' }, + { icon: Amazon, title: 'Questions to ask your CPA httpAmazon' }, + { icon: Amazon, title: 'Questions to ask your CPA Published on Amazon' }, + { icon: Amazon, title: 'Questions to ask your CPA Published on Amazon AWS' }, + { icon: Amazon, title: 'Pinterest DR 97 DA 95 Traffic 3,989,220' }, + { icon: Amazon, title: 'Questions to ask your CPA Substack DR 97 DA 95' } + ].map((row, rIdx) => ( + + + + + ))} + +
+ + +
{row.title}
+
+
+
View All
-
View All
-
- ) : ( - // Card preview state -
- {card.badge && ( -
- {card.badge} -
- )} - -
- {card.title} -
-
- {card.tags.map((tag, i) => ( - - {tag.text} - {tag.extra && ( - - {tag.extra} - - )} - - ))} -
- {card.actionLink && ( -
- {card.actionLink} -
- )} - {card.paused && ( -
-
Campaign paused
- -
- )} -
- )} - +
))} - -
); @@ -323,4 +536,4 @@ export default function DashboardGrid() { // 106 // 112 // 118-121 -// 149 \ No newline at end of file +// 149 diff --git a/src/components/IntegratedStrategy.tsx b/src/components/IntegratedStrategy.tsx index c509bbc..78d804a 100644 --- a/src/components/IntegratedStrategy.tsx +++ b/src/components/IntegratedStrategy.tsx @@ -1,377 +1,377 @@ -import './shared/scrollableComponent.css'; - - -interface TaskItem { - id: string - platform: string - icon: string - title: string - metrics?: string - isLink?: boolean -} - -interface Category { - name: string - count: number - color: string - items: TaskItem[] -} - -interface Column { - title: string - count: number - date?: string - categories: Category[] -} - -const IntegratedStrategy = () => { - const columns: Column[] = [ - { - title: "Built", - count: 104, - categories: [ - { - name: "Social", - count: 4, - color: "bg-blue-100", - items: [ - { - id: "1", - platform: "Pinterest", - icon: "🅿️", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - isLink: true, - }, - { - id: "2", - platform: "Substack", - icon: "🟠", - title: "Substack DR 97 DA 95", - isLink: true, - }, - { - id: "3", - platform: "PayPal", - icon: "🅿️", - title: "Paypal DR 97 DA 95 Traffic", - isLink: true, - }, - { - id: "4", - platform: "PayPal", - icon: "🅿️", - title: "Paypal DR 97 DA 95 Traffic", - isLink: true, - }, - ], - }, - { - name: "Citation", - count: 2, - color: "bg-blue-100", - items: [ - { - id: "5", - platform: "Pinterest", - icon: "🅿️", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - isLink: true, - }, - { - id: "6", - platform: "Substack", - icon: "🟠", - title: "Substack DR 97 DA 95 Traffic", - isLink: true, - }, - ], - }, - { - name: "Web 2.0", - count: 3, - color: "bg-green-100", - items: [ - { - id: "7", - platform: "Apple Music", - icon: "🎵", - title: "Apple Music DR 97 DA 95 Traffic", - isLink: true, - }, - { - id: "8", - platform: "Pinterest", - icon: "🅿️", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - isLink: true, - }, - { - id: "9", - platform: "Pinterest", - icon: "⚫", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - isLink: true, - }, - ], - }, - { - name: "Multimedia", - count: 1, - color: "bg-yellow-100", - items: [ - { - id: "10", - platform: "Pinterest", - icon: "⚫", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - isLink: true, - }, - ], - }, - ], - }, - { - title: "In Progress", - count: 14, - date: "23 Oct 2025", - categories: [ - { - name: "Social", - count: 3, - color: "bg-blue-100", - items: [ - { - id: "11", - platform: "Pinterest", - icon: "🅿️", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - }, - { - id: "12", - platform: "Substack", - icon: "🟠", - title: "Substack DR 97 DA 95", - }, - { - id: "13", - platform: "PayPal", - icon: "🅿️", - title: "Paypal DR 97 DA 95 Traffic", - }, - ], - }, - { - name: "Citation", - count: 5, - color: "bg-blue-100", - items: [ - { - id: "14", - platform: "Pinterest", - icon: "🅿️", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - }, - { - id: "15", - platform: "Pinterest", - icon: "🅿️", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - }, - { - id: "16", - platform: "Substack", - icon: "🟠", - title: "Substack DR 97 DA 95 Traffic", - }, - { - id: "17", - platform: "PayPal", - icon: "🅿️", - title: "Paypal DR 97 DA 95 Traffic 3,989,220", - }, - { - id: "18", - platform: "Apple Music", - icon: "🎵", - title: "Apple Music DR 97 DA 95 Traffic", - }, - ], - }, - { - name: "Web 2.0", - count: 5, - color: "bg-green-100", - items: [ - { - id: "19", - platform: "Pinterest", - icon: "🅿️", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - }, - { - id: "20", - platform: "Questions", - icon: "⚫", - title: "Questions to ask your CPA Published o...", - }, - { - id: "21", - platform: "PayPal", - icon: "🅿️", - title: "Paypal DR 97 DA 95 Traffic", - }, - ], - }, - ], - }, - { - title: "Coming up", - count: 10, - date: "23 Nov 2025", - categories: [ - { - name: "Social", - count: 5, - color: "bg-blue-100", - items: [ - { - id: "22", - platform: "Pinterest", - icon: "🅿️", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - }, - { - id: "23", - platform: "Substack", - icon: "🟠", - title: "Substack DR 97 DA 95", - }, - { - id: "24", - platform: "PayPal", - icon: "🅿️", - title: "Paypal DR 97 DA 95 Traffic", - }, - { - id: "25", - platform: "Pinterest", - icon: "🅿️", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - }, - { - id: "26", - platform: "PayPal", - icon: "🅿️", - title: "Paypal DR 97 DA 95 Traffic", - }, - ], - }, - { - name: "Citation", - count: 5, - color: "bg-blue-100", - items: [ - { - id: "27", - platform: "Pinterest", - icon: "🅿️", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - }, - { - id: "28", - platform: "Pinterest", - icon: "🅿️", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - }, - { - id: "29", - platform: "Substack", - icon: "🟠", - title: "Substack DR 97 DA 95 Traffic", - }, - { - id: "30", - platform: "PayPal", - icon: "🅿️", - title: "Paypal DR 97 DA 95 Traffic", - }, - { - id: "31", - platform: "Apple Music", - icon: "🎵", - title: "Apple Music DR 97 DA 95 Traffic", - }, - ], - }, - { - name: "Web 2.0", - count: 2, - color: "bg-green-100", - items: [ - { - id: "32", - platform: "Pinterest", - icon: "🅿️", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - }, - ], - }, - ], - }, - ] - - const CategorySection = ({ category }: { category: Category }) => ( -
-
-
-
- {category.name} - {category.count} -
-
-
- {category.items.map((item) => ( -
-
- {item.icon} - - {item.title} - -
-
- ))} -
-
- ) - - return ( -
-
- {columns.map((column, index) => ( -
-
-
-
-

{column.title}

- - {column.count} - -
- {column.date && {column.date}} -
-
-
- {column.categories.map((category, categoryIndex) => ( - - ))} -
-
- ))} -
-
- ) -} - -export default IntegratedStrategy +import './shared/scrollableComponent.css'; + + +interface TaskItem { + id: string + platform: string + icon: string + title: string + metrics?: string + isLink?: boolean +} + +interface Category { + name: string + count: number + color: string + items: TaskItem[] +} + +interface Column { + title: string + count: number + date?: string + categories: Category[] +} + +const IntegratedStrategy = () => { + const columns: Column[] = [ + { + title: "Built", + count: 104, + categories: [ + { + name: "Social", + count: 4, + color: "bg-blue-100", + items: [ + { + id: "1", + platform: "Pinterest", + icon: "🅿️", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + isLink: true, + }, + { + id: "2", + platform: "Substack", + icon: "🟠", + title: "Substack DR 97 DA 95", + isLink: true, + }, + { + id: "3", + platform: "PayPal", + icon: "🅿️", + title: "Paypal DR 97 DA 95 Traffic", + isLink: true, + }, + { + id: "4", + platform: "PayPal", + icon: "🅿️", + title: "Paypal DR 97 DA 95 Traffic", + isLink: true, + }, + ], + }, + { + name: "Citation", + count: 2, + color: "bg-blue-100", + items: [ + { + id: "5", + platform: "Pinterest", + icon: "🅿️", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + isLink: true, + }, + { + id: "6", + platform: "Substack", + icon: "🟠", + title: "Substack DR 97 DA 95 Traffic", + isLink: true, + }, + ], + }, + { + name: "Web 2.0", + count: 3, + color: "bg-green-100", + items: [ + { + id: "7", + platform: "Apple Music", + icon: "🎵", + title: "Apple Music DR 97 DA 95 Traffic", + isLink: true, + }, + { + id: "8", + platform: "Pinterest", + icon: "🅿️", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + isLink: true, + }, + { + id: "9", + platform: "Pinterest", + icon: "⚫", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + isLink: true, + }, + ], + }, + { + name: "Multimedia", + count: 1, + color: "bg-yellow-100", + items: [ + { + id: "10", + platform: "Pinterest", + icon: "⚫", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + isLink: true, + }, + ], + }, + ], + }, + { + title: "In Progress", + count: 14, + date: "23 Oct 2025", + categories: [ + { + name: "Social", + count: 3, + color: "bg-blue-100", + items: [ + { + id: "11", + platform: "Pinterest", + icon: "🅿️", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + }, + { + id: "12", + platform: "Substack", + icon: "🟠", + title: "Substack DR 97 DA 95", + }, + { + id: "13", + platform: "PayPal", + icon: "🅿️", + title: "Paypal DR 97 DA 95 Traffic", + }, + ], + }, + { + name: "Citation", + count: 5, + color: "bg-blue-100", + items: [ + { + id: "14", + platform: "Pinterest", + icon: "🅿️", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + }, + { + id: "15", + platform: "Pinterest", + icon: "🅿️", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + }, + { + id: "16", + platform: "Substack", + icon: "🟠", + title: "Substack DR 97 DA 95 Traffic", + }, + { + id: "17", + platform: "PayPal", + icon: "🅿️", + title: "Paypal DR 97 DA 95 Traffic 3,989,220", + }, + { + id: "18", + platform: "Apple Music", + icon: "🎵", + title: "Apple Music DR 97 DA 95 Traffic", + }, + ], + }, + { + name: "Web 2.0", + count: 5, + color: "bg-green-100", + items: [ + { + id: "19", + platform: "Pinterest", + icon: "🅿️", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + }, + { + id: "20", + platform: "Questions", + icon: "⚫", + title: "Questions to ask your CPA Published o...", + }, + { + id: "21", + platform: "PayPal", + icon: "🅿️", + title: "Paypal DR 97 DA 95 Traffic", + }, + ], + }, + ], + }, + { + title: "Coming up", + count: 10, + date: "23 Nov 2025", + categories: [ + { + name: "Social", + count: 5, + color: "bg-blue-100", + items: [ + { + id: "22", + platform: "Pinterest", + icon: "🅿️", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + }, + { + id: "23", + platform: "Substack", + icon: "🟠", + title: "Substack DR 97 DA 95", + }, + { + id: "24", + platform: "PayPal", + icon: "🅿️", + title: "Paypal DR 97 DA 95 Traffic", + }, + { + id: "25", + platform: "Pinterest", + icon: "🅿️", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + }, + { + id: "26", + platform: "PayPal", + icon: "🅿️", + title: "Paypal DR 97 DA 95 Traffic", + }, + ], + }, + { + name: "Citation", + count: 5, + color: "bg-blue-100", + items: [ + { + id: "27", + platform: "Pinterest", + icon: "🅿️", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + }, + { + id: "28", + platform: "Pinterest", + icon: "🅿️", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + }, + { + id: "29", + platform: "Substack", + icon: "🟠", + title: "Substack DR 97 DA 95 Traffic", + }, + { + id: "30", + platform: "PayPal", + icon: "🅿️", + title: "Paypal DR 97 DA 95 Traffic", + }, + { + id: "31", + platform: "Apple Music", + icon: "🎵", + title: "Apple Music DR 97 DA 95 Traffic", + }, + ], + }, + { + name: "Web 2.0", + count: 2, + color: "bg-green-100", + items: [ + { + id: "32", + platform: "Pinterest", + icon: "🅿️", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + }, + ], + }, + ], + }, + ] + + const CategorySection = ({ category }: { category: Category }) => ( +
+
+
+
+ {category.name} + {category.count} +
+
+
+ {category.items.map((item) => ( +
+
+ {item.icon} + + {item.title} + +
+
+ ))} +
+
+ ) + + return ( +
+
+ {columns.map((column, index) => ( +
+
+
+
+

{column.title}

+ + {column.count} + +
+ {column.date && {column.date}} +
+
+
+ {column.categories.map((category, categoryIndex) => ( + + ))} +
+
+ ))} +
+
+ ) +} + +export default IntegratedStrategy diff --git a/src/components/MultiRingCircularProgress.tsx b/src/components/MultiRingCircularProgress.tsx index f444b3b..304474a 100644 --- a/src/components/MultiRingCircularProgress.tsx +++ b/src/components/MultiRingCircularProgress.tsx @@ -13,20 +13,33 @@ interface Card { interface MultiRingCircularProgressProps { card: Card; + hoveredIndex: number | null; + onHover: (index: number | null) => void; + cardId: string; } -export default function MultiRingCircularProgress({ card }: MultiRingCircularProgressProps) { +export default function MultiRingCircularProgress({ card, hoveredIndex, onHover, cardId }: MultiRingCircularProgressProps) { const { percent, rings } = card; - + // Create ring data with proper outer and inner radius calculations const ringData = rings.map((ring, index) => ({ ...ring, - outerRadius: 120 - (index * 18), // Decrease by 18px for each ring - innerRadius: 105 - (index * 18), // Decrease by 18px for each ring + outerRadius: 125 - (index * 20), // Decrease by 20px for each ring + innerRadius: 110 - (index * 20), // Decrease by 20px for each ring })); + // When a ring is hovered, other rings become gray + const getHoverColor = (ring: Ring, index: number) => { + if (hoveredIndex === null) return ring.color; + if (hoveredIndex === index) return ring.color; + return "#d3d3d3"; // gray for non-hovered rings + }; + return ( -
+
onHover(null)} + > {ringData.map((ring, index) => ( onHover(index)} + onMouseLeave={() => onHover(null)} + fill={getHoverColor(ring, index)} > - + ))} diff --git a/src/components/Portfolio/BacklinkTypeDropdown.tsx b/src/components/Portfolio/BacklinkTypeDropdown.tsx index 3c02b9b..aa23408 100644 --- a/src/components/Portfolio/BacklinkTypeDropdown.tsx +++ b/src/components/Portfolio/BacklinkTypeDropdown.tsx @@ -1,47 +1,61 @@ -import React, { useState } from 'react' - -const BacklinkTypeDropdown = () => { - - const [dropdownOpen, setDropdownOpen] = useState(false); - const [checkedRings, setCheckedRings] = useState>({ - Social: true, Citation: true, 'Web 2.0': true, Multimedia: false, Crowd: false - }); - - const toggleRing = (ring: string) => setCheckedRings(r => ({ ...r, [ring]: !r[ring] })); - - return ( -
- - {dropdownOpen && ( -
-
Show rings:
- {Object.keys(checkedRings).map((ring, idx) => ( - - ))} -
- )} -
- ); - -} - +import { ChevronDown } from 'lucide-react'; +import React, { useState, useEffect, useRef } from 'react' + +const BacklinkTypeDropdown = ({ options, title, subTitle }: { options: Record, title: string, subTitle?: string }) => { + + const [dropdownOpen, setDropdownOpen] = useState(false); + const [checkedRings, setCheckedRings] = useState>(options); + const dropdownRef = useRef(null); + + const toggleRing = (ring: string) => setCheckedRings(r => ({ ...r, [ring]: !r[ring] })); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { + setDropdownOpen(false); + } + }; + + if (dropdownOpen) { + document.addEventListener('mousedown', handleClickOutside); + } + + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [dropdownOpen]); + + return ( +
+ + {dropdownOpen && ( +
+
{subTitle}:
+ {Object.keys(checkedRings).map((ring, idx) => ( + + ))} +
+ )} +
+ ); + +} + export default BacklinkTypeDropdown; \ No newline at end of file diff --git a/src/components/ProtectedRoute.tsx b/src/components/ProtectedRoute.tsx new file mode 100644 index 0000000..367f6b9 --- /dev/null +++ b/src/components/ProtectedRoute.tsx @@ -0,0 +1,20 @@ +import { Navigate } from 'react-router-dom'; + +interface ProtectedRouteProps { + children: JSX.Element; +} + +const ProtectedRoute = ({ children }: ProtectedRouteProps) => { + // Check if user is logged in (from localStorage or context) + const user = localStorage.getItem('sp_user'); + + if (!user) { + // If not logged in, redirect to login page + return ; + } + + // Else render the protected component + return children; +}; + +export default ProtectedRoute; diff --git a/src/components/Strategy/ProgressMetrics.tsx b/src/components/Strategy/ProgressMetrics.tsx index 46a30b7..7e62302 100644 --- a/src/components/Strategy/ProgressMetrics.tsx +++ b/src/components/Strategy/ProgressMetrics.tsx @@ -1,93 +1,122 @@ -import Preplextiy from "../../assets/icons/Preplextiy.png" -import ChatGPT from "../../assets/icons/gpt.png" -import MetricCard from "../shared/MetricCard" - - -function ProgressMetrics() { - return ( -
-

CPA Los Angeles

- -
- {/* Left section with progress indicators */} -
- {/* 60% Progress */} -
-
-
60%
-
120/250 links
-
-
until content publishing + LLM seeding unlocked
- {/* Progress bar */} -
-
-
-
- -
- -
- {/* 75% Keyword Visibility */} -
-
75%
-
Keyword Visibility
-
- -
-
- - {/* ChatGPT */} - - -
-
-
- - {/* Right section with Chat GPT and metrics */} -
- - {/* Performance metrics with chart */} -
-
- - - - - - - - - - - -
-
-
- G - 7 - +10 -
-
- 📍 - 5 - +3 -
-
Current Rank
-
-
-
-
- - {/* */} -
- ) -} - +import MetricCard from "../shared/MetricCard" +import Progress from "../../assets/icons/InProgress.png" +import No from "../../assets/icons/no.png" +import { CircleCheck } from 'lucide-react' +import { Stepper } from "../shared/Stepper" +import Preplextiy from "../../assets/icons/preplextiy.png" +import ChatGPT from "../../assets/icons/gpt.png" +import Gemini from "../../assets/icons/gemini.png" +import Gemini1 from "../../assets/icons/gemini1.png" +import Gemini2 from "../../assets/icons/gemini-border.png" +import Google from "../../assets/icons/Google.png" + + +function ProgressMetrics() { + + return ( +
+ +
+

CPA Los Angeles

+ {/* Example 2: With Completed Status */} +
+ +
+ +
+ +
+ {/* Left section with progress indicators */} +
+ {/* 60% Progress */} +
+
+
60%
+
120/250 links
+
+
until content publishing + LLM seeding unlocked
+ {/* Progress bar */} +
+
+
+
+ +
+ +
+ {/* 75% Keyword Visibility */} +
+
75%
+
Keyword Visibility
+
+ +
+
+ + + + + + + + + +
+
+
+ + {/* Right section with Chat GPT and metrics */} +
+ + {/* Performance metrics with chart */} +
+
+ + + + + + + + + + + +
+
+
+ + 7 + +10 +
+
+ + 5 + +3 +
+
Current Rank
+
+
+
+
+ + {/* */} +
+ ) +} + export default ProgressMetrics \ No newline at end of file diff --git a/src/components/Strategy/RoadmapSidebar.tsx b/src/components/Strategy/RoadmapSidebar.tsx index c1517ff..e2d17ff 100644 --- a/src/components/Strategy/RoadmapSidebar.tsx +++ b/src/components/Strategy/RoadmapSidebar.tsx @@ -1,70 +1,70 @@ -import Vector from "../../assets/icons/Vector.png" -import Vector2 from "../../assets/icons/Vector2.png" - -// Roadmap sidebar component -const RoadmapSidebar = ({ - selectedKeyword, - onKeywordSelect, - mode -}: { - selectedKeyword: string - onKeywordSelect: (keyword: string) => void - mode: string -}) => { - const keywords = [ - "CPA Los Angeles", - "Richard Bower CPA", - "CPA Los Angeles 2", - "CPA Hollywood", - "Best CPA Los Angeles", - "CPA Los Angeles 4", - ] - - return ( -
- {mode ? - null - : -
-

Roadmap

-
- 1001 -
-
Total Links
-
Across all keywords
-
-
-
- } - - -
- {keywords.map((keyword, index) => ( - - ))} -
-
- ) -} - +import Vector from "../../assets/icons/Vector.png" +import Vector2 from "../../assets/icons/Vector2.png" + +// Roadmap sidebar component +const RoadmapSidebar = ({ + selectedKeyword, + onKeywordSelect, + mode +}: { + selectedKeyword: string + onKeywordSelect: (keyword: string) => void + mode: string +}) => { + const keywords = [ + "CPA Los Angeles", + "Richard Bower CPA", + "CPA Los Angeles 2", + "CPA Hollywood", + "Best CPA Los Angeles", + "CPA Los Angeles 4", + ] + + return ( +
+ {mode ? + null + : +
+

Roadmap

+
+ 1001 +
+
Total Links
+
Across all keywords
+
+
+
+ } + + +
+ {keywords.map((keyword, index) => ( + + ))} +
+
+ ) +} + export default RoadmapSidebar \ No newline at end of file diff --git a/src/components/Strategy/ShowDetails.tsx b/src/components/Strategy/ShowDetails.tsx index a1b2573..86d4bea 100644 --- a/src/components/Strategy/ShowDetails.tsx +++ b/src/components/Strategy/ShowDetails.tsx @@ -1,262 +1,262 @@ - -import { useState } from "react" - -interface Task { - id: string - title: string - platform: "wordpress" | "substack" | "paypal" | "pinterest" | "apple-music" - metrics?: string -} - -interface Column { - id: string - title: string - count: number - date: string - tasks: Task[] -} - -const platformIcons = { - wordpress: ( -
- W -
- ), - substack: ( -
- S -
- ), - paypal: ( -
- P -
- ), - pinterest: ( -
- P -
- ), - "apple-music": ( -
- A -
- ), -} - -const initialData: Column[] = [ - { - id: "published", - title: "Published", - count: 10, - date: "Since 23 Oct 2025", - tasks: [ - { - id: "1", - title: "Questions to ask your CPA Published o...", - platform: "wordpress", - }, - { - id: "2", - title: "Substack DR 97 DA 95", - platform: "substack", - }, - { - id: "3", - title: "Paypal DR 97 DA 95 Traffic", - platform: "paypal", - }, - { - id: "4", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - platform: "pinterest", - }, - { - id: "5", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - platform: "pinterest", - }, - { - id: "6", - title: "Substack DR 97 DA 95 Traffic", - platform: "substack", - }, - { - id: "7", - title: "Paypal DR 97 DA 95 Traffic 3,989,220", - platform: "paypal", - }, - { - id: "8", - title: "Apple Music DR 97 DA 95 Traffic", - platform: "apple-music", - }, - { - id: "9", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - platform: "pinterest", - }, - { - id: "10", - title: "Questions to ask your CPA Published o...", - platform: "wordpress", - }, - ], - }, - { - id: "in-progress", - title: "In Progress", - count: 10, - date: "23 Oct 2025", - tasks: [ - { - id: "11", - title: "Questions to ask your CPA Published o...", - platform: "wordpress", - }, - { - id: "12", - title: "Substack DR 97 DA 95", - platform: "substack", - }, - { - id: "13", - title: "Paypal DR 97 DA 95 Traffic", - platform: "paypal", - }, - { - id: "14", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - platform: "pinterest", - }, - { - id: "15", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - platform: "pinterest", - }, - { - id: "16", - title: "Substack DR 97 DA 95 Traffic", - platform: "substack", - }, - { - id: "17", - title: "Paypal DR 97 DA 95 Traffic 3,989,220", - platform: "paypal", - }, - { - id: "18", - title: "Apple Music DR 97 DA 95 Traffic", - platform: "apple-music", - }, - { - id: "19", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - platform: "pinterest", - }, - { - id: "20", - title: "Questions to ask your CPA Published o...", - platform: "wordpress", - }, - ], - }, - { - id: "next-month", - title: "Next month", - count: 10, - date: "23 Nov 2025", - tasks: [ - { - id: "21", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - platform: "pinterest", - }, - { - id: "22", - title: "Substack DR 97 DA 95", - platform: "substack", - }, - { - id: "23", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - platform: "pinterest", - }, - { - id: "24", - title: "Paypal DR 97 DA 95 Traffic", - platform: "paypal", - }, - { - id: "25", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - platform: "pinterest", - }, - { - id: "26", - title: "Substack DR 97 DA 95 Traffic", - platform: "substack", - }, - { - id: "27", - title: "Paypal DR 97 DA 95 Traffic 3,989,220", - platform: "paypal", - }, - { - id: "28", - title: "Apple Music DR 97 DA 95 Traffic", - platform: "apple-music", - }, - { - id: "29", - title: "Pinterest DR 97 DA 95 Traffic 3,989,220", - platform: "pinterest", - }, - { - id: "30", - title: "Questions to ask your CPA Published o...", - platform: "wordpress", - }, - ], - }, -] - -function ShowDetails() { - const [columns, setColumns] = useState(initialData) - - return ( -
-
- {columns.map((column) => ( -
- {/* Column Header */} -
-
-

{column.title}

- {column.count} -
-

{column.date}

-
- - {/* Tasks List */} -
- {column.tasks.map((task) => ( -
- {platformIcons[task.platform]} -
-

{task.title}

-
-
- ))} -
-
- ))} -
-
- ) -} - + +import { useState } from "react" + +interface Task { + id: string + title: string + platform: "wordpress" | "substack" | "paypal" | "pinterest" | "apple-music" + metrics?: string +} + +interface Column { + id: string + title: string + count: number + date: string + tasks: Task[] +} + +const platformIcons = { + wordpress: ( +
+ W +
+ ), + substack: ( +
+ S +
+ ), + paypal: ( +
+ P +
+ ), + pinterest: ( +
+ P +
+ ), + "apple-music": ( +
+ A +
+ ), +} + +const initialData: Column[] = [ + { + id: "published", + title: "Published", + count: 10, + date: "Since 23 Oct 2025", + tasks: [ + { + id: "1", + title: "Questions to ask your CPA Published o...", + platform: "wordpress", + }, + { + id: "2", + title: "Substack DR 97 DA 95", + platform: "substack", + }, + { + id: "3", + title: "Paypal DR 97 DA 95 Traffic", + platform: "paypal", + }, + { + id: "4", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + platform: "pinterest", + }, + { + id: "5", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + platform: "pinterest", + }, + { + id: "6", + title: "Substack DR 97 DA 95 Traffic", + platform: "substack", + }, + { + id: "7", + title: "Paypal DR 97 DA 95 Traffic 3,989,220", + platform: "paypal", + }, + { + id: "8", + title: "Apple Music DR 97 DA 95 Traffic", + platform: "apple-music", + }, + { + id: "9", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + platform: "pinterest", + }, + { + id: "10", + title: "Questions to ask your CPA Published o...", + platform: "wordpress", + }, + ], + }, + { + id: "in-progress", + title: "In Progress", + count: 10, + date: "23 Oct 2025", + tasks: [ + { + id: "11", + title: "Questions to ask your CPA Published o...", + platform: "wordpress", + }, + { + id: "12", + title: "Substack DR 97 DA 95", + platform: "substack", + }, + { + id: "13", + title: "Paypal DR 97 DA 95 Traffic", + platform: "paypal", + }, + { + id: "14", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + platform: "pinterest", + }, + { + id: "15", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + platform: "pinterest", + }, + { + id: "16", + title: "Substack DR 97 DA 95 Traffic", + platform: "substack", + }, + { + id: "17", + title: "Paypal DR 97 DA 95 Traffic 3,989,220", + platform: "paypal", + }, + { + id: "18", + title: "Apple Music DR 97 DA 95 Traffic", + platform: "apple-music", + }, + { + id: "19", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + platform: "pinterest", + }, + { + id: "20", + title: "Questions to ask your CPA Published o...", + platform: "wordpress", + }, + ], + }, + { + id: "next-month", + title: "Next month", + count: 10, + date: "23 Nov 2025", + tasks: [ + { + id: "21", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + platform: "pinterest", + }, + { + id: "22", + title: "Substack DR 97 DA 95", + platform: "substack", + }, + { + id: "23", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + platform: "pinterest", + }, + { + id: "24", + title: "Paypal DR 97 DA 95 Traffic", + platform: "paypal", + }, + { + id: "25", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + platform: "pinterest", + }, + { + id: "26", + title: "Substack DR 97 DA 95 Traffic", + platform: "substack", + }, + { + id: "27", + title: "Paypal DR 97 DA 95 Traffic 3,989,220", + platform: "paypal", + }, + { + id: "28", + title: "Apple Music DR 97 DA 95 Traffic", + platform: "apple-music", + }, + { + id: "29", + title: "Pinterest DR 97 DA 95 Traffic 3,989,220", + platform: "pinterest", + }, + { + id: "30", + title: "Questions to ask your CPA Published o...", + platform: "wordpress", + }, + ], + }, +] + +function ShowDetails() { + const [columns, setColumns] = useState(initialData) + + return ( +
+
+ {columns.map((column) => ( +
+ {/* Column Header */} +
+
+

{column.title}

+ {column.count} +
+

{column.date}

+
+ + {/* Tasks List */} +
+ {column.tasks.map((task) => ( +
+ {platformIcons[task.platform]} +
+

{task.title}

+
+
+ ))} +
+
+ ))} +
+
+ ) +} + export default ShowDetails \ No newline at end of file diff --git a/src/components/flip-card.tsx b/src/components/flip-card.tsx new file mode 100644 index 0000000..9b26931 --- /dev/null +++ b/src/components/flip-card.tsx @@ -0,0 +1,307 @@ +"use client" + +import type React from "react" +import { useState } from "react" +import { ArrowLeft, Menu } from "lucide-react" +import CampaignTracker from "./CampaignTracker"; + +// Your existing components - make sure these are imported +// import MultiRingCircularProgress from './multi-ring-circular-progress'; +// import CampaignTracker from './campaign-tracker'; + +const CARDS = [ + { + title: "Richard Bower CPA", + percent: 99, + rings: [ + { color: "#4285F4", value: 99 }, // blue + { color: "#34A853", value: 80 }, // green + { color: "#FBBC05", value: 60 }, // yellow + { color: "#EA4335", value: 40 } // red + ], + tags: [ + { text: "G 14", extra: "+1", color: "#4285F4" }, + { text: "Ai" }, + { text: "LLM" }, + ] + }, + { + title: "CPA Los Angeles", + percent: 24, + rings: [ + { color: "#4285F4", value: 24 }, + { color: "#34A853", value: 18 }, + { color: "#FBBC05", value: 14 }, + { color: "#EA4335", value: 8 } + ], + tags: [ + { text: "G 14", extra: "-2", color: "#4285F4" } + ] + }, + { + title: "CPA Los Angeles4", + percent: 45, + rings: [ + { color: "#4285F4", value: 45 }, + { color: "#34A853", value: 42 }, + { color: "#FBBC05", value: 32 }, + { color: "#EA4335", value: 24 } + ], + tags: [ + { text: "G 14", extra: "-2", color: "#4285F4" }, + { text: "+7" }, + { text: "Ai" } + ] + }, + { + title: "Best CPA Los Angeles5", + percent: 89, + rings: [ + { color: "#4285F4", value: 89 }, + { color: "#34A853", value: 80 }, + { color: "#FBBC05", value: 72 }, + { color: "#EA4335", value: 57 } + ], + tags: [ + { text: "G 14", extra: "+1", color: "#4285F4" }, + { text: "+7" }, + { text: "Ai" } + ] + }, + { + title: "CPA Hollywood", + percent: 100, + rings: [ + { color: "#4285F4", value: 100 }, + { color: "#34A853", value: 100 }, + { color: "#FBBC05", value: 100 }, + { color: "#EA4335", value: 100 } + ], + tags: [ + { text: "G 14", extra: "+1", color: "#4285F4" }, + { text: "+7" }, + { text: "Ai" } + ], + badge: "Content Unlocked", + actionLink: "View Published Content " + }, + { + title: "Best CPA Los Angeles21", + percent: 89, + rings: [ + { color: "#cccccc", value: 89 }, + { color: "#cccccc", value: 80 }, + { color: "#cccccc", value: 72 }, + { color: "#cccccc", value: 57 } + ], + tags: [ + { text: "G 14", extra: "+1", color: "#cccccc" }, + { text: "+7", color: "#cccccc" }, + { text: "Ai", color: "#cccccc" } + ], + faded: true, + paused: true + } +]; + + +export default function FlipCardComplete() { + const [selectedCampaigns, setSelectedCampaigns] = useState([]) + const [activeCard, setActiveCard] = useState(null) + const [tableView, setTableView] = useState(null) + const [flippedCards, setFlippedCards] = useState([]) + + const handleCardClick = (title: string, paused: boolean) => { + if (paused) return + + if (!flippedCards.includes(title)) { + setFlippedCards([...flippedCards, title]) + setSelectedCampaigns([...selectedCampaigns, title]) + setActiveCard(title) + } + } + + const handleBackClick = (e: React.MouseEvent, title: string) => { + e.stopPropagation() + setFlippedCards(flippedCards.filter((t) => t !== title)) + setSelectedCampaigns(selectedCampaigns.filter((t) => t !== title)) + setActiveCard(null) + setTableView(null) + } + + const handleMenuClick = (title: string) => { + setTableView(tableView === title ? null : title) + } +console.log(CARDS) + return ( +
+ {CARDS.map((card, idx) => ( +
+
+ + {/* FRONT FACE - Your original card preview */} +
handleCardClick(card.title, card.paused)} + > +
+ {card.badge && ( +
+ {card.badge} +
+ )} +
+ {card.title.charAt(0)} +
+ +
+ {card.title} +
+ +
+ {card.tags.map((tag, i) => ( + + {tag.text} + {tag.extra && ( + + {tag.extra} + + )} + + ))} +
+ + {card.actionLink && ( +
+ {card.actionLink} +
+ )} + + {card.paused && ( +
+
Campaign paused
+ +
+ )} +
+
+ + {/* BACK FACE - Your original expanded card view */} +
+
+ {/* Header */} +
+
+ +

{card.title}

+
+ +
+ + {/* Content with smooth transitions */} +
+
+ +
+
+ + {/* Table View with smooth transitions */} +
+
+ + + {[ + { icon: "🅰️", title: "Questions to ask your CPA httpAmazon" }, + { icon: "🅰️", title: "Questions to ask your CPA Published on Amazon" }, + { icon: "🎵", title: "Questions to ask your CPA Published on Amazon AWS" }, + { icon: "🅰️", title: "Questions to ask your CPA httpAmazon" }, + { icon: "🅰️", title: "Questions to ask your CPA Published on Amazon" }, + { icon: "🎵", title: "Questions to ask your CPA Published on Amazon AWS" }, + { icon: "🅰️", title: "Questions to ask your CPA httpAmazon" }, + { icon: "🅰️", title: "Questions to ask your CPA Published on Amazon" }, + { icon: "🎵", title: "Questions to ask your CPA Published on Amazon AWS" }, + { icon: "🅿️", title: "Pinterest DR 97 DA 95 Traffic 3,989,220" }, + { icon: "📄", title: "Questions to ask your CPA Substack DR 97 DA 95" }, + ].map((row, rIdx) => ( + + + + + ))} + +
{row.icon} +
{row.title}
+
+
+
+ View All +
+
+
+
+
+
+ ))} +
+ ) +} diff --git a/src/components/shared/ContainerPage.tsx b/src/components/shared/ContainerPage.tsx index d601e9f..cf72b64 100644 --- a/src/components/shared/ContainerPage.tsx +++ b/src/components/shared/ContainerPage.tsx @@ -1,11 +1,11 @@ -import React from 'react' - -const ContainerPage = ({ children }: { children: React.ReactNode }) => { - return ( -
- {children} -
- ) -} - +import React from 'react' + +const ContainerPage = ({ children }: { children: React.ReactNode }) => { + return ( +
+ {children} +
+ ) +} + export default ContainerPage \ No newline at end of file diff --git a/src/components/shared/Footer.tsx b/src/components/shared/Footer.tsx index c22294e..042a1b5 100644 --- a/src/components/shared/Footer.tsx +++ b/src/components/shared/Footer.tsx @@ -3,9 +3,9 @@ import { Link } from "react-router-dom" const Footer = () => { return (