shiny-url-input-box 1.1.1 → 1.3.0

package/dist/ShinyUrlApiKeys.d.ts

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

package/dist/ShinyUrlApiKeys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShinyUrlApiKeys.d.ts","sourceRoot":"","sources":["../src/ShinyUrlApiKeys.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AA2BhE,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAWD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsQ1D,CAAC"}

package/dist/ShinyUrlApiKeys.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from 'react';
+import { Box, Paper, Typography, Button, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, IconButton, TextField, Dialog, DialogTitle, DialogContent, DialogActions, Alert, Chip, Snackbar, CircularProgress } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import { getDefaultApiBaseUrl } from './shortener';
+export const ShinyUrlApiKeys = ({ apiKey, apiBaseUrl, className = '' }) => {
+    const [loading, setLoading] = useState(true);
+    const [keys, setKeys] = useState([]);
+    const [openDialog, setOpenDialog] = useState(false);
+    const [newKeyName, setNewKeyName] = useState('');
+    const [createdKey, setCreatedKey] = useState(null);
+    const [snackbarOpen, setSnackbarOpen] = useState(false);
+    const [snackbarMessage, setSnackbarMessage] = useState('');
+    const [creating, setCreating] = useState(false);
+    const baseUrl = apiBaseUrl || getDefaultApiBaseUrl();
+    const fetchKeys = useCallback(async () => {
+        if (!apiKey)
+            return;
+        setLoading(true);
+        try {
+            const response = await fetch(`${baseUrl}/api/admin/api-keys`, {
+                headers: {
+                    'Authorization': `Bearer ${apiKey}`
+                }
+            });
+            if (response.ok) {
+                const result = await response.json();
+                setKeys(result.data || []);
+            }
+        }
+        catch (error) {
+            console.error('Failed to fetch keys', error);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [apiKey, baseUrl]);
+    useEffect(() => {
+        fetchKeys();
+    }, [fetchKeys]);
+    const handleCreate = async () => {
+        setCreating(true);
+        try {
+            const response = await fetch(`${baseUrl}/api/admin/api-keys`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${apiKey}`,
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ name: newKeyName || 'Default Key' })
+            });
+            const result = await response.json();
+            if (result.success && result.data) {
+                setCreatedKey(result.data.key);
+                setOpenDialog(false);
+                setNewKeyName('');
+                setSnackbarMessage('API key created successfully! Copy it now - you won\'t be able to see it again.');
+                setSnackbarOpen(true);
+                fetchKeys(); // Refresh list
+            }
+        }
+        catch (error) {
+            setSnackbarMessage('Failed to create key');
+            setSnackbarOpen(true);
+        }
+        finally {
+            setCreating(false);
+        }
+    };
+    const handleToggle = async (id, currentStatus) => {
+        try {
+            const response = await fetch(`${baseUrl}/api/admin/api-keys/${id}`, {
+                method: 'PATCH',
+                headers: {
+                    'Authorization': `Bearer ${apiKey}`,
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ isActive: !currentStatus })
+            });
+            if (response.ok) {
+                setSnackbarMessage('API key updated successfully');
+                setSnackbarOpen(true);
+                fetchKeys(); // Refresh list
+            }
+        }
+        catch (error) {
+            setSnackbarMessage('Failed to update key');
+            setSnackbarOpen(true);
+        }
+    };
+    const handleCopy = (text) => {
+        navigator.clipboard.writeText(text);
+        setSnackbarMessage('Copied to clipboard!');
+        setSnackbarOpen(true);
+    };
+    const formatKey = (key) => {
+        if (key.length > 20) {
+            return key.substring(0, 10) + '...' + key.substring(key.length - 4);
+        }
+        return key;
+    };
+    if (!apiKey) {
+        return _jsx(Typography, { color: "error", children: "Authentication required" });
+    }
+    return (_jsxs(Box, { className: className, children: [_jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }, children: [_jsx(Typography, { variant: "h4", children: "API Keys" }), _jsx(Button, { variant: "contained", startIcon: _jsx(AddIcon, {}), onClick: () => setOpenDialog(true), children: "Create New Key" })] }), _jsx(Paper, { children: _jsx(TableContainer, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Name" }), _jsx(TableCell, { children: "Key" }), _jsx(TableCell, { children: "Status" }), _jsx(TableCell, { children: "Created" }), _jsx(TableCell, { children: "Last Used" }), _jsx(TableCell, { children: "Actions" })] }) }), _jsx(TableBody, { children: loading ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, align: "center", children: _jsx(CircularProgress, { size: 24 }) }) })) : keys.length > 0 ? (keys.map((key) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: key.name || 'Default Key' }), _jsx(TableCell, { children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { variant: "body2", sx: { fontFamily: 'monospace' }, children: formatKey(key.key) }), _jsx(IconButton, { size: "small", onClick: () => handleCopy(key.key), title: "Copy full key", children: _jsx(ContentCopyIcon, { fontSize: "small" }) })] }) }), _jsx(TableCell, { children: _jsx(Chip, { label: key.isActive ? 'Active' : 'Disabled', color: key.isActive ? 'success' : 'default', size: "small" }) }), _jsx(TableCell, { children: new Date(key.createdAt).toLocaleDateString() }), _jsx(TableCell, { children: key.lastUsedAt
+                                                ? new Date(key.lastUsedAt).toLocaleDateString()
+                                                : 'Never' }), _jsx(TableCell, { children: _jsx(Button, { size: "small", variant: "outlined", color: key.isActive ? 'error' : 'success', onClick: () => handleToggle(key._id, key.isActive), children: key.isActive ? 'Disable' : 'Enable' }) })] }, key._id)))) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, align: "center", children: "No API keys found. Create your first key to start using the service." }) })) })] }) }) }), _jsxs(Dialog, { open: openDialog, onClose: () => setOpenDialog(false), children: [_jsx(DialogTitle, { children: "Create New API Key" }), _jsx(DialogContent, { children: _jsx(TextField, { autoFocus: true, margin: "dense", label: "Key Name (optional)", fullWidth: true, variant: "outlined", value: newKeyName, onChange: (e) => setNewKeyName(e.target.value), placeholder: "e.g., Production Key, Development Key", sx: { mt: 2 } }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => setOpenDialog(false), children: "Cancel" }), _jsx(Button, { onClick: handleCreate, variant: "contained", disabled: creating, children: creating ? 'Creating...' : 'Create' })] })] }), _jsxs(Dialog, { open: !!createdKey, onClose: () => setCreatedKey(null), children: [_jsx(DialogTitle, { children: "API Key Created" }), _jsxs(DialogContent, { children: [_jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: "Copy this key now! You won't be able to see it again." }), _jsx(TextField, { fullWidth: true, value: createdKey || '', InputProps: {
+                                    readOnly: true,
+                                }, sx: { mb: 2 } }), _jsx(Button, { fullWidth: true, variant: "contained", startIcon: _jsx(ContentCopyIcon, {}), onClick: () => createdKey && handleCopy(createdKey), children: "Copy Key" })] }), _jsx(DialogActions, { children: _jsx(Button, { onClick: () => setCreatedKey(null), children: "Close" }) })] }), _jsx(Snackbar, { open: snackbarOpen, autoHideDuration: 3000, onClose: () => setSnackbarOpen(false), message: snackbarMessage })] }));
+};

package/dist/ShinyUrlDetailsModal.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface ShinyUrlDetailsModalProps {
+    open: boolean;
+    urlId: string | null;
+    onClose: () => void;
+    apiKey: string;
+    apiBaseUrl?: string;
+}
+export declare const ShinyUrlDetailsModal: React.FC<ShinyUrlDetailsModalProps>;
+//# sourceMappingURL=ShinyUrlDetailsModal.d.ts.map

package/dist/ShinyUrlDetailsModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShinyUrlDetailsModal.d.ts","sourceRoot":"","sources":["../src/ShinyUrlDetailsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAyCnD,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA0BD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAmUpE,CAAC"}

package/dist/ShinyUrlDetailsModal.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Box, Typography, Tabs, Tab, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Chip, Grid, Card, CardContent, CircularProgress } from '@mui/material';
+import { LineChart, Line, BarChart, Bar, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from 'recharts';
+import { getDefaultApiBaseUrl } from './shortener';
+function TabPanel(props) {
+    const { children, value, index, ...other } = props;
+    return (_jsx("div", { role: "tabpanel", hidden: value !== index, id: `url-tabpanel-${index}`, "aria-labelledby": `url-tab-${index}`, ...other, children: value === index && _jsx(Box, { sx: { p: 3 }, children: children }) }));
+}
+const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#82ca9d'];
+export const ShinyUrlDetailsModal = ({ open, urlId, onClose, apiKey, apiBaseUrl }) => {
+    const [tabValue, setTabValue] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [urlData, setUrlData] = useState(null);
+    const [clicksData, setClicksData] = useState([]);
+    const [analyticsData, setAnalyticsData] = useState(null);
+    const baseUrl = apiBaseUrl || getDefaultApiBaseUrl();
+    useEffect(() => {
+        if (open && urlId && apiKey) {
+            setLoading(true);
+            Promise.all([
+                fetch(`${baseUrl}/api/urls/${urlId}`, {
+                    headers: { 'Authorization': `Bearer ${apiKey}` }
+                }).then(res => res.json()),
+                fetch(`${baseUrl}/api/analytics/url/${urlId}?limit=1000`, {
+                    headers: { 'Authorization': `Bearer ${apiKey}` }
+                }).then(res => res.json()), // Clicks
+                fetch(`${baseUrl}/api/analytics/url/${urlId}/stats?days=30`, {
+                    headers: { 'Authorization': `Bearer ${apiKey}` }
+                }).then(res => res.json()) // Analytics
+            ]).then(([urlRes, clicksRes, analyticsRes]) => {
+                if (urlRes.success)
+                    setUrlData(urlRes.data);
+                if (clicksRes.success)
+                    setClicksData(clicksRes.data || []);
+                if (analyticsRes.success)
+                    setAnalyticsData(analyticsRes.data);
+            }).catch(err => {
+                console.error("Failed to fetch url details", err);
+            }).finally(() => {
+                setLoading(false);
+            });
+        }
+    }, [open, urlId, apiKey, baseUrl]);
+    const handleTabChange = (_event, newValue) => {
+        setTabValue(newValue);
+    };
+    // Prepare chart data
+    const clicksOverTime = analyticsData?.clicksOverTime?.map((item) => ({
+        date: item._id,
+        clicks: item.count,
+    })) || [];
+    const deviceData = analyticsData?.deviceBreakdown?.map((item) => ({
+        name: item._id || 'Unknown',
+        value: item.count,
+    })) || [];
+    const browserData = analyticsData?.browserBreakdown?.slice(0, 5).map((item) => ({
+        name: item._id || 'Unknown',
+        clicks: item.count,
+    })) || [];
+    const osData = analyticsData?.osBreakdown?.slice(0, 5).map((item) => ({
+        name: item._id || 'Unknown',
+        clicks: item.count,
+    })) || [];
+    return (_jsxs(Dialog, { open: open, onClose: onClose, maxWidth: "lg", fullWidth: true, children: [_jsx(DialogTitle, { children: _jsxs(Box, { children: [_jsx(Typography, { variant: "h6", children: "URL Details & Analytics" }), urlData && (_jsxs(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: [_jsx("strong", { children: "Short Code:" }), ' ', _jsx(Typography, { component: "a", href: `${baseUrl}/${urlData.shortCode}`, target: "_blank", rel: "noopener", sx: {
+                                        color: 'primary.main',
+                                        textDecoration: 'none',
+                                        fontFamily: 'monospace',
+                                        '&:hover': {
+                                            textDecoration: 'underline',
+                                        },
+                                    }, children: urlData.shortCode }), ' ', "| ", _jsx("strong", { children: "Total Clicks:" }), " ", urlData.clicks || 0] }))] }) }), _jsx(DialogContent, { children: loading ? (_jsxs(Box, { sx: { p: 3, textAlign: 'center' }, children: [_jsx(CircularProgress, {}), _jsx(Typography, { sx: { mt: 2 }, children: "Loading..." })] })) : (_jsxs(_Fragment, { children: [urlData && (_jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: _jsx("strong", { children: "Original URL:" }) }), _jsx(Typography, { variant: "body2", sx: {
+                                        wordBreak: 'break-all',
+                                        bgcolor: 'action.hover',
+                                        p: 1,
+                                        borderRadius: 1,
+                                    }, children: urlData.originalUrl })] })), _jsx(Box, { sx: { borderBottom: 1, borderColor: 'divider', mb: 2 }, children: _jsxs(Tabs, { value: tabValue, onChange: handleTabChange, children: [_jsx(Tab, { label: "Analytics" }), _jsx(Tab, { label: "Click History" })] }) }), _jsx(TabPanel, { value: tabValue, index: 0, children: analyticsData ? (_jsxs(Grid, { container: true, spacing: 3, children: [_jsx(Grid, { item: true, xs: 12, md: 6, children: _jsx(Card, { children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Total Clicks" }), _jsx(Typography, { variant: "h3", color: "primary", children: analyticsData.totalClicks })] }) }) }), _jsx(Grid, { item: true, xs: 12, md: 6, children: _jsx(Card, { children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Unique Users" }), _jsx(Typography, { variant: "h3", color: "secondary", children: analyticsData.uniqueUsers })] }) }) }), _jsx(Grid, { item: true, xs: 12, children: _jsxs(Paper, { sx: { p: 2 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Clicks Over Time (Last 30 Days)" }), _jsx(ResponsiveContainer, { width: "100%", height: 300, children: _jsxs(LineChart, { data: clicksOverTime, 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: 6, children: _jsxs(Paper, { sx: { p: 2 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Device Breakdown" }), _jsx(ResponsiveContainer, { width: "100%", height: 250, children: _jsxs(PieChart, { children: [_jsx(Pie, { data: deviceData, cx: "50%", cy: "50%", labelLine: false, label: ({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`, outerRadius: 80, fill: "#8884d8", dataKey: "value", children: deviceData.map((_entry, index) => (_jsx(Cell, { fill: COLORS[index % COLORS.length] }, `cell-${index}`))) }), _jsx(Tooltip, {})] }) })] }) }), _jsx(Grid, { item: true, xs: 12, md: 6, children: _jsxs(Paper, { sx: { p: 2 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Top Browsers" }), _jsx(ResponsiveContainer, { width: "100%", height: 250, children: _jsxs(BarChart, { data: browserData, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "name" }), _jsx(YAxis, {}), _jsx(Tooltip, {}), _jsx(Bar, { dataKey: "clicks", fill: "#1976d2" })] }) })] }) }), _jsx(Grid, { item: true, xs: 12, children: _jsxs(Paper, { sx: { p: 2 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Top Operating Systems" }), _jsx(ResponsiveContainer, { width: "100%", height: 250, children: _jsxs(BarChart, { data: osData, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "name" }), _jsx(YAxis, {}), _jsx(Tooltip, {}), _jsx(Bar, { dataKey: "clicks", fill: "#00C49F" })] }) })] }) })] })) : (_jsx(Typography, { children: "No analytics data available" })) }), _jsx(TabPanel, { value: tabValue, index: 1, children: _jsx(TableContainer, { component: Paper, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Date & Time" }), _jsx(TableCell, { children: "IP Address" }), _jsx(TableCell, { children: "Device" }), _jsx(TableCell, { children: "Browser" }), _jsx(TableCell, { children: "OS" }), _jsx(TableCell, { children: "Referer" })] }) }), _jsx(TableBody, { children: clicksData.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, align: "center", children: "No clicks recorded yet" }) })) : (clicksData.map((click, index) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: new Date(click.clickedAt).toLocaleString() }), _jsx(TableCell, { children: _jsx(Chip, { label: click.ipAddress, size: "small" }) }), _jsx(TableCell, { children: _jsx(Chip, { label: click.device || 'Unknown', size: "small", color: "primary", variant: "outlined" }) }), _jsx(TableCell, { children: click.browser || 'Unknown' }), _jsx(TableCell, { children: click.os || 'Unknown' }), _jsx(TableCell, { children: click.referer ? (_jsx(Typography, { variant: "body2", sx: {
+                                                                maxWidth: 200,
+                                                                overflow: 'hidden',
+                                                                textOverflow: 'ellipsis',
+                                                                whiteSpace: 'nowrap',
+                                                            }, title: click.referer, children: click.referer })) : (_jsx(Typography, { variant: "body2", color: "text.secondary", children: "Direct" })) })] }, index)))) })] }) }) })] })) }), _jsx(DialogActions, { children: _jsx(Button, { onClick: onClose, children: "Close" }) })] }));
+};

