Improve GDPR implementation

frontend/src/pages/app/settings/privacy/PrivacySettingsPage.tsx

@@ -0,0 +1,547 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import {
+  Shield,
+  Download,
+  Trash2,
+  FileText,
+  Cookie,
+  AlertTriangle,
+  CheckCircle,
+  ExternalLink,
+  Lock,
+  Eye
+} from 'lucide-react';
+import { Button, Card, Input } from '../../../../components/ui';
+import { useToast } from '../../../../hooks/ui/useToast';
+import { useAuthUser, useAuthStore, useAuthActions } from '../../../../stores/auth.store';
+import { useCurrentTenant } from '../../../../stores';
+import { subscriptionService } from '../../../../api';
+
+export const PrivacySettingsPage: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { success, error: showError } = useToast();
+  const user = useAuthUser();
+  const token = useAuthStore((state) => state.token);
+  const { logout } = useAuthActions();
+  const currentTenant = useCurrentTenant();
+
+  const [isExporting, setIsExporting] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [deleteConfirmEmail, setDeleteConfirmEmail] = useState('');
+  const [deletePassword, setDeletePassword] = useState('');
+  const [deleteReason, setDeleteReason] = useState('');
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [showExportPreview, setShowExportPreview] = useState(false);
+  const [exportPreview, setExportPreview] = useState<any>(null);
+  const [subscriptionStatus, setSubscriptionStatus] = useState<any>(null);
+
+  React.useEffect(() => {
+    const loadSubscriptionStatus = async () => {
+      const tenantId = currentTenant?.id || user?.tenant_id;
+      if (tenantId) {
+        try {
+          const status = await subscriptionService.getSubscriptionStatus(tenantId);
+          setSubscriptionStatus(status);
+        } catch (error) {
+          console.error('Failed to load subscription status:', error);
+        }
+      }
+    };
+
+    loadSubscriptionStatus();
+  }, [currentTenant, user]);
+
+  const handleDataExport = async () => {
+    setIsExporting(true);
+    try {
+      const response = await fetch('/api/v1/users/me/export', {
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to export data');
+      }
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `my_data_export_${new Date().toISOString().split('T')[0]}.json`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+
+      success(
+        t('settings:privacy.export_success', 'Your data has been exported successfully'),
+        { title: t('settings:privacy.export_complete', 'Export Complete') }
+      );
+    } catch (err) {
+      showError(
+        t('settings:privacy.export_error', 'Failed to export your data. Please try again.'),
+        { title: t('common:error', 'Error') }
+      );
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  const handleViewExportPreview = async () => {
+    try {
+      const response = await fetch('/api/v1/users/me/export/summary', {
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch preview');
+      }
+
+      const data = await response.json();
+      setExportPreview(data);
+      setShowExportPreview(true);
+    } catch (err) {
+      showError(
+        t('settings:privacy.preview_error', 'Failed to load preview'),
+        { title: t('common:error', 'Error') }
+      );
+    }
+  };
+
+  const handleAccountDeletion = async () => {
+    if (deleteConfirmEmail.toLowerCase() !== user?.email?.toLowerCase()) {
+      showError(
+        t('settings:privacy.email_mismatch', 'Email does not match your account email'),
+        { title: t('common:error', 'Error') }
+      );
+      return;
+    }
+
+    if (!deletePassword) {
+      showError(
+        t('settings:privacy.password_required', 'Password is required'),
+        { title: t('common:error', 'Error') }
+      );
+      return;
+    }
+
+    setIsDeleting(true);
+    try {
+      const response = await fetch('/api/v1/users/me/delete/request', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          confirm_email: deleteConfirmEmail,
+          password: deletePassword,
+          reason: deleteReason
+        })
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.detail || 'Failed to delete account');
+      }
+
+      success(
+        t('settings:privacy.delete_success', 'Your account has been deleted. You will be logged out.'),
+        { title: t('settings:privacy.account_deleted', 'Account Deleted') }
+      );
+
+      setTimeout(() => {
+        logout();
+        navigate('/');
+      }, 2000);
+    } catch (err: any) {
+      showError(
+        err.message || t('settings:privacy.delete_error', 'Failed to delete account. Please try again.'),
+        { title: t('common:error', 'Error') }
+      );
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 space-y-6">
+      {/* Header */}
+      <div className="flex items-center gap-3 mb-6">
+        <Shield className="w-8 h-8 text-primary-600" />
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+            {t('settings:privacy.title', 'Privacy & Data')}
+          </h1>
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            {t('settings:privacy.subtitle', 'Manage your data and privacy settings')}
+          </p>
+        </div>
+      </div>
+
+      {/* GDPR Rights Information */}
+      <Card className="p-6 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
+        <div className="flex items-start gap-3">
+          <Shield className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
+          <div>
+            <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
+              {t('settings:privacy.gdpr_rights_title', 'Your Data Rights')}
+            </h3>
+            <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
+              {t(
+                'settings:privacy.gdpr_rights_description',
+                'Under GDPR, you have the right to access, export, and delete your personal data. These tools help you exercise those rights.'
+              )}
+            </p>
+            <div className="flex flex-wrap gap-2">
+              <a
+                href="/privacy"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline inline-flex items-center gap-1"
+              >
+                {t('settings:privacy.privacy_policy', 'Privacy Policy')}
+                <ExternalLink className="w-3 h-3" />
+              </a>
+              <span className="text-gray-400">•</span>
+              <a
+                href="/terms"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline inline-flex items-center gap-1"
+              >
+                {t('settings:privacy.terms', 'Terms of Service')}
+                <ExternalLink className="w-3 h-3" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </Card>
+
+      {/* Cookie Preferences */}
+      <Card className="p-6">
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex items-start gap-3 flex-1">
+            <Cookie className="w-5 h-5 text-amber-600 mt-1 flex-shrink-0" />
+            <div>
+              <h3 className="font-semibold text-gray-900 dark:text-white mb-1">
+                {t('settings:privacy.cookie_preferences', 'Cookie Preferences')}
+              </h3>
+              <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
+                {t(
+                  'settings:privacy.cookie_description',
+                  'Manage which cookies and tracking technologies we can use on your browser.'
+                )}
+              </p>
+            </div>
+          </div>
+          <Button
+            onClick={() => navigate('/cookie-preferences')}
+            variant="outline"
+            size="sm"
+          >
+            <Cookie className="w-4 h-4 mr-2" />
+            {t('settings:privacy.manage_cookies', 'Manage Cookies')}
+          </Button>
+        </div>
+      </Card>
+
+      {/* Data Export - Article 15 (Right to Access) & Article 20 (Data Portability) */}
+      <Card className="p-6">
+        <div className="flex items-start gap-3 mb-4">
+          <Download className="w-5 h-5 text-green-600 mt-1 flex-shrink-0" />
+          <div className="flex-1">
+            <h3 className="font-semibold text-gray-900 dark:text-white mb-1">
+              {t('settings:privacy.export_data', 'Export Your Data')}
+            </h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+              {t(
+                'settings:privacy.export_description',
+                'Download a copy of all your personal data in machine-readable JSON format. This includes your profile, account activity, and all data we have about you.'
+              )}
+            </p>
+            <p className="text-xs text-gray-500 dark:text-gray-500 mb-4">
+              <strong>GDPR Rights:</strong> Article 15 (Right to Access) & Article 20 (Data Portability)
+            </p>
+          </div>
+        </div>
+
+        {showExportPreview && exportPreview && (
+          <div className="mb-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+            <h4 className="font-semibold text-sm text-gray-900 dark:text-white mb-3">
+              {t('settings:privacy.export_preview', 'What will be exported:')}
+            </h4>
+            <div className="grid grid-cols-2 gap-3 text-sm">
+              <div className="flex items-center gap-2">
+                <CheckCircle className="w-4 h-4 text-green-600" />
+                <span className="text-gray-700 dark:text-gray-300">Personal data</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckCircle className="w-4 h-4 text-green-600" />
+                <span className="text-gray-700 dark:text-gray-300">
+                  {exportPreview.data_counts?.active_sessions || 0} active sessions
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckCircle className="w-4 h-4 text-green-600" />
+                <span className="text-gray-700 dark:text-gray-300">
+                  {exportPreview.data_counts?.consent_changes || 0} consent records
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckCircle className="w-4 h-4 text-green-600" />
+                <span className="text-gray-700 dark:text-gray-300">
+                  {exportPreview.data_counts?.audit_logs || 0} audit logs
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div className="flex gap-3">
+          <Button
+            onClick={handleViewExportPreview}
+            variant="outline"
+            size="sm"
+            disabled={isExporting}
+          >
+            <Eye className="w-4 h-4 mr-2" />
+            {t('settings:privacy.preview_export', 'Preview')}
+          </Button>
+          <Button
+            onClick={handleDataExport}
+            variant="primary"
+            size="sm"
+            disabled={isExporting}
+          >
+            <Download className="w-4 h-4 mr-2" />
+            {isExporting
+              ? t('settings:privacy.exporting', 'Exporting...')
+              : t('settings:privacy.export_button', 'Export My Data')}
+          </Button>
+        </div>
+      </Card>
+
+      {/* Account Deletion - Article 17 (Right to Erasure) */}
+      <Card className="p-6 border-red-200 dark:border-red-800">
+        <div className="flex items-start gap-3 mb-4">
+          <AlertTriangle className="w-5 h-5 text-red-600 mt-1 flex-shrink-0" />
+          <div className="flex-1">
+            <h3 className="font-semibold text-gray-900 dark:text-white mb-1">
+              {t('settings:privacy.delete_account', 'Delete Account')}
+            </h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+              {t(
+                'settings:privacy.delete_description',
+                'Permanently delete your account and all associated data. This action cannot be undone.'
+              )}
+            </p>
+            <p className="text-xs text-gray-500 dark:text-gray-500 mb-4">
+              <strong>GDPR Right:</strong> Article 17 (Right to Erasure / "Right to be Forgotten")
+            </p>
+          </div>
+        </div>
+
+        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4">
+          <div className="flex items-start gap-2">
+            <AlertTriangle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
+            <div className="text-sm text-red-900 dark:text-red-100">
+              <p className="font-semibold mb-2">
+                {t('settings:privacy.delete_warning_title', 'What will be deleted:')}
+              </p>
+              <ul className="list-disc pl-5 space-y-1 text-xs">
+                <li>Your account and login credentials</li>
+                <li>All personal information (name, email, phone)</li>
+                <li>All active sessions and devices</li>
+                <li>Consent records and preferences</li>
+                <li>Security logs and login history</li>
+              </ul>
+              <p className="mt-3 font-semibold mb-1">
+                {t('settings:privacy.delete_retained_title', 'What will be retained:')}
+              </p>
+              <ul className="list-disc pl-5 space-y-1 text-xs">
+                <li>Audit logs (anonymized after 1 year - legal requirement)</li>
+                <li>Financial records (anonymized for 7 years - tax law)</li>
+                <li>Aggregated analytics (no personal identifiers)</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <Button
+          onClick={() => setShowDeleteModal(true)}
+          variant="outline"
+          size="sm"
+          className="border-red-300 text-red-600 hover:bg-red-50 dark:border-red-700 dark:text-red-400 dark:hover:bg-red-900/20"
+        >
+          <Trash2 className="w-4 h-4 mr-2" />
+          {t('settings:privacy.delete_button', 'Delete My Account')}
+        </Button>
+      </Card>
+
+      {/* Additional Resources */}
+      <Card className="p-6">
+        <h3 className="font-semibold text-gray-900 dark:text-white mb-3">
+          {t('settings:privacy.resources_title', 'Privacy Resources')}
+        </h3>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <a
+            href="/privacy"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+          >
+            <FileText className="w-5 h-5 text-gray-600" />
+            <div className="flex-1">
+              <div className="text-sm font-medium text-gray-900 dark:text-white">
+                {t('settings:privacy.privacy_policy', 'Privacy Policy')}
+              </div>
+              <div className="text-xs text-gray-500">
+                {t('settings:privacy.privacy_policy_description', 'How we handle your data')}
+              </div>
+            </div>
+            <ExternalLink className="w-4 h-4 text-gray-400" />
+          </a>
+
+          <a
+            href="/cookies"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+          >
+            <Cookie className="w-5 h-5 text-gray-600" />
+            <div className="flex-1">
+              <div className="text-sm font-medium text-gray-900 dark:text-white">
+                {t('settings:privacy.cookie_policy', 'Cookie Policy')}
+              </div>
+              <div className="text-xs text-gray-500">
+                {t('settings:privacy.cookie_policy_description', 'About cookies we use')}
+              </div>
+            </div>
+            <ExternalLink className="w-4 h-4 text-gray-400" />
+          </a>
+        </div>
+      </Card>
+
+      {/* Delete Account Modal */}
+      {showDeleteModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
+          <Card className="max-w-md w-full p-6 max-h-[90vh] overflow-y-auto">
+            <div className="flex items-start gap-3 mb-4">
+              <AlertTriangle className="w-6 h-6 text-red-600 flex-shrink-0" />
+              <div>
+                <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
+                  {t('settings:privacy.delete_confirm_title', 'Delete Account?')}
+                </h2>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  {t(
+                    'settings:privacy.delete_confirm_description',
+                    'This action is permanent and cannot be undone. All your data will be deleted immediately.'
+                  )}
+                </p>
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              {subscriptionStatus && subscriptionStatus.status === 'active' && (
+                <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
+                  <div className="flex items-start gap-3">
+                    <AlertTriangle className="w-5 h-5 text-yellow-600 dark:text-yellow-500 flex-shrink-0 mt-0.5" />
+                    <div className="text-sm">
+                      <p className="font-semibold text-yellow-900 dark:text-yellow-100 mb-1">
+                        Active Subscription Detected
+                      </p>
+                      <p className="text-yellow-800 dark:text-yellow-200 mb-2">
+                        You have an active {subscriptionStatus.plan} subscription. Deleting your account will:
+                      </p>
+                      <ul className="list-disc list-inside space-y-1 text-yellow-800 dark:text-yellow-200">
+                        <li>Cancel your subscription immediately</li>
+                        <li>No refund for remaining time</li>
+                        <li>Permanently delete all data</li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              <Input
+                label={t('settings:privacy.confirm_email_label', 'Confirm your email')}
+                type="email"
+                placeholder={user?.email || ''}
+                value={deleteConfirmEmail}
+                onChange={(e) => setDeleteConfirmEmail(e.target.value)}
+                required
+              />
+
+              <Input
+                label={t('settings:privacy.password_label', 'Enter your password')}
+                type="password"
+                placeholder="••••••••"
+                value={deletePassword}
+                onChange={(e) => setDeletePassword(e.target.value)}
+                required
+                leftIcon={<Lock className="w-4 h-4" />}
+              />
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  {t('settings:privacy.delete_reason_label', 'Reason for leaving (optional)')}
+                </label>
+                <textarea
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+                  rows={3}
+                  placeholder={t(
+                    'settings:privacy.delete_reason_placeholder',
+                    'Help us improve by telling us why...'
+                  )}
+                  value={deleteReason}
+                  onChange={(e) => setDeleteReason(e.target.value)}
+                />
+              </div>
+
+              <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3">
+                <p className="text-sm text-amber-900 dark:text-amber-100">
+                  ⚠️ {t('settings:privacy.delete_final_warning', 'This will permanently delete your account and all data. This action cannot be reversed.')}
+                </p>
+              </div>
+            </div>
+
+            <div className="flex gap-3 mt-6">
+              <Button
+                onClick={() => {
+                  setShowDeleteModal(false);
+                  setDeleteConfirmEmail('');
+                  setDeletePassword('');
+                  setDeleteReason('');
+                }}
+                variant="outline"
+                className="flex-1"
+                disabled={isDeleting}
+              >
+                {t('common:actions.cancel', 'Cancel')}
+              </Button>
+              <Button
+                onClick={handleAccountDeletion}
+                variant="primary"
+                className="flex-1 bg-red-600 hover:bg-red-700 text-white"
+                disabled={isDeleting || !deleteConfirmEmail || !deletePassword}
+              >
+                {isDeleting
+                  ? t('settings:privacy.deleting', 'Deleting...')
+                  : t('settings:privacy.delete_permanently', 'Delete Permanently')}
+              </Button>
+            </div>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PrivacySettingsPage;

frontend/src/pages/app/settings/privacy/index.ts

@@ -0,0 +1,2 @@
+export { default as PrivacySettingsPage } from './PrivacySettingsPage';
+export { default } from './PrivacySettingsPage';

frontend/src/pages/app/settings/subscription/SubscriptionPage.tsx

@@ -182,11 +182,21 @@ const SubscriptionPage: React.FC = () => {
     try {
       setCancelling(true);
 
-      // In a real implementation, this would call an API endpoint to cancel the subscription
-      // const result = await subscriptionService.cancelSubscription(tenantId);
-      
-      // For now, we'll simulate the cancellation
-      addToast('Tu suscripción ha sido cancelada', { type: 'success' });
+      const result = await subscriptionService.cancelSubscription(tenantId, 'User requested cancellation');
+
+      if (result.success) {
+        const daysRemaining = result.days_remaining;
+        const effectiveDate = new Date(result.cancellation_effective_date).toLocaleDateString('es-ES', {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric'
+        });
+
+        addToast(
+          `Suscripción cancelada. Acceso de solo lectura a partir del ${effectiveDate} (${daysRemaining} días restantes)`,
+          { type: 'success' }
+        );
+      }
 
       await loadSubscriptionData();
       setCancellationDialogOpen(false);