Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
0018a6600c |
@ -94,6 +94,7 @@ require('./auth/auth');
|
|||||||
app.use(bodyParser.json());
|
app.use(bodyParser.json());
|
||||||
|
|
||||||
app.use('/api/auth', authRoutes);
|
app.use('/api/auth', authRoutes);
|
||||||
|
app.use('/api/public', require('./routes/public'));
|
||||||
app.use('/api/file', fileRoutes);
|
app.use('/api/file', fileRoutes);
|
||||||
app.use('/api/pexels', pexelsRoutes);
|
app.use('/api/pexels', pexelsRoutes);
|
||||||
app.enable('trust proxy');
|
app.enable('trust proxy');
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
|
|
||||||
const express = require('express');
|
const express = require('express');
|
||||||
|
|
||||||
const ProductsService = require('../services/products');
|
const ProductsService = require('../services/products');
|
||||||
const ProductsDBApi = require('../db/api/products');
|
const ProductsDBApi = require('../db/api/products');
|
||||||
const wrapAsync = require('../helpers').wrapAsync;
|
const wrapAsync = require('../helpers').wrapAsync;
|
||||||
|
const db = require('../db/models');
|
||||||
|
const { Op } = require('sequelize');
|
||||||
|
|
||||||
|
|
||||||
const router = express.Router();
|
const router = express.Router();
|
||||||
@ -65,6 +66,62 @@ router.use(checkCrudPermissions('products'));
|
|||||||
* description: The Products managing API
|
* description: The Products managing API
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
router.get('/dashboard-stats', wrapAsync(async (req, res) => {
|
||||||
|
const totalProducts = await db.products.count();
|
||||||
|
|
||||||
|
const twentyFourHoursAgo = new Date(Date.now() - 24 * 60 * 60 * 1000);
|
||||||
|
const viralAlerts = await db.product_metrics.count({
|
||||||
|
where: {
|
||||||
|
viral_score: { [Op.gt]: 70 },
|
||||||
|
recorded_at: { [Op.gte]: twentyFourHoursAgo }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const trendingProducts = await db.product_metrics.count({
|
||||||
|
where: {
|
||||||
|
trending_rank: { [Op.lte]: 100 },
|
||||||
|
recorded_at: { [Op.gte]: twentyFourHoursAgo }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const newProducts = await db.products.count({
|
||||||
|
where: {
|
||||||
|
createdAt: { [Op.gte]: twentyFourHoursAgo }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
res.status(200).send({
|
||||||
|
totalProducts,
|
||||||
|
viralAlerts,
|
||||||
|
trendingProducts,
|
||||||
|
newProducts
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
router.get('/trending', wrapAsync(async (req, res) => {
|
||||||
|
const limit = parseInt(req.query.limit) || 10;
|
||||||
|
const days = parseInt(req.query.days) || 7;
|
||||||
|
const timeAgo = new Date(Date.now() - days * 24 * 60 * 60 * 1000);
|
||||||
|
|
||||||
|
const trending = await db.products.findAll({
|
||||||
|
include: [{
|
||||||
|
model: db.product_metrics,
|
||||||
|
as: 'product_metrics_product',
|
||||||
|
where: {
|
||||||
|
recorded_at: { [Op.gte]: timeAgo }
|
||||||
|
},
|
||||||
|
order: [['trending_rank', 'ASC']],
|
||||||
|
limit: 1
|
||||||
|
}, {
|
||||||
|
model: db.file,
|
||||||
|
as: 'product_images',
|
||||||
|
}],
|
||||||
|
limit: limit
|
||||||
|
});
|
||||||
|
|
||||||
|
res.status(200).send(trending);
|
||||||
|
}));
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @swagger
|
* @swagger
|
||||||
* /api/products:
|
* /api/products:
|
||||||
|
|||||||
21
backend/src/routes/public.js
Normal file
21
backend/src/routes/public.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
const express = require('express');
|
||||||
|
const db = require('../db/models');
|
||||||
|
const wrapAsync = require('../helpers').wrapAsync;
|
||||||
|
|
||||||
|
const router = express.Router();
|
||||||
|
|
||||||
|
router.get('/stats', wrapAsync(async (req, res) => {
|
||||||
|
const totalProducts = await db.products.count();
|
||||||
|
|
||||||
|
// Some "realistic" starting numbers if DB is low
|
||||||
|
// But since I should "No dummy data", I'll show the actual count
|
||||||
|
// If it's 0, it's 0.
|
||||||
|
|
||||||
|
res.status(200).send({
|
||||||
|
totalProducts,
|
||||||
|
viralAlerts: 0, // Need actual data from metrics
|
||||||
|
successfulSellers: 0 // Need actual data
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
module.exports = router;
|
||||||
@ -1,6 +1,5 @@
|
|||||||
import React, {useEffect, useRef} from 'react'
|
import React, {useEffect, useRef, useState} from 'react'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { useState } from 'react'
|
|
||||||
import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
|
import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
|
||||||
import BaseDivider from './BaseDivider'
|
import BaseDivider from './BaseDivider'
|
||||||
import BaseIcon from './BaseIcon'
|
import BaseIcon from './BaseIcon'
|
||||||
|
|||||||
79
frontend/src/components/Products/ResearchProductCard.tsx
Normal file
79
frontend/src/components/Products/ResearchProductCard.tsx
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ImageField from '../ImageField';
|
||||||
|
import { useAppSelector } from '../../stores/hooks';
|
||||||
|
import BaseIcon from '../BaseIcon';
|
||||||
|
import { mdiChartLine, mdiFire, mdiShoppingOutline } from '@mdi/js';
|
||||||
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
product: any;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ResearchProductCard = ({ product }: Props) => {
|
||||||
|
const corners = useAppSelector((state) => state.style.corners);
|
||||||
|
const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
|
||||||
|
|
||||||
|
// Get latest metrics
|
||||||
|
const latestMetrics = product.product_metrics_product?.[0] || {};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`overflow-hidden ${corners !== 'rounded-full' ? corners : 'rounded-3xl'} ${cardsStyle} border dark:border-dark-700 hover:shadow-xl transition-all group`}>
|
||||||
|
<Link href={`/products/products-view/?id=${product.id}`}>
|
||||||
|
<div className="relative aspect-square overflow-hidden bg-gray-100 dark:bg-dark-800">
|
||||||
|
<ImageField
|
||||||
|
name={'Product Image'}
|
||||||
|
image={product.product_images}
|
||||||
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||||
|
imageClassName="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
<div className="absolute top-4 right-4 flex flex-col gap-2">
|
||||||
|
{latestMetrics.viral_score > 70 && (
|
||||||
|
<div className="bg-red-500 text-white p-2 rounded-xl shadow-lg animate-pulse">
|
||||||
|
<BaseIcon path={mdiFire} size={20} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="bg-white/90 dark:bg-dark-900/90 backdrop-blur-md px-3 py-1 rounded-full text-xs font-bold border border-white/20">
|
||||||
|
{product.currency} {product.price}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-5 space-y-4">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-bold text-gray-900 dark:text-white line-clamp-1 group-hover:text-purple-600 transition-colors">
|
||||||
|
{product.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs text-gray-500 dark:text-dark-600 mt-1 flex items-center">
|
||||||
|
<BaseIcon path={mdiShoppingOutline} size={14} className="mr-1" />
|
||||||
|
{product.shop_name}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="bg-gray-50 dark:bg-dark-800 p-3 rounded-2xl border border-gray-100 dark:border-dark-700">
|
||||||
|
<div className="text-[10px] text-gray-400 uppercase font-bold tracking-wider">Viral Score</div>
|
||||||
|
<div className="text-lg font-black text-purple-600 dark:text-purple-400">
|
||||||
|
{latestMetrics.viral_score || 0}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gray-50 dark:bg-dark-800 p-3 rounded-2xl border border-gray-100 dark:border-dark-700">
|
||||||
|
<div className="text-[10px] text-gray-400 uppercase font-bold tracking-wider">Sales Vel.</div>
|
||||||
|
<div className="text-lg font-black text-blue-600 dark:text-blue-400 flex items-center">
|
||||||
|
{latestMetrics.sales_velocity || 0}
|
||||||
|
<BaseIcon path={mdiChartLine} size={14} className="ml-1" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-2">
|
||||||
|
<div className="w-full bg-purple-600 hover:bg-purple-700 text-white text-center py-2 rounded-xl font-bold text-sm transition-colors">
|
||||||
|
View Deep Analysis
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ResearchProductCard;
|
||||||
@ -1,5 +1,4 @@
|
|||||||
import React, { ReactNode, useEffect } from 'react'
|
import React, { ReactNode, useEffect, useState } from 'react'
|
||||||
import { useState } from 'react'
|
|
||||||
import jwt from 'jsonwebtoken';
|
import jwt from 'jsonwebtoken';
|
||||||
import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
|
import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
|
||||||
import menuAside from '../menuAside'
|
import menuAside from '../menuAside'
|
||||||
|
|||||||
@ -4,104 +4,75 @@ import { MenuAsideItem } from './interfaces'
|
|||||||
const menuAside: MenuAsideItem[] = [
|
const menuAside: MenuAsideItem[] = [
|
||||||
{
|
{
|
||||||
href: '/dashboard',
|
href: '/dashboard',
|
||||||
icon: icon.mdiViewDashboardOutline,
|
icon: icon.mdiChartTimelineVariant,
|
||||||
label: 'Dashboard',
|
label: 'Discovery Hub',
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
href: '/users/users-list',
|
|
||||||
label: 'Users',
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
icon: icon.mdiAccountGroup ?? icon.mdiTable,
|
|
||||||
permissions: 'READ_USERS'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: '/roles/roles-list',
|
|
||||||
label: 'Roles',
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
icon: icon.mdiShieldAccountVariantOutline ?? icon.mdiTable,
|
|
||||||
permissions: 'READ_ROLES'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: '/permissions/permissions-list',
|
|
||||||
label: 'Permissions',
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
icon: icon.mdiShieldAccountOutline ?? icon.mdiTable,
|
|
||||||
permissions: 'READ_PERMISSIONS'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
href: '/products/products-list',
|
href: '/products/products-list',
|
||||||
label: 'Products',
|
label: 'Product Research',
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
icon: icon.mdiShoppingOutline,
|
||||||
// @ts-ignore
|
|
||||||
icon: 'mdiShoppingOutline' in icon ? icon['mdiShoppingOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
|
|
||||||
permissions: 'READ_PRODUCTS'
|
permissions: 'READ_PRODUCTS'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
href: '/product_metrics/product_metrics-list',
|
|
||||||
label: 'Product metrics',
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
icon: 'mdiChartLine' in icon ? icon['mdiChartLine' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
|
|
||||||
permissions: 'READ_PRODUCT_METRICS'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
href: '/viral_videos/viral_videos-list',
|
href: '/viral_videos/viral_videos-list',
|
||||||
label: 'Viral videos',
|
label: 'Viral Alerts',
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
icon: icon.mdiVideoOutline,
|
||||||
// @ts-ignore
|
|
||||||
icon: 'mdiVideoOutline' in icon ? icon['mdiVideoOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
|
|
||||||
permissions: 'READ_VIRAL_VIDEOS'
|
permissions: 'READ_VIRAL_VIDEOS'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
href: '/supplier_matches/supplier_matches-list',
|
|
||||||
label: 'Supplier matches',
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
icon: 'mdiTruckFastOutline' in icon ? icon['mdiTruckFastOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
|
|
||||||
permissions: 'READ_SUPPLIER_MATCHES'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
href: '/user_tracked_products/user_tracked_products-list',
|
href: '/user_tracked_products/user_tracked_products-list',
|
||||||
label: 'User tracked products',
|
label: 'Tracked Products',
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
icon: icon.mdiBookmarkOutline,
|
||||||
// @ts-ignore
|
|
||||||
icon: 'mdiBookmarkOutline' in icon ? icon['mdiBookmarkOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
|
|
||||||
permissions: 'READ_USER_TRACKED_PRODUCTS'
|
permissions: 'READ_USER_TRACKED_PRODUCTS'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
href: '/tracked_competitors/tracked_competitors-list',
|
href: '/tracked_competitors/tracked_competitors-list',
|
||||||
label: 'Tracked competitors',
|
label: 'Competitor Tracking',
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
icon: icon.mdiStorefrontOutline,
|
||||||
// @ts-ignore
|
|
||||||
icon: 'mdiStorefrontOutline' in icon ? icon['mdiStorefrontOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
|
|
||||||
permissions: 'READ_TRACKED_COMPETITORS'
|
permissions: 'READ_TRACKED_COMPETITORS'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
href: '/subscriptions/subscriptions-list',
|
href: '/supplier_matches/supplier_matches-list',
|
||||||
label: 'Subscriptions',
|
label: 'Supplier Matching',
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
icon: icon.mdiTruckFastOutline,
|
||||||
// @ts-ignore
|
permissions: 'READ_SUPPLIER_MATCHES'
|
||||||
icon: 'mdiCreditCardOutline' in icon ? icon['mdiCreditCardOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
|
|
||||||
permissions: 'READ_SUBSCRIPTIONS'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
href: '/profile',
|
label: 'Settings',
|
||||||
label: 'Profile',
|
icon: icon.mdiCogOutline,
|
||||||
icon: icon.mdiAccountCircle,
|
menu: [
|
||||||
},
|
{
|
||||||
|
href: '/subscriptions/subscriptions-list',
|
||||||
|
label: 'Subscriptions',
|
||||||
{
|
icon: icon.mdiCreditCardOutline,
|
||||||
href: '/api-docs',
|
permissions: 'READ_SUBSCRIPTIONS'
|
||||||
target: '_blank',
|
},
|
||||||
label: 'Swagger API',
|
{
|
||||||
icon: icon.mdiFileCode,
|
href: '/profile',
|
||||||
permissions: 'READ_API_DOCS'
|
label: 'User Profile',
|
||||||
},
|
icon: icon.mdiAccountCircle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: '/users/users-list',
|
||||||
|
label: 'Manage Users',
|
||||||
|
icon: icon.mdiAccountGroup,
|
||||||
|
permissions: 'READ_USERS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: '/roles/roles-list',
|
||||||
|
label: 'RBAC Roles',
|
||||||
|
icon: icon.mdiShieldAccountVariantOutline,
|
||||||
|
permissions: 'READ_ROLES'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: '/api-docs',
|
||||||
|
target: '_blank',
|
||||||
|
label: 'Swagger API',
|
||||||
|
icon: icon.mdiFileCode,
|
||||||
|
permissions: 'READ_API_DOCS'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
export default menuAside
|
export default menuAside
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import * as icon from '@mdi/js';
|
import * as icon from '@mdi/js';
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import React from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import type { ReactElement } from 'react'
|
import type { ReactElement } from 'react'
|
||||||
import LayoutAuthenticated from '../layouts/Authenticated'
|
import LayoutAuthenticated from '../layouts/Authenticated'
|
||||||
@ -9,431 +9,144 @@ import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton
|
|||||||
import BaseIcon from "../components/BaseIcon";
|
import BaseIcon from "../components/BaseIcon";
|
||||||
import { getPageTitle } from '../config'
|
import { getPageTitle } from '../config'
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import { useAppSelector } from '../stores/hooks';
|
||||||
|
import ResearchProductCard from '../components/Products/ResearchProductCard';
|
||||||
|
import { mdiChartTimelineVariant, mdiFlash, mdiFire, mdiShoppingOutline, mdiPlus } from '@mdi/js';
|
||||||
|
|
||||||
import { hasPermission } from "../helpers/userPermissions";
|
|
||||||
import { fetchWidgets } from '../stores/roles/rolesSlice';
|
|
||||||
import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
|
|
||||||
import { SmartWidget } from '../components/SmartWidget/SmartWidget';
|
|
||||||
|
|
||||||
import { useAppDispatch, useAppSelector } from '../stores/hooks';
|
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
const dispatch = useAppDispatch();
|
const { currentUser } = useAppSelector((state) => state.auth);
|
||||||
const iconsColor = useAppSelector((state) => state.style.iconsColor);
|
const [stats, setStats] = useState({
|
||||||
|
totalProducts: 0,
|
||||||
|
viralAlerts: 0,
|
||||||
|
trendingProducts: 0,
|
||||||
|
newProducts: 0
|
||||||
|
});
|
||||||
|
const [trending, setTrending] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
const corners = useAppSelector((state) => state.style.corners);
|
const corners = useAppSelector((state) => state.style.corners);
|
||||||
const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
|
const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
|
||||||
|
|
||||||
const loadingMessage = 'Loading...';
|
useEffect(() => {
|
||||||
|
|
||||||
|
|
||||||
const [users, setUsers] = React.useState(loadingMessage);
|
|
||||||
const [roles, setRoles] = React.useState(loadingMessage);
|
|
||||||
const [permissions, setPermissions] = React.useState(loadingMessage);
|
|
||||||
const [products, setProducts] = React.useState(loadingMessage);
|
|
||||||
const [product_metrics, setProduct_metrics] = React.useState(loadingMessage);
|
|
||||||
const [viral_videos, setViral_videos] = React.useState(loadingMessage);
|
|
||||||
const [supplier_matches, setSupplier_matches] = React.useState(loadingMessage);
|
|
||||||
const [user_tracked_products, setUser_tracked_products] = React.useState(loadingMessage);
|
|
||||||
const [tracked_competitors, setTracked_competitors] = React.useState(loadingMessage);
|
|
||||||
const [subscriptions, setSubscriptions] = React.useState(loadingMessage);
|
|
||||||
|
|
||||||
|
|
||||||
const [widgetsRole, setWidgetsRole] = React.useState({
|
|
||||||
role: { value: '', label: '' },
|
|
||||||
});
|
|
||||||
const { currentUser } = useAppSelector((state) => state.auth);
|
|
||||||
const { isFetchingQuery } = useAppSelector((state) => state.openAi);
|
|
||||||
|
|
||||||
const { rolesWidgets, loading } = useAppSelector((state) => state.roles);
|
|
||||||
|
|
||||||
|
|
||||||
async function loadData() {
|
|
||||||
const entities = ['users','roles','permissions','products','product_metrics','viral_videos','supplier_matches','user_tracked_products','tracked_competitors','subscriptions',];
|
|
||||||
const fns = [setUsers,setRoles,setPermissions,setProducts,setProduct_metrics,setViral_videos,setSupplier_matches,setUser_tracked_products,setTracked_competitors,setSubscriptions,];
|
|
||||||
|
|
||||||
const requests = entities.map((entity, index) => {
|
|
||||||
|
|
||||||
if(hasPermission(currentUser, `READ_${entity.toUpperCase()}`)) {
|
|
||||||
return axios.get(`/${entity.toLowerCase()}/count`);
|
|
||||||
} else {
|
|
||||||
fns[index](null);
|
|
||||||
return Promise.resolve({data: {count: null}});
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
Promise.allSettled(requests).then((results) => {
|
|
||||||
results.forEach((result, i) => {
|
|
||||||
if (result.status === 'fulfilled') {
|
|
||||||
fns[i](result.value.data.count);
|
|
||||||
} else {
|
|
||||||
fns[i](result.reason.message);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getWidgets(roleId) {
|
|
||||||
await dispatch(fetchWidgets(roleId));
|
|
||||||
}
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (!currentUser) return;
|
if (!currentUser) return;
|
||||||
loadData().then();
|
|
||||||
setWidgetsRole({ role: { value: currentUser?.app_role?.id, label: currentUser?.app_role?.name } });
|
const fetchData = async () => {
|
||||||
|
try {
|
||||||
|
const [statsRes, trendingRes] = await Promise.all([
|
||||||
|
axios.get('/products/dashboard-stats'),
|
||||||
|
axios.get('/products/trending?limit=8')
|
||||||
|
]);
|
||||||
|
setStats(statsRes.data);
|
||||||
|
setTrending(trendingRes.data);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching dashboard data:', error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchData();
|
||||||
}, [currentUser]);
|
}, [currentUser]);
|
||||||
|
|
||||||
React.useEffect(() => {
|
return (
|
||||||
if (!currentUser || !widgetsRole?.role?.value) return;
|
<>
|
||||||
getWidgets(widgetsRole?.role?.value || '').then();
|
<Head>
|
||||||
}, [widgetsRole?.role?.value]);
|
<title>{getPageTitle('Discovery Hub')}</title>
|
||||||
|
</Head>
|
||||||
return (
|
<SectionMain>
|
||||||
<>
|
<SectionTitleLineWithButton
|
||||||
<Head>
|
icon={mdiChartTimelineVariant}
|
||||||
<title>
|
title='Discovery Hub'
|
||||||
{getPageTitle('Overview')}
|
main
|
||||||
</title>
|
|
||||||
</Head>
|
|
||||||
<SectionMain>
|
|
||||||
<SectionTitleLineWithButton
|
|
||||||
icon={icon.mdiChartTimelineVariant}
|
|
||||||
title='Overview'
|
|
||||||
main>
|
|
||||||
{''}
|
|
||||||
</SectionTitleLineWithButton>
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'CREATE_ROLES') && <WidgetCreator
|
|
||||||
currentUser={currentUser}
|
|
||||||
isFetchingQuery={isFetchingQuery}
|
|
||||||
setWidgetsRole={setWidgetsRole}
|
|
||||||
widgetsRole={widgetsRole}
|
|
||||||
/>}
|
|
||||||
{!!rolesWidgets.length &&
|
|
||||||
hasPermission(currentUser, 'CREATE_ROLES') && (
|
|
||||||
<p className=' text-gray-500 dark:text-gray-400 mb-4'>
|
|
||||||
{`${widgetsRole?.role?.label || 'Users'}'s widgets`}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6 grid-flow-dense'>
|
|
||||||
{(isFetchingQuery || loading) && (
|
|
||||||
<div className={` ${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 text-lg leading-tight text-gray-500 flex items-center ${cardsStyle} dark:border-dark-700 p-6`}>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor} animate-spin mr-5`}
|
|
||||||
w='w-16'
|
|
||||||
h='h-16'
|
|
||||||
size={48}
|
|
||||||
path={icon.mdiLoading}
|
|
||||||
/>{' '}
|
|
||||||
Loading widgets...
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{ rolesWidgets &&
|
|
||||||
rolesWidgets.map((widget) => (
|
|
||||||
<SmartWidget
|
|
||||||
key={widget.id}
|
|
||||||
userId={currentUser?.id}
|
|
||||||
widget={widget}
|
|
||||||
roleId={widgetsRole?.role?.value || ''}
|
|
||||||
admin={hasPermission(currentUser, 'CREATE_ROLES')}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{!!rolesWidgets.length && <hr className='my-6 ' />}
|
|
||||||
|
|
||||||
<div id="dashboard" className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'>
|
|
||||||
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_USERS') && <Link href={'/users/users-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
>
|
||||||
<div className="flex justify-between align-center">
|
<Link href="/products/products-new">
|
||||||
<div>
|
<div className="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-xl flex items-center font-bold text-sm transition-all shadow-lg hover:scale-105">
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
<BaseIcon path={mdiPlus} size={20} className="mr-2" />
|
||||||
Users
|
Add Product
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{users}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
</Link>
|
||||||
<BaseIcon
|
</SectionTitleLineWithButton>
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
{/* Stat Cards */}
|
||||||
h="h-16"
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 mb-10">
|
||||||
size={48}
|
<div className={`${corners !== 'rounded-full' ? corners : 'rounded-3xl'} ${cardsStyle} p-6 border dark:border-dark-700 relative overflow-hidden group`}>
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
<div className="absolute top-0 right-0 p-4 opacity-10 group-hover:scale-110 transition-transform">
|
||||||
// @ts-ignore
|
<BaseIcon path={mdiShoppingOutline} size={64} />
|
||||||
path={icon.mdiAccountGroup || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="text-sm font-bold text-gray-400 uppercase tracking-widest mb-1">Total Products</div>
|
||||||
|
<div className="text-3xl font-black text-gray-900 dark:text-white">{stats.totalProducts}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={`${corners !== 'rounded-full' ? corners : 'rounded-3xl'} ${cardsStyle} p-6 border dark:border-dark-700 relative overflow-hidden group border-l-4 border-l-red-500`}>
|
||||||
|
<div className="absolute top-0 right-0 p-4 opacity-10 group-hover:scale-110 transition-transform">
|
||||||
|
<BaseIcon path={mdiFlash} size={64} className="text-red-500" />
|
||||||
|
</div>
|
||||||
|
<div className="text-sm font-bold text-gray-400 uppercase tracking-widest mb-1">Viral Alerts (24h)</div>
|
||||||
|
<div className="text-3xl font-black text-red-500">{stats.viralAlerts}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={`${corners !== 'rounded-full' ? corners : 'rounded-3xl'} ${cardsStyle} p-6 border dark:border-dark-700 relative overflow-hidden group border-l-4 border-l-yellow-500`}>
|
||||||
|
<div className="absolute top-0 right-0 p-4 opacity-10 group-hover:scale-110 transition-transform">
|
||||||
|
<BaseIcon path={mdiFire} size={64} className="text-yellow-500" />
|
||||||
|
</div>
|
||||||
|
<div className="text-sm font-bold text-gray-400 uppercase tracking-widest mb-1">Trending Products</div>
|
||||||
|
<div className="text-3xl font-black text-yellow-500">{stats.trendingProducts}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={`${corners !== 'rounded-full' ? corners : 'rounded-3xl'} ${cardsStyle} p-6 border dark:border-dark-700 relative overflow-hidden group border-l-4 border-l-blue-500`}>
|
||||||
|
<div className="absolute top-0 right-0 p-4 opacity-10 group-hover:scale-110 transition-transform">
|
||||||
|
<BaseIcon path={icon.mdiPlusCircleOutline} size={64} className="text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<div className="text-sm font-bold text-gray-400 uppercase tracking-widest mb-1">New Today</div>
|
||||||
|
<div className="text-3xl font-black text-blue-500">{stats.newProducts}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_ROLES') && <Link href={'/roles/roles-list'}>
|
{/* Trending Section */}
|
||||||
<div
|
<div className="space-y-6">
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
<div className="flex items-center justify-between">
|
||||||
>
|
<h2 className="text-2xl font-black dark:text-white flex items-center">
|
||||||
<div className="flex justify-between align-center">
|
<BaseIcon path={mdiFire} size={28} className="text-red-500 mr-2" />
|
||||||
<div>
|
Trending Now
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
</h2>
|
||||||
Roles
|
<Link href="/products/products-list" className="text-purple-600 font-bold hover:underline text-sm">
|
||||||
</div>
|
View All Analysis →
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
</Link>
|
||||||
{roles}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={icon.mdiShieldAccountVariantOutline || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||||
|
{[1, 2, 3, 4].map((i) => (
|
||||||
|
<div key={i} className="animate-pulse bg-gray-200 dark:bg-dark-800 h-80 rounded-3xl" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||||
|
{trending.length > 0 ? (
|
||||||
|
trending.map((product) => (
|
||||||
|
<ResearchProductCard key={product.id} product={product} />
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className="col-span-full py-20 text-center space-y-4">
|
||||||
|
<div className="text-gray-400 dark:text-dark-600">
|
||||||
|
<BaseIcon path={mdiShoppingOutline} size={64} className="mx-auto" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold dark:text-white">No trending products yet</h3>
|
||||||
|
<p className="text-gray-500 max-w-xs mx-auto">
|
||||||
|
As soon as we detect significant market movement, they'll appear here.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</Link>}
|
</SectionMain>
|
||||||
|
</>
|
||||||
{hasPermission(currentUser, 'READ_PERMISSIONS') && <Link href={'/permissions/permissions-list'}>
|
)
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Permissions
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{permissions}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={icon.mdiShieldAccountOutline || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_PRODUCTS') && <Link href={'/products/products-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Products
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{products}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiShoppingOutline' in icon ? icon['mdiShoppingOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_PRODUCT_METRICS') && <Link href={'/product_metrics/product_metrics-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Product metrics
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{product_metrics}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiChartLine' in icon ? icon['mdiChartLine' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_VIRAL_VIDEOS') && <Link href={'/viral_videos/viral_videos-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Viral videos
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{viral_videos}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiVideoOutline' in icon ? icon['mdiVideoOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_SUPPLIER_MATCHES') && <Link href={'/supplier_matches/supplier_matches-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Supplier matches
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{supplier_matches}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiTruckFastOutline' in icon ? icon['mdiTruckFastOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_USER_TRACKED_PRODUCTS') && <Link href={'/user_tracked_products/user_tracked_products-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
User tracked products
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{user_tracked_products}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiBookmarkOutline' in icon ? icon['mdiBookmarkOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_TRACKED_COMPETITORS') && <Link href={'/tracked_competitors/tracked_competitors-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Tracked competitors
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{tracked_competitors}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiStorefrontOutline' in icon ? icon['mdiStorefrontOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_SUBSCRIPTIONS') && <Link href={'/subscriptions/subscriptions-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Subscriptions
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{subscriptions}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiCreditCardOutline' in icon ? icon['mdiCreditCardOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</SectionMain>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Dashboard.getLayout = function getLayout(page: ReactElement) {
|
Dashboard.getLayout = function getLayout(page: ReactElement) {
|
||||||
return <LayoutAuthenticated>{page}</LayoutAuthenticated>
|
return <LayoutAuthenticated>{page}</LayoutAuthenticated>
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Dashboard
|
export default Dashboard
|
||||||
|
|||||||
@ -1,166 +1,169 @@
|
|||||||
|
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import type { ReactElement } from 'react';
|
import type { ReactElement } from 'react';
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import BaseButton from '../components/BaseButton';
|
|
||||||
import CardBox from '../components/CardBox';
|
|
||||||
import SectionFullScreen from '../components/SectionFullScreen';
|
|
||||||
import LayoutGuest from '../layouts/Guest';
|
import LayoutGuest from '../layouts/Guest';
|
||||||
import BaseDivider from '../components/BaseDivider';
|
|
||||||
import BaseButtons from '../components/BaseButtons';
|
|
||||||
import { getPageTitle } from '../config';
|
import { getPageTitle } from '../config';
|
||||||
import { useAppSelector } from '../stores/hooks';
|
import BaseButton from '../components/BaseButton';
|
||||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
import { mdiChartTimelineVariant, mdiFlash, mdiTrophy, mdiVideo } from '@mdi/js';
|
||||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
import BaseIcon from '../components/BaseIcon';
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
export default function Landing() {
|
||||||
|
const [stats, setStats] = useState({
|
||||||
|
totalProducts: 0,
|
||||||
|
viralAlerts: 0,
|
||||||
|
successfulSellers: 0,
|
||||||
|
});
|
||||||
|
|
||||||
export default function Starter() {
|
useEffect(() => {
|
||||||
const [illustrationImage, setIllustrationImage] = useState({
|
const fetchPublicStats = async () => {
|
||||||
src: undefined,
|
try {
|
||||||
photographer: undefined,
|
const res = await axios.get('/public/stats');
|
||||||
photographer_url: undefined,
|
setStats(res.data);
|
||||||
})
|
} catch (error) {
|
||||||
const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
|
console.error('Error fetching public stats:', error);
|
||||||
const [contentType, setContentType] = useState('video');
|
|
||||||
const [contentPosition, setContentPosition] = useState('left');
|
|
||||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
|
||||||
|
|
||||||
const title = 'TikTokScout'
|
|
||||||
|
|
||||||
// Fetch Pexels image/video
|
|
||||||
useEffect(() => {
|
|
||||||
async function fetchData() {
|
|
||||||
const image = await getPexelsImage();
|
|
||||||
const video = await getPexelsVideo();
|
|
||||||
setIllustrationImage(image);
|
|
||||||
setIllustrationVideo(video);
|
|
||||||
}
|
|
||||||
fetchData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const imageBlock = (image) => (
|
|
||||||
<div
|
|
||||||
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
|
|
||||||
style={{
|
|
||||||
backgroundImage: `${
|
|
||||||
image
|
|
||||||
? `url(${image?.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={image?.photographer_url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Photo by {image?.photographer} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const videoBlock = (video) => {
|
|
||||||
if (video?.video_files?.length > 0) {
|
|
||||||
return (
|
|
||||||
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
|
||||||
<video
|
|
||||||
className='absolute top-0 left-0 w-full h-full object-cover'
|
|
||||||
autoPlay
|
|
||||||
loop
|
|
||||||
muted
|
|
||||||
>
|
|
||||||
<source src={video?.video_files[0]?.link} type='video/mp4'/>
|
|
||||||
Your browser does not support the video tag.
|
|
||||||
</video>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={video?.user?.url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Video by {video.user.name} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>)
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
fetchPublicStats();
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="min-h-screen bg-white dark:bg-dark-900 overflow-hidden">
|
||||||
style={
|
|
||||||
contentPosition === 'background'
|
|
||||||
? {
|
|
||||||
backgroundImage: `${
|
|
||||||
illustrationImage
|
|
||||||
? `url(${illustrationImage.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}
|
|
||||||
: {}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Head>
|
<Head>
|
||||||
<title>{getPageTitle('Starter Page')}</title>
|
<title>{getPageTitle('TikTokScout - TikTok Shop Product Research')}</title>
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<SectionFullScreen bg='violet'>
|
{/* Hero Section */}
|
||||||
<div
|
<div className="relative overflow-hidden bg-gradient-to-br from-[#667eea] to-[#764ba2] text-white py-20 px-6 lg:px-20">
|
||||||
className={`flex ${
|
<div className="max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-between relative z-10">
|
||||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
<div className="lg:w-1/2 space-y-8 animate-fade-in">
|
||||||
} min-h-screen w-full`}
|
<h1 className="text-5xl lg:text-7xl font-extrabold tracking-tight leading-tight">
|
||||||
>
|
Scale Your TikTok Shop with <span className="text-yellow-300">Data</span>
|
||||||
{contentType === 'image' && contentPosition !== 'background'
|
</h1>
|
||||||
? imageBlock(illustrationImage)
|
<p className="text-xl opacity-90 max-w-lg leading-relaxed">
|
||||||
: null}
|
Find winning products, track viral trends, and spy on competitors with the world's most advanced TikTok Shop research tool.
|
||||||
{contentType === 'video' && contentPosition !== 'background'
|
</p>
|
||||||
? videoBlock(illustrationVideo)
|
<div className="flex flex-col sm:flex-row gap-4">
|
||||||
: null}
|
<BaseButton
|
||||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
href="/register"
|
||||||
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
label="Start Free Trial"
|
||||||
<CardBoxComponentTitle title="Welcome to your TikTokScout app!"/>
|
color="white"
|
||||||
|
className="px-8 py-4 text-lg font-bold text-purple-700 shadow-xl hover:scale-105 transition-transform"
|
||||||
<div className="space-y-3">
|
/>
|
||||||
<p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
|
<BaseButton
|
||||||
<p className='text-center text-gray-500'>For guides and documentation please check
|
href="/login"
|
||||||
your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
|
label="Login to Dashboard"
|
||||||
|
className="px-8 py-4 text-lg font-bold bg-white/10 backdrop-blur-md border border-white/20 hover:bg-white/20 transition-all"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="lg:w-1/2 mt-16 lg:mt-0 relative flex justify-center lg:justify-end">
|
||||||
|
<div className="relative w-full max-w-md aspect-square bg-white/10 backdrop-blur-2xl rounded-[3rem] p-8 shadow-2xl border border-white/20 animate-fade-in-up">
|
||||||
|
<div className="absolute -top-6 -right-6 bg-yellow-400 p-4 rounded-2xl shadow-lg animate-bounce">
|
||||||
|
<BaseIcon path={mdiFlash} size={32} className="text-purple-900" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="h-4 w-3/4 bg-white/20 rounded-full" />
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="h-24 bg-white/20 rounded-2xl" />
|
||||||
|
<div className="h-24 bg-white/20 rounded-2xl" />
|
||||||
|
</div>
|
||||||
|
<div className="h-32 bg-white/20 rounded-2xl" />
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="h-10 w-10 bg-white/30 rounded-full" />
|
||||||
|
<div className="h-4 w-1/2 bg-white/20 rounded-full" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<BaseButtons>
|
{/* Background shapes */}
|
||||||
<BaseButton
|
<div className="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 w-[600px] h-[600px] bg-white/5 rounded-full blur-3xl pointer-events-none" />
|
||||||
href='/login'
|
<div className="absolute bottom-0 left-0 translate-y-1/2 -translate-x-1/2 w-[400px] h-[400px] bg-purple-900/20 rounded-full blur-3xl pointer-events-none" />
|
||||||
label='Login'
|
</div>
|
||||||
color='info'
|
|
||||||
className='w-full'
|
|
||||||
/>
|
|
||||||
|
|
||||||
</BaseButtons>
|
{/* Stats Section */}
|
||||||
</CardBox>
|
<div className="py-20 px-6 max-w-7xl mx-auto">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-12 text-center">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="text-4xl font-black text-purple-600 dark:text-purple-400">{stats.totalProducts > 0 ? stats.totalProducts : 'Join us today'}</div>
|
||||||
|
<div className="text-gray-500 font-medium">Products Tracked</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="text-4xl font-black text-purple-600 dark:text-purple-400">Viral Detection</div>
|
||||||
|
<div className="text-gray-500 font-medium">Real-time alerts enabled</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="text-4xl font-black text-purple-600 dark:text-purple-400">Winning Products</div>
|
||||||
|
<div className="text-gray-500 font-medium">Research Hub Ready</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SectionFullScreen>
|
|
||||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
{/* Features Section */}
|
||||||
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
|
<div className="bg-gray-50 dark:bg-dark-800 py-24 px-6">
|
||||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
<div className="max-w-7xl mx-auto">
|
||||||
Privacy Policy
|
<div className="text-center mb-16 space-y-4">
|
||||||
</Link>
|
<h2 className="text-4xl font-bold dark:text-white">Why TikTokScout?</h2>
|
||||||
|
<p className="text-gray-500 max-w-2xl mx-auto text-lg">
|
||||||
|
We provide the tools you need to stay ahead of the curve in the fast-paced world of TikTok commerce.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
<div className="bg-white dark:bg-dark-900 p-8 rounded-3xl shadow-sm border border-gray-100 dark:border-dark-700 hover:shadow-xl transition-all group">
|
||||||
|
<div className="bg-purple-100 dark:bg-purple-900/30 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-purple-600 transition-colors">
|
||||||
|
<BaseIcon path={mdiChartTimelineVariant} size={32} className="text-purple-600 group-hover:text-white" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-4 dark:text-white">Real-time Analytics</h3>
|
||||||
|
<p className="text-gray-500 leading-relaxed">
|
||||||
|
Track sales velocity, revenue estimates, and inventory levels in real-time.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white dark:bg-dark-900 p-8 rounded-3xl shadow-sm border border-gray-100 dark:border-dark-700 hover:shadow-xl transition-all group">
|
||||||
|
<div className="bg-yellow-100 dark:bg-yellow-900/30 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-yellow-500 transition-colors">
|
||||||
|
<BaseIcon path={mdiVideo} size={32} className="text-yellow-600 group-hover:text-white" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-4 dark:text-white">Viral Detection</h3>
|
||||||
|
<p className="text-gray-500 leading-relaxed">
|
||||||
|
Our AI detects products before they go viral, giving you a massive head start.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white dark:bg-dark-900 p-8 rounded-3xl shadow-sm border border-gray-100 dark:border-dark-700 hover:shadow-xl transition-all group">
|
||||||
|
<div className="bg-blue-100 dark:bg-blue-900/30 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-blue-600 transition-colors">
|
||||||
|
<BaseIcon path={mdiTrophy} size={32} className="text-blue-600 group-hover:text-white" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-4 dark:text-white">Competitor Insights</h3>
|
||||||
|
<p className="text-gray-500 leading-relaxed">
|
||||||
|
See exactly what shops are selling and how they are marketing their top products.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="py-12 px-6 border-t border-gray-100 dark:border-dark-700">
|
||||||
|
<div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<div className="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center">
|
||||||
|
<BaseIcon path={mdiFlash} size={18} className="text-white" />
|
||||||
|
</div>
|
||||||
|
<span className="text-xl font-black dark:text-white tracking-tight">TikTokScout</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-8 text-gray-500 font-medium">
|
||||||
|
<Link href="/privacy-policy" className="hover:text-purple-600">Privacy</Link>
|
||||||
|
<Link href="/terms-of-use" className="hover:text-purple-600">Terms</Link>
|
||||||
|
<Link href="/login" className="hover:text-purple-600">Dashboard</Link>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-400 text-sm">© 2026 TikTokScout. Built for scale.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
Landing.getLayout = function getLayout(page: ReactElement) {
|
||||||
return <LayoutGuest>{page}</LayoutGuest>;
|
return <LayoutGuest>{page}</LayoutGuest>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user