shiny-url-input-box 1.0.1 → 1.1.1

package/README.md

@@ -62,3 +62,51 @@ function App() {
 - `buttonText` (string, optional) - Submit button text (default: "Shorten URL")
 - `className` (string, optional) - Additional CSS class for the wrapper
 
+
+## Programmatic Usage
+
+You can also use the exported `shortenUrl` function to shorten URLs programmatically without using the UI component.
+
+```javascript
+import { shortenUrl } from 'shiny-url-input-box';
+
+// Inside an async function
+try {
+  const result = await shortenUrl(
+    'https://example.com/long/url',
+    'YOUR_API_KEY',
+    { apiBaseUrl: 'https://shinyurl-backend.onrender.com' } // Optional
+  );
+
+  if (result.success) {
+    console.log('Short URL:', result.data.shortUrl);
+  } else {
+    console.error('Error:', result.message);
+  }
+} catch (error) {
+  console.error('Failed to shorten URL:', error);
+}
+```
+
+### `shortenUrl` Arguments
+
+1. `url` (string): The URL to shorten.
+2. `apiKey` (string): Your API key.
+3. `options` (object, optional):
+   - `apiBaseUrl` (string): Base URL of the backend API. Defaults to window origin or shinyurl-backend.onrender.com.
+
+### Return Value
+
+Returns a Promise that resolves to:
+
+```typescript
+interface ShortenResponse {
+  success: boolean;
+  data?: {
+    originalUrl: string;
+    shortUrl: string;
+    shortCode: string;
+  };
+  message?: string;
+}
+```

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/ShinyUrlInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShinyUrlInput.d.ts","sourceRoot":"","sources":["../src/ShinyUrlInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAqCD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+O/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ShinyUrlInput.d.ts","sourceRoot":"","sources":["../src/ShinyUrlInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,oBAAoB,CAAC;AAG5B,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkN/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/ShinyUrlInput.js

@@ -2,29 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useMemo, useEffect } from 'react';
 import './TinyUrlInput.css';
