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,108 @@
+import React, { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import type { ChartType } from "../types";
+
+interface AddWidgetModalProps {
+  isOpen: boolean;
+  onAdd: (data: { type: ChartType; title: string; dataKey: string }) => void;
+  onClose: () => void;
+}
+
+export const AddWidgetModal: React.FC<AddWidgetModalProps> = ({
+  isOpen,
+  onAdd,
+  onClose,
+}) => {
+  const [type, setType] = useState<ChartType>("line");
+  const [title, setTitle] = useState("");
+  const [dataKey, setDataKey] = useState("requests");
+
+  const handleAdd = () => {
+    if (!title.trim()) return;
+    onAdd({ type, title: title.trim(), dataKey });
+    setTitle("");
+    setType("line");
+    setDataKey("requests");
+    onClose();
+  };
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <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)}
+                  placeholder="Название"
+                  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={handleAdd}
+                  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={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>
+      )}
+    </AnimatePresence>
+  );
+};