feat: refactor settings page into tabbed layout with dedicated integr…

AGENTS.md

@@ -8,6 +8,8 @@ Main apps:
 - `apps/dashboard-api`: admin/project management API for the dashboard
 - `apps/public-api`: public project API for data, auth, storage
 - `apps/web-dashboard`: React/Vite dashboard
+- `apps/consumer`: Consumer Worker for background jobs and webhooks
+- `apps/python-service`: Python AI Microservice (FastAPI/Groq)
 - `packages/common`: shared models, validation, middleware, encryption, DB/model utilities
 
 SDKs:
@@ -18,6 +20,13 @@ SDKs:
 
 Workspace scripts are defined in [package.json](/package.json).
 
+## Production Deployment Endpoints & Domains
+
+- **Frontend Landing**: `https://urbackend.bitbros.in`
+- **Dashboard App**: `https://app.urbackend.bitbros.in`
+- **Dashboard API (Internal/Admin)**: `https://api.urbackend.bitbros.in`
+- **Public API (SDK & User Auth)**: `https://api.ub.bitbros.in`
+
 ## Important project rules
 
 1. Do not treat `users` like a normal collection.
@@ -151,6 +160,12 @@ cd apps/web-dashboard
 npm run build
 ```
 
+Run python service tests:
+```bash
+cd apps/python-service
+pytest
+```
+
 Run SDK tests:
 ```bash
 # JS Core SDK
@@ -169,6 +184,7 @@ pytest
 Before shipping auth, RLS, or schema changes:
 - run `apps/public-api` tests
 - run `apps/dashboard-api` tests
+- run `apps/python-service` tests
 - run `@urbackend/sdk` tests
 - run `@urbackend/react` tests
 - run `apps/web-dashboard` lint

apps/web-dashboard/src/components/Auth/SocialAuthConfig.jsx

@@ -1,7 +1,11 @@
 import React from 'react';
-import { Settings } from 'lucide-react';
+import { Settings, ExternalLink } from 'lucide-react';
+import { useNavigate, useParams } from 'react-router-dom';
 
 const SocialAuthConfig = ({ authProviders, onOpenModal, setSelectedProvider }) => {
+  const navigate = useNavigate();
+  const { projectId } = useParams();
+
   return (
     <div className="glass-card" style={{ padding: '1.25rem', borderRadius: '12px', marginBottom: '2rem' }}>
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '1rem', marginBottom: '1.25rem' }}>
@@ -13,9 +17,19 @@ const SocialAuthConfig = ({ authProviders, onOpenModal, setSelectedProvider }) =
             Configure third-party login providers for your application.
           </p>
         </div>
-        <button className="btn btn-primary" onClick={onOpenModal} style={{ height: '32px', fontSize: '0.75rem' }}>
-          Open Settings
-        </button>
+        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+          <button
+            className="btn btn-secondary"
+            onClick={() => navigate(`/project/${projectId}/settings?tab=integrations`)}
+            style={{ height: '32px', fontSize: '0.75rem', display: 'flex', alignItems: 'center', gap: '5px' }}
+          >
+            <ExternalLink size={13} />
+            Integrations
+          </button>
+          <button className="btn btn-primary" onClick={onOpenModal} style={{ height: '32px', fontSize: '0.75rem' }}>
+            Open Settings
+          </button>
+        </div>
       </div>
 
       <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '0.75rem' }}>

