shiny-url-input-box 1.1.0 → 1.3.0

package/src/ShinyUrlApiKeys.tsx

@@ -0,0 +1,305 @@
+import React, { 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 interface ShinyUrlApiKeysProps {
+  apiKey: string; // The user's/admin's token to authenticate
+  apiBaseUrl?: string;
+  className?: string;
+}
+
+interface ApiKeyData {
+  _id: string;
+  name: string;
+  key: string;
+  isActive: boolean;
+  createdAt: string;
+  lastUsedAt?: string;
+}
+
+export const ShinyUrlApiKeys: React.FC<ShinyUrlApiKeysProps> = ({
+  apiKey,
+  apiBaseUrl,
+  className = ''
+}) => {
+  const [loading, setLoading] = useState(true);
+  const [keys, setKeys] = useState<ApiKeyData[]>([]);
+  const [openDialog, setOpenDialog] = useState(false);
+  const [newKeyName, setNewKeyName] = useState('');
+  const [createdKey, setCreatedKey] = useState<string | null>(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: string, currentStatus: boolean) => {
+    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: string) => {
+    navigator.clipboard.writeText(text);
+    setSnackbarMessage('Copied to clipboard!');
+    setSnackbarOpen(true);
+  };
+
+  const formatKey = (key: string) => {
+    if (key.length > 20) {
+      return key.substring(0, 10) + '...' + key.substring(key.length - 4);
+    }
+    return key;
+  };
+
+  if (!apiKey) {
+     return <Typography color="error">Authentication required</Typography>;
+  }
+
+  return (
+    <Box className={className}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
+        <Typography variant="h4">API Keys</Typography>
+        <Button
+          variant="contained"
+          startIcon={<AddIcon />}
+          onClick={() => setOpenDialog(true)}
+        >
+          Create New Key
+        </Button>
+      </Box>
+
+      <Paper>
+        <TableContainer>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>Name</TableCell>
+                <TableCell>Key</TableCell>
+                <TableCell>Status</TableCell>
+                <TableCell>Created</TableCell>
+                <TableCell>Last Used</TableCell>
+                <TableCell>Actions</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {loading ? (
+                <TableRow>
+                  <TableCell colSpan={6} align="center">
+                    <CircularProgress size={24} />
+                  </TableCell>
+                </TableRow>
+              ) : keys.length > 0 ? (
+                keys.map((key) => (
+                  <TableRow key={key._id}>
+                    <TableCell>{key.name || 'Default Key'}</TableCell>
+                    <TableCell>
+                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                        <Typography variant="body2" sx={{ fontFamily: 'monospace' }}>
+                          {formatKey(key.key)}
+                        </Typography>
+                        <IconButton
+                          size="small"
+                          onClick={() => handleCopy(key.key)}
+                          title="Copy full key"
+                        >
+                          <ContentCopyIcon fontSize="small" />
+                        </IconButton>
+                      </Box>
+                    </TableCell>
+                    <TableCell>
+                      <Chip
+                        label={key.isActive ? 'Active' : 'Disabled'}
+                        color={key.isActive ? 'success' : 'default'}
+                        size="small"
+                      />
+                    </TableCell>
+                    <TableCell>
+                      {new Date(key.createdAt).toLocaleDateString()}
+                    </TableCell>
+                    <TableCell>
+                      {key.lastUsedAt
+                        ? new Date(key.lastUsedAt).toLocaleDateString()
+                        : 'Never'}
+                    </TableCell>
+                    <TableCell>
+                      <Button
+                        size="small"
+                        variant="outlined"
+                        color={key.isActive ? 'error' : 'success'}
+                        onClick={() => handleToggle(key._id, key.isActive)}
+                      >
+                        {key.isActive ? 'Disable' : 'Enable'}
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={6} align="center">
+                    No API keys found. Create your first key to start using the service.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Paper>
+
+      <Dialog open={openDialog} onClose={() => setOpenDialog(false)}>
+        <DialogTitle>Create New API Key</DialogTitle>
+        <DialogContent>
+          <TextField
+            autoFocus
+            margin="dense"
+            label="Key Name (optional)"
+            fullWidth
+            variant="outlined"
+            value={newKeyName}
+            onChange={(e) => setNewKeyName(e.target.value)}
+            placeholder="e.g., Production Key, Development Key"
+            sx={{ mt: 2 }}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpenDialog(false)}>Cancel</Button>
+          <Button
+            onClick={handleCreate}
+            variant="contained"
+            disabled={creating}
+          >
+            {creating ? 'Creating...' : 'Create'}
+          </Button>
+        </DialogActions>
+      </Dialog>
+
+      <Dialog open={!!createdKey} onClose={() => setCreatedKey(null)}>
+        <DialogTitle>API Key Created</DialogTitle>
+        <DialogContent>
+          <Alert severity="warning" sx={{ mb: 2 }}>
+            Copy this key now! You won't be able to see it again.
+          </Alert>
+          <TextField
+            fullWidth
+            value={createdKey || ''}
+            InputProps={{
+              readOnly: true,
+            }}
+            sx={{ mb: 2 }}
+          />
+          <Button
+            fullWidth
+            variant="contained"
+            startIcon={<ContentCopyIcon />}
+            onClick={() => createdKey && handleCopy(createdKey)}
+          >
+            Copy Key
+          </Button>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setCreatedKey(null)}>Close</Button>
+        </DialogActions>
+      </Dialog>
+
+      <Snackbar
+        open={snackbarOpen}
+        autoHideDuration={3000}
+        onClose={() => setSnackbarOpen(false)}
+        message={snackbarMessage}
+      />
+    </Box>
+  );
+};

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>
+  );
+};