@@ -50,56 +70,57 @@ export default function SavingsCard({ savings }: Props) {
100,
Math.round((s.current_amount / s.target_amount) * 100)
);
- const color = s.color || "#6366f1";
+ const color = s.color || COLORS[i % COLORS.length];
return (
{s.icon && {s.icon}}
{s.name}
{pct}%
+ {/* Progress bar with glow */}
{formatAmount(s.current_amount)} ₽
- цель: {formatAmount(s.target_amount)} ₽
+ из {formatAmount(s.target_amount)} ₽
);
diff --git a/components/cards/TasksCard.tsx b/components/cards/TasksCard.tsx
index 546cbcd..e7f2831 100644
--- a/components/cards/TasksCard.tsx
+++ b/components/cards/TasksCard.tsx
@@ -2,7 +2,7 @@
import { useState, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion";
-import { CheckSquare, Square, Plus } from "lucide-react";
+import { CheckCircle2, Circle, Plus, ListTodo } from "lucide-react";
import { createTask, toggleTask } from "@/lib/api";
import AddTaskModal from "../AddTaskModal";
@@ -49,57 +49,84 @@ export default function TasksCard({ tasks, onUpdate }: Props) {
return (
<>
+ {/* Header */}
-
-
-
-
+
+
+
+
+
- Задачи сегодня
-
-
-
- {pending.length} осталось из {localTasks.length}
+ Задачи
+
+
+ {pending.length > 0
+ ? `${pending.length} из ${localTasks.length} осталось`
+ : "Всё готово!"}
+
+
+ {/* Add button */}
setModalOpen(true)}
- className="w-8 h-8 rounded-lg flex items-center justify-center"
+ className="w-10 h-10 rounded-xl flex items-center justify-center"
style={{
- background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
- boxShadow: "0 0 12px rgba(99,102,241,0.4)",
+ background: "linear-gradient(135deg, #8b5cf6, #6366f1)",
+ boxShadow: "0 0 18px rgba(139,92,246,0.45)",
}}
- whileTap={{ scale: 0.85 }}
+ whileTap={{ scale: 0.82 }}
>
-
+
-
-
+ {/* Task list */}
+
+
{localTasks.length === 0 && (
- 🎉
+ 🎉
- Всё сделано!
+ Всё сделано на сегодня!
+ setModalOpen(true)}
+ className="mt-2 px-5 py-2.5 rounded-xl text-sm font-semibold"
+ style={{
+ background: "linear-gradient(135deg, rgba(139,92,246,0.25), rgba(99,102,241,0.2))",
+ border: "1px solid rgba(139,92,246,0.35)",
+ color: "#8b5cf6",
+ }}
+ whileTap={{ scale: 0.9 }}
+ >
+ + Добавить задачу
+
)}
@@ -107,32 +134,36 @@ export default function TasksCard({ tasks, onUpdate }: Props) {
handleToggle(task)}
whileTap={{ scale: 0.97 }}
>
- {task.done ? (
-
- ) : (
-
- )}
+
+ {task.done ? (
+
+ ) : (
+
+ )}
+
diff --git a/components/cards/TemperatureCard.tsx b/components/cards/TemperatureCard.tsx
index d54cf09..b73fe0b 100644
--- a/components/cards/TemperatureCard.tsx
+++ b/components/cards/TemperatureCard.tsx
@@ -22,6 +22,7 @@ export default function TemperatureCard({
}: Props) {
const [target, setTarget] = useState(targetTemp || 22);
const isHeating = state === "heat";
+ const isActive = state !== "off";
const adjust = useCallback(
async (delta: number) => {
@@ -33,97 +34,122 @@ export default function TemperatureCard({
[target, entityId, onUpdate]
);
- const tempDiff = currentTemp ? currentTemp - target : 0;
+ const accentColor = isHeating ? "#f43f5e" : "#3b82f6";
+ const accentBg = isHeating ? "rgba(244,63,94,0.08)" : "rgba(59,130,246,0.08)";
+ const accentBorder = isHeating ? "rgba(244,63,94,0.2)" : "rgba(59,130,246,0.2)";
+ const accentGlow = isHeating ? "rgba(244,63,94,0.25)" : "rgba(59,130,246,0.2)";
return (
+ {/* Icon row */}
-
-
-
-
-
- Термостат
-
-
- {isHeating ? "Нагрев" : "Ожидание"}
-
-
+
+
+
-
-
- {currentTemp?.toFixed(1) ?? "—"}°
-
-
- текущая
-
+ {/* Status badge */}
+
+ {isHeating ? "Нагрев" : isActive ? "Охлаждение" : "Выкл"}
-
+ {/* Current temperature — BIG */}
+
+ {currentTemp?.toFixed(1) ?? "—"}°
+
+
- Целевая температура
+ текущая температура
+
+
+ {/* Target temperature controls */}
+
+
+ Цель
+
+
adjust(-0.5)}
- className="w-8 h-8 rounded-lg flex items-center justify-center"
- style={{ background: "rgba(255,255,255,0.08)" }}
- whileTap={{ scale: 0.85 }}
+ className="w-10 h-10 rounded-xl flex items-center justify-center"
+ style={{
+ background: "rgba(255,255,255,0.08)",
+ border: "1px solid rgba(255,255,255,0.1)",
+ }}
+ whileTap={{ scale: 0.82 }}
>
-
+
+
{target}°
+
adjust(0.5)}
- className="w-8 h-8 rounded-lg flex items-center justify-center"
- style={{ background: "rgba(99,102,241,0.2)" }}
- whileTap={{ scale: 0.85 }}
+ className="w-10 h-10 rounded-xl flex items-center justify-center"
+ style={{
+ background: `${accentColor}22`,
+ border: `1px solid ${accentColor}50`,
+ }}
+ whileTap={{ scale: 0.82 }}
>
-
+
diff --git a/components/cards/WeatherCard.tsx b/components/cards/WeatherCard.tsx
index fc4bc10..8c3287e 100644
--- a/components/cards/WeatherCard.tsx
+++ b/components/cards/WeatherCard.tsx
@@ -30,14 +30,11 @@ export default function WeatherCard({ weather }: Props) {
if (!weather) {
return (
-
+
Загрузка погоды...
@@ -46,91 +43,93 @@ export default function WeatherCard({ weather }: Props) {
return (
-
+ {/* Location */}
+
+ 📍 Санкт-Петербург
+
+
+ {/* Current weather */}
+
+
+ {getWeatherEmoji(weather.weatherCode)}
+
- 🌍 Санкт-Петербург
+ {weather.temp}°
-
-
- {getWeatherEmoji(weather.weatherCode)}
-
-
-
- {weather.temp}°C
-
-
- {weather.desc}
-
-
+
+ {weather.desc}
-
-
-
-
- {weather.humidity}%
-
-
-
-
-
- {weather.windSpeed} км/ч
-
-
+
+
+ {/* Stats */}
+
+
+
+
+ {weather.humidity}%
+
+
+
+
+
+ {weather.windSpeed} км/ч
+
+
+
+ Ощущается {weather.feelsLike}°
{/* Forecast */}
- {(weather.forecast || []).map((day: any, i: number) => (
+ {(weather.forecast || []).slice(0, 3).map((day: any, i: number) => (
- {i === 0 ? "Сегодня" : formatDate(day.date)}
-
-
- {getWeatherEmoji(day.weatherCode)}
+ {i === 0 ? "Сег." : formatDate(day.date)}
+ {getWeatherEmoji(day.weatherCode)}
- {day.maxTemp}° / {day.minTemp}°
+ {day.maxTemp}°/{day.minTemp}°
))}
diff --git a/components/cards/WeatherSavingsCard.tsx b/components/cards/WeatherSavingsCard.tsx
new file mode 100644
index 0000000..a6a6458
--- /dev/null
+++ b/components/cards/WeatherSavingsCard.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import WeatherCard from "./WeatherCard";
+import SavingsCard from "./SavingsCard";
+
+interface Props {
+ weather: any;
+ savings: any[];
+}
+
+export default function WeatherSavingsCard({ weather, savings }: Props) {
+ const [view, setView] = useState<"weather" | "savings">("weather");
+
+ return (
+
+ {/* Toggle pills */}
+
+ {[
+ { id: "weather", label: "🌤 Погода" },
+ { id: "savings", label: "💰 Цели" },
+ ].map((tab) => (
+ setView(tab.id as "weather" | "savings")}
+ className="flex-1 py-1.5 rounded-xl text-xs font-semibold relative"
+ style={{
+ color: view === tab.id ? "var(--text-primary)" : "var(--text-secondary)",
+ }}
+ whileTap={{ scale: 0.95 }}
+ >
+ {view === tab.id && (
+
+ )}
+ {tab.label}
+
+ ))}
+
+
+ {/* Content */}
+
+
+ {view === "weather" ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
+
+
+ );
+}