Method renderProjectStats

src/views/StatsView.ts:1182–1336

(container: HTMLElement, projects: ProjectStats[])

	}

	private async renderProjectStats(container: HTMLElement, projects: ProjectStats[]) {
		container.empty();

		if (projects.length === 0) {
			container.createDiv({
				cls: "stats-no-data stats-view__no-data",
				text: this.plugin.i18n.translate("views.stats.noProjectData"),
			});
			return;
		}

		const formatTime = (minutes: number): string => {
			if (minutes < 60) return `${Math.round(minutes)}m`;
			const hours = Math.floor(minutes / 60);
			const mins = Math.round(minutes % 60);
			return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
		};

		const formatDate = (dateString?: string): string => {
			if (!dateString) return this.plugin.i18n.translate("views.stats.notAvailable");
			try {
				const date = new Date(dateString);
				return format(date, "MMM d, yyyy");
			} catch {
				return this.plugin.i18n.translate("views.stats.notAvailable");
			}
		};

		for (const project of projects) {
			const projectClasses = [
				"stats-project-item",
				"stats-view__project-item",
				"stats-view__project-item--clickable",
			];

			// Add special class for "No Project" items
			if (project.projectName === this.plugin.i18n.translate("views.stats.noProject")) {
				projectClasses.push("stats-view__project-item--no-project");
			}

			const projectEl = container.createDiv({
				cls: projectClasses.join(" "),
			});

			// Make project clickable for drill-down
			this.registerDomEvent(projectEl, "click", () => {
				void this.openProjectDrilldown(project.projectName);
			});

			// Project header with name and completion rate
			const headerEl = projectEl.createDiv({ cls: "stats-view__project-header" });

			const nameEl = headerEl.createDiv({ cls: "project-name stats-view__project-name" });
			nameEl.textContent = project.projectName;

			// Add click indicator
			headerEl.createDiv({
				cls: "stats-view__click-indicator",