stripe

components/FeedbackModal.tsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
-import { X, Info, CheckCircle, AlertTriangle, MessageSquare, Calendar, ChevronDown, ChevronUp } from 'lucide-react';
+
+import React, { useState, useEffect } from 'react';
+import { X, Info, CheckCircle, AlertTriangle, MessageSquare, Calendar, ChevronDown, ChevronUp, Wallet, ArrowLeft, RefreshCw, CreditCard } from 'lucide-react';
 import { Button } from './Button';
 
 interface FeedbackModalProps {
@@ -7,11 +8,13 @@ interface FeedbackModalProps {
   onClose: () => void;
   onSubmit: (feedbackData: any) => Promise<void>;
   loading: boolean;
+  order?: any;
 }
 
-export const FeedbackModal: React.FC<FeedbackModalProps> = ({ isOpen, onClose, onSubmit, loading }) => {
+export const FeedbackModal: React.FC<FeedbackModalProps> = ({ isOpen, onClose, onSubmit, loading, order }) => {
   // --- STATE ---
   const [mainDecision, setMainDecision] = useState<'approved' | 'minor' | 'major' | null>(null);
+  const [showPayment, setShowPayment] = useState(false);
   
   // Approval Flow
   const [approvalConfirmed, setApprovalConfirmed] = useState(false);
@@ -38,8 +41,28 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({ isOpen, onClose, o
   
   const [revisionConfirmed, setRevisionConfirmed] = useState(false);
 
+  useEffect(() => {
+    if (isOpen) {
+      setMainDecision(null);
+      setShowPayment(false);
+      setApprovalConfirmed(false);
+      setRevisionConfirmed(false);
+      // Reset other fields if needed
+    }
+  }, [isOpen]);
+
   if (!isOpen) return null;
 
+  // --- LOGIC ---
+  const paymentDetails = order?.details?.payment_summary;
+  const totalAmount = paymentDetails?.total || 0;
+  const advanceAmount = paymentDetails?.advance || 0;
+  const remainingAmount = paymentDetails?.remaining || 0;
+  const isCustomPrice = paymentDetails?.is_custom;
+  
+  // We show payment step ONLY if Approved AND there is a remaining amount AND it's not custom price (unless handled)
+  const shouldShowPaymentStep = mainDecision === 'approved' && remainingAmount > 0 && !isCustomPrice;
+
   // --- HANDLERS ---
   const handleCheckbox = (
     currentList: string[], 
@@ -71,7 +94,8 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({ isOpen, onClose, o
       decision: mainDecision,
       submittedAt: new Date().toISOString(),
       approval: mainDecision === 'approved' ? {
-        confirmed: approvalConfirmed
+        confirmed: approvalConfirmed,
+        paymentComplete: showPayment // Flag that payment step was shown
       } : null,
       revision: isRevision ? {
         design: { selected: designCheckboxes, comment: designText },
@@ -88,7 +112,12 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({ isOpen, onClose, o
     onSubmit(feedbackData);
   };
 
+  const handleProceedToPayment = () => {
+    setShowPayment(true);
+  };
+
   const commonInputStyles = "w-full p-4 border border-gray-300 rounded-xl text-sm font-medium text-black placeholder-gray-400 focus:ring-4 focus:ring-primary/10 focus:border-primary outline-none bg-white transition-all shadow-sm";
+  const formatPrice = (num: number) => num.toLocaleString('hu-HU') + ' Ft';
 
   const renderFeedbackCategory = (
     title: string,
@@ -133,157 +162,233 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({ isOpen, onClose, o
 
   return (
     <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-gray-900/75 backdrop-blur-sm overflow-y-auto">
-      <div className="bg-white rounded-3xl shadow-2xl w-full max-w-3xl flex flex-col my-8 relative animate-fade-in-up border border-white/20">
+      <div className="bg-white rounded-3xl shadow-2xl w-full max-w-3xl flex flex-col my-8 relative animate-fade-in-up border border-white/20 min-h-[600px]">
         
         <button onClick={onClose} className="absolute top-6 right-6 p-2 hover:bg-gray-100 rounded-full transition-colors z-10 bg-white shadow-sm border border-gray-100">
           <X className="w-5 h-5 text-gray-500" />
         </button>
 
-        <div className="p-8 border-b border-gray-100 bg-gradient-to-r from-blue-50/50 to-purple-50/50 rounded-t-3xl">
-          <div className="flex items-start gap-4">
-            <div className="bg-white p-3 rounded-2xl shadow-md text-primary border border-gray-100">
-              <MessageSquare className="w-6 h-6" />
-            </div>
-            <div>
-              <h2 className="text-2xl font-black text-gray-900 tracking-tighter">Visszajelzés a Weboldalról</h2>
-              <p className="text-sm text-gray-500 font-medium mt-1">A bemutató verzió alapján kérjük jelezd, ha valamit módosítanál.</p>
-            </div>
+        {showPayment ? (
+          /* PAYMENT SUMMARY VIEW */
+          <div className="flex flex-col h-full animate-fade-in">
+             <div className="p-8 border-b border-gray-100 bg-gradient-to-r from-blue-50/50 to-purple-50/50 rounded-t-3xl">
+                <div className="flex items-center gap-4">
+                   <button onClick={() => setShowPayment(false)} className="p-2 bg-white rounded-xl shadow-sm border border-gray-100 hover:bg-gray-50 transition-colors text-gray-600">
+                      <ArrowLeft className="w-5 h-5" />
+                   </button>
+                   <div>
+                      <h2 className="text-2xl font-black text-gray-900 tracking-tighter">Véglegesítés & Fizetés</h2>
+                      <p className="text-sm text-gray-500 font-medium mt-1">A fennmaradó összeg rendezése a projekt lezárásához.</p>
+                   </div>
+                </div>
+             </div>
+
+             <div className="p-8 md:p-12 flex-grow space-y-10">
+                <div className="text-center">
+                   <div className="w-20 h-20 bg-green-50 rounded-3xl flex items-center justify-center mx-auto mb-6 text-green-600 shadow-sm border border-green-100">
+                      <Wallet className="w-10 h-10" />
+                   </div>
+                   <h3 className="text-xl font-bold text-gray-900 mb-2">Projekt Elszámolás</h3>
+                   <p className="text-gray-500 text-sm max-w-md mx-auto">A demó oldal jóváhagyásával a projekt a befejező szakaszba lép. Kérjük, egyenlítse ki a fennmaradó összeget.</p>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                   <div className="bg-gray-50 p-6 rounded-[24px] border border-gray-100 flex flex-col items-center text-center">
+                      <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2">Projekt Teljes Ára</p>
+                      <p className="text-lg font-bold text-gray-900">{formatPrice(totalAmount)}</p>
+                   </div>
+                   <div className="bg-green-50/50 p-6 rounded-[24px] border border-green-100 flex flex-col items-center text-center">
+                      <p className="text-[10px] font-black text-green-600 uppercase tracking-widest mb-2">Már Befizetve (Előleg)</p>
+                      <p className="text-lg font-bold text-green-700">{formatPrice(advanceAmount)}</p>
+                   </div>
+                </div>
+
+                <div className="bg-primary/5 p-10 rounded-[32px] border-2 border-primary/20 text-center shadow-xl shadow-primary/5 relative overflow-hidden">
+                   <div className="absolute -top-10 -right-10 w-40 h-40 bg-primary/10 rounded-full blur-3xl"></div>
+                   <p className="text-[11px] font-black text-primary uppercase tracking-[0.3em] mb-4">Most Fizetendő (Fennmaradó)</p>
+                   <div className="text-4xl md:text-5xl font-black text-primary mb-6 tracking-tighter">
+                      {formatPrice(remainingAmount)}
+                   </div>
+                   <div className="flex justify-center">
+                      <Button 
+                        onClick={handleSubmit} 
+                        disabled={loading} 
+                        className="font-black uppercase text-[10px] tracking-widest px-12 py-4 h-auto shadow-2xl shadow-primary/40"
+                      >
+                        {loading ? <RefreshCw className="w-4 h-4 animate-spin mr-2" /> : <CreditCard className="w-4 h-4 mr-2" />}
+                        FIZETÉS & JÓVÁHAGYOM
+                      </Button>
+                   </div>
+                </div>
+
+                <div className="bg-amber-50 border border-amber-200 p-6 rounded-2xl flex gap-4">
+                   <div className="shrink-0"><Info className="w-5 h-5 text-amber-500" /></div>
+                   <p className="text-xs text-amber-800 font-medium leading-relaxed">
+                      <strong>Fontos:</strong> A befizetés után a rendszer automatikusan kiállítja a végszámlát és elküldi e-mailben. A fejlesztő csapat értesítést kap a jóváhagyásról és megkezdi a végleges élesítést.
+                   </p>
+                </div>
+             </div>
           </div>
-        </div>
-
-        <div className="p-8 md:p-10 space-y-10">
-          <div>
-            <h3 className="text-lg font-bold text-gray-900 mb-5 flex items-center gap-2">
-               Döntés a továbblépésről <span className="text-red-500">*</span>
-            </h3>
-            <div className="grid grid-cols-1 gap-4">
-              {[
-                { id: 'approved', label: 'Igen, jóváhagyom a terveket', color: 'green', icon: '✅' },
-                { id: 'minor', label: 'Alapvetően jó, de kisebb javításokat kérek', color: 'yellow', icon: '🔧' },
-                { id: 'major', label: 'Nem megfelelő, jelentős módosításra van szükség', color: 'red', icon: '❌' }
-              ].map(opt => (
-                <label key={opt.id} className={`flex items-center p-5 border-2 rounded-2xl cursor-pointer transition-all ${mainDecision === opt.id ? `border-${opt.color}-500 bg-${opt.color}-50 shadow-lg ring-1 ring-${opt.color}-500` : 'border-gray-100 hover:border-gray-200'}`}>
-                  <input 
-                    type="radio" 
-                    name="decision" 
-                    checked={mainDecision === opt.id} 
-                    onChange={() => setMainDecision(opt.id as any)}
-                    className={`w-6 h-6 text-${opt.color}-600 focus:ring-${opt.color}-500 border-gray-300`}
-                  />
-                  <span className="ml-4 font-bold text-gray-900">{opt.icon} {opt.label}</span>
-                </label>
-              ))}
+        ) : (
+          /* STANDARD FEEDBACK FORM */
+          <>
+            <div className="p-8 border-b border-gray-100 bg-gradient-to-r from-blue-50/50 to-purple-50/50 rounded-t-3xl">
+              <div className="flex items-start gap-4">
+                <div className="bg-white p-3 rounded-2xl shadow-md text-primary border border-gray-100">
+                  <MessageSquare className="w-6 h-6" />
+                </div>
+                <div>
+                  <h2 className="text-2xl font-black text-gray-900 tracking-tighter">Visszajelzés a Weboldalról</h2>
+                  <p className="text-sm text-gray-500 font-medium mt-1">A bemutató verzió alapján kérjük jelezd, ha valamit módosítanál.</p>
+                </div>
+              </div>
             </div>
-          </div>
 
-          {mainDecision === 'approved' && (
-            <div className="animate-fade-in bg-green-50 p-6 rounded-2xl border-2 border-green-200 shadow-inner">
-              <h3 className="text-green-900 font-black mb-4 flex items-center gap-2 uppercase text-sm tracking-widest">
-                <CheckCircle className="w-5 h-5" /> Megerősítés
-              </h3>
-              <label className="flex items-start cursor-pointer group">
-                <input 
-                  type="checkbox" 
-                  checked={approvalConfirmed}
-                  onChange={(e) => setApprovalConfirmed(e.target.checked)}
-                  className="mt-1 w-6 h-6 text-green-600 rounded-lg focus:ring-green-500 border-green-300"
-                />
-                <span className="ml-4 text-sm text-green-800 font-bold leading-relaxed">
-                  Tudomásul veszem, hogy a jóváhagyás után a végleges fejlesztés megkezdődik a tervek alapján.
-                </span>
-              </label>
+            <div className="p-8 md:p-10 space-y-10 flex-grow overflow-y-auto">
+              <div>
+                <h3 className="text-lg font-bold text-gray-900 mb-5 flex items-center gap-2">
+                   Döntés a továbblépésről <span className="text-red-500">*</span>
+                </h3>
+                <div className="grid grid-cols-1 gap-4">
+                  {[
+                    { id: 'approved', label: 'Igen, jóváhagyom a terveket', color: 'green', icon: '✅' },
+                    { id: 'minor', label: 'Alapvetően jó, de kisebb javításokat kérek', color: 'yellow', icon: '🔧' },
+                    { id: 'major', label: 'Nem megfelelő, jelentős módosításra van szükség', color: 'red', icon: '❌' }
+                  ].map(opt => (
+                    <label key={opt.id} className={`flex items-center p-5 border-2 rounded-2xl cursor-pointer transition-all ${mainDecision === opt.id ? `border-${opt.color}-500 bg-${opt.color}-50 shadow-lg ring-1 ring-${opt.color}-500` : 'border-gray-100 hover:border-gray-200'}`}>
+                      <input 
+                        type="radio" 
+                        name="decision" 
+                        checked={mainDecision === opt.id} 
+                        onChange={() => setMainDecision(opt.id as any)}
+                        className={`w-6 h-6 text-${opt.color}-600 focus:ring-${opt.color}-500 border-gray-300`}
+                      />
+                      <span className="ml-4 font-bold text-gray-900">{opt.icon} {opt.label}</span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+
+              {mainDecision === 'approved' && (
+                <div className="animate-fade-in bg-green-50 p-6 rounded-2xl border-2 border-green-200 shadow-inner">
+                  <h3 className="text-green-900 font-black mb-4 flex items-center gap-2 uppercase text-sm tracking-widest">
+                    <CheckCircle className="w-5 h-5" /> Megerősítés
+                  </h3>
+                  <label className="flex items-start cursor-pointer group">
+                    <input 
+                      type="checkbox" 
+                      checked={approvalConfirmed}
+                      onChange={(e) => setApprovalConfirmed(e.target.checked)}
+                      className="mt-1 w-6 h-6 text-green-600 rounded-lg focus:ring-green-500 border-green-300"
+                    />
+                    <span className="ml-4 text-sm text-green-800 font-bold leading-relaxed">
+                      Tudomásul veszem, hogy a jóváhagyással elfogadom a jelenlegi állapotot, és a folyamat a végleges elszámolással folytatódik.
+                    </span>
+                  </label>
+                </div>
+              )}
+
+              {isRevision && (
+                <div className="animate-fade-in space-y-8 border-t border-gray-100 pt-10">
+                  
+                  {renderFeedbackCategory(
+                    "Dizájn módosítások",
+                    ["Színek", "Betűtípusok", "Elrendezés", "Képek / Illusztrációk", "Nem szeretnék dizájn módosítást"],
+                    designCheckboxes, setDesignCheckboxes,
+                    designText, setDesignText,
+                    "Írd le pontosan, mit változtatnál a megjelenésen..."
+                  )}
+
+                  {renderFeedbackCategory(
+                    "Tartalmi változtatások",
+                    ["Szövegek stílusa", "Adatok pontosítása", "Hiányzó tartalom", "Nem szeretnék tartalmi módosítást"],
+                    contentCheckboxes, setContentCheckboxes,
+                    contentText, setContentText,
+                    "Írd le a szöveges módosításokat..."
+                  )}
+
+                  <div>
+                    <h3 className="text-sm font-black text-gray-900 mb-3 uppercase tracking-widest">Mi a legfontosabb kérésed? <span className="text-red-500">*</span></h3>
+                    <textarea
+                      value={priorityText}
+                      onChange={(e) => setPriorityText(e.target.value)}
+                      className={commonInputStyles}
+                      rows={2}
+                      placeholder="A legkritikusabb pont, amin változtatni kell..."
+                    ></textarea>
+                  </div>
+
+                  <div>
+                    <h3 className="text-sm font-black text-gray-900 mb-3 uppercase tracking-widest">Egyéb észrevételek</h3>
+                    <textarea
+                      value={extraNotes}
+                      onChange={(e) => setExtraNotes(e.target.value)}
+                      className={commonInputStyles}
+                      rows={4}
+                      placeholder="Bármi egyéb megjegyzés..."
+                    ></textarea>
+                  </div>
+
+                  <div className="bg-yellow-50 p-6 rounded-2xl border-2 border-yellow-200 shadow-inner">
+                    <label className="flex items-start cursor-pointer">
+                      <input 
+                        type="checkbox" 
+                        checked={revisionConfirmed}
+                        onChange={(e) => setRevisionConfirmed(e.target.checked)}
+                        className="mt-1 w-6 h-6 text-yellow-600 rounded-lg focus:ring-yellow-500 border-yellow-300"
+                      />
+                      <span className="ml-4 text-sm text-yellow-900 font-bold leading-relaxed">
+                        Tudomásul veszem, hogy a kért módosítások feldolgozása után kollégáik keresni fognak az újabb verzióval.
+                      </span>
+                    </label>
+                  </div>
+
+                </div>
+              )}
             </div>
-          )}
 
-          {isRevision && (
-            <div className="animate-fade-in space-y-8 border-t border-gray-100 pt-10">
+            <div className="p-8 border-t border-gray-100 bg-gray-50/50 rounded-b-3xl flex flex-col sm:flex-row justify-end gap-4">
+              <Button variant="white" onClick={onClose} disabled={loading} className="px-10 border-gray-200">Mégse</Button>
               
-              {renderFeedbackCategory(
-                "Dizájn módosítások",
-                ["Színek", "Betűtípusok", "Elrendezés", "Képek / Illusztrációk", "Nem szeretnék dizájn módosítást"],
-                designCheckboxes, setDesignCheckboxes,
-                designText, setDesignText,
-                "Írd le pontosan, mit változtatnál a megjelenésen..."
+              {mainDecision === 'approved' && (
+                shouldShowPaymentStep ? (
+                  <Button 
+                    onClick={handleProceedToPayment} 
+                    disabled={loading || !approvalConfirmed}
+                    className="bg-primary hover:bg-primary-dark text-white font-black uppercase tracking-widest px-10 shadow-lg shadow-primary/20"
+                  >
+                    Tovább a fizetéshez
+                  </Button>
+                ) : (
+                  <Button 
+                    onClick={handleSubmit} 
+                    disabled={loading || !approvalConfirmed}
+                    className="bg-green-600 hover:bg-green-700 text-white font-black uppercase tracking-widest px-10 shadow-lg shadow-green-200"
+                  >
+                    {loading ? 'Küldés...' : 'Végleges Jóváhagyás'}
+                  </Button>
+                )
               )}
 
-              {renderFeedbackCategory(
-                "Tartalmi változtatások",
-                ["Szövegek stílusa", "Adatok pontosítása", "Hiányzó tartalom", "Nem szeretnék tartalmi módosítást"],
-                contentCheckboxes, setContentCheckboxes,
-                contentText, setContentText,
-                "Írd le a szöveges módosításokat..."
+              {isRevision && (
+                <Button 
+                  onClick={handleSubmit} 
+                  disabled={loading || !revisionConfirmed || !priorityText.trim()}
+                  className="font-black uppercase tracking-widest px-10 shadow-lg shadow-primary/20"
+                >
+                  {loading ? 'Küldés...' : 'Visszajelzés Elküldése'}
+                </Button>
               )}
 
-              <div>
-                <h3 className="text-sm font-black text-gray-900 mb-3 uppercase tracking-widest">Mi a legfontosabb kérésed? <span className="text-red-500">*</span></h3>
-                <textarea
-                  value={priorityText}
-                  onChange={(e) => setPriorityText(e.target.value)}
-                  className={commonInputStyles}
-                  rows={2}
-                  placeholder="A legkritikusabb pont, amin változtatni kell..."
-                ></textarea>
-              </div>
-
-              <div>
-                <h3 className="text-sm font-black text-gray-900 mb-3 uppercase tracking-widest">Egyéb észrevételek</h3>
-                <textarea
-                  value={extraNotes}
-                  onChange={(e) => setExtraNotes(e.target.value)}
-                  className={commonInputStyles}
-                  rows={4}
-                  placeholder="Bármi egyéb megjegyzés..."
-                ></textarea>
-              </div>
-
-              <div className="bg-yellow-50 p-6 rounded-2xl border-2 border-yellow-200 shadow-inner">
-                <label className="flex items-start cursor-pointer">
-                  <input 
-                    type="checkbox" 
-                    checked={revisionConfirmed}
-                    onChange={(e) => setRevisionConfirmed(e.target.checked)}
-                    className="mt-1 w-6 h-6 text-yellow-600 rounded-lg focus:ring-yellow-500 border-yellow-300"
-                  />
-                  <span className="ml-4 text-sm text-yellow-900 font-bold leading-relaxed">
-                    Tudomásul veszem, hogy a kért módosítások feldolgozása után kollégáik keresni fognak az újabb verzióval.
-                  </span>
-                </label>
-              </div>
-
+              {!mainDecision && (
+                <Button disabled className="opacity-50 cursor-not-allowed font-black uppercase tracking-widest px-10">
+                  Válasszon opciót
+                </Button>
+              )}
             </div>
-          )}
-        </div>
-
-        <div className="p-8 border-t border-gray-100 bg-gray-50/50 rounded-b-3xl flex flex-col sm:flex-row justify-end gap-4">
-          <Button variant="white" onClick={onClose} disabled={loading} className="px-10 border-gray-200">Mégse</Button>
-          
-          {mainDecision === 'approved' && (
-            <Button 
-              onClick={handleSubmit} 
-              disabled={loading || !approvalConfirmed}
-              className="bg-green-600 hover:bg-green-700 text-white font-black uppercase tracking-widest px-10 shadow-lg shadow-green-200"
-            >
-              {loading ? 'Küldés...' : 'Végleges Jóváhagyás'}
-            </Button>
-          )}
-
-          {isRevision && (
-            <Button 
-              onClick={handleSubmit} 
-              disabled={loading || !revisionConfirmed || !priorityText.trim()}
-              className="font-black uppercase tracking-widest px-10 shadow-lg shadow-primary/20"
-            >
-              {loading ? 'Küldés...' : 'Visszajelzés Elküldése'}
-            </Button>
-          )}
-
-          {!mainDecision && (
-            <Button disabled className="opacity-50 cursor-not-allowed font-black uppercase tracking-widest px-10">
-              Válasszon opciót
-            </Button>
-          )}
-        </div>
+          </>
+        )}
       </div>
     </div>
   );
-};
+};

components/ProfileCompleter.tsx

@@ -23,48 +23,39 @@ export const ProfileCompleter: React.FC = () => {
     const checkProfile = async () => {
       setChecking(true);
       
-      // --- DEMO MODE ---
-      if (!isSupabaseConfigured) {
+      const checkMetadataFallback = () => {
         const meta = user.user_metadata || {};
-        if (!meta.first_name || !meta.last_name || !meta.date_of_birth) {
+        const hasRequiredData = meta.first_name && meta.last_name && meta.date_of_birth;
+        
+        if (!hasRequiredData) {
           setIsOpen(true);
-           if (meta.first_name) setFirstName(meta.first_name);
-           if (meta.last_name) setLastName(meta.last_name);
-           if (meta.date_of_birth) setDateOfBirth(meta.date_of_birth);
+          if (meta.first_name) setFirstName(meta.first_name);
+          if (meta.last_name) setLastName(meta.last_name);
+          if (meta.date_of_birth) setDateOfBirth(meta.date_of_birth);
         }
+      };
+
+      if (!isSupabaseConfigured) {
+        checkMetadataFallback();
         setChecking(false);
         return;
       }
-      // -----------------
 
       try {
-        const { data, error } = await supabase
+        const { data, error: fetchError } = await supabase
           .from('profiles')
           .select('first_name, last_name, date_of_birth')
           .eq('id', user.id)
           .maybeSingle();
 
-        if (error) {
-          console.error('Error checking profile:', error.message || error);
-          // If DB check fails, fallback to metadata to see if we should block the user.
-          // This prevents locking the user out if the DB is temporarily unavailable or misconfigured,
-          // provided they have the data in their auth metadata.
-          const meta = user.user_metadata || {};
-          const hasMetadata = meta.first_name && meta.last_name && meta.date_of_birth;
-          
-          if (!hasMetadata) {
-             setIsOpen(true);
-             if (meta.first_name) setFirstName(meta.first_name);
-             if (meta.last_name) setLastName(meta.last_name);
-             if (meta.date_of_birth) setDateOfBirth(meta.date_of_birth);
-          }
+        if (fetchError) {
+          // Ha hálózati hiba van (pl. adblocker vagy CORS), a metadata-ra hagyatkozunk csendben
+          checkMetadataFallback();
           return;
         }
 
-        // If no profile exists, or names/dob are missing
         if (!data || !data.first_name || !data.last_name || !data.date_of_birth) {
           setIsOpen(true);
-          // Pre-fill if partial data exists
           if (data?.first_name) setFirstName(data.first_name);
           else if (user.user_metadata?.first_name) setFirstName(user.user_metadata.first_name);
 
@@ -75,7 +66,13 @@ export const ProfileCompleter: React.FC = () => {
           else if (user.user_metadata?.date_of_birth) setDateOfBirth(user.user_metadata.date_of_birth);
         }
       } catch (err: any) {
-        console.error('Unexpected error in ProfileCompleter:', err);
+        // Hálózat-specifikus hibák esetén nem logolunk noisyt
+        if (err instanceof TypeError && err.message.includes('fetch')) {
+          checkMetadataFallback();
+        } else {
+          console.debug('Supabase connection issue, using metadata fallback.');
+          checkMetadataFallback();
+        }
       } finally {
         setChecking(false);
       }
@@ -96,11 +93,8 @@ export const ProfileCompleter: React.FC = () => {
     }
 
     try {
-      // --- DEMO MODE UPDATE ---
       if (!isSupabaseConfigured && user) {
-        await new Promise(resolve => setTimeout(resolve, 800)); // Fake delay
-        
-        // Update local storage session
+        await new Promise(resolve => setTimeout(resolve, 800));
         const storedSession = localStorage.getItem('demo_user_session');
         if (storedSession) {
           const parsed = JSON.parse(storedSession);
@@ -111,15 +105,13 @@ export const ProfileCompleter: React.FC = () => {
             date_of_birth: dateOfBirth
           };
           localStorage.setItem('demo_user_session', JSON.stringify(parsed));
-          refreshDemoUser(); // Refresh context
+          refreshDemoUser();
         }
         setIsOpen(false);
         return;
       }
-      // ------------------------
 
       if (user) {
-        // 1. Update Profile Table
         const { error: dbError } = await supabase
           .from('profiles')
           .upsert({
@@ -133,7 +125,6 @@ export const ProfileCompleter: React.FC = () => {
 
         if (dbError) throw dbError;
 
-        // 2. Update Auth Metadata (optional, but good for consistency)
         await supabase.auth.updateUser({
           data: {
             first_name: firstName,
@@ -143,8 +134,6 @@ export const ProfileCompleter: React.FC = () => {
         });
 
         setIsOpen(false);
-        // We do not reload here to avoid infinite loops if checks fail on reload. 
-        // The state close is enough.
       }
     } catch (err: any) {
       console.error('Error updating profile:', err);
@@ -164,9 +153,7 @@ export const ProfileCompleter: React.FC = () => {
             <User className="w-8 h-8 text-white" />
           </div>
           <h2 className="text-2xl font-bold">Hiányzó Adatok</h2>
-          <p className="text-blue-100 text-sm mt-2">
-            Kérjük, a folytatáshoz adja meg a hiányzó adatait.
-          </p>
+          <p className="text-blue-100 text-sm mt-2">Kérjük, a folytatáshoz adja meg a hiányzó adatait.</p>
         </div>
 
         <div className="p-8">
@@ -177,71 +164,33 @@ export const ProfileCompleter: React.FC = () => {
                 <span>{error}</span>
               </div>
             )}
-
             <div className="space-y-4">
               <div>
-                <label htmlFor="comp_lastname" className="block text-sm font-medium text-gray-700 mb-1">
-                  Vezetéknév
-                </label>
-                <input
-                  id="comp_lastname"
-                  type="text"
-                  value={lastName}
-                  onChange={(e) => setLastName(e.target.value)}
-                  className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900"
-                  placeholder="Kovács"
-                  required
-                />
+                <label htmlFor="comp_lastname" className="block text-sm font-medium text-gray-700 mb-1">Vezetéknév</label>
+                <input id="comp_lastname" type="text" value={lastName} onChange={(e) => setLastName(e.target.value)} className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900" placeholder="Kovács" required />
               </div>
-
               <div>
-                <label htmlFor="comp_firstname" className="block text-sm font-medium text-gray-700 mb-1">
-                  Keresztnév
-                </label>
-                <input
-                  id="comp_firstname"
-                  type="text"
-                  value={firstName}
-                  onChange={(e) => setFirstName(e.target.value)}
-                  className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900"
-                  placeholder="János"
-                  required
-                />
+                <label htmlFor="comp_firstname" className="block text-sm font-medium text-gray-700 mb-1">Keresztnév</label>
+                <input id="comp_firstname" type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900" placeholder="János" required />
               </div>
-
               <div>
-                <label htmlFor="comp_dob" className="block text-sm font-medium text-gray-700 mb-1">
-                  Születési dátum
-                </label>
+                <label htmlFor="comp_dob" className="block text-sm font-medium text-gray-700 mb-1">Születési dátum</label>
                 <div className="relative">
-                    <input
-                      id="comp_dob"
-                      type="date"
-                      value={dateOfBirth}
-                      onChange={(e) => setDateOfBirth(e.target.value)}
-                      className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900"
-                      required
-                    />
+                    <input id="comp_dob" type="date" value={dateOfBirth} onChange={(e) => setDateOfBirth(e.target.value)} className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900" required />
                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                        <Calendar className="h-5 w-5 text-gray-400" />
                      </div>
                 </div>
               </div>
             </div>
-
             <div className="pt-2">
               <Button type="submit" fullWidth disabled={loading} className="flex justify-center items-center">
                 {loading ? 'Mentés...' : (
-                  <>
-                    Adatok Mentése <Save className="ml-2 w-4 h-4" />
-                  </>
+                  <>Adatok Mentése <Save className="ml-2 w-4 h-4" /></>
                 )}
               </Button>
             </div>
-            
-            <p className="text-xs text-center text-gray-500">
-              Ezekre az adatokra a számlázáshoz és a kapcsolattartáshoz van szükségünk.
-            </p>
+            <p className="text-xs text-center text-gray-500">Ezekre az adatokra a számlázáshoz és a kapcsolattartáshoz van szükségünk.</p>
           </form>
         </div>
       </div>