+
+
+ {CARDS.map((card, idx) => (
+
+
+ );
+}
+
+// This line to make just try to open one card
+// 106
+// 112
+// 118-121
+// 149
\ No newline at end of file
diff --git a/src/components/IntegratedStrategy.tsx b/src/components/IntegratedStrategy.tsx
new file mode 100644
index 0000000..c509bbc
--- /dev/null
+++ b/src/components/IntegratedStrategy.tsx
@@ -0,0 +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 }) => (
+ handleCardClick(card.title, card.paused)}
+ style={{
+ transform: selectedCampaigns.includes(card.title)
+ ? 'translateY(-5px) scale(1.02)'
+ : 'translateY(0px) scale(1)'
+ }}
+ >
+ {selectedCampaigns.includes(card.title) && activeCard === card.title ? (
+
+ ))}
+
+
+
+ {/* Header */}
+
+ ) : (
+ // Card preview state
+
+
+
+ {/* Content with smooth transitions */}
+
+
+
+
+ {card.title}
+
+
+
+ {/* 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
+
+ {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
+
+
+
+ )
+
+ return (
+
+
+
+
+ {category.name}
+ {category.count}
+
+
+ {category.items.map((item) => (
+
+
+
+ ))}
+
+ {item.icon}
+
+ {item.title}
+
+
+
+
+ )
+}
+
+export default IntegratedStrategy
diff --git a/src/components/MultiRingCircularProgress.tsx b/src/components/MultiRingCircularProgress.tsx
new file mode 100644
index 0000000..f444b3b
--- /dev/null
+++ b/src/components/MultiRingCircularProgress.tsx
@@ -0,0 +1,62 @@
+๏ปฟimport React from "react";
+import { PieChart, Pie, Cell } from "recharts";
+
+interface Ring {
+ color: string;
+ value: number;
+}
+
+interface Card {
+ percent: number;
+ rings: Ring[];
+}
+
+interface MultiRingCircularProgressProps {
+ card: Card;
+}
+
+export default function MultiRingCircularProgress({ card }: 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
+ }));
+
+ return (
+
+ {columns.map((column, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+ {column.date && {column.date}}
+ {column.title}
+ + {column.count} + +
+ {column.categories.map((category, categoryIndex) => (
+
+
+
+ {ringData.map((ring, index) => (
+
+ |
+ |
+
+ ))}
+
+ {percent}%
+
+
+
+ );
+}
diff --git a/src/components/Portfolio/BacklinkTypeDropdown.tsx b/src/components/Portfolio/BacklinkTypeDropdown.tsx
new file mode 100644
index 0000000..3c02b9b
--- /dev/null
+++ b/src/components/Portfolio/BacklinkTypeDropdown.tsx
@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+
+const BacklinkTypeDropdown = () => {
+
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+ const [checkedRings, setCheckedRings] = useState
+
+ {dropdownOpen && (
+
+ );
+
+}
+
+export default BacklinkTypeDropdown;
\ No newline at end of file
diff --git a/src/components/Strategy/ProgressMetrics.tsx b/src/components/Strategy/ProgressMetrics.tsx
new file mode 100644
index 0000000..46a30b7
--- /dev/null
+++ b/src/components/Strategy/ProgressMetrics.tsx
@@ -0,0 +1,93 @@
+import Preplextiy from "../../assets/icons/Preplextiy.png"
+import ChatGPT from "../../assets/icons/gpt.png"
+import MetricCard from "../shared/MetricCard"
+
+
+function ProgressMetrics() {
+ return (
+
+
+ )}
+ Show rings:
+ {Object.keys(checkedRings).map((ring, idx) => (
+
+ ))}
+
+
+ )
+}
+
+export default ProgressMetrics
\ No newline at end of file
diff --git a/src/components/Strategy/RoadmapSidebar.tsx b/src/components/Strategy/RoadmapSidebar.tsx
new file mode 100644
index 0000000..c1517ff
--- /dev/null
+++ b/src/components/Strategy/RoadmapSidebar.tsx
@@ -0,0 +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 (
+ 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 */}
+
+
+ {/* Right section with Chat GPT and metrics */}
+
+
+
+ 75%
+ Keyword Visibility
+
+
+
+ 
*/}
+
+
+
+
+ {/* Performance metrics with chart */}
+
+
+
+
+
+
+
+
+
+ G
+ 7
+ +10
+
+
+ ๐
+ 5
+ +3
+
+ Current Rank
+
+ {mode ?
+ null
+ :
+
+ )
+}
+
+export default RoadmapSidebar
\ No newline at end of file
diff --git a/src/components/Strategy/ShowDetails.tsx b/src/components/Strategy/ShowDetails.tsx
new file mode 100644
index 0000000..a1b2573
--- /dev/null
+++ b/src/components/Strategy/ShowDetails.tsx
@@ -0,0 +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: (
+
+
+ }
+
+
+ Roadmap
+
+ 1001
+
+
+
+ Total Links
+ Across all keywords
+
+ {keywords.map((keyword, index) => (
+
+ ))}
+
+
+ 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
+
+ )
+}
+
+export default ShowDetails
\ No newline at end of file
diff --git a/src/components/shared/ContainerPage.tsx b/src/components/shared/ContainerPage.tsx
new file mode 100644
index 0000000..d601e9f
--- /dev/null
+++ b/src/components/shared/ContainerPage.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const ContainerPage = ({ children }: { children: React.ReactNode }) => {
+ return (
+
+ {columns.map((column) => (
+
+
+ {/* Column Header */}
+
+ ))}
+
+
+
+ {/* Tasks List */}
+
+
+ {column.title}
+ {column.count} +{column.date}
+
+ {column.tasks.map((task) => (
+
+
+ {platformIcons[task.platform]}
+
+ ))}
+
+
+ {task.title}
+
+ {children}
+
+ )
+}
+
+export default ContainerPage
\ No newline at end of file
diff --git a/src/components/shared/Footer.tsx b/src/components/shared/Footer.tsx
new file mode 100644
index 0000000..c22294e
--- /dev/null
+++ b/src/components/shared/Footer.tsx
@@ -0,0 +1,32 @@
+import { Link } from "react-router-dom"
+
+const Footer = () => {
+ return (
+
+ )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/src/components/shared/Header.tsx b/src/components/shared/Header.tsx
new file mode 100644
index 0000000..a7bb9a4
--- /dev/null
+++ b/src/components/shared/Header.tsx
@@ -0,0 +1,220 @@
+๏ปฟimport { useLocation } from "react-router-dom";
+import {
+ LayoutDashboard,
+ BookOpen,
+ CalendarDays,
+ Plus,
+ User,
+ Settings,
+ CreditCard,
+ HelpCircle,
+ MessageCircle,
+ LogOut,
+ ChevronDown,
+ Menu,
+ X,
+} from 'lucide-react';
+
+import logo from "../../assets/logo.png";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+
+const Header = () => {
+ const location = useLocation();
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
+
+ const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
+ const toggleMobileNav = () => setIsMobileNavOpen(!isMobileNavOpen);
+
+ const navLinks = [
+ { name: 'Dashboard', to: '/', icon: LayoutDashboard },
+ { name: 'Portfolio', to: '/portfolio', icon: BookOpen },
+ { name: 'Strategy', to: '/strategy', icon: CalendarDays },
+ ];
+
+ const menuItems = [
+ { name: 'Edit Profile', icon: User, to: '/profile' },
+ { name: 'Settings', icon: Settings, to: '/settings' },
+ { name: 'Billing', icon: CreditCard, to: '/billing' },
+ { name: 'Help Desk', icon: HelpCircle, to: '/help-desk' },
+ { name: 'Feature Request', icon: MessageCircle, to: '/feature-request' },
+ ];
+
+ useEffect(() => {
+ setIsMenuOpen(false)
+ }, [location.pathname]);
+
+
+ return (
+
+
+ )
+}
+
+export default HeaderPage
\ No newline at end of file
diff --git a/src/components/shared/MetricCard.tsx b/src/components/shared/MetricCard.tsx
new file mode 100644
index 0000000..3bec8aa
--- /dev/null
+++ b/src/components/shared/MetricCard.tsx
@@ -0,0 +1,78 @@
+import { ArrowUp, Info } from "lucide-react";
+import { useState } from "react";
+
+// Reusable Metric Card Component
+const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChange, size }: { icon: any, img: any, value: any, label: any, tooltipText: any, valueChange: any, size: any }) => {
+ const [isHovered, setIsHovered] = useState(false);
+
+ if (Img) {
+ return (
+ {title}
+ +
+
+ setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}>
+ 
+
+ )
+ }
+ return (
+
+ {tooltipText && (
+
+
+
+ {isHovered && (
+
+ )}
+
+ {/* Tooltip triangle */}
+
+ {tooltipText}
+
+ )}
+ setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+ {Icon && (
+
+ );
+};
+
+export default MetricCard
\ No newline at end of file
diff --git a/src/components/shared/MyScrollableComponent.tsx b/src/components/shared/MyScrollableComponent.tsx
new file mode 100644
index 0000000..7c009b2
--- /dev/null
+++ b/src/components/shared/MyScrollableComponent.tsx
@@ -0,0 +1,11 @@
+import './scrollableComponent.css';
+
+export default function MyScrollableComponent() {
+ return (
+
+
+ )}
+
+
+
+
+
+
+ {value}
+ {valueChange && (
+
+
+ {Icon && (
+
+ )}
+
+
+ {label}
+ {tooltipText && (
+
+
+
+ )}
+
+ {/* Tooltip triangle */}
+
+ {tooltipText}
+
+ )}
+
+ {[...Array(30)].map((_, index) => (
+
+ );
+}
diff --git a/src/components/shared/UrlDropdown.tsx b/src/components/shared/UrlDropdown.tsx
new file mode 100644
index 0000000..6619b5d
--- /dev/null
+++ b/src/components/shared/UrlDropdown.tsx
@@ -0,0 +1,56 @@
+// components/UrlDropdown.jsx
+import { useState } from "react";
+
+const urlOptions = [
+ "http://www.mysite.com",
+ "http://www.myseosucks.com",
+ "http://www.sribbble.com",
+ "http://www.myseosucks.com",
+ "http://www.myseosucks.com",
+ "http://www.myseosucks.com",
+];
+
+export default function UrlDropdown() {
+ const [isOpen, setIsOpen] = useState(false);
+ const [selected, setSelected] = useState(urlOptions[0]);
+
+ const toggleDropdown = () => setIsOpen((prev) => !prev);
+ const handleSelect = (url) => {
+ setSelected(url);
+ setIsOpen(false);
+ };
+
+ return (
+ Line {index + 1}
+ ))} +
+ {/* Input box */}
+
+ );
+}
diff --git a/src/components/shared/scrollableComponent.css b/src/components/shared/scrollableComponent.css
new file mode 100644
index 0000000..ea1dbf6
--- /dev/null
+++ b/src/components/shared/scrollableComponent.css
@@ -0,0 +1,44 @@
+.custom-scrollbar {
+ max-height: 600px;
+ overflow-y: scroll;
+ border: 1px solid #ccc;
+ /* padding: 10px; */
+}
+
+.custom-scrollbar-table {
+ max-height: 460px;
+ overflow-y: scroll;
+ border: 1px solid #ccc;
+}
+
+/* ==== WebKit-based browsers (Chrome, Edge, Safari) ==== */
+.custom-scrollbar::-webkit-scrollbar {
+ width: 12px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+ background: #eee;
+ border-radius: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+ background: #999;
+ border-radius: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+ background: #555;
+}
+
+/* Remove the up/down arrows */
+.custom-scrollbar::-webkit-scrollbar-button {
+ display: none;
+ height: 0;
+ width: 0;
+}
+
+/* ==== Firefox ==== */
+.custom-scrollbar {
+ scrollbar-width: thin;
+ scrollbar-color: #999 #eee;
+}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..43cf7a0
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,11 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import './App.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+ {selected}
+
+
+ {/* Dropdown list */}
+ {isOpen && (
+
+ โผ
+
+
+ {urlOptions.map((url, index) => (
+
+ )}
+ handleSelect(url)}
+ className={`flex justify-between items-center px-3 py-2 hover:bg-gray-100 cursor-pointer ${selected === url ? "font-bold text-black" : "text-gray-700"
+ }`}
+ >
+ {url}
+ {selected === url && (
+ โ
+ )}
+
+ ))}
+
+ {/* Sidebar */}
+ {/* */}
+
+
+ {/* Title Bar */}
+
+
+
+
+
+ {/* Global Filter/Sort Header Row */}
+
+ CPA Los Angeles
+ Links: Indexed 32% โข Interlinked 4%
+
+ Content Publishing:
+ Locked
+
+
+
+
+
+
+
+ {/* Tables */}
+ {categories.map((cat, idx) => (
+
+
+ DR
+
+
+ DA
+
+
+ Traffic
+
+
+ Indexed
+
+
+ Interlinked
+
+
+ Date
+
+
+
+
+ ))}
+
+
+
+
+
+ {cat.name === 'Social' ? '๐ฌ' : cat.name === 'Citation' ? '๐' : '๐'}
+ {cat.name}
+
+ {cat.rows.length}
+
+
+
+ {cat.rows.map((row, rIdx) => (
+
+
+ | {row.icon} | +
+ {row.title}
+ |
+ {row.DR} | +{row.DA} | +{row.traffic} | ++ {row.indexed} + | ++ {row.interlinked} + | +{row.date} | +
+
+ );
+};
+
+export default Settings;
\ No newline at end of file
diff --git a/src/pages/Strategy.tsx b/src/pages/Strategy.tsx
new file mode 100644
index 0000000..cde438b
--- /dev/null
+++ b/src/pages/Strategy.tsx
@@ -0,0 +1,47 @@
+"use client"
+import { useState } from "react"
+// import { Search, MessageSquare } from "lucide-react"
+import IntegratedStrategy from "../components/IntegratedStrategy"
+import Vector from "../assets/icons/Vector.png"
+import Vector2 from "../assets/icons/Vector2.png"
+import ShowDetails from "../components/Strategy/ShowDetails"
+import ProgressMetrics from "../components/Strategy/ProgressMetrics"
+import RoadmapSidebar from "../components/Strategy/RoadmapSidebar"
+import HeaderPage from "../components/shared/HeaderPage"
+import ContainerPage from "../components/shared/ContainerPage"
+
+
+
+
+// Main integrated dashboard component
+function Strategy() {
+ const [selectedKeyword, setSelectedKeyword] = useState("CPA Los Angeles")
+
+ return (
+
+ {/* Sidebar */}
+
+
+
+
+ {/* Main Content */}
+ Settings
+ + +
+
+
+
+ Basic Information
++ View and update your personal details and account information. +
+ + +
+
+ {/*
+
+
+
+
+
+ {
+ selectedKeyword === "CPA Los Angeles" ?
+