apps/web-dashboard/src/components/Settings/AllowedDomainsForm.jsx

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from "react";
+import api from "../../utils/api";
+import toast from "react-hot-toast";
+import { Globe, Plus, AlertTriangle, X } from "lucide-react";
+import { SettingsCard } from "./formPrimitives";
+import { inputStyle } from "../../utils/styles";
+
+export default function AllowedDomainsForm({ project, projectId, onProjectUpdate, role }) {
+    const isViewer = role === 'viewer';
+    const [domains, setDomains] = useState(project?.allowedDomains || []);
+    const [newDomain, setNewDomain] = useState("");
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => { 
+        if (project?.allowedDomains) {
+            Promise.resolve().then(() => setDomains(project.allowedDomains)); 
+        }
+    }, [project?.allowedDomains]);
+
+    const handleUpdate = async (updatedDomains) => {
+        setLoading(true);
+        try {
+            await api.patch(`/api/projects/${projectId}/allowed-domains`, { domains: updatedDomains });
+            toast.success("Allowed domains updated!");
+            setDomains(updatedDomains);
+            onProjectUpdate((prev) => ({ ...prev, allowedDomains: updatedDomains }));
+        } catch (err) {
+            toast.error(err.response?.data?.message || err.response?.data?.error || "Failed to update allowed domains");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const addDomain = () => {
+        let domain = newDomain.trim();
+        if (!domain) return;
+        if (domain !== "*" && domain.endsWith("/")) domain = domain.slice(0, -1);
+        if (domains.includes(domain)) return toast.error("Domain already added");
+        const updated = domain === "*" ? ["*"] : [...domains.filter(d => d !== "*"), domain];
+        handleUpdate(updated);
+        setNewDomain("");
+    };
+
+    const removeDomain = (d) => handleUpdate(domains.filter(x => x !== d));
+
+    return (
+        <SettingsCard title="Allowed Domains (CORS)" icon={Globe} iconColor="#6366f1" accentColor="#6366f1">
+            <p style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginBottom: '0.75rem', lineHeight: 1.5 }}>
+                Restrict which websites can send requests using your <strong>Publishable API Key</strong>.{' '}
+                Use <code>*</code> to allow all, or specify like <code>https://example.com</code>.
+            </p>
+
+            {!isViewer && (
+                <div style={{ display: 'flex', gap: '8px', marginBottom: '10px' }}>
+                    <input
+                        type="text"
+                        className="input-field"
+                        placeholder="https://mywebsite.com or *.mywebsite.com"
+                        value={newDomain}
+                        onChange={(e) => setNewDomain(e.target.value)}
+                        onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); addDomain(); } }}
+                        style={{ ...inputStyle, flex: 1 }}
+                    />
+                    <button
+                        onClick={addDomain}
+                        className="btn btn-secondary"
+                        disabled={loading || !newDomain.trim()}
+                        style={{ height: '30px', fontSize: '0.75rem', padding: '0 12px', gap: '4px', flexShrink: 0 }}
+                    >
+                        <Plus size={12} /> Add
+                    </button>
+                </div>
+            )}
+
+            {domains.length === 0 ? (
+                <div style={{ padding: '10px 12px', textAlign: 'center', color: 'var(--color-text-muted)', fontSize: '0.72rem', background: 'rgba(255,255,255,0.02)', borderRadius: '6px', border: '1px dashed var(--color-border)' }}>
+                    No domains configured — your publishable key won't work on the web. Add <code>*</code> to allow all.
+                </div>
+            ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
+                    {domains.map((domain) => (
+                        <div key={domain} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--color-bg-input)', border: '1px solid var(--color-border)', borderRadius: '4px' }}>
+                            <div style={{ fontSize: '0.75rem' }}>
+                                {domain === "*" ? (
+                                    <span style={{ color: '#10b981', fontWeight: 600, display: 'flex', alignItems: 'center', gap: '5px', fontSize: '0.72rem' }}>
+                                        <AlertTriangle size={11} color="#10b981" /> ALLOW ALL (*)
+                                    </span>
+                                ) : (
+                                    <span style={{ fontFamily: 'monospace', fontSize: '0.72rem' }}>{domain}</span>
+                                )}
+                            </div>
+                            {!isViewer && (
+                                <button
+                                    onClick={() => removeDomain(domain)}
+                                    disabled={loading}
+                                    style={{ background: 'transparent', border: 'none', color: 'var(--color-text-muted)', cursor: 'pointer', padding: '2px', display: 'flex', alignItems: 'center', borderRadius: '3px' }}
+                                    onMouseOver={(e) => e.currentTarget.style.color = '#ea5455'}
+                                    onMouseOut={(e) => e.currentTarget.style.color = 'var(--color-text-muted)'}
+                                >
+                                    <X size={13} />
+                                </button>
+                            )}
+                        </div>
+                    ))}
+                </div>
+            )}
+        </SettingsCard>
+    );
+}

apps/web-dashboard/src/components/Settings/DatabaseConfigForm.jsx

