Your IP : 216.73.216.79
<?php
namespace Database\Seeders;
use App\Models\Backend\DataDashboard;
use Illuminate\Database\Seeder;
class DataDashboardSeeder extends Seeder
{
public function run(): void
{
DataDashboard::updateOrCreate(
['title' => 'System Clock'],
[
'content' => <<<'PHP'
<?php
$timezone = 'Asia/Kuala_Lumpur';
date_default_timezone_set($timezone);
?>
<style>
.clock-3d {
perspective: 1000px;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
width: 100%;
}
.clock-face {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 40px 50px;
border-radius: 20px;
width: 100%;
transform: rotateX(3deg);
box-shadow:
0 25px 50px -12px rgba(0,0,0,0.15),
0 0 0 1px rgba(0,0,0,0.04),
inset 0 1px 0 rgba(255,255,255,0.8),
inset 0 -1px 0 rgba(0,0,0,0.06),
0 8px 0 #cbd5e1;
border: 1px solid rgba(0,0,0,0.04);
position: relative;
transition: transform 0.3s ease;
box-sizing: border-box;
}
.clock-face:hover {
transform: rotateX(1deg) translateY(-2px);
box-shadow:
0 30px 60px -12px rgba(0,0,0,0.2),
0 0 0 1px rgba(0,0,0,0.05),
inset 0 1px 0 rgba(255,255,255,0.8),
inset 0 -1px 0 rgba(0,0,0,0.06),
0 6px 0 #cbd5e1;
}
.clock-face::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: 20px;
background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, transparent 40%, rgba(0,0,0,0.03) 100%);
pointer-events: none;
}
.clock-top-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 28px;
position: relative;
z-index: 1;
}
.clock-brand {
color: #64748b;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 3px;
font-family: system-ui, -apple-system, sans-serif;
font-weight: 600;
}
.clock-status {
display: flex;
align-items: center;
gap: 6px;
color: #94a3b8;
font-size: 11px;
font-family: system-ui, -apple-system, sans-serif;
}
.clock-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 6px rgba(34,197,94,0.4);
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.clock-display {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
position: relative;
z-index: 1;
}
.clock-digit-group {
display: flex;
gap: 6px;
}
.clock-digit {
background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
color: #1e293b;
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
font-size: 64px;
font-weight: 300;
padding: 12px 16px;
border-radius: 10px;
min-width: 56px;
text-align: center;
box-shadow:
inset 0 2px 6px rgba(0,0,0,0.06),
inset 0 1px 0 rgba(255,255,255,0.8),
0 2px 0 #cbd5e1,
0 4px 12px rgba(0,0,0,0.06);
line-height: 1;
letter-spacing: 1px;
}
.clock-separator {
color: #94a3b8;
font-size: 52px;
font-weight: 300;
line-height: 1;
padding-bottom: 6px;
animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0.2; } }
.clock-bottom {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-top: 24px;
position: relative;
z-index: 1;
}
.clock-date {
color: #64748b;
font-size: 13px;
font-family: system-ui, -apple-system, sans-serif;
font-weight: 400;
letter-spacing: 0.3px;
}
.clock-timezone {
color: #94a3b8;
font-size: 11px;
font-family: system-ui, -apple-system, sans-serif;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.clock-accent {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent);
border-radius: 1px;
pointer-events: none;
}
@media (max-width: 1024px) {
.clock-digit { font-size: 48px; padding: 10px 12px; min-width: 42px; }
.clock-separator { font-size: 40px; }
.clock-face { padding: 30px 36px; }
}
@media (max-width: 640px) {
.clock-face {
padding: 20px 16px;
border-radius: 16px;
transform: rotateX(1deg);
box-shadow:
0 20px 40px -12px rgba(0,0,0,0.12),
0 0 0 1px rgba(0,0,0,0.04),
inset 0 1px 0 rgba(255,255,255,0.8),
inset 0 -1px 0 rgba(0,0,0,0.06),
0 4px 0 #cbd5e1;
}
.clock-display { gap: 6px; }
.clock-digit-group { gap: 4px; }
.clock-digit {
font-size: 28px;
padding: 6px 8px;
min-width: 24px;
border-radius: 8px;
}
.clock-separator { font-size: 24px; padding-bottom: 2px; }
.clock-top-bar { margin-bottom: 16px; }
.clock-bottom {
flex-direction: column;
align-items: center;
gap: 4px;
margin-top: 14px;
}
.clock-brand { font-size: 9px; letter-spacing: 2px; }
.clock-status { font-size: 9px; }
.clock-date { font-size: 11px; }
.clock-timezone { font-size: 9px; }
}
@media (max-width: 380px) {
.clock-digit { font-size: 22px; padding: 4px 6px; min-width: 20px; }
.clock-separator { font-size: 18px; }
.clock-face { padding: 14px 10px; }
}
</style>
<div class="clock-3d">
<div class="clock-face">
<div class="clock-top-bar">
<span class="clock-brand">System Clock</span>
<span class="clock-status">
<span class="clock-status-dot"></span>
Live
</span>
</div>
<div class="clock-display">
<div class="clock-digit-group">
<div class="clock-digit" id="clock-h1">0</div>
<div class="clock-digit" id="clock-h2">0</div>
</div>
<div class="clock-separator">:</div>
<div class="clock-digit-group">
<div class="clock-digit" id="clock-m1">0</div>
<div class="clock-digit" id="clock-m2">0</div>
</div>
<div class="clock-separator">:</div>
<div class="clock-digit-group">
<div class="clock-digit" id="clock-s1">0</div>
<div class="clock-digit" id="clock-s2">0</div>
</div>
</div>
<div class="clock-bottom">
<span class="clock-date" id="clock-date"></span>
<span class="clock-timezone"><?= $timezone ?></span>
</div>
<div class="clock-accent"></div>
</div>
</div>
<script>
(function() {
function pad(n) { return n.toString().padStart(2, '0'); }
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
function update() {
var d = new Date();
var h = pad(d.getHours());
var m = pad(d.getMinutes());
var s = pad(d.getSeconds());
var el = function(id) { return document.getElementById(id); };
el('clock-h1').textContent = h[0];
el('clock-h2').textContent = h[1];
el('clock-m1').textContent = m[0];
el('clock-m2').textContent = m[1];
el('clock-s1').textContent = s[0];
el('clock-s2').textContent = s[1];
var de = el('clock-date');
if (de && !de.dataset.set) {
de.textContent = days[d.getDay()] + ', ' + d.getDate() + ' ' + months[d.getMonth()] + ' ' + d.getFullYear();
de.dataset.set = '1';
}
}
update();
setInterval(update, 1000);
})();
</script>
PHP,
'sorting' => 1,
'activation_status' => 1,
'col_span' => 4,
'created_by' => 1,
'updated_by' => 1,
]
);
DataDashboard::updateOrCreate(
['title' => 'Visitor Statistics'],
[
'content' => <<<'PHP'
<?php
use App\Models\Backend\Visit;
use Carbon\Carbon;
$labels7 = []; $data7 = [];
for ($i = 6; $i >= 0; $i--) {
$date = Carbon::now()->subDays($i);
$labels7[] = $date->format('D');
$data7[] = Visit::whereDate('created_at', $date)->count();
}
$labels30 = []; $data30 = [];
for ($i = 29; $i >= 0; $i--) {
$date = Carbon::now()->subDays($i);
$labels30[] = $date->format('d M');
$data30[] = Visit::whereDate('created_at', $date)->count();
}
?>
<style>
.chart-row {
display: flex;
gap: 1.25rem;
width: 100%;
}
.chart-row > div {
flex: 1;
min-width: 0;
}
.chart-row h3 {
text-align: center;
margin-bottom: 12px;
font-size: 15px;
font-weight: 600;
color: #1e293b;
}
.dark .chart-row h3 { color: #e2e8f0; }
@media (max-width: 768px) {
.chart-row { flex-direction: column; }
}
</style>
<h3 style="text-align:center;margin-bottom:16px;font-size:17px;font-weight:600;color:#1e293b;">Visitor Statistics</h3>
<div class="chart-row">
<div>
<h3>Last 7 Days</h3>
<div id="chartBar"></div>
</div>
<div>
<h3>Last 30 Days</h3>
<div id="chartLine"></div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var barOptions = {
series: [{ name: 'Visits', data: <?= json_encode($data7) ?> }],
chart: { type: 'bar', height: 250, toolbar: { show: false } },
colors: ['#3b82f6'],
plotOptions: { bar: { borderRadius: 4, columnWidth: '60%' } },
dataLabels: { enabled: false },
xaxis: { categories: <?= json_encode($labels7) ?> },
yaxis: { min: 0 },
legend: { show: false }
};
new ApexCharts(document.getElementById('chartBar'), barOptions).render();
var lineOptions = {
series: [{ name: 'Visits', data: <?= json_encode($data30) ?> }],
chart: { type: 'line', height: 250, toolbar: { show: false } },
colors: ['#3b82f6'],
stroke: { curve: 'smooth', width: 2 },
fill: { type: 'solid', opacity: 0.1 },
markers: { size: 2 },
dataLabels: { enabled: false },
xaxis: { categories: <?= json_encode($labels30) ?> },
yaxis: { min: 0 },
legend: { show: false }
};
new ApexCharts(document.getElementById('chartLine'), lineOptions).render();
});
</script>
PHP,
'sorting' => 2,
'activation_status' => 1,
'col_span' => 4,
'created_by' => 1,
'updated_by' => 1,
]
);
DataDashboard::updateOrCreate(
['title' => 'Latest Activity Log'],
[
'content' => <<<'PHP'
<?php
use Spatie\Activitylog\Models\Activity;
$activities = Activity::with('causer')->latest()->take(10)->get();
function activityBadgeClass($event) {
return match ($event) {
'created' => 'bg-success-50 text-success-600 dark:bg-success-500/15 dark:text-success-500',
'updated' => 'bg-warning-50 text-warning-600 dark:bg-warning-500/15 dark:text-orange-400',
'deleted' => 'bg-error-50 text-error-600 dark:bg-error-500/15 dark:text-error-500',
default => 'bg-blue-light-50 text-blue-light-500 dark:bg-blue-light-500/15 dark:text-blue-light-500',
};
}
?>
<style>
.activity-log-widget h3 {
text-align: center;
margin-bottom: 16px;
font-size: 17px;
font-weight: 600;
color: #1e293b;
}
.dark .activity-log-widget h3 { color: #e2e8f0; }
.activity-log-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.activity-log-table th,
.activity-log-table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #f1f5f9;
}
.dark .activity-log-table th,
.dark .activity-log-table td { border-bottom-color: #1f2937; }
.activity-log-table th {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
background: #f8fafc;
}
.dark .activity-log-table th { color: #94a3b8; background: #111827; }
.activity-log-table td {
color: #334155;
vertical-align: middle;
}
.dark .activity-log-table td { color: #cbd5e1; }
.activity-log-table tr:hover td { background: #f8fafc; }
.dark .activity-log-table tr:hover td { background: #1f2937; }
.activity-log-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
border-radius: 9999px;
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
text-transform: capitalize;
}
.activity-log-empty {
text-align: center;
padding: 40px 20px;
color: #64748b;
}
.dark .activity-log-empty { color: #94a3b8; }
@media (max-width: 640px) {
.activity-log-table th,
.activity-log-table td { padding: 10px 12px; font-size: 13px; }
}
</style>
<div class="activity-log-widget">
<h3>Latest Activity Log</h3>
<div class="max-w-full overflow-x-auto">
<table class="activity-log-table">
<thead>
<tr>
<th>Date & Time</th>
<th>User Name</th>
<th>Action</th>
<th>Module Name</th>
</tr>
</thead>
<tbody>
<?php if ($activities->isNotEmpty()): ?>
<?php foreach ($activities as $activity): ?>
<?php
$causer = $activity->causer;
$userName = $causer
? ($causer->username ?? trim(($causer->first_name ?? '') . ' ' . ($causer->last_name ?? '')) ?: 'User #' . $causer->id)
: 'System';
?>
<tr>
<td>
<span class="block text-sm font-medium"><?= $activity->created_at?->format('d M Y') ?></span>
<span class="block text-xs text-gray-500 dark:text-gray-400"><?= $activity->created_at?->format('H:i') ?></span>
</td>
<td class="font-medium"><?= e($userName) ?></td>
<td>
<span class="activity-log-badge <?= activityBadgeClass($activity->event) ?>">
<?= e(ucfirst($activity->event ?? 'N/A')) ?>
</span>
</td>
<td><?= e($activity->subject_type ?? '-') ?></td>
</tr>
<?php endforeach; ?>
<?php else: ?>
<tr>
<td colspan="4" class="activity-log-empty">
No recent activity logs found.
</td>
</tr>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
PHP,
'sorting' => 3,
'activation_status' => 1,
'col_span' => 4,
'created_by' => 1,
'updated_by' => 1,
]
);
}
}