@devvistatech/devvista-kit 0.0.10 → 0.0.12

package/components/addOns/functional/NewUserAnalytics.tsx

@@ -1,101 +1,101 @@
-// components/ui/new-users-chart.tsx
-"use client";
-
-import { Line } from "react-chartjs-2";
-import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from "chart.js";
-
-ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
-
-interface AnalyticsData {
-  date: string;
-  country: string;
-  deviceCategory: string;
-  activeUsers: number;
-  totalUsers: number;
-  newUsers: number;
-  pageViews: number;
-  engagedSessions: number;
-  averageSessionDuration: number;
-  averageEngagementTimePerActiveUser: number;
-  bounceRate: number;
-}
-
-interface NewUsersChartProps {
-  data: AnalyticsData[];
-  currentYear: number;
-}
-
-const formatMonth = (date: string) => {
-  const year = date.slice(0, 4);
-  const month = parseInt(date.slice(4, 6), 10);
-  return new Date(parseInt(year), month - 1).toLocaleDateString("en-US", { month: "short", year: "numeric" });
-};
-
-export function NewUsersChart({ data, currentYear }: NewUsersChartProps) {
-  const chartData = {
-    labels: data.map((row) => formatMonth(row.date)),
-    datasets: [
-      {
-        label: "New Users",
-        data: data.map((row) => row.newUsers),
-        borderColor: "#34D399",
-        backgroundColor: "rgba(52, 211, 153, 0.5)",
-        tension: 0.1,
-        pointRadius: 3,
-        borderWidth: 2,
-      },
-    ],
-  };
-
-  const chartOptions = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        position: "top" as const,
-        labels: {
-          color: "#9CA3AF", 
-        },
-      },
-      title: {
-        display: false,
-      },
-      tooltip: {
-        backgroundColor: "#1F2937",
-        titleColor: "#E5E7EB", 
-        bodyColor: "#E5E7EB",
-      },
-    },
-    scales: {
-      x: {
-        grid: {
-          display: false,
-        },
-        ticks: {
-          color: "#9CA3AF", 
-        },
-      },
-      y: {
-        grid: {
-          color: "rgba(255, 255, 255, 0.1)",
-        },
-        ticks: {
-          color: "#9CA3AF",
-        },
-      },
-    },
-  };
-
-  return (
-    <section className="bg-gray-800/50 backdrop-blur-md rounded-2xl shadow-lg p-6 border border-gray-700/50 hover:border-blue-500/50 transition-colors">
-      <h2 className="text-2xl font-bold text-blue-200 mb-6">New Users by Month ({currentYear})</h2>
-      {data.length === 0 ? (
-        <p className="text-gray-400 text-center py-4">No data available</p>
-      ) : (
-        <div className="h-[300px]">
-          <Line data={chartData} options={chartOptions} />
-        </div>
-      )}
-    </section>
-  );
+// components/ui/new-users-chart.tsx
+"use client";
+
+import { Line } from "react-chartjs-2";
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from "chart.js";
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
+
+interface AnalyticsData {
+  date: string;
+  country: string;
+  deviceCategory: string;
+  activeUsers: number;
+  totalUsers: number;
+  newUsers: number;
+  pageViews: number;
+  engagedSessions: number;
+  averageSessionDuration: number;
+  averageEngagementTimePerActiveUser: number;
+  bounceRate: number;
+}
+
+interface NewUsersChartProps {
+  data: AnalyticsData[];
+  currentYear: number;
+}
+
+const formatMonth = (date: string) => {
+  const year = date.slice(0, 4);
+  const month = parseInt(date.slice(4, 6), 10);
+  return new Date(parseInt(year), month - 1).toLocaleDateString("en-US", { month: "short", year: "numeric" });
+};
+
+export function NewUsersChart({ data, currentYear }: NewUsersChartProps) {
+  const chartData = {
+    labels: data.map((row) => formatMonth(row.date)),
+    datasets: [
+      {
+        label: "New Users",
+        data: data.map((row) => row.newUsers),
+        borderColor: "#34D399",
+        backgroundColor: "rgba(52, 211, 153, 0.5)",
+        tension: 0.1,
+        pointRadius: 3,
+        borderWidth: 2,
+      },
+    ],
+  };
+
+  const chartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        position: "top" as const,
+        labels: {
+          color: "#9CA3AF", 
+        },
+      },
+      title: {
+        display: false,
+      },
+      tooltip: {
+        backgroundColor: "#1F2937",
+        titleColor: "#E5E7EB", 
+        bodyColor: "#E5E7EB",
+      },
+    },
+    scales: {
+      x: {
+        grid: {
+          display: false,
+        },
+        ticks: {
+          color: "#9CA3AF", 
+        },
+      },
+      y: {
+        grid: {
+          color: "rgba(255, 255, 255, 0.1)",
+        },
+        ticks: {
+          color: "#9CA3AF",
+        },
+      },
+    },
+  };
+
+  return (
+    <section className="bg-gray-800/50 backdrop-blur-md rounded-2xl shadow-lg p-6 border border-gray-700/50 hover:border-blue-500/50 transition-colors">
+      <h2 className="text-2xl font-bold text-blue-200 mb-6">New Users by Month ({currentYear})</h2>
+      {data.length === 0 ? (
+        <p className="text-gray-400 text-center py-4">No data available</p>
+      ) : (
+        <div className="h-[300px]">
+          <Line data={chartData} options={chartOptions} />
+        </div>
+      )}
+    </section>
+  );
 }

