feat: implement secure multi-tenancy, RBAC, and premium dark mode

- Enforced tenant isolation and Role-Based Access Control across all API routes

- Implemented secure profile avatar upload using multer and UUIDs

- Redesigned UI with a premium "Onyx & Gold" Charcoal dark mode

- Added Funnel Stage and Origin filters to Dashboard and User Detail pages

- Replaced "Referral" with "Indicação" across the platform and database

- Optimized Dockerfile and local environment setup for reliable deployments

- Fixed frontend syntax errors and improved KPI/Chart visualizations

components/ProductLists.tsx

@@ -14,29 +14,29 @@ interface ProductListsProps {
 
 export const ProductLists: React.FC<ProductListsProps> = ({ requested, sold }) => {
   const ListSection = ({ title, icon: Icon, data, color }: { title: string, icon: any, data: ProductStat[], color: string }) => (
-    <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex-1">
+    <div className="bg-white dark:bg-dark-card p-6 rounded-2xl shadow-sm border border-zinc-100 dark:border-dark-border flex-1 transition-colors">
       <div className="flex items-center gap-2 mb-4">
-        <div className={`p-2 rounded-lg ${color === 'blue' ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600'}`}>
+        <div className={`p-2 rounded-lg ${color === 'blue' ? 'bg-blue-100 dark:bg-blue-950/50 text-blue-600 dark:text-blue-400' : 'bg-green-100 dark:bg-green-950/50 text-green-600 dark:text-green-400'}`}>
           <Icon size={18} />
         </div>
-        <h3 className="font-bold text-slate-800">{title}</h3>
+        <h3 className="font-bold text-zinc-800 dark:text-dark-text">{title}</h3>
       </div>
       <ul className="space-y-4">
         {data.map((item, idx) => (
           <li key={idx} className="flex items-center justify-between group">
             <div className="flex items-center gap-3">
-              <span className={`flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold ${idx < 3 ? 'bg-slate-800 text-white' : 'bg-slate-100 text-slate-500'}`}>
+              <span className={`flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold ${idx < 3 ? 'bg-zinc-800 dark:bg-brand-yellow text-white dark:text-zinc-950' : 'bg-zinc-100 dark:bg-dark-bg text-zinc-500 dark:text-dark-muted'}`}>
                 {idx + 1}
               </span>
-              <span className="text-sm font-medium text-slate-700 group-hover:text-slate-900">{item.name}</span>
+              <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300 group-hover:text-zinc-900 dark:group-hover:text-dark-text">{item.name}</span>
             </div>
             <div className="text-right">
-              <span className="text-sm font-bold text-slate-900 block">{item.count}</span>
-              <span className="text-[10px] text-slate-400">{item.percentage}%</span>
+              <span className="text-sm font-bold text-zinc-900 dark:text-zinc-100 block">{item.count}</span>
+              <span className="text-[10px] text-zinc-400 dark:text-dark-muted">{item.percentage}%</span>
             </div>
           </li>
         ))}
-        {data.length === 0 && <li className="text-sm text-slate-400 italic">Nenhum dado disponível.</li>}
+        {data.length === 0 && <li className="text-sm text-zinc-400 dark:text-dark-muted italic">Nenhum dado disponível.</li>}
       </ul>
     </div>
   );