fix: ACME account removal, status display, and timeline icon clipping

- Add permanent delete endpoint for deactivated ACME accounts (DELETE /accounts/{id}/permanent)
- Add "Remove from database" button in ACME Accounts modal for deactivated accounts
- Fix ACME Account stat card showing "Active" for deactivated accounts
- Fix Timeline dot/icon clipping in Applied/Rejected/Pending sections

Made-with: Cursor

Author: taylanbakircioglu

backend/routers/letsencrypt.py

@@ -108,6 +108,41 @@ async def deactivate_account(account_id: int, authorization: str = Header(None))
         raise HTTPException(status_code=400, detail=str(e))
 
 
+@router.delete("/accounts/{account_id}/permanent")
+async def remove_account(account_id: int, authorization: str = Header(None)):
+    from auth_middleware import get_current_user_from_token
+    current_user = await get_current_user_from_token(authorization)
+    if not current_user.get('is_admin', False):
+        raise HTTPException(status_code=403, detail="Admin access required")
+
+    conn = await get_database_connection()
+    try:
+        account = await conn.fetchrow(
+            "SELECT id, status, email FROM letsencrypt_accounts WHERE id = $1", account_id
+        )
+        if not account:
+            raise HTTPException(status_code=404, detail="Account not found")
+        if account['status'] != 'deactivated':
+            raise HTTPException(
+                status_code=409,
+                detail="Only deactivated accounts can be permanently removed. Deactivate first."
+            )
+
+        linked_orders = await conn.fetchval(
+            "SELECT COUNT(*) FROM letsencrypt_orders WHERE account_id = $1", account_id
+        )
+        if linked_orders > 0:
+            await conn.execute(
+                "DELETE FROM letsencrypt_orders WHERE account_id = $1", account_id
+            )
+
+        await conn.execute("DELETE FROM letsencrypt_accounts WHERE id = $1", account_id)
+        logger.info(f"ACME account {account['email']} (id={account_id}) permanently removed by user {current_user.get('username')}")
+        return {"message": f"Account {account['email']} permanently removed", "deleted_orders": linked_orders}
+    finally:
+        await close_database_connection(conn)
+
+
 # --- Certificate operations ---
 
 @router.post("/certificates")

frontend/src/components/ACMEAutomation.js

@@ -61,7 +61,8 @@ const ACMEAutomation = () => {
   const nextRenewal = renewalSchedule.find(c => c.auto_renew && calcDaysLeft(c.expiry_date) > 0);
   const nextRenewalDays = nextRenewal ? calcDaysLeft(nextRenewal.expiry_date) : null;
   const pendingOrders = orders.filter(o => o.status === 'pending' || o.status === 'processing');
-  const acmeAccount = accounts.length > 0 ? accounts[accounts.length - 1] : null;
+  const activeAccount = accounts.find(a => a.status === 'valid') || null;
+  const acmeAccount = activeAccount || (accounts.length > 0 ? accounts[accounts.length - 1] : null);
 
   const handleRequestCert = async () => {
     try {
@@ -187,6 +188,32 @@ const ACMEAutomation = () => {
     });
   };
 
+  const handleRemoveAccount = (accountId, email) => {
+    Modal.confirm({
+      title: 'Permanently Remove Account',
+      content: (
+        <div>
+          <p>Are you sure you want to permanently remove <strong>{email}</strong> from the database?</p>
+          <p style={{ color: '#ff4d4f' }}>
+            This will delete the account record and all associated orders from the local database.
+            This action cannot be undone.
+          </p>
+        </div>
+      ),
+      okText: 'Remove Permanently',
+      okButtonProps: { danger: true },
+      onOk: async () => {
+        try {
+          await axios.delete(`/api/letsencrypt/accounts/${accountId}/permanent`);
+          message.success('Account permanently removed');
+          fetchData();
+        } catch (err) {
+          message.error(err?.response?.data?.detail || 'Failed to remove account');
+        }
+      },
+    });
+  };
+
   const statusTag = (status) => {
     const map = {
       pending: { color: 'processing', icon: <ClockCircleOutlined /> },
@@ -394,9 +421,9 @@ const ACMEAutomation = () => {
           <Card>
             <Statistic
               title="ACME Account"
-              value={acmeAccount ? 'Active' : 'None'}
-              prefix={acmeAccount ? <CheckCircleOutlined /> : <ExclamationCircleOutlined />}
-              valueStyle={{ color: acmeAccount ? '#52c41a' : '#faad14' }}
+              value={activeAccount ? 'Active' : acmeAccount ? 'Inactive' : 'None'}
+              prefix={activeAccount ? <CheckCircleOutlined /> : <ExclamationCircleOutlined />}
+              valueStyle={{ color: activeAccount ? '#52c41a' : '#faad14' }}
             />
             {acmeAccount && (
               <div style={{ fontSize: 12, color: '#888', marginTop: 4 }}>{acmeAccount.email}</div>
@@ -612,7 +639,7 @@ const ACMEAutomation = () => {
                         }}
                       />
                     </Tooltip>
-                    {record.status !== 'deactivated' && (
+                    {record.status !== 'deactivated' ? (
                       <Tooltip title="Deactivate">
                         <Button
                           icon={<DeleteOutlined />}
@@ -621,6 +648,16 @@ const ACMEAutomation = () => {
                           onClick={() => handleDeactivateAccount(record.id, record.email)}
                         />
                       </Tooltip>
+                    ) : (
+                      <Tooltip title="Remove from database">
+                        <Button
+                          icon={<DeleteOutlined />}
+                          size="small"
+                          danger
+                          type="text"
+                          onClick={() => handleRemoveAccount(record.id, record.email)}
+                        />
+                      </Tooltip>
                     )}
                   </Space>
                 ),

frontend/src/components/ApplyManagement.js

@@ -1248,7 +1248,7 @@ const ApplyManagement = () => {
                   <ClockCircleOutlined style={{ marginRight: 8, color: '#faad14' }} />
                   Pending Changes ({pendingVersions.length})
                 </Title>
-                <div style={{ maxHeight: 240, overflowY: 'auto', paddingRight: 8 }}>
+                <div style={{ maxHeight: 240, overflowY: 'auto', paddingRight: 8, paddingTop: 4 }}>
                   <Timeline size="small">
                     {pendingVersions.map((version, index) => (
                       <Timeline.Item 
@@ -1300,7 +1300,7 @@ const ApplyManagement = () => {
                       style={{ margin: '20px 0' }}
                     />
                   ) : (
-                    <div style={{ maxHeight: 420, overflowY: 'auto', paddingRight: 8 }}>
+                    <div style={{ maxHeight: 420, overflowY: 'auto', paddingRight: 8, paddingTop: 4 }}>
                       <Timeline size="small">
                         {appliedVersions.map((version, index) => (
                           <Timeline.Item 
@@ -1347,7 +1347,7 @@ const ApplyManagement = () => {
                       style={{ margin: '20px 0' }}
                     />
                   ) : (
-                    <div style={{ maxHeight: 420, overflowY: 'auto', paddingRight: 8 }}>
+                    <div style={{ maxHeight: 420, overflowY: 'auto', paddingRight: 8, paddingTop: 4 }}>
                       <Timeline size="small">
                         {rejectedVersions.map((version, index) => (
                           <Timeline.Item