add new doc - outgoing IP addresses

Author: MilanPecov

src/docs-app/data/security/04-outgoing-ip-addresses.md

@@ -0,0 +1,63 @@
+# Outgoing IP Addresses
+
+If your systems require IP allowlisting for incoming connections from Showpass, use the addresses listed below. These IPs are used for all outbound API requests, webhooks, and third-party integrations initiated by our platform.
+
+---
+
+## Current IP Addresses
+
+```text
+34.83.8.110
+34.168.12.250
+35.230.81.80
+35.230.119.67
+```
+
+---
+
+## Who Needs This?
+
+You'll need to allowlist these IPs if you:
+
+- Use **Authorize.net** as your payment gateway
+- Have firewall rules restricting incoming API requests
+- Integrate with third-party systems that require IP allowlisting
+- Need to verify the source of requests from Showpass
+
+---
+
+## Authorize.net Users
+
+> **Important:** If you use Authorize.net with fraud detection enabled, you **must** add these IPs to avoid transaction issues.
+
+### Configuration Steps
+
+1. Log into your Authorize.net account
+2. Navigate to **Account** → **Fraud Detection Suite** → **Transaction IP Velocity Filter**
+3. Add all four IPs to the **IP Address Exclusion** section
+4. Save your changes
+
+### Why This Matters
+
+Without IP allowlisting, legitimate transactions processed through Box Office or high-volume sales may be flagged as suspicious and placed under review, requiring manual approval.
+
+---
+
+## Best Practices
+
+When configuring your allowlist:
+
+| Step | Action |
+|------|--------|
+| ✅ | Add all four IP addresses to ensure uninterrupted service |
+| ✅ | Use CIDR notation if required (e.g., `34.83.8.110/32`) |
+| ✅ | Allow traffic on port `443` for HTTPS connections |
+| ✅ | Test the connection after configuration |
+| ✅ | Document the configuration for your team |
+
+---
+
+## Need Help?
+
+**Email:** [support@showpass.com](mailto:support@showpass.com)  
+**Response time:** Critical issues within 24 hours

src/docs-app/ui/components/navigation/Navigation.tsx

@@ -72,15 +72,16 @@ const Navigation = ({ currentPath, onNavigate }: NavigationProps) => {
     onNavigate?.();
   };
 
+
   return (
     <div className="w-full h-screen flex flex-col overflow-hidden">
-      <div
-        className="flex-1 overflow-y-auto navigation-scroll"
-        style={{
-          scrollbarWidth: "none",
-          msOverflowStyle: "none",
-          height: "calc(100vh - 50px)",
-          paddingBottom: "10px",
+      <div 
+        className="flex-1 overflow-y-auto navigation-scroll" 
+        style={{ 
+          scrollbarWidth: 'none', 
+          msOverflowStyle: 'none',
+          height: 'calc(100vh - 50px)',
+          paddingBottom: '10px'
         }}
       >
         <Accordion
@@ -561,15 +562,6 @@ const Navigation = ({ currentPath, onNavigate }: NavigationProps) => {
                     Example: Google Ads conversion tracking setup
                   </NavLink>
                 </li>
-                <li>
-                  <NavLink
-                    to="/google-tag-manager/11-gtm-faq-troubleshooting-guide"
-                    className={navLinkClass}
-                    onClick={handleLinkClick}
-                  >
-                    FAQ and Troubleshooting guide
-                  </NavLink>
-                </li>
               </ul>
             </AccordionContent>
           </AccordionItem>
@@ -653,17 +645,26 @@ const Navigation = ({ currentPath, onNavigate }: NavigationProps) => {
                     PCI responsibility matrix
                   </NavLink>
                 </li>
+                <li>
+                  <NavLink
+                    to="/security/04-outgoing-ip-addresses"
+                    className={navLinkClass}
+                    onClick={handleLinkClick}
+                  >
+                    Outgoing IP addresses
+                  </NavLink>
+                </li>
               </ul>
             </AccordionContent>
           </AccordionItem>
         </Accordion>
       </div>
-
-      <div className="fixed bottom-0 left-0 w-full md:w-[329px] border-t border-sidebar-border p-2 flex justify-between items-center bg-sidebar z-10">
+      
+      <div className="fixed bottom-0 left-0 w-[250px] border-t border-sidebar-border p-2 flex justify-between items-center bg-sidebar z-10">
         <ThemeToggle />
       </div>
     </div>
   );
 };
 
-export default Navigation;
+export default Navigation;