openship 0.1.0 → 0.1.1

package/apps/dashboard/src/app/(dashboard)/projects/[id]/components/general/ProjectIdentity.tsx

@@ -0,0 +1,159 @@
+"use client";
+import React, { useState } from "react";
+import { generateIcon } from "@/utils/icons";
+import { useProjectSettings } from "@/context/ProjectSettingsContext";
+import { projectsApi } from "@/lib/api";
+import { useToast } from "@/context/ToastContext";
+
+export const ProjectIdentity: React.FC = () => {
+  const { projectData, updateProjectData } = useProjectSettings();
+  const [isEditingName, setIsEditingName] = useState(false);
+  const [isEditingDescription, setIsEditingDescription] = useState(false);
+
+  const [tempData, setTempData] = useState({ 
+    name: projectData.name || '',
+    description: projectData.description || '',
+    framework: projectData.framework || ''
+  });
+
+  const [loading, setLoading] = useState({
+    name: false,
+    description: false,
+  });
+  
+  const { showToast } = useToast();
+
+  const handleSaveName = async () => {
+    setLoading({ ...loading, name: true });
+    const response = await projectsApi.update(projectData.id, 'name', tempData.name);
+    if (response.success) {
+      updateProjectData({ name: tempData.name });
+      setIsEditingName(false);
+    } else {
+      showToast(response.message, 'error', 'Failed to update project name');
+    }
+    setLoading({ ...loading, name: false });
+  };
+
+  const handleSaveDescription = async () => {
+    const response = await projectsApi.update(projectData.id, 'description', tempData.description);
+    if (response.success) {
+      updateProjectData({ description: tempData.description });
+      setIsEditingDescription(false);
+    } else {
+      showToast(response.message, 'error', 'Failed to update project description');
+    }
+    setLoading({ ...loading, description: false });
+  };
+
+  const handleCancelName = () => {
+    setTempData((prev) => ({ ...prev, name: projectData.name || '' }));
+    setIsEditingName(false);
+    setLoading({ ...loading, name: false });
+  };
+
+  const handleCancelDescription = () => {
+    setTempData((prev) => ({ ...prev, description: projectData.description || '' }));
+    setIsEditingDescription(false);
+    setLoading({ ...loading, description: false });
+  };
+
+
+  return (
+    <div className="bg-white rounded-[20px] border border-black/5 p-6">
+      {/* Header */}
+      <div className="flex items-center gap-3 mb-6">
+        {generateIcon('layers-363-1658238246.png', 28, 'rgb(79, 70, 229)')}
+        <h3 className="text-lg font-semibold text-black">Project Identity</h3>
+      </div>
+      
+      <div className="flex flex-col lg:flex-row gap-5 lg:gap-6">
+        {/* Project Name */}
+        <div className="flex-1">
+          <label className="text-sm font-medium text-black/70 mb-2 block">Project Name</label>
+          
+          {isEditingName ? (
+            <div className="space-y-3">
+              <input
+                type="text"
+                value={tempData.name}
+                onChange={(e) => setTempData((prev) => ({ ...prev, name: e.target.value }))}
+                placeholder="my-awesome-project"
+                className="w-full px-4 py-2.5 bg-black/5 border border-transparent rounded-xl focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500/20 focus:bg-white outline-none text-sm transition-all"
+                autoFocus
+              />
+              <div className="flex gap-2">
+                <button 
+                  onClick={handleSaveName} 
+                  className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full transition-all text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  Save
+                </button>
+                <button 
+                  onClick={handleCancelName} 
+                  className="px-4 py-2 bg-black/5 hover:bg-black/10 text-black rounded-full transition-all text-sm font-medium"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="relative p-4 bg-black/5 rounded-xl group hover:bg-black/10 transition-all">
+              <p className="text-sm font-medium text-black pr-8">{projectData.name || 'Unnamed Project'}</p>
+              <button
+                onClick={() => setIsEditingName(true)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 p-1.5 text-black/40 hover:text-indigo-600 transition-colors"
+              >
+                {generateIcon("pen-411-1658238246.png", 18, "currentColor")}
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Description */}
+        <div className="flex-1">
+          <label className="text-sm font-medium text-black/70 mb-2 block">Description</label>
+          
+          {isEditingDescription ? (
+            <div className="space-y-3">
+              <textarea
+                value={tempData.description}
+                onChange={(e) => setTempData((prev) => ({ ...prev, description: e.target.value }))}
+                rows={3}
+                placeholder="A modern web application built with..."
+                className="w-full px-4 py-2.5 bg-black/5 border border-transparent rounded-xl focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500/20 focus:bg-white outline-none resize-none text-sm transition-all"
+                autoFocus
+              />
+              <div className="flex gap-2">
+                <button 
+                  onClick={handleSaveDescription} 
+                  className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full transition-all text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  Save
+                </button>
+                <button 
+                  onClick={handleCancelDescription} 
+                  className="px-4 py-2 bg-black/5 hover:bg-black/10 text-black rounded-full transition-all text-sm font-medium"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="relative p-4 bg-black/5 rounded-xl group hover:bg-black/10 transition-all">
+              <p className="text-sm text-black/70 pr-8">
+                {projectData.description || 'No description provided'}
+              </p>
+              <button
+                onClick={() => setIsEditingDescription(true)}
+                className="absolute right-3 top-3 p-1.5 text-black/40 hover:text-indigo-600 transition-colors"
+              >
+                {generateIcon("pen-411-1658238246.png", 18, "currentColor")}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/apps/dashboard/src/app/(dashboard)/projects/[id]/components/general/ProjectInfo.tsx

@@ -0,0 +1,58 @@
+
+import React from "react";
+import { Activity, GitBranch, Calendar, Hash, Sparkles, Info } from "lucide-react";
+import { generateIcon } from "@/utils/icons";
+import { useProjectSettings } from "@/context/ProjectSettingsContext";
+import { formatDate } from "@/utils/date";
+import { useToast } from "@/context/ToastContext";
+
+export const ProjectInfo: React.FC = () => {
+  const { projectData } = useProjectSettings();
+  const { showToast } = useToast();
+  const handleEditWithBlurs = () => {
+    showToast('Editing with Blurs is not available yet', 'success', 'Coming Soon');
+  };
+
+  return (
+    <>
+      {/* Project Metadata - Compact */}
+      <div className="bg-white rounded-[20px] border border-black/5 p-5">
+        <div className="flex items-center gap-2 mb-4">
+          {generateIcon('qr%20scan-120-1658435460.png', 24, 'rgb(79, 70, 229)')}
+          <h3 className="text-base font-semibold text-black">Project Info</h3>
+        </div>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <p className="text-xs text-black/50">Project ID</p>
+            <p className="text-xs text-black font-medium font-mono">{projectData.id?.substring(0, 8)}</p>
+          </div>
+          <div className="flex items-center justify-between">
+            <p className="text-xs text-black/50">Branch</p>
+            <p className="text-xs text-black font-medium">{projectData.branch || 'main'}</p>
+          </div>
+          <div className="flex items-center justify-between">
+            <p className="text-xs text-black/50">Last Deploy</p>
+            <p className="text-xs text-black font-medium">{formatDate(projectData.last_deployed)}</p>
+          </div>
+          <div className="flex items-center justify-between">
+            <p className="text-xs text-black/50">Framework</p>
+            <p className="text-xs text-black font-medium">{projectData.framework || 'Unknown'}</p>
+          </div>
+        </div>
+      </div>
+
+      {/* AI Assistant - Simplified */}
+      <div className="bg-white rounded-[20px] border border-black/5 p-5">
+        <div className="flex items-center gap-2 mb-4">
+          {generateIcon('star-103-1687505465.png', 24, 'rgb(79, 70, 229)')}
+          <h3 className="text-base font-semibold text-black">AI Assistant</h3>
+        </div>
+        <p className="text-xs text-black/40 mb-4">Powered by Blurs</p>
+        <button onClick={handleEditWithBlurs} className="w-full px-4 py-2.5 bg-black text-white rounded-full font-medium text-sm hover:bg-gray-900 transition-all hover:shadow-md flex items-center justify-center gap-2">
+          <Sparkles className="w-4 h-4" />
+          Edit with Blurs
+        </button>
+      </div>
+    </>
+  );
+};

package/apps/dashboard/src/app/(dashboard)/projects/[id]/components/general/SkeletonLoader.tsx

@@ -0,0 +1,170 @@
+import React from "react";
+
+// Fixed heights for skeleton bars to avoid hydration mismatches
+const SKELETON_BAR_HEIGHTS = [
+  45, 62, 38, 71, 55, 42, 68, 49, 75, 33, 
+  58, 44, 66, 52, 39, 73, 47, 61, 35, 69, 
+  51, 43, 64, 56
+];
+
+export const TrafficChartSkeleton = () => {
+  return (
+    <div className="bg-white rounded-2xl border border-gray-200 p-6 h-[320px] flex flex-col animate-pulse">
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-3">
+          <div className="w-12 h-12 rounded-2xl bg-gray-200/50"></div>
+          <div>
+            <div className="h-6 w-40 bg-gray-200/50 rounded-2xl mb-2"></div>
+            <div className="h-4 w-32 bg-gray-200/30 rounded-2xl"></div>
+          </div>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="h-10 w-40 bg-gray-200/50 rounded-2xl"></div>
+          <div className="h-5 w-20 bg-gray-200/30 rounded-2xl"></div>
+        </div>
+      </div>
+      <div className="flex-1 flex items-end gap-1.5">
+        {SKELETON_BAR_HEIGHTS.map((height, i) => (
+          <div
+            key={i}
+            className="flex-1 bg-gray-200/50 rounded-t-2xl"
+            style={{ height: `${height}%` }}
+          ></div>
+        ))}
+      </div>
+      <div className="flex justify-between mt-3">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="h-3 w-10 bg-gray-200/30 rounded-2xl"></div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const TopPathsSkeleton = () => {
+  return (
+    <div className="bg-white rounded-2xl border border-gray-200 p-6 h-[320px] flex flex-col animate-pulse">
+      <div className="flex items-center justify-between mb-5">
+        <div className="flex items-center gap-3">
+          <div className="w-12 h-12 rounded-2xl bg-gray-200/50"></div>
+          <div className="h-6 w-32 bg-gray-200/50 rounded-2xl"></div>
+        </div>
+        <div className="h-5 w-20 bg-gray-200/30 rounded-2xl"></div>
+      </div>
+      <div className="space-y-5 flex-1">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div key={i} className="space-y-2">
+            <div className="flex items-center justify-between mb-2">
+              <div className="h-4 w-32 bg-gray-200/50 rounded-2xl"></div>
+              <div className="h-4 w-16 bg-gray-200/30 rounded-2xl"></div>
+            </div>
+            <div className="w-full h-2.5 bg-gray-200/50 rounded-2xl"></div>
+            <div className="h-3 w-20 bg-gray-200/30 rounded-2xl"></div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const StatsCardsSkeleton = () => {
+  return (
+    <div className="grid grid-cols-4 gap-4 h-[100px]">
+      {Array.from({ length: 4 }).map((_, i) => (
+        <div
+          key={i}
+          className="bg-white border border-gray-200 rounded-2xl p-4 h-full flex items-center animate-pulse"
+        >
+          <div className="flex items-center gap-3 w-full">
+            <div className="w-12 h-12 rounded-2xl bg-gray-200/50 flex-shrink-0"></div>
+            <div className="flex-1 min-w-0">
+              <div className="h-6 w-20 bg-gray-200/50 rounded-2xl mb-2"></div>
+              <div className="h-4 w-24 bg-gray-200/30 rounded-2xl mb-1"></div>
+              <div className="h-3 w-20 bg-gray-200/30 rounded-2xl"></div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const ProductionUrlSkeleton = () => {
+  return (
+    <div className="bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl border border-gray-200 p-6 h-[100px] flex items-center animate-pulse">
+      <div className="flex items-center gap-4 flex-1">
+        <div className="w-12 h-12 bg-gray-200/50 rounded-2xl flex-shrink-0"></div>
+        <div className="flex-1 min-w-0">
+          <div className="h-4 w-32 bg-gray-200/30 rounded-2xl mb-2"></div>
+          <div className="h-5 w-40 bg-gray-200/50 rounded-2xl"></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const ProjectIdentitySkeleton = () => {
+  return (
+    <div className="bg-white rounded-2xl border border-gray-200 overflow-hidden animate-pulse">
+      <div className="bg-gray-50 px-6 py-5 border-b border-gray-200 flex items-center gap-3">
+        <div className="w-12 h-12 rounded-2xl bg-gray-200/50"></div>
+        <div>
+          <div className="h-6 w-40 bg-gray-200/50 rounded-2xl mb-2"></div>
+          <div className="h-4 w-48 bg-gray-200/30 rounded-2xl"></div>
+        </div>
+      </div>
+      
+      <div className="p-6 space-y-5">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div key={i}>
+            <div className="flex items-center justify-between mb-3">
+              <div className="h-5 w-32 bg-gray-200/50 rounded-2xl"></div>
+              <div className="h-4 w-16 bg-gray-200/30 rounded-2xl"></div>
+            </div>
+            <div className="p-4 bg-gray-50 rounded-2xl">
+              <div className="h-5 w-full bg-gray-200/50 rounded-2xl"></div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const ProjectInfoSkeleton = () => {
+  return (
+    <>
+      <div className="bg-white rounded-2xl border border-gray-200 p-6 animate-pulse">
+        <div className="flex items-center gap-3 mb-5">
+          <div className="w-12 h-12 rounded-2xl bg-gray-200/50"></div>
+          <div className="h-6 w-36 bg-gray-200/50 rounded-2xl"></div>
+        </div>
+        <div className="space-y-4">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="flex items-center gap-4">
+              <div className="w-5 h-5 rounded-xl bg-gray-200/50"></div>
+              <div className="flex-1">
+                <div className="h-4 w-20 bg-gray-200/50 rounded-2xl mb-2"></div>
+                <div className="h-4 w-32 bg-gray-200/30 rounded-2xl"></div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl border border-gray-200 p-6 animate-pulse">
+        <div className="flex items-start justify-between mb-4">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 bg-gray-200/50 rounded-2xl"></div>
+            <div>
+              <div className="h-5 w-32 bg-gray-200/50 rounded-2xl mb-2"></div>
+              <div className="h-4 w-36 bg-gray-200/30 rounded-2xl"></div>
+            </div>
+          </div>
+        </div>
+        <div className="w-full h-12 bg-gray-200/50 rounded-2xl"></div>
+        <div className="h-4 w-40 bg-gray-200/30 rounded-2xl mt-4 mx-auto"></div>
+      </div>
+    </>
+  );
+};

package/apps/dashboard/src/app/(dashboard)/projects/[id]/components/general/StatsCards.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { generateIcon } from "@/utils/icons";
+
+interface Props {
+  stats: any[];
+}
+
+export const StatsCards: React.FC<Props> = ({ stats }) => {
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+      {stats.map((stat) => {
+        return (
+          <div key={stat.label} className="bg-white border border-black/5 rounded-[20px] hover:shadow-md transition-all p-4">
+            <div className="flex flex-col">
+              <div className="flex items-center gap-2 mb-3">
+                {generateIcon(stat.icon, 24, 'rgb(79, 70, 229)')}
+                <p className="text-xs font-medium text-black/50">{stat.label}</p>
+              </div>
+              <p className="text-2xl font-semibold text-black mb-1">
+                {stat.value}
+              </p>
+              {stat.subtext && (
+                <p className="text-xs text-black/40 font-normal">
+                  {stat.subtext}
+                </p>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/apps/dashboard/src/app/(dashboard)/projects/[id]/components/general/TopPaths.tsx

@@ -0,0 +1,56 @@
+"use client";
+import React, { useState } from "react";
+import { generateIcon } from "@/utils/icons";
+
+interface PathData {
+  path: string;
+  count: number;
+  percentage: string;
+}
+
+interface Props {
+  paths: PathData[];
+}
+
+export const TopPaths: React.FC<Props> = ({ paths }) => {
+  const [showAll, setShowAll] = useState(false);
+  
+  const displayedPaths = showAll ? paths : paths.slice(0, 5);
+  const hasMorePaths = paths.length > 5;
+
+  return (
+    <div className="bg-white rounded-[20px] border border-black/5 p-5">
+      <div className="flex items-center justify-between mb-5">
+        <div className="flex items-center gap-2">
+          {generateIcon('trend%20up-79-1681196106.png', 24, 'rgb(79, 70, 229)')}
+          <h3 className="text-base font-semibold text-black">Top Paths</h3>
+        </div>
+        {hasMorePaths && (
+          <button
+            onClick={() => setShowAll(!showAll)}
+            className="text-xs font-medium text-indigo-600 hover:text-indigo-700 transition-colors"
+          >
+            {showAll ? 'Show Less' : `+${paths.length - 5}`}
+          </button>
+        )}
+      </div>
+      <div className="space-y-4">
+        {displayedPaths.map((path, idx) => (
+          <div key={idx}>
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-xs text-black/70 font-medium truncate pr-2">{path.path}</span>
+              <span className="text-xs font-medium text-indigo-600">{path.percentage}%</span>
+            </div>
+            <div className="w-full bg-black/5 rounded-full h-2 overflow-hidden">
+              <div 
+                className="h-full bg-indigo-600 rounded-full transition-all"
+                style={{ width: `${path.percentage}%` }}
+              ></div>
+            </div>
+            <p className="text-xs text-black/40 mt-1">{path.count} requests</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/apps/dashboard/src/app/(dashboard)/projects/[id]/components/general/TrafficChart.tsx

@@ -0,0 +1,157 @@
+"use client";
+import React, { useState } from "react";
+import { BarChart3, TrendingUp } from "lucide-react";
+import { generateIcon } from "@/utils/icons";
+import { SlidingToggle } from "@/components/ui/SlidingToggle";
+
+interface TrafficData {
+  hour: number;
+  requests: number;
+}
+
+interface Props {
+  trafficData: TrafficData[];
+  isLoading: boolean;
+  dateRange?: string;
+  totalRequests?: number;
+}
+
+export const TrafficChart: React.FC<Props> = ({
+  trafficData,
+  isLoading,
+  dateRange,
+  totalRequests,
+}) => {
+  const [chartType, setChartType] = useState<'bar' | 'area'>('area');
+  const maxRequests = Math.max(...trafficData.map(d => d.requests), 1);
+  if(trafficData.length === 0) {
+    trafficData = Array.from({ length: 24 }, (_, i) => ({
+      hour: i,
+      requests: 0,
+    }));
+  }
+
+  return (
+    <div className="bg-white rounded-[20px] border border-black/5 p-4 sm:p-6 h-[280px] sm:h-[320px] flex flex-col">
+      <div className="flex items-center justify-between gap-2 sm:gap-0 mb-4 sm:mb-5">
+        <div className="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
+          {generateIcon('chart%204%20line-5-1666004410.png', 24, 'rgb(79, 70, 229)')}
+          <div className="min-w-0">
+            <h3 className="text-sm sm:text-lg font-semibold text-black truncate">Traffic Overview</h3>
+            <p className="text-[10px] sm:text-sm text-black/40 truncate">{dateRange || 'Last 24 hours'}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-3 flex-shrink-0">
+          {/* Chart Type Selector */}
+          <SlidingToggle
+            options={[
+              {
+                value: 'bar',
+                icon: <BarChart3 className="w-3.5 h-3.5 sm:w-4 sm:h-4" />,
+                label: 'Bar',
+              },
+              {
+                value: 'area',
+                icon: <TrendingUp className="w-3.5 h-3.5 sm:w-4 sm:h-4" />,
+                label: 'Area',
+              },
+            ]}
+            value={chartType}
+            onChange={(value) => setChartType(value as 'bar' | 'area')}
+            variant="rounded"
+            selectedBg="bg-indigo-600"
+            selectedTextColor="text-white"
+            unselectedTextColor="text-black/60"
+            backgroundColor="bg-white"
+            size="sm"
+          />
+         
+        </div>
+      </div>
+
+      {/* Traffic Chart */}
+      {isLoading ? (
+        <div className="flex items-center justify-center flex-1">
+          <div className="text-sm text-gray-400">Loading analytics...</div>
+        </div>
+      ) : (
+        <div className="flex-1 flex flex-col">
+          <div className="relative flex-1">
+            <svg className="absolute inset-0 w-full h-full" viewBox="0 0 1000 160" preserveAspectRatio="none">
+              <defs>
+                <linearGradient id="trafficGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                  <stop offset={`${chartType == 'bar' ? 100 : 20}%`} stopColor="rgb(99, 102, 241)" stopOpacity="0.3" />
+                  <stop offset="100%" stopColor="rgb(99, 102, 241)" stopOpacity="0.1" />
+                </linearGradient>
+              </defs>
+
+              {chartType === 'bar' && (
+                /* Bar Chart */
+                <>
+                  {trafficData.map((d, i) => {
+                    const containerWidth = 1000;
+                    const containerHeight = 160;
+                    const barWidth = containerWidth / trafficData.length * 0.8;
+                    const x = (i / trafficData.length) * containerWidth + barWidth * 0.1;
+                    const height = (d.requests / maxRequests) * 140;
+                    const y = containerHeight - height;
+
+                    return (
+                      <rect
+                        key={i}
+                        x={x}
+                        y={y}
+                        width={barWidth}
+                        height={height}
+                        fill="url(#trafficGradient)"
+                        rx="4"
+                        ry="4"
+                      />
+                    );
+                  })}
+                </>
+              )}
+
+              {chartType === 'area' && (
+                /* Area Chart with Border Line */
+                <>
+                  {/* Area Fill */}
+                  <path
+                    d={`M 0 150 ${trafficData.map((d, i) => {
+                      const x = (i / (trafficData.length - 1)) * 1000;
+                      const baseHeight = 110; // Raised baseline for zero state
+                      const maxHeight = 110; // Maximum height for visualization
+                      const y = baseHeight - (d.requests / maxRequests) * maxHeight;
+                      return `L ${x} ${y}`;
+                    }).join(' ')} L 1000 150 Z`}
+                    fill="url(#trafficGradient)"
+                  />
+                  {/* Top Border Line - More Visible */}
+                  <path
+                    d={`M ${trafficData.map((d, i) => {
+                      const x = (i / (trafficData.length - 1)) * 1000;
+                      const baseHeight = 0;
+                      const maxHeight = 130;
+                      const y = baseHeight - (d.requests / maxRequests) * maxHeight;
+                      return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
+                    }).join(' ')}`}
+                    fill="none"
+                    stroke="rgb(99, 102, 241)"
+                    strokeWidth="0.5"
+                  />
+                </>
+              )}
+            </svg>
+          </div>
+
+          {/* Hour Labels */}
+          <div className="flex items-center justify-between mt-2 text-[9px] sm:text-[10px] text-gray-500">
+            {trafficData.filter((_, i) => i % 4 === 0).map((d, i) => (
+              <span key={i}>{d.hour}:00</span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/apps/dashboard/src/app/(dashboard)/projects/[id]/components/general/index.ts

@@ -0,0 +1,14 @@
+export { TrafficChart } from './TrafficChart';
+export { TopPaths } from './TopPaths';
+export { StatsCards } from './StatsCards';
+export { ProductionUrl } from './ProductionUrl';
+export { ProjectIdentity } from './ProjectIdentity';
+export { ProjectInfo } from './ProjectInfo';
+export {
+  TrafficChartSkeleton,
+  TopPathsSkeleton,
+  StatsCardsSkeleton,
+  ProductionUrlSkeleton,
+  ProjectIdentitySkeleton,
+  ProjectInfoSkeleton,
+} from './SkeletonLoader';