shiny-url-input-box 1.1.0 → 1.1.1

package/dist/ShinyUrlDashboard.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface ShinyUrlDashboardProps {
+    apiKey: string;
+    apiBaseUrl?: string;
+    className?: string;
+    title?: string;
+}
+export declare const ShinyUrlDashboard: React.FC<ShinyUrlDashboardProps>;
+//# sourceMappingURL=ShinyUrlDashboard.d.ts.map

package/dist/ShinyUrlDashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShinyUrlDashboard.d.ts","sourceRoot":"","sources":["../src/ShinyUrlDashboard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAsBnD,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2BD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA8M9D,CAAC"}

package/dist/ShinyUrlDashboard.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Grid, Paper, Typography, Box, Card, CardContent, CircularProgress } from '@mui/material';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from 'recharts';
+import { getDefaultApiBaseUrl } from './shortener';
+export const ShinyUrlDashboard = ({ apiKey, apiBaseUrl, className = '', title = 'Analytics Dashboard' }) => {
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [stats, setStats] = useState(null);
+    const [clicks, setClicks] = useState(null);
+    const [topUrls, setTopUrls] = useState(null);
+    const baseUrl = apiBaseUrl || getDefaultApiBaseUrl();
+    useEffect(() => {
+        const fetchData = async () => {
+            if (!apiKey)
+                return;
+            setLoading(true);
+            setError(null);
+            try {
+                const headers = {
+                    'Authorization': `Bearer ${apiKey}`,
+                    'Content-Type': 'application/json'
+                };
+                // Try standard X-API-Key as well if Bearer fails? 
+                // Admin panel uses Bearer for JWT. 
+                // If user passes an API Key (sk_...), the backend might need 'X-API-Key'.
+                // For now, let's assume if it looks like a JWT (3 distinct parts), use Bearer, else X-API-Key?
+                // Or simpler: try to fetch with headers that match the backend's expectation for the key type.
+                // The prompt says "admin panel components... user can import this dashboard creds".
+                // If it's an "Admin Dashboard", it likely needs admin 'Bearer' token.
+                // If it's a "User Dashboard" (showing user's URLs), it might use 'X-API-Key'.
+                // The endpoints used in Admin Dashboard (/admin/...) are protected by JWT.
+                // Endpoints for users might be different or same.
+                // I will implement a fallback or accept a 'keyType' prop later if needed.
+                // For now, I'll follow the admin pattern (Bearer) as requested by "dashboard creds in other admin panels".
+                const fetchOptions = { headers };
+                const [statsRes, clicksRes, topUrlsRes] = await Promise.all([
+                    fetch(`${baseUrl}/api/admin/dashboard/stats`, fetchOptions),
+                    fetch(`${baseUrl}/api/admin/analytics/clicks?days=7`, fetchOptions),
+                    fetch(`${baseUrl}/api/admin/analytics/top-urls?limit=10`, fetchOptions)
+                ]);
+                if (!statsRes.ok || !clicksRes.ok || !topUrlsRes.ok) {
+                    // Check if 401
+                    if (statsRes.status === 401 || clicksRes.status === 401 || topUrlsRes.status === 401) {
+                        throw new Error("Unauthorized: Invalid API Key or Token");
+                    }
+                    throw new Error("Failed to fetch dashboard data");
+                }
+                const statsData = await statsRes.json();
+                const clicksData = await clicksRes.json();
+                const topUrlsData = await topUrlsRes.json();
+                setStats(statsData);
+                setClicks(clicksData);
+                setTopUrls(topUrlsData);
+            }
+            catch (err) {
+                if (err instanceof Error) {
+                    setError(err.message);
+                }
+                else {
+                    setError("An unknown error occurred");
+                }
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchData();
+    }, [apiKey, baseUrl]);
+    if (!apiKey) {
+        return (_jsx(Box, { p: 3, className: className, children: _jsx(Typography, { color: "error", children: "Please provide an API Key / Token to view the dashboard." }) }));
+    }
+    if (loading) {
+        return (_jsx(Box, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "400px", className: className, children: _jsx(CircularProgress, {}) }));
+    }
+    if (error) {
+        return (_jsx(Box, { p: 3, className: className, children: _jsxs(Typography, { color: "error", children: ["Error: ", error] }) }));
+    }
+    const statCards = [
+        {
+            title: 'Total URLs',
+            value: stats?.stats?.totalUrls || 0,
+            color: '#1976d2',
+        },
+        {
+            title: 'Total Clicks',
+            value: stats?.stats?.totalClicks || 0,
+            color: '#2e7d32',
+        },
+        {
+            title: 'Unique IPs',
+            value: stats?.stats?.uniqueIps || 0,
+            color: '#ed6c02',
+        },
+        {
+            title: 'Clicks Today',
+            value: stats?.stats?.clicksToday || 0,
+            color: '#d32f2f',
+        },
+    ];
+    const chartData = clicks?.data?.map((item) => ({
+        date: item._id,
+        clicks: item.count,
+    })) || [];
+    return (_jsxs(Box, { className: className, children: [_jsx(Typography, { variant: "h4", gutterBottom: true, children: title }), _jsx(Grid, { container: true, spacing: 3, sx: { mb: 3 }, children: statCards.map((card) => (_jsx(Grid, { item: true, xs: 12, sm: 6, md: 3, children: _jsx(Card, { children: _jsxs(CardContent, { children: [_jsx(Typography, { color: "text.secondary", gutterBottom: true, children: card.title }), _jsx(Typography, { variant: "h4", sx: { color: card.color }, children: card.value.toLocaleString() })] }) }) }, card.title))) }), _jsxs(Grid, { container: true, spacing: 3, children: [_jsx(Grid, { item: true, xs: 12, md: 8, children: _jsxs(Paper, { sx: { p: 3 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Clicks Over Time (Last 7 Days)" }), _jsx(ResponsiveContainer, { width: "100%", height: 300, children: _jsxs(LineChart, { data: chartData, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "date" }), _jsx(YAxis, {}), _jsx(Tooltip, {}), _jsx(Legend, {}), _jsx(Line, { type: "monotone", dataKey: "clicks", stroke: "#1976d2", strokeWidth: 2 })] }) })] }) }), _jsx(Grid, { item: true, xs: 12, md: 4, children: _jsxs(Paper, { sx: { p: 3 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Top URLs" }), _jsx(Box, { sx: { maxHeight: 300, overflow: 'auto' }, children: topUrls?.data?.map((url, index) => (_jsxs(Box, { sx: {
+                                            p: 1,
+                                            mb: 1,
+                                            bgcolor: 'background.default',
+                                            borderRadius: 1,
+                                        }, children: [_jsxs(Typography, { variant: "body2", noWrap: true, children: [index + 1, ". ", url.originalUrl] }), _jsxs(Typography, { variant: "caption", color: "text.secondary", children: [url.clickCount, " clicks"] })] }, url._id))) })] }) })] })] }));
+};

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { default as ShinyUrlInput } from './ShinyUrlInput';
 export type { ShinyUrlInputProps } from './ShinyUrlInput';
 export * from './shortener';
