feat: enhance dashboard components with modal support for viewing all data
This commit is contained in:
Usman Baig
@@ -3,6 +3,7 @@
|
|||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { formatNumber } from '@/lib/utils/format'
|
import { formatNumber } from '@/lib/utils/format'
|
||||||
import { TopPage } from '@/lib/api/stats'
|
import { TopPage } from '@/lib/api/stats'
|
||||||
|
import { Modal } from '@ciphera-net/ui'
|
||||||
|
|
||||||
interface ContentStatsProps {
|
interface ContentStatsProps {
|
||||||
topPages: TopPage[]
|
topPages: TopPage[]
|
||||||
@@ -12,80 +13,116 @@ interface ContentStatsProps {
|
|||||||
|
|
||||||
type Tab = 'top_pages' | 'entry_pages' | 'exit_pages'
|
type Tab = 'top_pages' | 'entry_pages' | 'exit_pages'
|
||||||
|
|
||||||
|
const LIMIT = 7
|
||||||
|
|
||||||
export default function ContentStats({ topPages, entryPages, exitPages }: ContentStatsProps) {
|
export default function ContentStats({ topPages, entryPages, exitPages }: ContentStatsProps) {
|
||||||
const [activeTab, setActiveTab] = useState<Tab>('top_pages')
|
const [activeTab, setActiveTab] = useState<Tab>('top_pages')
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||||
|
|
||||||
const renderContent = () => {
|
const getData = () => {
|
||||||
let data: TopPage[] = []
|
switch (activeTab) {
|
||||||
|
case 'top_pages':
|
||||||
if (activeTab === 'top_pages') {
|
return topPages
|
||||||
data = topPages
|
case 'entry_pages':
|
||||||
} else if (activeTab === 'entry_pages') {
|
return entryPages
|
||||||
data = entryPages
|
case 'exit_pages':
|
||||||
} else if (activeTab === 'exit_pages') {
|
return exitPages
|
||||||
data = exitPages
|
default:
|
||||||
|
return []
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (!data || data.length === 0) {
|
const data = getData()
|
||||||
return <p className="text-neutral-600 dark:text-neutral-400">No data available</p>
|
const hasData = data && data.length > 0
|
||||||
|
const displayedData = hasData ? data.slice(0, LIMIT) : []
|
||||||
|
const emptySlots = Math.max(0, LIMIT - displayedData.length)
|
||||||
|
const showViewAll = hasData && data.length > LIMIT
|
||||||
|
|
||||||
|
const getTabLabel = (tab: Tab) => {
|
||||||
|
switch (tab) {
|
||||||
|
case 'top_pages': return 'Top Pages'
|
||||||
|
case 'entry_pages': return 'Entry'
|
||||||
|
case 'exit_pages': return 'Exit'
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-3">
|
|
||||||
{data.map((page, index) => (
|
|
||||||
<div key={index} className="flex items-center justify-between">
|
|
||||||
<div className="flex-1 truncate text-neutral-900 dark:text-white">
|
|
||||||
{page.path}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
|
|
||||||
{formatNumber(page.pageviews)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 h-full">
|
<>
|
||||||
<div className="flex items-center justify-between mb-6">
|
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 h-full flex flex-col">
|
||||||
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
|
<div className="flex items-center justify-between mb-6">
|
||||||
Content
|
<div className="flex items-center gap-4">
|
||||||
</h3>
|
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
|
||||||
<div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
|
Content
|
||||||
<button
|
</h3>
|
||||||
onClick={() => setActiveTab('top_pages')}
|
{showViewAll && (
|
||||||
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
|
<button
|
||||||
activeTab === 'top_pages'
|
onClick={() => setIsModalOpen(true)}
|
||||||
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors"
|
||||||
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
|
>
|
||||||
}`}
|
View All
|
||||||
>
|
</button>
|
||||||
Top Pages
|
)}
|
||||||
</button>
|
</div>
|
||||||
<button
|
<div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
|
||||||
onClick={() => setActiveTab('entry_pages')}
|
{(['top_pages', 'entry_pages', 'exit_pages'] as Tab[]).map((tab) => (
|
||||||
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
|
<button
|
||||||
activeTab === 'entry_pages'
|
key={tab}
|
||||||
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
onClick={() => setActiveTab(tab)}
|
||||||
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
|
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
|
||||||
}`}
|
activeTab === tab
|
||||||
>
|
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
||||||
Entry
|
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
|
||||||
</button>
|
}`}
|
||||||
<button
|
>
|
||||||
onClick={() => setActiveTab('exit_pages')}
|
{getTabLabel(tab)}
|
||||||
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
|
</button>
|
||||||
activeTab === 'exit_pages'
|
))}
|
||||||
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
</div>
|
||||||
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
|
</div>
|
||||||
}`}
|
|
||||||
>
|
<div className="space-y-3 flex-1 min-h-[270px]">
|
||||||
Exit
|
{hasData ? (
|
||||||
</button>
|
<>
|
||||||
|
{displayedData.map((page, index) => (
|
||||||
|
<div key={index} className="flex items-center justify-between h-7">
|
||||||
|
<div className="flex-1 truncate text-neutral-900 dark:text-white">
|
||||||
|
{page.path}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
|
||||||
|
{formatNumber(page.pageviews)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{Array.from({ length: emptySlots }).map((_, i) => (
|
||||||
|
<div key={`empty-${i}`} className="h-7" aria-hidden="true" />
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="h-full flex flex-col items-center justify-center">
|
||||||
|
<p className="text-neutral-600 dark:text-neutral-400">No data available</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{renderContent()}
|
|
||||||
</div>
|
<Modal
|
||||||
|
isOpen={isModalOpen}
|
||||||
|
onClose={() => setIsModalOpen(false)}
|
||||||
|
title={`Content - ${getTabLabel(activeTab)}`}
|
||||||
|
>
|
||||||
|
<div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
|
||||||
|
{data.map((page, index) => (
|
||||||
|
<div key={index} className="flex items-center justify-between py-1">
|
||||||
|
<div className="flex-1 truncate text-neutral-900 dark:text-white">
|
||||||
|
{page.path}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
|
||||||
|
{formatNumber(page.pageviews)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { useState } from 'react'
|
|||||||
import { formatNumber } from '@/lib/utils/format'
|
import { formatNumber } from '@/lib/utils/format'
|
||||||
import * as Flags from 'country-flag-icons/react/3x2'
|
import * as Flags from 'country-flag-icons/react/3x2'
|
||||||
import WorldMap from './WorldMap'
|
import WorldMap from './WorldMap'
|
||||||
|
import { Modal } from '@ciphera-net/ui'
|
||||||
|
|
||||||
interface LocationProps {
|
interface LocationProps {
|
||||||
countries: Array<{ country: string; pageviews: number }>
|
countries: Array<{ country: string; pageviews: number }>
|
||||||
@@ -13,13 +14,14 @@ interface LocationProps {
|
|||||||
|
|
||||||
type Tab = 'map' | 'countries' | 'regions' | 'cities'
|
type Tab = 'map' | 'countries' | 'regions' | 'cities'
|
||||||
|
|
||||||
|
const LIMIT = 7
|
||||||
|
|
||||||
export default function Locations({ countries, cities, regions }: LocationProps) {
|
export default function Locations({ countries, cities, regions }: LocationProps) {
|
||||||
const [activeTab, setActiveTab] = useState<Tab>('map')
|
const [activeTab, setActiveTab] = useState<Tab>('map')
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||||
|
|
||||||
const getFlagComponent = (countryCode: string) => {
|
const getFlagComponent = (countryCode: string) => {
|
||||||
if (!countryCode || countryCode === 'Unknown') return null
|
if (!countryCode || countryCode === 'Unknown') return null
|
||||||
// * The API returns 2-letter country codes (e.g. US, DE)
|
|
||||||
// * We cast it to the flag component name
|
|
||||||
const FlagComponent = (Flags as any)[countryCode]
|
const FlagComponent = (Flags as any)[countryCode]
|
||||||
return FlagComponent ? <FlagComponent className="w-5 h-5 rounded-sm shadow-sm" /> : null
|
return FlagComponent ? <FlagComponent className="w-5 h-5 rounded-sm shadow-sm" /> : null
|
||||||
}
|
}
|
||||||
@@ -34,128 +36,118 @@ export default function Locations({ countries, cities, regions }: LocationProps)
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const renderContent = () => {
|
const getData = () => {
|
||||||
if (activeTab === 'map') {
|
switch (activeTab) {
|
||||||
if (!countries || countries.length === 0) {
|
case 'countries': return countries
|
||||||
return <p className="text-neutral-600 dark:text-neutral-400">No data available</p>
|
case 'regions': return regions
|
||||||
}
|
case 'cities': return cities
|
||||||
return <WorldMap data={countries} />
|
default: return []
|
||||||
}
|
|
||||||
|
|
||||||
if (activeTab === 'countries') {
|
|
||||||
if (!countries || countries.length === 0) {
|
|
||||||
return <p className="text-neutral-600 dark:text-neutral-400">No data available</p>
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div className="space-y-3">
|
|
||||||
{countries.map((country, index) => (
|
|
||||||
<div key={index} className="flex items-center justify-between">
|
|
||||||
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
|
|
||||||
<span className="shrink-0">{getFlagComponent(country.country)}</span>
|
|
||||||
<span className="truncate">{getCountryName(country.country)}</span>
|
|
||||||
</div>
|
|
||||||
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
|
|
||||||
{formatNumber(country.pageviews)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (activeTab === 'regions') {
|
|
||||||
if (!regions || regions.length === 0) {
|
|
||||||
return <p className="text-neutral-600 dark:text-neutral-400">No data available</p>
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div className="space-y-3">
|
|
||||||
{regions.map((region, index) => (
|
|
||||||
<div key={index} className="flex items-center justify-between">
|
|
||||||
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
|
|
||||||
<span className="shrink-0">{getFlagComponent(region.country)}</span>
|
|
||||||
<span className="truncate">{region.region === 'Unknown' ? 'Unknown' : region.region}</span>
|
|
||||||
</div>
|
|
||||||
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
|
|
||||||
{formatNumber(region.pageviews)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (activeTab === 'cities') {
|
|
||||||
if (!cities || cities.length === 0) {
|
|
||||||
return <p className="text-neutral-600 dark:text-neutral-400">No data available</p>
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div className="space-y-3">
|
|
||||||
{cities.map((city, index) => (
|
|
||||||
<div key={index} className="flex items-center justify-between">
|
|
||||||
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
|
|
||||||
<span className="shrink-0">{getFlagComponent(city.country)}</span>
|
|
||||||
<span className="truncate">{city.city === 'Unknown' ? 'Unknown' : city.city}</span>
|
|
||||||
</div>
|
|
||||||
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
|
|
||||||
{formatNumber(city.pageviews)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const data = activeTab === 'map' ? [] : getData()
|
||||||
|
const hasData = activeTab === 'map' ? (countries && countries.length > 0) : (data && data.length > 0)
|
||||||
|
const displayedData = (activeTab !== 'map' && hasData) ? (data as any[]).slice(0, LIMIT) : []
|
||||||
|
const emptySlots = Math.max(0, LIMIT - displayedData.length)
|
||||||
|
const showViewAll = activeTab !== 'map' && hasData && data.length > LIMIT
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 h-full">
|
<>
|
||||||
<div className="flex items-center justify-between mb-6">
|
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 h-full flex flex-col">
|
||||||
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
|
<div className="flex items-center justify-between mb-6">
|
||||||
Locations
|
<div className="flex items-center gap-4">
|
||||||
</h3>
|
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
|
||||||
<div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
|
Locations
|
||||||
<button
|
</h3>
|
||||||
onClick={() => setActiveTab('map')}
|
{showViewAll && (
|
||||||
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
|
<button
|
||||||
activeTab === 'map'
|
onClick={() => setIsModalOpen(true)}
|
||||||
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors"
|
||||||
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
|
>
|
||||||
}`}
|
View All
|
||||||
>
|
</button>
|
||||||
Map
|
)}
|
||||||
</button>
|
</div>
|
||||||
<button
|
<div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
|
||||||
onClick={() => setActiveTab('countries')}
|
{(['map', 'countries', 'regions', 'cities'] as Tab[]).map((tab) => (
|
||||||
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
|
<button
|
||||||
activeTab === 'countries'
|
key={tab}
|
||||||
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
onClick={() => setActiveTab(tab)}
|
||||||
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
|
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors capitalize ${
|
||||||
}`}
|
activeTab === tab
|
||||||
>
|
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
||||||
Countries
|
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
|
||||||
</button>
|
}`}
|
||||||
<button
|
>
|
||||||
onClick={() => setActiveTab('regions')}
|
{tab}
|
||||||
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
|
</button>
|
||||||
activeTab === 'regions'
|
))}
|
||||||
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
</div>
|
||||||
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
|
</div>
|
||||||
}`}
|
|
||||||
>
|
<div className="space-y-3 flex-1 min-h-[270px]">
|
||||||
Regions
|
{activeTab === 'map' ? (
|
||||||
</button>
|
hasData ? <WorldMap data={countries} /> : (
|
||||||
<button
|
<div className="h-full flex flex-col items-center justify-center">
|
||||||
onClick={() => setActiveTab('cities')}
|
<p className="text-neutral-600 dark:text-neutral-400">No data available</p>
|
||||||
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
|
</div>
|
||||||
activeTab === 'cities'
|
)
|
||||||
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
) : (
|
||||||
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
|
hasData ? (
|
||||||
}`}
|
<>
|
||||||
>
|
{displayedData.map((item, index) => (
|
||||||
Cities
|
<div key={index} className="flex items-center justify-between h-7">
|
||||||
</button>
|
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
|
||||||
|
{activeTab === 'countries' && <span className="shrink-0">{getFlagComponent(item.country)}</span>}
|
||||||
|
{activeTab !== 'countries' && <span className="shrink-0">{getFlagComponent(item.country)}</span>}
|
||||||
|
|
||||||
|
<span className="truncate">
|
||||||
|
{activeTab === 'countries' ? getCountryName(item.country) :
|
||||||
|
activeTab === 'regions' ? (item.region === 'Unknown' ? 'Unknown' : item.region) :
|
||||||
|
(item.city === 'Unknown' ? 'Unknown' : item.city)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
|
||||||
|
{formatNumber(item.pageviews)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{Array.from({ length: emptySlots }).map((_, i) => (
|
||||||
|
<div key={`empty-${i}`} className="h-7" aria-hidden="true" />
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="h-full flex flex-col items-center justify-center">
|
||||||
|
<p className="text-neutral-600 dark:text-neutral-400">No data available</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{renderContent()}
|
|
||||||
</div>
|
<Modal
|
||||||
|
isOpen={isModalOpen}
|
||||||
|
onClose={() => setIsModalOpen(false)}
|
||||||
|
title={`Locations - ${activeTab.charAt(0).toUpperCase() + activeTab.slice(1)}`}
|
||||||
|
>
|
||||||
|
<div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
|
||||||
|
{(data as any[]).map((item, index) => (
|
||||||
|
<div key={index} className="flex items-center justify-between py-1">
|
||||||
|
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
|
||||||
|
<span className="shrink-0">{getFlagComponent(item.country)}</span>
|
||||||
|
<span className="truncate">
|
||||||
|
{activeTab === 'countries' ? getCountryName(item.country) :
|
||||||
|
activeTab === 'regions' ? (item.region === 'Unknown' ? 'Unknown' : item.region) :
|
||||||
|
(item.city === 'Unknown' ? 'Unknown' : item.city)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
|
||||||
|
{formatNumber(item.pageviews)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { useState } from 'react'
|
|||||||
import { formatNumber } from '@/lib/utils/format'
|
import { formatNumber } from '@/lib/utils/format'
|
||||||
import { getBrowserIcon, getOSIcon, getDeviceIcon } from '@/lib/utils/icons'
|
import { getBrowserIcon, getOSIcon, getDeviceIcon } from '@/lib/utils/icons'
|
||||||
import { MdMonitor } from 'react-icons/md'
|
import { MdMonitor } from 'react-icons/md'
|
||||||
|
import { Modal } from '@ciphera-net/ui'
|
||||||
|
|
||||||
interface TechSpecsProps {
|
interface TechSpecsProps {
|
||||||
browsers: Array<{ browser: string; pageviews: number }>
|
browsers: Array<{ browser: string; pageviews: number }>
|
||||||
@@ -14,93 +15,112 @@ interface TechSpecsProps {
|
|||||||
|
|
||||||
type Tab = 'browsers' | 'os' | 'devices' | 'screens'
|
type Tab = 'browsers' | 'os' | 'devices' | 'screens'
|
||||||
|
|
||||||
|
const LIMIT = 7
|
||||||
|
|
||||||
export default function TechSpecs({ browsers, os, devices, screenResolutions }: TechSpecsProps) {
|
export default function TechSpecs({ browsers, os, devices, screenResolutions }: TechSpecsProps) {
|
||||||
const [activeTab, setActiveTab] = useState<Tab>('browsers')
|
const [activeTab, setActiveTab] = useState<Tab>('browsers')
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||||
|
|
||||||
const renderContent = () => {
|
const getData = () => {
|
||||||
let data: Array<{ name: string; pageviews: number; icon?: React.ReactNode }> = []
|
switch (activeTab) {
|
||||||
|
case 'browsers':
|
||||||
if (activeTab === 'browsers') {
|
return browsers.map(b => ({ name: b.browser, pageviews: b.pageviews, icon: getBrowserIcon(b.browser) }))
|
||||||
data = browsers.map(b => ({ name: b.browser, pageviews: b.pageviews, icon: getBrowserIcon(b.browser) }))
|
case 'os':
|
||||||
} else if (activeTab === 'os') {
|
return os.map(o => ({ name: o.os, pageviews: o.pageviews, icon: getOSIcon(o.os) }))
|
||||||
data = os.map(o => ({ name: o.os, pageviews: o.pageviews, icon: getOSIcon(o.os) }))
|
case 'devices':
|
||||||
} else if (activeTab === 'devices') {
|
return devices.map(d => ({ name: d.device, pageviews: d.pageviews, icon: getDeviceIcon(d.device) }))
|
||||||
data = devices.map(d => ({ name: d.device, pageviews: d.pageviews, icon: getDeviceIcon(d.device) }))
|
case 'screens':
|
||||||
} else if (activeTab === 'screens') {
|
return screenResolutions.map(s => ({ name: s.screen_resolution, pageviews: s.pageviews, icon: <MdMonitor className="text-neutral-500" /> }))
|
||||||
data = screenResolutions.map(s => ({ name: s.screen_resolution, pageviews: s.pageviews, icon: <MdMonitor className="text-neutral-500" /> }))
|
default:
|
||||||
|
return []
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!data || data.length === 0) {
|
|
||||||
return <p className="text-neutral-600 dark:text-neutral-400">No data available</p>
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-3">
|
|
||||||
{data.map((item, index) => (
|
|
||||||
<div key={index} className="flex items-center justify-between">
|
|
||||||
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
|
|
||||||
{item.icon && <span className="text-lg">{item.icon}</span>}
|
|
||||||
<span className="truncate">{item.name === 'Unknown' ? 'Unknown' : item.name}</span>
|
|
||||||
</div>
|
|
||||||
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
|
|
||||||
{formatNumber(item.pageviews)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const data = getData()
|
||||||
|
const hasData = data && data.length > 0
|
||||||
|
const displayedData = hasData ? data.slice(0, LIMIT) : []
|
||||||
|
const emptySlots = Math.max(0, LIMIT - displayedData.length)
|
||||||
|
const showViewAll = hasData && data.length > LIMIT
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 h-full">
|
<>
|
||||||
<div className="flex items-center justify-between mb-6">
|
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 h-full flex flex-col">
|
||||||
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
|
<div className="flex items-center justify-between mb-6">
|
||||||
Technology
|
<div className="flex items-center gap-4">
|
||||||
</h3>
|
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
|
||||||
<div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
|
Technology
|
||||||
<button
|
</h3>
|
||||||
onClick={() => setActiveTab('browsers')}
|
{showViewAll && (
|
||||||
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
|
<button
|
||||||
activeTab === 'browsers'
|
onClick={() => setIsModalOpen(true)}
|
||||||
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors"
|
||||||
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
|
>
|
||||||
}`}
|
View All
|
||||||
>
|
</button>
|
||||||
Browsers
|
)}
|
||||||
</button>
|
</div>
|
||||||
<button
|
<div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
|
||||||
onClick={() => setActiveTab('os')}
|
{(['browsers', 'os', 'devices', 'screens'] as Tab[]).map((tab) => (
|
||||||
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
|
<button
|
||||||
activeTab === 'os'
|
key={tab}
|
||||||
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
onClick={() => setActiveTab(tab)}
|
||||||
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
|
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors capitalize ${
|
||||||
}`}
|
activeTab === tab
|
||||||
>
|
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
||||||
OS
|
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
|
||||||
</button>
|
}`}
|
||||||
<button
|
>
|
||||||
onClick={() => setActiveTab('devices')}
|
{tab}
|
||||||
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
|
</button>
|
||||||
activeTab === 'devices'
|
))}
|
||||||
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
</div>
|
||||||
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
|
</div>
|
||||||
}`}
|
|
||||||
>
|
<div className="space-y-3 flex-1 min-h-[270px]">
|
||||||
Devices
|
{hasData ? (
|
||||||
</button>
|
<>
|
||||||
<button
|
{displayedData.map((item, index) => (
|
||||||
onClick={() => setActiveTab('screens')}
|
<div key={index} className="flex items-center justify-between h-7">
|
||||||
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
|
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
|
||||||
activeTab === 'screens'
|
{item.icon && <span className="text-lg">{item.icon}</span>}
|
||||||
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
<span className="truncate">{item.name === 'Unknown' ? 'Unknown' : item.name}</span>
|
||||||
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
|
</div>
|
||||||
}`}
|
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
|
||||||
>
|
{formatNumber(item.pageviews)}
|
||||||
Screens
|
</div>
|
||||||
</button>
|
</div>
|
||||||
|
))}
|
||||||
|
{Array.from({ length: emptySlots }).map((_, i) => (
|
||||||
|
<div key={`empty-${i}`} className="h-7" aria-hidden="true" />
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="h-full flex flex-col items-center justify-center">
|
||||||
|
<p className="text-neutral-600 dark:text-neutral-400">No data available</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{renderContent()}
|
|
||||||
</div>
|
<Modal
|
||||||
|
isOpen={isModalOpen}
|
||||||
|
onClose={() => setIsModalOpen(false)}
|
||||||
|
title={`Technology - ${activeTab.charAt(0).toUpperCase() + activeTab.slice(1)}`}
|
||||||
|
>
|
||||||
|
<div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
|
||||||
|
{data.map((item, index) => (
|
||||||
|
<div key={index} className="flex items-center justify-between py-1">
|
||||||
|
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
|
||||||
|
{item.icon && <span className="text-lg">{item.icon}</span>}
|
||||||
|
<span className="truncate">{item.name === 'Unknown' ? 'Unknown' : item.name}</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
|
||||||
|
{formatNumber(item.pageviews)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,42 +1,86 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
import { formatNumber } from '@/lib/utils/format'
|
import { formatNumber } from '@/lib/utils/format'
|
||||||
import { getReferrerIcon } from '@/lib/utils/icons'
|
import { getReferrerIcon } from '@/lib/utils/icons'
|
||||||
|
import { Modal } from '@ciphera-net/ui'
|
||||||
|
|
||||||
interface TopReferrersProps {
|
interface TopReferrersProps {
|
||||||
referrers: Array<{ referrer: string; pageviews: number }>
|
referrers: Array<{ referrer: string; pageviews: number }>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const LIMIT = 7
|
||||||
|
|
||||||
export default function TopReferrers({ referrers }: TopReferrersProps) {
|
export default function TopReferrers({ referrers }: TopReferrersProps) {
|
||||||
if (!referrers || referrers.length === 0) {
|
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||||
return (
|
|
||||||
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 h-full">
|
const hasData = referrers && referrers.length > 0
|
||||||
<h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
|
const displayedReferrers = hasData ? referrers.slice(0, LIMIT) : []
|
||||||
Top Referrers
|
const emptySlots = Math.max(0, LIMIT - displayedReferrers.length)
|
||||||
</h3>
|
const showViewAll = hasData && referrers.length > LIMIT
|
||||||
<p className="text-neutral-600 dark:text-neutral-400">No data available</p>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 h-full">
|
<>
|
||||||
<h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
|
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 h-full flex flex-col">
|
||||||
Top Referrers
|
<div className="flex items-center justify-between mb-4">
|
||||||
</h3>
|
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
|
||||||
<div className="space-y-3">
|
Top Referrers
|
||||||
{referrers.map((ref, index) => (
|
</h3>
|
||||||
<div key={index} className="flex items-center justify-between">
|
{showViewAll && (
|
||||||
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
|
<button
|
||||||
<span className="text-lg flex-shrink-0">{getReferrerIcon(ref.referrer)}</span>
|
onClick={() => setIsModalOpen(true)}
|
||||||
<span className="truncate" title={ref.referrer}>{ref.referrer}</span>
|
className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
View All
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3 flex-1 min-h-[270px]">
|
||||||
|
{hasData ? (
|
||||||
|
<>
|
||||||
|
{displayedReferrers.map((ref, index) => (
|
||||||
|
<div key={index} className="flex items-center justify-between h-7">
|
||||||
|
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
|
||||||
|
<span className="text-lg flex-shrink-0">{getReferrerIcon(ref.referrer)}</span>
|
||||||
|
<span className="truncate" title={ref.referrer}>{ref.referrer}</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
|
||||||
|
{formatNumber(ref.pageviews)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{Array.from({ length: emptySlots }).map((_, i) => (
|
||||||
|
<div key={`empty-${i}`} className="h-7" aria-hidden="true" />
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="h-full flex flex-col items-center justify-center">
|
||||||
|
<p className="text-neutral-600 dark:text-neutral-400">No data available</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
|
)}
|
||||||
{formatNumber(ref.pageviews)}
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<Modal
|
||||||
|
isOpen={isModalOpen}
|
||||||
|
onClose={() => setIsModalOpen(false)}
|
||||||
|
title="Top Referrers"
|
||||||
|
>
|
||||||
|
<div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
|
||||||
|
{referrers?.map((ref, index) => (
|
||||||
|
<div key={index} className="flex items-center justify-between py-1">
|
||||||
|
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
|
||||||
|
<span className="text-lg flex-shrink-0">{getReferrerIcon(ref.referrer)}</span>
|
||||||
|
<span className="truncate" title={ref.referrer}>{ref.referrer}</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
|
||||||
|
{formatNumber(ref.pageviews)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user