package/dist/ShinyUrlUrls.d.ts

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

package/dist/ShinyUrlUrls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShinyUrlUrls.d.ts","sourceRoot":"","sources":["../src/ShinyUrlUrls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAoBhE,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoNpD,CAAC"}

package/dist/ShinyUrlUrls.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from 'react';
+import { Box, Typography, TextField, Paper } from '@mui/material';
+import { DataGrid, GridActionsCellItem, GridToolbar } from '@mui/x-data-grid';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { ShinyUrlDetailsModal } from './ShinyUrlDetailsModal';
+import { getDefaultApiBaseUrl } from './shortener';
+export const ShinyUrlUrls = ({ apiKey, apiBaseUrl, className = '' }) => {
+    const [page, setPage] = useState(0);
+    const [pageSize, setPageSize] = useState(10);
+    const [search, setSearch] = useState('');
+    const [selectedUrlId, setSelectedUrlId] = useState(null);
+    const [modalOpen, setModalOpen] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [rows, setRows] = useState([]);
+    const [total, setTotal] = useState(0);
+    const baseUrl = apiBaseUrl || getDefaultApiBaseUrl();
+    const fetchUrls = useCallback(async () => {
+        if (!apiKey)
+            return;
+        setLoading(true);
+        try {
+            const queryParams = new URLSearchParams({
+                page: (page + 1).toString(),
+                limit: pageSize.toString(),
+                search: search
+            });
+            const response = await fetch(`${baseUrl}/api/admin/urls?${queryParams}`, {
+                headers: {
+                    'Authorization': `Bearer ${apiKey}`
+                }
+            });
+            const result = await response.json();
+            if (result.success) {
+                setRows(result.data || []);
+                setTotal(result.pagination?.total || 0);
+            }
+        }
+        catch (error) {
+            console.error('Failed to fetch URLs', error);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [apiKey, baseUrl, page, pageSize, search]);
+    // Debounce search
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            fetchUrls();
+        }, 500);
+        return () => clearTimeout(timer);
+    }, [fetchUrls]);
+    const handleDelete = async (id) => {
+        if (window.confirm('Are you sure you want to delete this URL?')) {
+            try {
+                const response = await fetch(`${baseUrl}/api/urls/${id}`, {
+                    method: 'DELETE',
+                    headers: {
+                        'Authorization': `Bearer ${apiKey}`
+                    }
+                });
+                if (response.ok) {
+                    fetchUrls(); // Refresh
+                }
+            }
+            catch (error) {
+                console.error('Failed to delete URL', error);
+            }
+        }
+    };
+    const handleRowClick = (params) => {
+        setSelectedUrlId(params.id);
+        setModalOpen(true);
+    };
+    const handleCloseModal = () => {
+        setModalOpen(false);
+        setSelectedUrlId(null);
+    };
+    const columns = [
+        {
+            field: 'shortCode',
+            headerName: 'Short Code',
+            width: 150,
+            renderCell: (params) => {
+                // Add referer as query parameter as fallback if browser doesn't send referer header
+                // For component usage, we might not know the exact "admin panel url", but we can use window.location
+                const currentUrl = typeof window !== 'undefined' ? window.location.href : '';
+                const shortUrl = `${baseUrl}/${params.value}?ref=${encodeURIComponent(currentUrl)}`;
+                return (_jsx(Typography, { component: "a", href: shortUrl, target: "_blank", rel: "noopener", variant: "body2", sx: {
+                        fontFamily: 'monospace',
+                        bgcolor: 'action.hover',
+                        px: 1,
+                        py: 0.5,
+                        borderRadius: 1,
+                        color: 'primary.main',
+                        textDecoration: 'none',
+                        cursor: 'pointer',
+                        '&:hover': {
+                            textDecoration: 'underline',
+                            bgcolor: 'action.selected',
+                        },
+                    }, onClick: (e) => {
+                        e.stopPropagation(); // Prevent row click when clicking the link
+                    }, children: params.value }));
+            },
+        },
+        {
+            field: 'originalUrl',
+            headerName: 'Original URL',
+            flex: 1,
+            minWidth: 300,
+        },
+        {
+            field: 'clicks',
+            headerName: 'Clicks',
+            width: 100,
+            type: 'number',
+        },
+        {
+            field: 'createdAt',
+            headerName: 'Created At',
+            width: 180,
+            valueFormatter: (params) => {
+                if (!params.value)
+                    return '';
+                return new Date(params.value).toLocaleString();
+            },
+        },
+        {
+            field: 'actions',
+            type: 'actions',
+            headerName: 'Actions',
+            width: 100,
+            getActions: (params) => [
+                _jsx(GridActionsCellItem, { icon: _jsx(DeleteIcon, {}), label: "Delete", onClick: () => handleDelete(params.id), color: "error" }),
+            ],
+        },
+    ];
+    if (!apiKey) {
+        return _jsx(Typography, { color: "error", children: "Authentication required" });
+    }
+    return (_jsxs(Box, { className: className, children: [_jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', mb: 3 }, children: [_jsx(Typography, { variant: "h4", children: "URLs Management" }), _jsx(Box, { sx: { display: 'flex', gap: 2 }, children: _jsx(TextField, { size: "small", placeholder: "Search URLs...", value: search, onChange: (e) => {
+                                setSearch(e.target.value);
+                                setPage(0); // Reset page on search
+                            }, sx: { width: 300 } }) })] }), _jsx(Paper, { sx: { height: 600, width: '100%' }, children: _jsx(DataGrid, { rows: rows, columns: columns, loading: loading, pagination: true, paginationModel: { page, pageSize }, onPaginationModelChange: (model) => {
+                        setPage(model.page);
+                        setPageSize(model.pageSize);
+                    }, paginationMode: "server", rowCount: total, slots: {
+                        toolbar: GridToolbar,
+                    }, getRowId: (row) => row._id, onRowClick: handleRowClick, sx: {
+                        '& .MuiDataGrid-row': {
+                            cursor: 'pointer',
+                        },
+                    } }) }), _jsx(ShinyUrlDetailsModal, { open: modalOpen, urlId: selectedUrlId, onClose: handleCloseModal, apiKey: apiKey, apiBaseUrl: baseUrl })] }));
+};

