openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove duplicate KPI bar and restore flat widget grid on dashboard

Browse Source 
- Removed the KPI tiles section from renderDashboardOverview: it showed
  Tasks/Calendar/Birthdays/etc. counts in a bar at the top, duplicating
  the full widgets directly below it
- Replaced the main/side two-column workspace layout with the established
  flat dashboard__grid so all widgets align consistently in the web view
- Removed now-unused renderKpiTile function and stats/today locals
- Skeleton updated to match the simplified layout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ulas Kalayci
2026-04-27 12:40:36 +02:00
parent 45241a04f0
commit bb96ddb6f6
1 changed files with 20 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/pages/dashboard.js
+20 -167
View File
@@ -521,24 +521,9 @@ function renderQuickAction({ route, label, icon, tone = '' }) {
`;
}
function renderKpiTile({ title, value, meta, icon, route, tone = '' }) {
return `
<button type="button" class="dashboard-kpi ${tone ? `dashboard-kpi--${tone}` : ''}" data-route="${route}">
<span class="dashboard-kpi__icon"><i data-lucide="${icon}" aria-hidden="true"></i></span>
<span class="dashboard-kpi__body">
<span class="dashboard-kpi__label">${title}</span>
<span class="dashboard-kpi__value">${value}</span>
<span class="dashboard-kpi__meta">${meta}</span>
</span>
</button>
`;
}
function renderDashboardOverview(user, stats = null, weather = null) {
function renderDashboardOverview(user) {
const dateLabel = formatDate(new Date());
const weatherLabel = weather
? `${esc(weather.city)} · ${esc(weather.current?.temp)}${weather.units === 'imperial' ? '°F' : weather.units === 'standard' ? 'K' : '°C'}`
: t('dashboard.weather');
const actions = [
{ route: '/tasks', label: t('nav.tasks'), icon: 'check-square', tone: 'blue' },
@@ -547,64 +532,6 @@ function renderDashboardOverview(user, stats = null, weather = null) {
{ route: '/notes', label: t('nav.notes'), icon: 'sticky-note', tone: 'amber' },
].map(renderQuickAction).join('');
const kpis = stats ? [
renderKpiTile({
title: t('tasks.title'),
value: String(stats.overdueCount ?? 0),
meta: t('dashboard.overdue'),
icon: 'alert-circle',
route: '/tasks',
tone: 'danger',
}),
renderKpiTile({
title: t('nav.calendar'),
value: String(stats.todayEventCount ?? 0),
meta: t('common.today'),
icon: 'calendar-days',
route: '/calendar',
tone: 'calendar',
}),
renderKpiTile({
title: t('nav.meals'),
value: stats.todayMealTitle ? esc(stats.todayMealTitle) : '-',
meta: t('dashboard.todayMeals'),
icon: 'utensils',
route: '/meals',
tone: 'meals',
}),
renderKpiTile({
title: t('dashboard.weather'),
value: weatherLabel,
meta: t('dashboard.weatherRefreshTitle'),
icon: 'cloud-sun',
route: '/',
tone: 'weather',
}),
renderKpiTile({
title: t('nav.birthdays'),
value: String(stats.birthdayCount ?? 0),
meta: t('dashboard.upcomingBirthdays'),
icon: 'cake',
route: '/birthdays',
tone: 'birthdays',
}),
renderKpiTile({
title: t('dashboard.familyMembers'),
value: String(stats.familyCount ?? 0),
meta: t('dashboard.participantsAdded'),
icon: 'users',
route: '/settings',
tone: 'family',
}),
].join('') : `
<div class="dashboard-kpi dashboard-kpi--skeleton"></div>
<div class="dashboard-kpi dashboard-kpi--skeleton"></div>
<div class="dashboard-kpi dashboard-kpi--skeleton"></div>
<div class="dashboard-kpi dashboard-kpi--skeleton"></div>
<div class="dashboard-kpi dashboard-kpi--skeleton"></div>
<div class="dashboard-kpi dashboard-kpi--skeleton"></div>
`;
return `
<section class="dashboard-overview">
<div class="dashboard-overview__header">
@@ -620,35 +547,13 @@ function renderDashboardOverview(user, stats = null, weather = null) {
</button>
</div>
</div>
<div class="dashboard-kpi-grid">
${kpis}
</div>
</section>
`;
}
function widgetRegion(id) {
return ['budget', 'family', 'weather', 'shopping', 'meals'].includes(id) ? 'side' : 'main';
}
function widgetTileClass(id) {
const map = {
tasks: 'dashboard-tile--wide',
calendar: 'dashboard-tile--compact',
birthdays: 'dashboard-tile--compact',
budget: 'dashboard-tile--wide',
family: 'dashboard-tile--compact',
meals: 'dashboard-tile--compact',
notes: 'dashboard-tile--wide',
shopping: 'dashboard-tile--compact',
weather: 'dashboard-tile--wide',
};
return map[id] || 'dashboard-tile--compact';
}
function renderDashboardTile(id, html) {
if (!html) return '';
return `<section class="dashboard-tile dashboard-tile--${id} ${widgetTileClass(id)}">${html}</section>`;
const wideIds = ['tasks', 'budget', 'notes', 'weather'];
return wideIds.includes(id) ? 'widget--wide' : '';
}
function renderDashboardLayout(cfg, data, weather, currency) {
@@ -664,31 +569,16 @@ function renderDashboardLayout(cfg, data, weather, currency) {
weather: () => (weather ? renderWeatherWidget(weather) : ''),
};
const visible = cfg.filter((w) => w.visible && widgetById[w.id]);
const mainTiles = visible
.filter((w) => widgetRegion(w.id) === 'main')
.map((w) => renderDashboardTile(w.id, widgetById[w.id]()))
const tiles = cfg
.filter((w) => w.visible && widgetById[w.id])
.map((w) => {
const html = widgetById[w.id]();
if (!html) return '';
return `<div class="widget-wrapper ${widgetTileClass(w.id)}">${html}</div>`;
})
.join('');
const sideTiles = visible
.filter((w) => widgetRegion(w.id) === 'side')
.map((w) => renderDashboardTile(w.id, widgetById[w.id]()))
.join('');
return `
<section class="dashboard-workspace">
<div class="dashboard-workspace__main">
<div class="dashboard-widget-grid">
${mainTiles}
</div>
</div>
<aside class="dashboard-workspace__side">
<div class="dashboard-side-stack">
${sideTiles}
</div>
</aside>
</section>
`;
return `<div class="dashboard__grid">${tiles}</div>`;
}
function renderDashboardSkeleton() {
@@ -700,32 +590,15 @@ function renderDashboardSkeleton() {
<div class="skeleton skeleton-line skeleton-line--medium"></div>
</div>
</div>
<div class="dashboard-kpi-grid">
<div class="dashboard-kpi dashboard-kpi--skeleton"></div>
<div class="dashboard-kpi dashboard-kpi--skeleton"></div>
<div class="dashboard-kpi dashboard-kpi--skeleton"></div>
<div class="dashboard-kpi dashboard-kpi--skeleton"></div>
<div class="dashboard-kpi dashboard-kpi--skeleton"></div>
<div class="dashboard-kpi dashboard-kpi--skeleton"></div>
</div>
</section>
<section class="dashboard-workspace">
<div class="dashboard-workspace__main">
<div class="dashboard-widget-grid">
${skeletonWidget(3)}
${skeletonWidget(3)}
${skeletonWidget(2)}
${skeletonWidget(3)}
</div>
</div>
<aside class="dashboard-workspace__side">
<div class="dashboard-side-stack">
${skeletonWidget(3)}
${skeletonWidget(3)}
${skeletonWidget(2)}
</div>
</aside>
</section>
<div class="dashboard__grid">
${skeletonWidget(3)}
${skeletonWidget(3)}
${skeletonWidget(2)}
${skeletonWidget(3)}
${skeletonWidget(3)}
${skeletonWidget(2)}
</div>
`;
}
@@ -1130,26 +1003,6 @@ export async function render(container, { user }) {
window.oikos?.showToast(t('dashboard.loadError'), 'warning');
}
const today = new Date().toDateString();
const stats = {
overdueCount: (data.urgentTasks ?? []).filter((t) => {
const due = formatDueDate(t.due_date, t.due_time);
return due?.overdue === true;
}).length,
dueSoonCount: (data.urgentTasks ?? []).filter((t) => {
const due = formatDueDate(t.due_date, t.due_time);
return due?.soon === true;
}).length,
todayEventCount: (data.upcomingEvents ?? []).filter((e) =>
new Date(e.start_datetime).toDateString() === today
).length,
todayMealTitle: (data.todayMeals ?? []).find((m) => m.meal_type === 'lunch')?.title
?? (data.todayMeals ?? [])[0]?.title
?? null,
birthdayCount: data.birthdayCount ?? (data.birthdays ?? []).length,
familyCount: (data.users ?? []).length,
};
const rerender = () => render(container, { user });
function rebuildDashboard(cfg) {
@@ -1157,7 +1010,7 @@ export async function render(container, { user }) {
if (!shell) return;
shell.replaceChildren();
shell.insertAdjacentHTML('beforeend', `
${renderDashboardOverview(user, stats, weather)}
${renderDashboardOverview(user)}
${renderDashboardLayout(cfg, data, weather, currency)}
`);
wireLinks(container, rerender);