@@ -0,0 +1,140 @@
+import React, { useState, useEffect } from "react";
+import api from "../../utils/api";
+import toast from "react-hot-toast";
+import { Database, CheckCircle, Server, Copy } from "lucide-react";
+import ConfirmationModal from "../../pages/ConfirmationModal";
+import { SettingsCard } from "./formPrimitives";
+import { inputStyle } from "../../utils/styles";
+
+export default function DatabaseConfigForm({ project, projectId, onProjectUpdate, role }) {
+    const isViewer = role === 'viewer';
+    const [dbUri, setDbUri] = useState("");
+    const [loading, setLoading] = useState(false);
+    const isConfigured = project?.resources?.db?.isExternal || false;
+    const [showForm, setShowForm] = useState(!isConfigured);
+    const [showRemoveModal, setShowRemoveModal] = useState(false);
+    const [serverIp, setServerIp] = useState(null);
+
+    useEffect(() => {
+        let isMounted = true;
+        Promise.resolve().then(() => setShowForm(!(project?.resources?.db?.isExternal || false)));
+        const fetchIp = async () => {
+            try { 
+                const res = await api.get(`/api/server-ip`); 
+                if (isMounted) setServerIp(res.data.ip); 
+            }
+            catch (e) { console.error("Failed to fetch server IP", e); }
+        };
+        fetchIp();
+        return () => { isMounted = false; };
+    }, [project]);
+
+    const copyIp = async () => {
+        if (serverIp && navigator?.clipboard) {
+            try {
+                await navigator.clipboard.writeText(serverIp);
+                toast.success("Server IP copied!");
+            } catch {
+                toast.error("Failed to copy server IP");
+            }
+        }
+    };
+
+    const handleUpdate = async () => {
+        if (!dbUri) return toast.error("Database URI is required");
+        setLoading(true);
+        try {
+            await api.patch(`/api/projects/${projectId}/byod-config`, { dbUri });
+            toast.success("Database configuration updated!");
+            setShowForm(false);
+            setDbUri("");
+        } catch (err) {
+            const errorMsg = err.response?.data?.message || err.response?.data?.error || "Failed to update DB config";
+            if (errorMsg.includes("whitelist Server IP")) {
+                toast.error(<div><b>Access Denied!</b><br />{errorMsg}</div>, { duration: 6000 });
+            } else {
+                toast.error(errorMsg);
+            }
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const executeRemove = async () => {
+        try {
+            await api.delete(`/api/projects/${projectId}/byod-config/db`, { data: { projectId } });
+            toast.success("External database configuration removed!");
+            onProjectUpdate(prev => ({ ...prev, resources: { ...prev.resources, db: { ...prev.resources.db, isExternal: false } } }));
+            setShowForm(true);
+        } catch (err) {
+            toast.error(err.response?.data?.message || err.response?.data?.error || "Failed to remove DB config");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <SettingsCard title="Database (MongoDB)" icon={Database} iconColor="var(--color-primary)" accentColor="var(--color-primary)">
+            {showRemoveModal && (
+                <ConfirmationModal
+                    open={showRemoveModal}
+                    title="Remove Database Config"
+                    message="Remove the external database configuration? This will switch back to the internal database."
+                    onConfirm={() => { executeRemove(); setShowRemoveModal(false); }}
+                    onCancel={() => setShowRemoveModal(false)}
+                />
+            )}
+            <p style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginBottom: '0.75rem' }}>Connect your own MongoDB cluster for full data ownership.</p>
+
+            {isConfigured && !showForm ? (
+                <div style={{ background: 'rgba(16,185,129,0.08)', padding: '10px 12px', borderRadius: '6px', border: '1px solid rgba(16,185,129,0.2)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '7px', color: '#10B981', fontWeight: 600, fontSize: '0.78rem' }}>
+                        <CheckCircle size={13} /> Connected to external MongoDB
+                    </div>
+                    {!isViewer && (
+                        <div style={{ display: 'flex', gap: '6px' }}>
+                            <button className="btn btn-secondary" onClick={() => setShowForm(true)} style={{ height: '26px', fontSize: '0.7rem', padding: '0 10px' }}>Update URI</button>
+                            <button className="btn btn-danger" onClick={() => setShowRemoveModal(true)} disabled={loading} style={{ height: '26px', fontSize: '0.7rem', padding: '0 10px' }}>
+                                {loading ? "Removing..." : "Remove"}
+                            </button>
+                        </div>
+                    )}
+                </div>
+            ) : (
+                <div>
+                    <div className="form-group" style={{ marginBottom: '10px' }}>
+                        <label style={{ display: 'block', marginBottom: '5px', fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>MongoDB Connection URI</label>
+                        <input
+                            type="password"
+                            className="input-field"
+                            placeholder="mongodb+srv://user:pass@cluster.mongodb.net/..."
+                            value={dbUri}
+                            onChange={(e) => setDbUri(e.target.value)}
+                            style={{ ...inputStyle, fontFamily: 'monospace' }}
+                            disabled={isViewer}
+                        />
+                    </div>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: '10px', borderTop: '1px solid var(--color-border)' }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.7rem', color: 'var(--color-text-muted)' }}>
+                            <Server size={11} />
+                            <span>Public IP: <code style={{ background: 'rgba(255,255,255,0.08)', padding: '1px 5px', borderRadius: '3px', fontSize: '0.68rem' }}>{serverIp || "..."}</code></span>
+                            {serverIp && (
+                                <button onClick={copyIp} aria-label="Copy server IP" style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--color-primary)', padding: 0 }}>
+                                    <Copy size={11} />
+                                </button>
+                            )}
+                        </div>
+                        {!isViewer && (
+                            <div style={{ display: 'flex', gap: '8px' }}>
+                                {isConfigured && <button className="btn btn-secondary" onClick={() => setShowForm(false)} style={{ height: '28px', fontSize: '0.72rem', padding: '0 10px' }}>Cancel</button>}
+                                <button onClick={handleUpdate} className="btn btn-primary" disabled={loading} style={{ height: '28px', fontSize: '0.72rem', padding: '0 12px' }}>
+                                    {loading ? "Connecting..." : "Connect Database"}
+                                </button>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
+        </SettingsCard>
+    );
+}