ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

refactor: update layout and styling of site dashboard buttons and date range selector for improved usability

Browse Source
This commit is contained in:
Usman Baig
2026-02-08 13:40:11 +01:00
parent 078a3ded82
commit 6d5c2d401a
1 changed files with 81 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
app/sites/[id]/page.tsx
View File

@@ -259,77 +259,87 @@ export default function SiteDashboardPage() {
</button> </button>
</div> </div>
<div className="flex gap-2"> <div className="flex items-center gap-2">
<button <div className="flex items-center gap-2">
onClick={() => setIsExportModalOpen(true)} <Button
className="hidden md:flex items-center gap-2 px-3 py-2 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-lg text-sm text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors" onClick={() => setIsExportModalOpen(true)}
> variant="primary"
<DownloadIcon className="w-4 h-4" /> className="hidden md:inline-flex gap-2 text-sm"
<span>Export</span> >
</button> <DownloadIcon className="w-4 h-4" />
Export
<Select </Button>
value={ <Select
dateRange.start === new Date().toISOString().split('T')[0] && dateRange.end === new Date().toISOString().split('T')[0] variant="input"
? 'today' className="min-w-[140px]"
: dateRange.start === getDateRange(7).start value={
? '7' dateRange.start === new Date().toISOString().split('T')[0] && dateRange.end === new Date().toISOString().split('T')[0]
: dateRange.start === getDateRange(30).start ? 'today'
? '30' : dateRange.start === getDateRange(7).start
: 'custom' ? '7'
} : dateRange.start === getDateRange(30).start
onChange={(value) => { ? '30'
if (value === '7') { : 'custom'
const range = getDateRange(7) }
setDateRange(range) onChange={(value) => {
saveSettings('7', range) if (value === '7') {
} const range = getDateRange(7)
else if (value === '30') { setDateRange(range)
const range = getDateRange(30) saveSettings('7', range)
setDateRange(range) }
saveSettings('30', range) else if (value === '30') {
} const range = getDateRange(30)
else if (value === 'today') { setDateRange(range)
const today = new Date().toISOString().split('T')[0] saveSettings('30', range)
const range = { start: today, end: today } }
setDateRange(range) else if (value === 'today') {
saveSettings('today', range) const today = new Date().toISOString().split('T')[0]
} const range = { start: today, end: today }
else if (value === 'custom') { setDateRange(range)
setIsDatePickerOpen(true) saveSettings('today', range)
} }
}} else if (value === 'custom') {
options={[ setIsDatePickerOpen(true)
{ value: 'today', label: 'Today' }, }
{ value: '7', label: 'Last 7 days' }, }}
{ value: '30', label: 'Last 30 days' }, options={[
{ value: 'custom', label: 'Custom' }, { value: 'today', label: 'Today' },
]} { value: '7', label: 'Last 7 days' },
/> { value: '30', label: 'Last 30 days' },
<Button { value: 'custom', label: 'Custom' },
onClick={() => router.push(`/sites/${siteId}/uptime`)} ]}
variant="secondary" />
className="text-sm" </div>
> <div
Uptime className="h-6 w-px bg-neutral-200 dark:bg-neutral-700 flex-shrink-0"
</Button> aria-hidden
<Button />
onClick={() => router.push(`/sites/${siteId}/funnels`)} <div className="flex items-center gap-1">
variant="secondary" <Button
className="text-sm" onClick={() => router.push(`/sites/${siteId}/uptime`)}
> variant="ghost"
Funnels className="text-sm"
</Button> >
{canEdit && ( Uptime
<Button </Button>
onClick={() => router.push(`/sites/${siteId}/settings`)} <Button
variant="secondary" onClick={() => router.push(`/sites/${siteId}/funnels`)}
className="text-sm" variant="ghost"
> className="text-sm"
Settings >
</Button> Funnels
)} </Button>
</div> {canEdit && (
<Button
onClick={() => router.push(`/sites/${siteId}/settings`)}
variant="ghost"
className="text-sm"
>
Settings
</Button>
)}
</div>
</div>
</div> </div>
</div> </div>