// ** React Imports import { SyntheticEvent, useState } from 'react' // ** MUI Import import Box from '@mui/material/Box' import Tab from '@mui/material/Tab' import Card from '@mui/material/Card' import TabList from '@mui/lab/TabList' import Table from '@mui/material/Table' import TabPanel from '@mui/lab/TabPanel' import Avatar from '@mui/material/Avatar' import TabContext from '@mui/lab/TabContext' import TableRow from '@mui/material/TableRow' import TableBody from '@mui/material/TableBody' import TableCell from '@mui/material/TableCell' import TableHead from '@mui/material/TableHead' import CardHeader from '@mui/material/CardHeader' import Typography from '@mui/material/Typography' import TableContainer from '@mui/material/TableContainer' // ** Icon Imports import Icon from 'src/@core/components/icon' // ** Type Imports import { ThemeColor } from 'src/@core/layouts/types' // ** Custom Components import CustomChip from 'src/@core/components/mui/chip' import OptionsMenu from 'src/@core/components/option-menu' // ** Util Import import { hexToRGBA } from 'src/@core/utils/hex-to-rgba' import Image from 'next/image' interface StatusObj { [ke: string]: { text: string color: ThemeColor } } interface TabContentType { status: string parameter: string conversion: string totalRevenue: string conversionDifference?: 'positive' | 'negative' } interface TabContentDataType { reddit: TabContentType[] google: TabContentType[] facebook: TabContentType[] instagram: TabContentType[] } const statusObj: StatusObj = { active: { text: 'Active', color: 'primary' }, expired: { text: 'Expired', color: 'error' }, 'in-draft': { text: 'In Draft', color: 'info' }, completed: { text: 'Completed', color: 'warning' } } const tabContentData: TabContentDataType = { google: [ { status: 'active', conversion: '+24', totalRevenue: '$42,857', parameter: 'Email Marketing Campaign' }, { conversion: '-12', status: 'completed', totalRevenue: '$850', parameter: 'Google Workspace', conversionDifference: 'negative' }, { status: 'active', conversion: '+24', totalRevenue: '$5,576', parameter: 'Affiliation Program' }, { conversion: '0', status: 'in-draft', totalRevenue: '$0', parameter: 'Google AdSense' } ], facebook: [ { status: 'active', conversion: '-8', totalRevenue: '$322', conversionDifference: 'negative', parameter: 'Create Audiences in Ads Manager' }, { status: 'active', conversion: '+19', totalRevenue: '$5,634', parameter: 'Facebook page advertising' }, { status: 'expired', conversion: '-23', totalRevenue: '$751', conversionDifference: 'negative', parameter: 'Messenger advertising' }, { conversion: '+21', status: 'completed', totalRevenue: '$3,585', parameter: 'Video campaign' } ], instagram: [ { conversion: '-15', status: 'in-draft', totalRevenue: '$599', conversionDifference: 'negative', parameter: 'Create shopping advertising' }, { conversion: '+37', status: 'completed', totalRevenue: '$1,467', parameter: 'IGTV advertising' }, { conversion: '0', status: 'in-draft', totalRevenue: '$0', parameter: 'Collection advertising' }, { status: 'active', conversion: '+29', totalRevenue: '$4,546', parameter: 'Stories advertising' } ], reddit: [ { conversion: '+2', status: 'expired', totalRevenue: '$404', parameter: 'Interests advertising' }, { status: 'active', conversion: '+25', totalRevenue: '$399', parameter: 'Community advertising' }, { conversion: '+21', status: 'completed', totalRevenue: '$177', parameter: 'Device advertising' }, { status: 'active', conversion: '-5', totalRevenue: '$1,139', parameter: 'Campaigning', conversionDifference: 'negative' } ] } const RenderTabContent = ({ data }: { data: TabContentType[] }) => { return ( `${theme.spacing(2.5)} !important` } }}> Parameter Status Conversion Total Revenue {data.map((row: TabContentType, index: number) => ( `${theme.spacing(3)} !important` } }} > {row.parameter} {`${row.conversion}%`} {row.totalRevenue} ))}
) } const AnalyticsTopReferralSources = () => { // ** State const [value, setValue] = useState('google') const handleChange = (event: SyntheticEvent, newValue: string) => { setValue(newValue) } const RenderTabAvatar = ({ category }: { category: string }) => ( value === category ? `2px solid ${theme.palette.primary.main}` : `2px dashed ${theme.palette.divider}` }} > {`tabs-${category}`} {category} ) return ( } /> } /> } /> } /> } /> value === 'add' ? `2px solid ${theme.palette.primary.main}` : `2px dashed ${theme.palette.divider}` }} > hexToRGBA(theme.palette.secondary.main, 0.12) }} > } /> ) } export default AnalyticsTopReferralSources