Function AnalyticsSettingsPage

frontend/src/pages/AnalyticsSettingsPage.tsx:36–258

()

type SubscriptionTier = keyof typeof TIER_LIMITS;

export function AnalyticsSettingsPage() {
  const roles = useAuthStore((state) => state.roles);
  const canManageSettings = hasAdminRole(roles);
  const isReadOnly = !canManageSettings;

  // Mock data - will be replaced with actual API calls in US-013
  const [currentTier] = useState<SubscriptionTier>('free');
  const [retentionPeriod, setRetentionPeriod] = useState('30');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [successMessage, setSuccessMessage] = useState<string | null>(null);
  const [storageUsage] = useState<{ used: string; total: string } | null>(null);

  const tierInfo = TIER_LIMITS[currentTier];
  const maxAllowedRetention = tierInfo.maxRetentionDays;

  // Filter retention periods based on tier limit
  const availableRetentionPeriods = RETENTION_PERIODS.filter(
    (period) => period.days <= maxAllowedRetention,
  );

  useEffect(() => {
    // TODO: US-013 will implement API call to fetch current settings
    // fetchSettings().catch(console.error);
  }, []);

  const handleSave = async () => {
    if (isReadOnly) return;

    setError(null);
    setSuccessMessage(null);
    setIsSubmitting(true);

    try {
      // TODO: US-013 will implement API call to save settings
      // await api.analytics.updateSettings({ retentionDays: parseInt(retentionPeriod) });

      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 500));

      setSuccessMessage('Analytics settings updated successfully');

      // Clear success message after 5 seconds
      setTimeout(() => setSuccessMessage(null), 5000);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to update analytics settings');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="flex-1 bg-background">
      <div className="container mx-auto py-4 md:py-8 px-3 md:px-4">
        {/* Header */}
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4 md:mb-8">
          <div>
            <h1 className="text-xl md:text-2xl font-semibold">Analytics Settings</h1>