340 lines
13 KiB
React
340 lines
13 KiB
React
import { useState, useEffect } from 'react'
|
|
import axios from 'axios'
|
|
import {
|
|
BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
|
|
PieChart, Pie, Cell, LineChart, Line, Legend
|
|
} from 'recharts'
|
|
|
|
const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8085/api'
|
|
|
|
// Color palette
|
|
const COLORS = ['#0d6efd', '#198754', '#ffc107', '#dc3545', '#6c757d', '#0dcaf0', '#6610f2', '#d63384']
|
|
|
|
function Summary({ startDate, endDate }) {
|
|
const [analytics, setAnalytics] = useState(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState(null)
|
|
|
|
useEffect(() => {
|
|
fetchAnalytics()
|
|
}, [startDate, endDate])
|
|
|
|
const fetchAnalytics = async () => {
|
|
setLoading(true)
|
|
setError(null)
|
|
try {
|
|
const params = {}
|
|
if (startDate) params.start = startDate.toISOString()
|
|
if (endDate) params.end = endDate.toISOString()
|
|
|
|
const response = await axios.get(`${API_BASE}/analytics`, { params })
|
|
setAnalytics(response.data)
|
|
} catch (err) {
|
|
console.error('Error fetching analytics:', err)
|
|
setError('Failed to load analytics')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const formatDuration = (seconds) => {
|
|
const hours = Math.floor(seconds / 3600)
|
|
const minutes = Math.floor((seconds % 3600) / 60)
|
|
if (hours > 0) return `${hours}h ${minutes}m`
|
|
return `${minutes}m`
|
|
}
|
|
|
|
const formatHour = (hour) => {
|
|
if (hour === 0) return '12 AM'
|
|
if (hour === 12) return '12 PM'
|
|
return hour < 12 ? `${hour} AM` : `${hour - 12} PM`
|
|
}
|
|
|
|
const formatPhoneNumber = (phone) => {
|
|
if (!phone) return ''
|
|
// Remove all non-digit characters
|
|
const digits = phone.replace(/\D/g, '')
|
|
// Format as (XXX) XXX-XXXX if 10 digits, or +X (XXX) XXX-XXXX if 11
|
|
if (digits.length === 10) {
|
|
return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`
|
|
} else if (digits.length === 11 && digits[0] === '1') {
|
|
return `+1 (${digits.slice(1, 4)}) ${digits.slice(4, 7)}-${digits.slice(7)}`
|
|
}
|
|
return phone
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="h-100 d-flex align-items-center justify-content-center">
|
|
<div className="text-center">
|
|
<div className="spinner-border text-primary mb-3" role="status">
|
|
<span className="visually-hidden">Loading...</span>
|
|
</div>
|
|
<p className="text-muted">Loading analytics...</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="h-100 d-flex align-items-center justify-content-center">
|
|
<div className="text-center text-danger">
|
|
<p>{error}</p>
|
|
<button className="btn btn-primary" onClick={fetchAnalytics}>
|
|
Retry
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!analytics) return null
|
|
|
|
// Prepare data for message type pie chart
|
|
const messageTypeData = [
|
|
{ name: 'Sent', value: analytics.total_sent },
|
|
{ name: 'Received', value: analytics.total_received }
|
|
].filter(d => d.value > 0)
|
|
|
|
// Prepare data for call type pie chart
|
|
const callTypeData = [
|
|
{ name: 'Incoming', value: analytics.incoming_calls },
|
|
{ name: 'Outgoing', value: analytics.outgoing_calls },
|
|
{ name: 'Missed', value: analytics.missed_calls }
|
|
].filter(d => d.value > 0)
|
|
|
|
// Prepare top contacts data with display names
|
|
const topContactsData = (analytics.top_contacts || []).slice(0, 8).map(c => ({
|
|
...c,
|
|
displayName: c.contact_name || formatPhoneNumber(c.address) || c.address
|
|
}))
|
|
|
|
return (
|
|
<div className="h-100 d-flex flex-column">
|
|
<div className="bg-light border-bottom p-3">
|
|
<h2 className="h5 mb-0 d-flex align-items-center gap-2">
|
|
<svg style={{width: '1.25rem', height: '1.25rem'}} className="text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
Summary
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="flex-fill overflow-auto p-3">
|
|
{/* Summary Stats Cards */}
|
|
<div className="row g-3 mb-4">
|
|
<div className="col-6 col-md-3">
|
|
<div className="card h-100 border-primary">
|
|
<div className="card-body text-center">
|
|
<h3 className="h2 text-primary mb-0">{(analytics.total_sms + analytics.total_mms).toLocaleString()}</h3>
|
|
<small className="text-muted">Total Messages</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-6 col-md-3">
|
|
<div className="card h-100 border-success">
|
|
<div className="card-body text-center">
|
|
<h3 className="h2 text-success mb-0">{analytics.total_calls.toLocaleString()}</h3>
|
|
<small className="text-muted">Total Calls</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-6 col-md-3">
|
|
<div className="card h-100 border-info">
|
|
<div className="card-body text-center">
|
|
<h3 className="h2 text-info mb-0">{formatDuration(analytics.total_call_duration)}</h3>
|
|
<small className="text-muted">Call Duration</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-6 col-md-3">
|
|
<div className="card h-100 border-warning">
|
|
<div className="card-body text-center">
|
|
<h3 className="h2 text-warning mb-0">{Math.round(analytics.avg_message_length)}</h3>
|
|
<small className="text-muted">Avg Chars/Msg</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Charts Row 1: Sent/Received + Top Contacts */}
|
|
<div className="row g-3 mb-4">
|
|
{/* Sent vs Received Pie */}
|
|
<div className="col-md-4">
|
|
<div className="card h-100">
|
|
<div className="card-header">Sent vs Received</div>
|
|
<div className="card-body">
|
|
{messageTypeData.length > 0 ? (
|
|
<ResponsiveContainer width="100%" height={240}>
|
|
<PieChart>
|
|
<Pie
|
|
data={messageTypeData}
|
|
cx="50%"
|
|
cy="45%"
|
|
innerRadius={40}
|
|
outerRadius={70}
|
|
paddingAngle={5}
|
|
dataKey="value"
|
|
label={({ percent }) => `${(percent * 100).toFixed(0)}%`}
|
|
labelLine={true}
|
|
>
|
|
{messageTypeData.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip formatter={(value, name) => [value.toLocaleString(), name]} />
|
|
<Legend />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
) : (
|
|
<div className="text-center text-muted py-5">No message data</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Top Contacts */}
|
|
<div className="col-md-8">
|
|
<div className="card h-100">
|
|
<div className="card-header">Top Contacts</div>
|
|
<div className="card-body">
|
|
{topContactsData.length > 0 ? (
|
|
<ResponsiveContainer width="100%" height={Math.max(200, topContactsData.length * 36)}>
|
|
<BarChart data={topContactsData} layout="vertical">
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis type="number" />
|
|
<YAxis
|
|
type="category"
|
|
dataKey="displayName"
|
|
width={120}
|
|
tick={{ fontSize: 11 }}
|
|
/>
|
|
<Tooltip
|
|
formatter={(value) => [value.toLocaleString(), 'Messages']}
|
|
labelFormatter={(label) => label}
|
|
/>
|
|
<Bar dataKey="message_count" fill="#0d6efd" name="Messages" />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
) : (
|
|
<div className="text-center text-muted py-5">No contact data</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Charts Row 2: Hourly Distribution */}
|
|
<div className="row g-3 mb-4">
|
|
<div className="col-12">
|
|
<div className="card">
|
|
<div className="card-header">Messages by Time of Day</div>
|
|
<div className="card-body">
|
|
{analytics.hourly_distribution && analytics.hourly_distribution.some(h => h.count > 0) ? (
|
|
<ResponsiveContainer width="100%" height={250}>
|
|
<BarChart data={analytics.hourly_distribution}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis
|
|
dataKey="hour"
|
|
tickFormatter={formatHour}
|
|
interval={2}
|
|
/>
|
|
<YAxis />
|
|
<Tooltip
|
|
labelFormatter={(hour) => formatHour(hour)}
|
|
formatter={(value) => [value.toLocaleString(), 'Messages']}
|
|
/>
|
|
<Bar dataKey="count" fill="#198754" name="Messages" />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
) : (
|
|
<div className="text-center text-muted py-5">No hourly data</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Charts Row 3: Daily Trend */}
|
|
<div className="row g-3 mb-4">
|
|
<div className="col-12">
|
|
<div className="card">
|
|
<div className="card-header">Message Trend Over Time</div>
|
|
<div className="card-body">
|
|
{analytics.daily_trend && analytics.daily_trend.length > 0 ? (
|
|
<ResponsiveContainer width="100%" height={250}>
|
|
<LineChart data={analytics.daily_trend}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis
|
|
dataKey="date"
|
|
tickFormatter={(date) => {
|
|
const d = new Date(date)
|
|
return `${d.getMonth() + 1}/${d.getDate()}`
|
|
}}
|
|
interval="preserveStartEnd"
|
|
/>
|
|
<YAxis />
|
|
<Tooltip
|
|
labelFormatter={(date) => new Date(date).toLocaleDateString()}
|
|
formatter={(value) => [value.toLocaleString(), 'Messages']}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="count"
|
|
stroke="#0d6efd"
|
|
strokeWidth={2}
|
|
dot={false}
|
|
name="Messages"
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
) : (
|
|
<div className="text-center text-muted py-5">No trend data</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Call Statistics */}
|
|
{analytics.total_calls > 0 && (
|
|
<div className="row g-3">
|
|
<div className="col-md-6">
|
|
<div className="card">
|
|
<div className="card-header">Call Breakdown</div>
|
|
<div className="card-body">
|
|
{callTypeData.length > 0 ? (
|
|
<ResponsiveContainer width="100%" height={200}>
|
|
<PieChart>
|
|
<Pie
|
|
data={callTypeData}
|
|
cx="50%"
|
|
cy="50%"
|
|
outerRadius={80}
|
|
dataKey="value"
|
|
label={({ name, value }) => `${name}: ${value}`}
|
|
>
|
|
{callTypeData.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={COLORS[(index + 2) % COLORS.length]} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip />
|
|
<Legend />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
) : (
|
|
<div className="text-center text-muted py-5">No call data</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Summary
|