@devvistatech/devvista-kit 0.0.1

package/components/addOns/functional/NewUserAnalytics.tsx

@@ -0,0 +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>
+  );
+}

package/components/addOns/functional/ScheduleCarousel.tsx

@@ -0,0 +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>
+  );
+}