-// Security: Validate and sanitize URL
-const isValidUrl = (string) => {
-    try {
-        const url = new URL(string);
-        // Only allow http and https protocols
-        return url.protocol === 'http:' || url.protocol === 'https:';
-    }
-    catch (_) {
-        return false;
-    }
-};
-// Security: Sanitize input to prevent XSS
-const sanitizeInput = (input) => {
-    return input.trim().replace(/[<>]/g, '');
-};
-// Get default API base URL (same origin or localhost:5000)
-const getDefaultApiBaseUrl = () => {
-    if (typeof window !== 'undefined') {
-        // Use same origin if available
-        return window.location.origin;
-    }
-    return 'https://shinyurl-backend.onrender.com';
-};
+import { shortenUrl, getDefaultApiBaseUrl, sanitizeInput, isValidUrl } from './shortener';
 const ShinyUrlInput = ({ apiKey, apiBaseUrl, onSuccess, onError, label = 'Enter URL to shorten', buttonText = 'Shorten URL', className = '', installationPageUrl }) => {
     const [url, setUrl] = useState('');
     const [loading, setLoading] = useState(false);
@@ -93,34 +71,13 @@ const ShinyUrlInput = ({ apiKey, apiBaseUrl, onSuccess, onError, label = 'Enter
         setShortUrl('');
         setCopied(false);
         try {
-            // Security: Use baseUrl which is validated
-            const response = await fetch(`${baseUrl}/api/shorten`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-API-Key': apiKey,
-                },
-                body: JSON.stringify({ originalUrl: sanitizedUrl }),
-            });
-            if (!response.ok) {
-                // Try to get error message from response
-                let errorMessage = 'Failed to shorten URL';
-                try {
-                    const errorData = await response.json();
-                    errorMessage = errorData.message || errorMessage;
-                }
-                catch (e) {
-                    errorMessage = `Server error: ${response.status} ${response.statusText}`;
-                }
-                throw new Error(errorMessage);
-            }
-            const data = await response.json();
-            if (!data.success || !data.data) {
-                throw new Error(data.message || 'Failed to shorten URL');
+            const result = await shortenUrl(sanitizedUrl, apiKey, { apiBaseUrl: baseUrl });
+            if (!result.success || !result.data) {
+                throw new Error(result.message || 'Failed to shorten URL');
             }
-            setShortUrl(data.data.shortUrl);
+            setShortUrl(result.data.shortUrl);
             if (onSuccess) {
-                onSuccess(data);
+                onSuccess(result);
             }
         }
         catch (err) {
@@ -128,10 +85,6 @@ const ShinyUrlInput = ({ apiKey, apiBaseUrl, onSuccess, onError, label = 'Enter
             if (err instanceof Error) {
                 errorMessage = err.message;
             }
-            // Handle network errors
-            if (err instanceof TypeError && err.message.includes('fetch')) {
-                errorMessage = 'Cannot connect to server. Make sure the backend is running on ' + baseUrl;
-            }
             setError(errorMessage);
             if (onError) {
                 onError(errorMessage);

package/dist/index.d.ts

@@ -1,3 +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"}
+{"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 +1,3 @@
 export { default as ShinyUrlInput } from './ShinyUrlInput';
+export * from './shortener';
+export { ShinyUrlDashboard } from './ShinyUrlDashboard';

package/dist/shortener.d.ts

@@ -0,0 +1,17 @@
+export interface ShortenResponse {
+    success: boolean;
+    data?: {
+        originalUrl: string;
+        shortUrl: string;
+        shortCode: string;
+    };
+    message?: string;
+}
+export interface ShortenOptions {
+    apiBaseUrl?: string;
+}
+export declare const isValidUrl: (string: string) => boolean;
+export declare const sanitizeInput: (input: string) => string;
+export declare const getDefaultApiBaseUrl: () => string;
+export declare const shortenUrl: (originalUrl: string, apiKey: string, options?: ShortenOptions) => Promise<ShortenResponse>;
+//# sourceMappingURL=shortener.d.ts.map

package/dist/shortener.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortener.d.ts","sourceRoot":"","sources":["../src/shortener.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE;QACL,WAAW,EAAE,MAAM,CAAC;QACpB,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAGD,eAAO,MAAM,UAAU,GAAI,QAAQ,MAAM,KAAG,OAQ3C,CAAC;AAGF,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,MAE7C,CAAC;AAGF,eAAO,MAAM,oBAAoB,QAAO,MAMvC,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,aAAa,MAAM,EACnB,QAAQ,MAAM,EACd,UAAS,cAAmB,KAC3B,OAAO,CAAC,eAAe,CAiDzB,CAAC"}

package/dist/shortener.js

@@ -0,0 +1,66 @@
+// Security: Validate and sanitize URL
+export const isValidUrl = (string) => {
+    try {
+        const url = new URL(string);
+        // Only allow http and https protocols
+        return url.protocol === 'http:' || url.protocol === 'https:';
+    }
+    catch (_) {
+        return false;
+    }
+};
+// Security: Sanitize input to prevent XSS
+export const sanitizeInput = (input) => {
+    return input.trim().replace(/[<>]/g, '');
+};
+// Get default API base URL (same origin or localhost:5000)
+export const getDefaultApiBaseUrl = () => {
+    if (typeof window !== 'undefined') {
+        // Use same origin if available
+        return window.location.origin;
+    }
+    return 'https://shinyurl-backend.onrender.com';
+};
+export const shortenUrl = async (originalUrl, apiKey, options = {}) => {
+    const sanitizedUrl = sanitizeInput(originalUrl);
+    if (!sanitizedUrl) {
+        return { success: false, message: 'Please enter a URL' };
+    }
+    if (!isValidUrl(sanitizedUrl)) {
+        return { success: false, message: 'Please enter a valid URL (must start with http:// or https://)' };
+    }
+    const baseUrl = options.apiBaseUrl || getDefaultApiBaseUrl();
+    try {
+        const response = await fetch(`${baseUrl}/api/shorten`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-API-Key': apiKey,
+            },
+            body: JSON.stringify({ originalUrl: sanitizedUrl }),
+        });
+        if (!response.ok) {
+            let errorMessage = 'Failed to shorten URL';
+            try {
+                const errorData = await response.json();
+                errorMessage = errorData.message || errorMessage;
+            }
+            catch (e) {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            return { success: false, message: errorMessage };
+        }
+        const data = await response.json();
+        return data;
+    }
+    catch (err) {
+        let errorMessage = 'An error occurred';
+        if (err instanceof Error) {
+            errorMessage = err.message;
+        }
+        if (err instanceof TypeError && typeof err.message === 'string' && err.message.includes('fetch')) {
+            errorMessage = 'Cannot connect to server. Make sure the backend is running on ' + baseUrl;
+        }
+        return { success: false, message: errorMessage };
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shiny-url-input-box",
-  "version": "1.0.1",
+  "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/ShinyUrlInput.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useMemo, useEffect } from 'react';
 import './TinyUrlInput.css';
+import { shortenUrl, ShortenResponse, getDefaultApiBaseUrl, sanitizeInput, isValidUrl } from './shortener';
 
 export interface ShinyUrlInputProps {
   apiKey: string;
@@ -14,41 +15,6 @@ export interface ShinyUrlInputProps {
   installationPageUrl?: string;
 }
 
-interface ShortenResponse {
-  success: boolean;
-  data?: {
-    originalUrl: string;
-    shortUrl: string;
-    shortCode: string;
-  };
-  message?: string;
-}
-
-// Security: Validate and sanitize URL
-const isValidUrl = (string: string): boolean => {
-  try {
-    const url = new URL(string);
-    // Only allow http and https protocols
-    return url.protocol === 'http:' || url.protocol === 'https:';
-  } catch (_) {
-    return false;
-  }
-};
-
-// Security: Sanitize input to prevent XSS
-const sanitizeInput = (input: string): string => {
-  return input.trim().replace(/[<>]/g, '');
-};
-
-// Get default API base URL (same origin or localhost:5000)
-const getDefaultApiBaseUrl = (): string => {
-  if (typeof window !== 'undefined') {
-    // Use same origin if available
-    return window.location.origin;
-  }
-  return 'https://shinyurl-backend.onrender.com';
-};
-
 const ShinyUrlInput: React.FC<ShinyUrlInputProps> = ({
   apiKey,
   apiBaseUrl,
@@ -135,51 +101,22 @@ const ShinyUrlInput: React.FC<ShinyUrlInputProps> = ({
     setCopied(false);
 
     try {
-      // Security: Use baseUrl which is validated
-      const response = await fetch(`${baseUrl}/api/shorten`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-API-Key': apiKey,
-        },
-        body: JSON.stringify({ originalUrl: sanitizedUrl }),
-      });
+      const result = await shortenUrl(sanitizedUrl, apiKey, { apiBaseUrl: baseUrl });
 
-      if (!response.ok) {
-        // Try to get error message from response
-        let errorMessage = 'Failed to shorten URL';
-        try {
-          const errorData: ShortenResponse = await response.json();
-          errorMessage = errorData.message || errorMessage;
-        } catch (e) {
-          errorMessage = `Server error: ${response.status} ${response.statusText}`;
-        }
-        throw new Error(errorMessage);
-      }
-
-      const data: ShortenResponse = await response.json();
-
-      if (!data.success || !data.data) {
-        throw new Error(data.message || 'Failed to shorten URL');
+      if (!result.success || !result.data) {
+        throw new Error(result.message || 'Failed to shorten URL');
       }
 
-      setShortUrl(data.data.shortUrl);
+      setShortUrl(result.data.shortUrl);
       
       if (onSuccess) {
-        onSuccess(data);
+        onSuccess(result);
       }
     } catch (err) {
       let errorMessage = 'An error occurred';
-      
       if (err instanceof Error) {
         errorMessage = err.message;
       }
-      
-      // Handle network errors
-      if (err instanceof TypeError && err.message.includes('fetch')) {
-        errorMessage = 'Cannot connect to server. Make sure the backend is running on ' + baseUrl;
-      }
-      
       setError(errorMessage);
       
       if (onError) {

package/src/index.ts

@@ -1,3 +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';
 

package/src/shortener.ts

@@ -0,0 +1,93 @@
+export interface ShortenResponse {
+  success: boolean;
+  data?: {
+    originalUrl: string;
+    shortUrl: string;
+    shortCode: string;
+  };
+  message?: string;
+}
+
+export interface ShortenOptions {
+  apiBaseUrl?: string;
+}
+
+// Security: Validate and sanitize URL
+export const isValidUrl = (string: string): boolean => {
+  try {
+    const url = new URL(string);
+    // Only allow http and https protocols
+    return url.protocol === 'http:' || url.protocol === 'https:';
+  } catch (_) {
+    return false;
+  }
+};
+
+// Security: Sanitize input to prevent XSS
+export const sanitizeInput = (input: string): string => {
+  return input.trim().replace(/[<>]/g, '');
+};
+
+// Get default API base URL (same origin or localhost:5000)
+export const getDefaultApiBaseUrl = (): string => {
+  if (typeof window !== 'undefined') {
+    // Use same origin if available
+    return window.location.origin;
+  }
+  return 'https://shinyurl-backend.onrender.com';
+};
+
+export const shortenUrl = async (
+  originalUrl: string,
+  apiKey: string,
+  options: ShortenOptions = {}
+): Promise<ShortenResponse> => {
+  const sanitizedUrl = sanitizeInput(originalUrl);
+
+  if (!sanitizedUrl) {
+    return { success: false, message: 'Please enter a URL' };
+  }
+
+  if (!isValidUrl(sanitizedUrl)) {
+    return { success: false, message: 'Please enter a valid URL (must start with http:// or https://)' };
+  }
+
+  const baseUrl = options.apiBaseUrl || getDefaultApiBaseUrl();
+
+  try {
+    const response = await fetch(`${baseUrl}/api/shorten`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-API-Key': apiKey,
+      },
+      body: JSON.stringify({ originalUrl: sanitizedUrl }),
+    });
+
+    if (!response.ok) {
+      let errorMessage = 'Failed to shorten URL';
+      try {
+        const errorData = await response.json();
+        errorMessage = errorData.message || errorMessage;
+      } catch (e) {
+        errorMessage = `Server error: ${response.status} ${response.statusText}`;
+      }
+      return { success: false, message: errorMessage };
+    }
+
+    const data: ShortenResponse = await response.json();
+    return data;
+  } catch (err: unknown) {
+    let errorMessage = 'An error occurred';
+    
+    if (err instanceof Error) {
+      errorMessage = err.message;
+    }
+    
+    if (err instanceof TypeError && typeof err.message === 'string' && err.message.includes('fetch')) {
+      errorMessage = 'Cannot connect to server. Make sure the backend is running on ' + baseUrl;
+    }
+    
+    return { success: false, message: errorMessage };
+  }
+};