diff --git a/package-lock.json b/package-lock.json index ba056aa..9ff8419 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,7 @@ "lodash": "^4.17.21", "lucide-react": "^0.508.0", "react": "^19.1.0", - "react-bootstrap": "^2.10.1", + "react-bootstrap": "^2.10.9", "react-bootstrap-range-slider": "^3.0.8", "react-dom": "^19.1.0", "react-redux": "^9.2.0", @@ -1814,6 +1814,11 @@ "undici-types": "~6.21.0" } }, + "node_modules/@types/prop-types": { + "version": "15.7.14", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", + "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==" + }, "node_modules/@types/react": { "version": "19.1.3", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.3.tgz", @@ -3928,13 +3933,14 @@ } }, "node_modules/react-bootstrap": { - "version": "2.10.1", - "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.1.tgz", - "integrity": "sha512-J3OpRZIvCTQK+Tg/jOkRUvpYLHMdGeU9KqFUBQrV0d/Qr/3nsINpiOJyZMWnM5SJ3ctZdhPA6eCIKpEJR3Ellg==", + "version": "2.10.9", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.9.tgz", + "integrity": "sha512-TJUCuHcxdgYpOqeWmRApM/Dy0+hVsxNRFvq2aRFQuxhNi/+ivOxC5OdWIeHS3agxvzJ4Ev4nDw2ZdBl9ymd/JQ==", "dependencies": { - "@babel/runtime": "^7.22.5", + "@babel/runtime": "^7.24.7", "@restart/hooks": "^0.4.9", - "@restart/ui": "^1.6.6", + "@restart/ui": "^1.9.4", + "@types/prop-types": "^15.7.12", "@types/react-transition-group": "^4.4.6", "classnames": "^2.3.2", "dom-helpers": "^5.2.1", diff --git a/package.json b/package.json index 16ba84d..a1f7475 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "lodash": "^4.17.21", "lucide-react": "^0.508.0", "react": "^19.1.0", - "react-bootstrap": "^2.10.1", + "react-bootstrap": "^2.10.9", "react-bootstrap-range-slider": "^3.0.8", "react-dom": "^19.1.0", "react-redux": "^9.2.0", diff --git a/src/components/BrandsList.jsx b/src/components/BrandsList.jsx index 00a809a..47967c0 100644 --- a/src/components/BrandsList.jsx +++ b/src/components/BrandsList.jsx @@ -4,7 +4,7 @@ import { fetchBrands } from '../store/slices/brandsSlice'; import { Card } from 'react-bootstrap'; import { Folders, Hash, Link, Users } from 'lucide-react'; -export default function BrandsList() { +export default function BrandsList({ openBrandDetail }) { const brands = useSelector((state) => state.brands.brands); const dispatch = useDispatch(); @@ -14,8 +14,8 @@ export default function BrandsList() { return (
- {brands.map((brand) => ( -
+ {brands?.length > 0 && brands.map((brand) => ( +
openBrandDetail(brand)}> {brand.name.slice(0, 1)} diff --git a/src/components/CampaignInfo.jsx b/src/components/CampaignInfo.jsx new file mode 100644 index 0000000..e155bcb --- /dev/null +++ b/src/components/CampaignInfo.jsx @@ -0,0 +1,91 @@ +import { ChartNoAxesColumnIncreasing, CircleDollarSign, Edit, Eye, Folders, Hash, Layers, Tag, TrendingUp, UserRoundCheck } from 'lucide-react'; +import { useSelector } from 'react-redux'; + +export default function CampaignInfo() { + const { selectedCampaign } = useSelector((state) => state.brands); + return ( +
+
+
{selectedCampaign.name}
+
{selectedCampaign.description || '--'}
+
+ + Edit +
+
+
+
+
+ + Service +
+
{selectedCampaign?.service || '--'}
+
+
+
+ + Category +
+
+ {selectedCampaign?.category?.length > 0 && + selectedCampaign.category.map((cat) => {cat})} +
+
+
+
+ + Followers +
+
{selectedCampaign?.followers || '--'}
+
+
+
+ + Creator Category +
+
{selectedCampaign?.creator_category || '--'}
+
+
+
+ + GMV +
+
{selectedCampaign?.gmv || '--'}
+
+
+
+ + Pricing +
+
{selectedCampaign?.pricing || '--'}
+
+
+
+ + Creator Level +
+
+ {selectedCampaign?.creator_level?.length > 0 && + selectedCampaign.creator_level.map((level) => ( + {level} + ))} +
+
+
+
+ + Views +
+
{selectedCampaign?.views || '--'}
+
+
+
+ + Creators +
+
{selectedCampaign?.creators || '--'}
+
+
+
+ ); +} diff --git a/src/components/CampaignList.jsx b/src/components/CampaignList.jsx new file mode 100644 index 0000000..35c1ad3 --- /dev/null +++ b/src/components/CampaignList.jsx @@ -0,0 +1,70 @@ +import React from 'react'; +import { useEffect } from 'react'; +import { useSelector } from 'react-redux'; +import { Link } from 'react-router-dom'; +import { ChartNoAxesColumnIncreasing, CircleDollarSign, Edit, Eye, Folders, Hash, Layers, Tag, TrendingUp, UserRoundCheck } from 'lucide-react'; + + +export default function CampaignList() { + const { selectedBrand } = useSelector((state) => state.brands); + + useEffect(() => { + console.log(selectedBrand); + }, [selectedBrand]); + return ( +
+ {selectedBrand?.campaigns?.length > 0 && + selectedBrand.campaigns.map((campaign) => ( +
+ + {campaign.name} + +
+
Service
+
{campaign.service}
+
+
+
Creator Type
+
{campaign.creatorType}
+
+
+
Creators
+
{campaign.creators}
+
+
+
Creator Level
+
+ {campaign.creator_level && + campaign.creator_level.map((level) => ( + {level} + ))} +
+
+
+
Category
+
+ {campaign.category && + campaign.category.map((cat) => {cat})} +
+
+
+
GMV
+
{campaign.gmv}
+
+
+
Followers
+
{campaign.followers}
+
+
+
Views
+
{campaign.views}
+
+
+
Budget
+
{campaign.budget}
+
+
+ ))} +
+ ); +} diff --git a/src/components/DatabaseList.jsx b/src/components/DatabaseList.jsx index 02f7d87..3dc85f2 100644 --- a/src/components/DatabaseList.jsx +++ b/src/components/DatabaseList.jsx @@ -10,6 +10,7 @@ import { } from '../store/slices/creatorsSlice'; import { setSortBy } from '../store/slices/filtersSlice'; import '../styles/DatabaseList.scss'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; export default function DatabaseList({ path }) { const dispatch = useDispatch(); @@ -175,7 +176,7 @@ export default function DatabaseList({ path }) { {creator.hasTiktok && (
- +
)} diff --git a/src/components/Layouts/Sidebar.jsx b/src/components/Layouts/Sidebar.jsx index 2a1d31f..ce0e022 100644 --- a/src/components/Layouts/Sidebar.jsx +++ b/src/components/Layouts/Sidebar.jsx @@ -144,15 +144,15 @@ export default function Sidebar() { return (
-
+ OOIN Logo {!collapsed && (
-
OOIN Media
+
OOIN Media
Creator Center
)} -
+