shiny-url-input-box 1.1.0 → 1.3.0

package/src/ShinyUrlDetailsModal.tsx

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

package/src/ShinyUrlUrls.tsx

@@ -0,0 +1,239 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Box,
+  Typography,
+  TextField,
+  Paper,
+  CircularProgress
+} from '@mui/material';
+import {
+  DataGrid,
+  GridColDef,
+  GridActionsCellItem,
+  GridToolbar,
+  GridRowParams,
+  GridPaginationModel
+} from '@mui/x-data-grid';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { ShinyUrlDetailsModal } from './ShinyUrlDetailsModal';
+import { getDefaultApiBaseUrl } from './shortener';
+
+export interface ShinyUrlUrlsProps {
+  apiKey: string;
+  apiBaseUrl?: string;
+  className?: string;
+}
+
+export const ShinyUrlUrls: React.FC<ShinyUrlUrlsProps> = ({
+  apiKey,
+  apiBaseUrl,
+  className = ''
+}) => {
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+  const [search, setSearch] = useState('');
+  const [selectedUrlId, setSelectedUrlId] = useState<string | null>(null);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [rows, setRows] = useState<any[]>([]);
+  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: string) => {
+    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: GridRowParams) => {
+    setSelectedUrlId(params.id as string);
+    setModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setModalOpen(false);
+    setSelectedUrlId(null);
+  };
+
+  const columns: GridColDef[] = [
+    {
+      field: 'shortCode',
+      headerName: 'Short Code',
+      width: 150,
+      renderCell: (params: any) => {
+        // 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 (
+          <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: React.MouseEvent) => {
+              e.stopPropagation(); // Prevent row click when clicking the link
+            }}
+          >
+            {params.value}
+          </Typography>
+        );
+      },
+    },
+    {
+      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: any) => {
+        if (!params.value) return '';
+        return new Date(params.value).toLocaleString();
+      },
+    },
+    {
+      field: 'actions',
+      type: 'actions',
+      headerName: 'Actions',
+      width: 100,
+      getActions: (params: GridRowParams) => [
+        <GridActionsCellItem
+          icon={<DeleteIcon />}
+          label="Delete"
+          onClick={() => handleDelete(params.id as string)}
+          color="error"
+        />,
+      ],
+    },
+  ];
+
+  if (!apiKey) {
+      return <Typography color="error">Authentication required</Typography>;
+  }
+
+  return (
+    <Box className={className}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 3 }}>
+        <Typography variant="h4">URLs Management</Typography>
+        <Box sx={{ display: 'flex', gap: 2 }}>
+          <TextField
+            size="small"
+            placeholder="Search URLs..."
+            value={search}
+            onChange={(e) => {
+                setSearch(e.target.value);
+                setPage(0); // Reset page on search
+            }}
+            sx={{ width: 300 }}
+          />
+        </Box>
+      </Box>
+
+      <Paper sx={{ height: 600, width: '100%' }}>
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          loading={loading}
+          pagination
+          paginationModel={{ page, pageSize }}
+          onPaginationModelChange={(model: GridPaginationModel) => {
+            setPage(model.page);
+            setPageSize(model.pageSize);
+          }}
+          paginationMode="server"
+          rowCount={total}
+          slots={{
+            toolbar: GridToolbar,
+          }}
+          getRowId={(row: any) => row._id}
+          onRowClick={handleRowClick}
+          sx={{
+            '& .MuiDataGrid-row': {
+              cursor: 'pointer',
+            },
+          }}
+        />
+      </Paper>
+
+      <ShinyUrlDetailsModal
+        open={modalOpen}
+        urlId={selectedUrlId}
+        onClose={handleCloseModal}
+        apiKey={apiKey}
+        apiBaseUrl={baseUrl}
+      />
+    </Box>
+  );
+};

package/src/index.ts

@@ -1,4 +1,12 @@
 export { default as ShinyUrlInput } from './ShinyUrlInput';
 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';