+export { ShinyUrlDashboard } from './ShinyUrlDashboard';
+export type { ShinyUrlDashboardProps } from './ShinyUrlDashboard';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/index.js

@@ -1,2 +1,3 @@
 export { default as ShinyUrlInput } from './ShinyUrlInput';
 export * from './shortener';
+export { ShinyUrlDashboard } from './ShinyUrlDashboard';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shiny-url-input-box",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A reusable React component for generating ShinyURLs",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -22,14 +22,23 @@
   ],
   "author": "",
   "license": "ISC",
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
   "devDependencies": {
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "@types/recharts": "^1.8.29",
+    "@mui/material": "^5.15.2",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.2",
+    "recharts": "^2.10.3"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@mui/material": "^5.0.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "recharts": "^2.0.0"
   }
-}
-
+}

package/src/ShinyUrlDashboard.tsx

@@ -0,0 +1,261 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Grid,
+  Paper,
+  Typography,
+  Box,
+  Card,
+  CardContent,
+  CircularProgress
+} from '@mui/material';
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts';
+import { getDefaultApiBaseUrl } from './shortener';
+
+export interface ShinyUrlDashboardProps {
+  apiKey: string;
+  apiBaseUrl?: string;
+  className?: string;
+  title?: string;
+}
+
+interface StatsData {
+  stats: {
+    totalUrls: number;
+    totalClicks: number;
+    uniqueIps: number;
+    clicksToday: number;
+  };
+}
+
+interface ClickAnalyticsData {
+  data: Array<{
+    _id: string; // date
+    count: number;
+  }>;
+}
+
+interface TopUrlData {
+  data: Array<{
+    _id: string;
+    originalUrl: string;
+    shortCode: string;
+    clickCount: number;
+  }>;
+}
+
+export const ShinyUrlDashboard: React.FC<ShinyUrlDashboardProps> = ({
+  apiKey,
+  apiBaseUrl,
+  className = '',
+  title = 'Analytics Dashboard'
+}) => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [stats, setStats] = useState<StatsData | null>(null);
+  const [clicks, setClicks] = useState<ClickAnalyticsData | null>(null);
+  const [topUrls, setTopUrls] = useState<TopUrlData | null>(null);
+
+  const baseUrl = apiBaseUrl || getDefaultApiBaseUrl();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (!apiKey) return;
+      
+      setLoading(true);
+      setError(null);
+
+      try {
+        const headers = {
+          'Authorization': `Bearer ${apiKey}`,
+          'Content-Type': 'application/json'
+        };
+
+        // Try standard X-API-Key as well if Bearer fails? 
+        // Admin panel uses Bearer for JWT. 
+        // If user passes an API Key (sk_...), the backend might need 'X-API-Key'.
+        // For now, let's assume if it looks like a JWT (3 distinct parts), use Bearer, else X-API-Key?
+        // Or simpler: try to fetch with headers that match the backend's expectation for the key type.
+        // The prompt says "admin panel components... user can import this dashboard creds".
+        // If it's an "Admin Dashboard", it likely needs admin 'Bearer' token.
+        // If it's a "User Dashboard" (showing user's URLs), it might use 'X-API-Key'.
+        // The endpoints used in Admin Dashboard (/admin/...) are protected by JWT.
+        // Endpoints for users might be different or same.
+        // I will implement a fallback or accept a 'keyType' prop later if needed.
+        // For now, I'll follow the admin pattern (Bearer) as requested by "dashboard creds in other admin panels".
+
+        const fetchOptions = { headers };
+
+        const [statsRes, clicksRes, topUrlsRes] = await Promise.all([
+          fetch(`${baseUrl}/api/admin/dashboard/stats`, fetchOptions),
+          fetch(`${baseUrl}/api/admin/analytics/clicks?days=7`, fetchOptions),
+          fetch(`${baseUrl}/api/admin/analytics/top-urls?limit=10`, fetchOptions)
+        ]);
+
+        if (!statsRes.ok || !clicksRes.ok || !topUrlsRes.ok) {
+            // Check if 401
+            if (statsRes.status === 401 || clicksRes.status === 401 || topUrlsRes.status === 401) {
+                throw new Error("Unauthorized: Invalid API Key or Token");
+            }
+            throw new Error("Failed to fetch dashboard data");
+        }
+
+        const statsData = await statsRes.json();
+        const clicksData = await clicksRes.json();
+        const topUrlsData = await topUrlsRes.json();
+
+        setStats(statsData);
+        setClicks(clicksData);
+        setTopUrls(topUrlsData);
+      } catch (err) {
+        if (err instanceof Error) {
+            setError(err.message);
+        } else {
+            setError("An unknown error occurred");
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [apiKey, baseUrl]);
+
+  if (!apiKey) {
+    return (
+      <Box p={3} className={className}>
+        <Typography color="error">Please provide an API Key / Token to view the dashboard.</Typography>
+      </Box>
+    );
+  }
+
+  if (loading) {
+    return (
+      <Box display="flex" justifyContent="center" alignItems="center" minHeight="400px" className={className}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Box p={3} className={className}>
+         <Typography color="error">Error: {error}</Typography>
+      </Box>
+    );
+  }
+
+  const statCards = [
+    {
+      title: 'Total URLs',
+      value: stats?.stats?.totalUrls || 0,
+      color: '#1976d2',
+    },
+    {
+      title: 'Total Clicks',
+      value: stats?.stats?.totalClicks || 0,
+      color: '#2e7d32',
+    },
+    {
+      title: 'Unique IPs',
+      value: stats?.stats?.uniqueIps || 0,
+      color: '#ed6c02',
+    },
+    {
+      title: 'Clicks Today',
+      value: stats?.stats?.clicksToday || 0,
+      color: '#d32f2f',
+    },
+  ];
+
+  const chartData = clicks?.data?.map((item: any) => ({
+    date: item._id,
+    clicks: item.count,
+  })) || [];
+
+  return (
+    <Box className={className}>
+      <Typography variant="h4" gutterBottom>
+        {title}
+      </Typography>
+
+      <Grid container spacing={3} sx={{ mb: 3 }}>
+        {statCards.map((card) => (
+          <Grid item xs={12} sm={6} md={3} key={card.title}>
+            <Card>
+              <CardContent>
+                <Typography color="text.secondary" gutterBottom>
+                  {card.title}
+                </Typography>
+                <Typography variant="h4" sx={{ color: card.color }}>
+                  {card.value.toLocaleString()}
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+
+      <Grid container spacing={3}>
+        <Grid item xs={12} md={8}>
+          <Paper sx={{ p: 3 }}>
+            <Typography variant="h6" gutterBottom>
+              Clicks Over Time (Last 7 Days)
+            </Typography>
+            <ResponsiveContainer width="100%" height={300}>
+              <LineChart data={chartData}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="date" />
+                <YAxis />
+                <Tooltip />
+                <Legend />
+                <Line
+                  type="monotone"
+                  dataKey="clicks"
+                  stroke="#1976d2"
+                  strokeWidth={2}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </Paper>
+        </Grid>
+
+        <Grid item xs={12} md={4}>
+          <Paper sx={{ p: 3 }}>
+            <Typography variant="h6" gutterBottom>
+              Top URLs
+            </Typography>
+            <Box sx={{ maxHeight: 300, overflow: 'auto' }}>
+              {topUrls?.data?.map((url: any, index: number) => (
+                <Box
+                  key={url._id}
+                  sx={{
+                    p: 1,
+                    mb: 1,
+                    bgcolor: 'background.default',
+                    borderRadius: 1,
+                  }}
+                >
+                  <Typography variant="body2" noWrap>
+                    {index + 1}. {url.originalUrl}
+                  </Typography>
+                  <Typography variant="caption" color="text.secondary">
+                    {url.clickCount} clicks
+                  </Typography>
+                </Box>
+              ))}
+            </Box>
+          </Paper>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};

package/src/index.ts

@@ -1,4 +1,6 @@
 export { default as ShinyUrlInput } from './ShinyUrlInput';
 export type { ShinyUrlInputProps } from './ShinyUrlInput';
 export * from './shortener';
+export { ShinyUrlDashboard } from './ShinyUrlDashboard';
+export type { ShinyUrlDashboardProps } from './ShinyUrlDashboard';