// ** 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}`
}}
>
{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