feat: dashboard-page

2026-04-04 16:53:12 +03:00
parent 55cb214458
commit 78f35f6811
11 changed files with 1221 additions and 0 deletions
@@ -0,0 +1,105 @@
+// modules/dashboard/components/WidgetSettings.tsx
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import type { ChartType, ChartWidget } from "../types";
+
+interface WidgetSettingsProps {
+  widget: ChartWidget;
+  onUpdate: (widget: ChartWidget) => void;
+  onRemove: () => void;
+  onClose: () => void;
+}
+
+export const WidgetSettings: React.FC<WidgetSettingsProps> = ({
+  widget,
+  onUpdate,
+  onRemove,
+  onClose,
+}) => {
+  const [type, setType] = useState<ChartType>(widget.type);
+  const [title, setTitle] = useState(widget.title);
+
+  const handleSave = () => {
+    onUpdate({ ...widget, type, title });
+    onClose();
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+      onClick={onClose}
+    >
+      <motion.div
+        initial={{ scale: 0.95, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        exit={{ scale: 0.95, opacity: 0 }}
+        className="bg-secondary rounded-xl shadow-large border border-primary w-80 p-3"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h3 className="text-xs font-semibold text-primary mb-3">
+          Настройки графика
+        </h3>
+
+        <div className="space-y-2">
+          <div>
+            <label className="block text-[10px] text-secondary mb-1">Тип</label>
+            <div className="flex gap-1">
+              {(["line", "bar", "area", "pie"] as ChartType[]).map((t) => (
+                <button
+                  key={t}
+                  onClick={() => setType(t)}
+                  className={`px-2 py-0.5 rounded text-[10px] transition-colors cursor-pointer ${
+                    type === t
+                      ? "bg-accent-primary text-white"
+                      : "bg-tertiary text-secondary hover:bg-tertiary/70"
+                  }`}
+                >
+                  {t === "line" && "📈"}
+                  {t === "bar" && "📊"}
+                  {t === "area" && "📉"}
+                  {t === "pie" && "🥧"}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-[10px] text-secondary mb-1">
+              Название
+            </label>
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              className="w-full px-2 py-1 text-[11px] bg-tertiary border border-primary rounded text-primary focus:outline-none focus:border-accent-primary"
+            />
+          </div>
+
+          <div className="flex gap-1 pt-2">
+            <button
+              onClick={handleSave}
+              className="flex-1 px-2 py-1 bg-accent-primary text-white rounded text-[10px] hover:bg-accent-hover transition-colors cursor-pointer"
+            >
+              Сохранить
+            </button>
+            <button
+              onClick={onRemove}
+              className="px-2 py-1 bg-red-500/10 text-red-500 rounded text-[10px] hover:bg-red-500/20 transition-colors cursor-pointer"
+            >
+              Удалить
+            </button>
+            <button
+              onClick={onClose}
+              className="px-2 py-1 bg-tertiary text-secondary rounded text-[10px] hover:bg-secondary transition-colors cursor-pointer"
+            >
+              Отмена
+            </button>
+          </div>
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+};