package/components/addOns/functional/ScheduleCarousel.tsx

@@ -1,172 +1,172 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { Card } from "@/components/other/card";
-
-interface ScheduleClass {
-  name: string;
-  startTime: string;
-  endTime: string;
-}
-
-interface WeeklySchedule {
-  [key: string]: ScheduleClass[];
-}
-
-interface ScheduleCarouselProps {
-  weeklySchedule: WeeklySchedule;
-  backgroundImages: string[];
-  error?: string | null;
-}
-
-export function ScheduleCarousel({
-  weeklySchedule,
-  backgroundImages,
-  error,
-}: ScheduleCarouselProps) {
-  const [currentDayIndex, setCurrentDayIndex] = useState(0);
-
-  useEffect(() => {
-    backgroundImages.forEach((image) => {
-      const img = new Image();
-      img.src = image;
-    });
-
-    const days = Object.keys(weeklySchedule);
-    const interval = setInterval(() => {
-      setCurrentDayIndex((prev) => (prev === days.length - 1 ? 0 : prev + 1));
-    }, 5000);
-    return () => clearInterval(interval);
-  }, [weeklySchedule, backgroundImages]);
-
-  return (
-    <div className="w-full bg-black z-0">
-      <section className="w-full py-16 sm:py-24 px-4 sm:px-8 relative">
-        <style jsx>{`
-          .schedule-background {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-size: cover;
-            background-position: center;
-            transition: opacity 0.5s ease-in-out;
-            opacity: 0;
-          }
-
-          .schedule-background.active {
-            opacity: 1;
-          }
-
-          .schedule-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.3);
-            z-index: 1;
-          }
-        `}</style>
-
-        <div className="absolute inset-0 z-0 w-full h-full">
-          {backgroundImages.map((image, index) => (
-            <div
-              key={index}
-              className={`schedule-background ${index === currentDayIndex ? "active" : ""}`}
-              style={{ backgroundImage: `url(${image})` }}
-            />
-          ))}
-          <div className="schedule-overlay" />
-        </div>
-
-        <div className="relative z-10 h-[600px] sm:h-[800px] overflow-hidden">
-          {error ? (
-            <div
-              className="text-center !text-white text-4xl sm:text-5xl font-semibold h-full flex items-center justify-center max-w-full"
-              style={{ textShadow: "2px 2px 4px rgba(0, 0, 0, 0.5)" }}
-            >
-              {error}
-            </div>
-          ) : (
-            (() => {
-              const days = Object.entries(weeklySchedule);
-              const [day, classes] = days[currentDayIndex];
-
-              return (
-                <Card className="w-full max-w-full p-6 sm:p-10 md:p-16 flex flex-col items-center justify-center h-full overflow-hidden bg-transparent border-none">
-                  <h3
-                    className="text-5xl sm:text-6xl md:text-8xl font-bold text-white text-center tracking-tight"
-                    style={{
-                      textShadow: `
-                        -1px -1px 0 #000,
-                        1px -1px 0 #000,
-                        -1px 1px 0 #000,
-                        1px 1px 0 #000,
-                        0 2px 4px rgba(0, 0, 0, 0.4)
-                      `,
-                      fontSize: "clamp(2.5rem, 10vw, 5rem)",
-                    }}
-                  >
-                    {day}
-                  </h3>
-
-                  <ul className="space-y-6 font-semibold text-center mt-8 max-w-full">
-                    {classes.length > 0 ? (
-                      classes.map((cls) => (
-                        <li
-                          key={`${cls.startTime}-${cls.endTime}`}
-                          className="text-2xl sm:text-3xl md:text-4xl text-white break-words"
-                          style={{
-                            textShadow: `
-                              -1px -1px 0 #000,
-                              1px -1px 0 #000,
-                              -1px 1px 0 #000,
-                              1px 1px 0 #000,
-                              0 2px 4px rgba(0, 0, 0, 0.4),
-                              2px 2px 10px rgba(0, 0, 0, 0.6)
-                            `,
-                            fontSize: "clamp(1.5rem, 6vw, 2.5rem)",
-                          }}
-                        >
-                          <span className="font-semibold text-[#FF69B4]">{cls.name}</span> -{" "}
-                          {new Date(`2023-01-01 ${cls.startTime}`).toLocaleTimeString("en-US", {
-                            hour: "numeric",
-                            minute: "2-digit",
-                          })}{" "}
-                          to{" "}
-                          {new Date(`2023-01-01 ${cls.endTime}`).toLocaleTimeString("en-US", {
-                            hour: "numeric",
-                            minute: "2-digit",
-                          })}
-                        </li>
-                      ))
-                    ) : (
-                      <li
-                        className="text-2xl sm:text-3xl md:text-4xl text-white font-semibold"
-                        style={{
-                          textShadow: `
-                            -1px -1px 0 #000,
-                            1px -1px 0 #000,
-                            -1px 1px 0 #000,
-                            1px 1px 0 #000,
-                            0 2px 4px rgba(0, 0, 0, 0.4),
-                            2px 2px 10px rgba(0, 0, 0, 0.6)
-                          `,
-                          fontSize: "clamp(1.5rem, 6vw, 2.5rem)",
-                        }}
-                      >
-                        No classes
-                      </li>
-                    )}
-                  </ul>
-                </Card>
-              );
-            })()
-          )}
-        </div>
-      </section>
-    </div>
-  );
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card } from "@/components/other/card";
+
+interface ScheduleClass {
+  name: string;
+  startTime: string;
+  endTime: string;
+}
+
+interface WeeklySchedule {
+  [key: string]: ScheduleClass[];
+}
+
+interface ScheduleCarouselProps {
+  weeklySchedule: WeeklySchedule;
+  backgroundImages: string[];
+  error?: string | null;
+}
+
+export function ScheduleCarousel({
+  weeklySchedule,
+  backgroundImages,
+  error,
+}: ScheduleCarouselProps) {
+  const [currentDayIndex, setCurrentDayIndex] = useState(0);
+
+  useEffect(() => {
+    backgroundImages.forEach((image) => {
+      const img = new Image();
+      img.src = image;
+    });
+
+    const days = Object.keys(weeklySchedule);
+    const interval = setInterval(() => {
+      setCurrentDayIndex((prev) => (prev === days.length - 1 ? 0 : prev + 1));
+    }, 5000);
+    return () => clearInterval(interval);
+  }, [weeklySchedule, backgroundImages]);
+
+  return (
+    <div className="w-full bg-black z-0">
+      <section className="w-full py-16 sm:py-24 px-4 sm:px-8 relative">
+        <style jsx>{`
+          .schedule-background {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-size: cover;
+            background-position: center;
+            transition: opacity 0.5s ease-in-out;
+            opacity: 0;
+          }
+
+          .schedule-background.active {
+            opacity: 1;
+          }
+
+          .schedule-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.3);
+            z-index: 1;
+          }
+        `}</style>
+
+        <div className="absolute inset-0 z-0 w-full h-full">
+          {backgroundImages.map((image, index) => (
+            <div
+              key={index}
+              className={`schedule-background ${index === currentDayIndex ? "active" : ""}`}
+              style={{ backgroundImage: `url(${image})` }}
+            />
+          ))}
+          <div className="schedule-overlay" />
+        </div>
+
+        <div className="relative z-10 h-[600px] sm:h-[800px] overflow-hidden">
+          {error ? (
+            <div
+              className="text-center !text-white text-4xl sm:text-5xl font-semibold h-full flex items-center justify-center max-w-full"
+              style={{ textShadow: "2px 2px 4px rgba(0, 0, 0, 0.5)" }}
+            >
+              {error}
+            </div>
+          ) : (
+            (() => {
+              const days = Object.entries(weeklySchedule);
+              const [day, classes] = days[currentDayIndex];
+
+              return (
+                <Card className="w-full max-w-full p-6 sm:p-10 md:p-16 flex flex-col items-center justify-center h-full overflow-hidden bg-transparent border-none">
+                  <h3
+                    className="text-5xl sm:text-6xl md:text-8xl font-bold text-white text-center tracking-tight"
+                    style={{
+                      textShadow: `
+                        -1px -1px 0 #000,
+                        1px -1px 0 #000,
+                        -1px 1px 0 #000,
+                        1px 1px 0 #000,
+                        0 2px 4px rgba(0, 0, 0, 0.4)
+                      `,
+                      fontSize: "clamp(2.5rem, 10vw, 5rem)",
+                    }}
+                  >
+                    {day}
+                  </h3>
+
+                  <ul className="space-y-6 font-semibold text-center mt-8 max-w-full">
+                    {classes.length > 0 ? (
+                      classes.map((cls) => (
+                        <li
+                          key={`${cls.startTime}-${cls.endTime}`}
+                          className="text-2xl sm:text-3xl md:text-4xl text-white break-words"
+                          style={{
+                            textShadow: `
+                              -1px -1px 0 #000,
+                              1px -1px 0 #000,
+                              -1px 1px 0 #000,
+                              1px 1px 0 #000,
+                              0 2px 4px rgba(0, 0, 0, 0.4),
+                              2px 2px 10px rgba(0, 0, 0, 0.6)
+                            `,
+                            fontSize: "clamp(1.5rem, 6vw, 2.5rem)",
+                          }}
+                        >
+                          <span className="font-semibold text-[#FF69B4]">{cls.name}</span> -{" "}
+                          {new Date(`2023-01-01 ${cls.startTime}`).toLocaleTimeString("en-US", {
+                            hour: "numeric",
+                            minute: "2-digit",
+                          })}{" "}
+                          to{" "}
+                          {new Date(`2023-01-01 ${cls.endTime}`).toLocaleTimeString("en-US", {
+                            hour: "numeric",
+                            minute: "2-digit",
+                          })}
+                        </li>
+                      ))
+                    ) : (
+                      <li
+                        className="text-2xl sm:text-3xl md:text-4xl text-white font-semibold"
+                        style={{
+                          textShadow: `
+                            -1px -1px 0 #000,
+                            1px -1px 0 #000,
+                            -1px 1px 0 #000,
+                            1px 1px 0 #000,
+                            0 2px 4px rgba(0, 0, 0, 0.4),
+                            2px 2px 10px rgba(0, 0, 0, 0.6)
+                          `,
+                          fontSize: "clamp(1.5rem, 6vw, 2.5rem)",
+                        }}
+                      >
+                        No classes
+                      </li>
+                    )}
+                  </ul>
+                </Card>
+              );
+            })()
+          )}
+        </div>
+      </section>
+    </div>
+  );
 }