package/dist/index.d.ts

@@ -3,4 +3,10 @@ export type { ShinyUrlInputProps } from './ShinyUrlInput';
 export * from './shortener';
 export { ShinyUrlDashboard } from './ShinyUrlDashboard';
 export type { ShinyUrlDashboardProps } from './ShinyUrlDashboard';
+export { ShinyUrlApiKeys } from './ShinyUrlApiKeys';
+export type { ShinyUrlApiKeysProps } from './ShinyUrlApiKeys';
+export { ShinyUrlUrls } from './ShinyUrlUrls';
+export type { ShinyUrlUrlsProps } from './ShinyUrlUrls';
+export { ShinyUrlDetailsModal } from './ShinyUrlDetailsModal';
+export type { ShinyUrlDetailsModalProps } from './ShinyUrlDetailsModal';
 //# 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;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,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;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shiny-url-input-box",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "description": "A reusable React component for generating ShinyURLs",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -30,15 +30,18 @@
     "@mui/material": "^5.15.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.2",
+    "@mui/icons-material": "^5.15.0",
+    "@mui/x-data-grid": "^6.18.2",
     "recharts": "^2.10.3"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
     "@mui/material": "^5.0.0",
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
+    "@mui/icons-material": "^5.0.0",
+    "@mui/x-data-grid": "^6.0.0",
     "recharts": "^2.0.0"
   }
 }