Client Dashboard

interface ClientProfile {
  id: string;
  full_name: string;
  email: string;
  credits: number;          // Allocated by partner
  role: 'client';
  partner_id: string;       // Linked to partner
  total_generations: number;
  created_at: timestamp;
}

<div className="flex items-center gap-2">
  <Zap className="w-5 h-5 text-yellow-400" />
  <span className="font-bold">{profile.credits.toLocaleString()}</span>
  <span className="text-xs text-white/40">créditos</span>
</div>

const handleCreateEvent = async (eventData) => {
  // Verify client has sufficient credits
  if (profile.credits < eventData.credits_allocated) {
    showToast('Créditos insuficientes. Contacta a tu proveedor.', 'error');
    return;
  }
  
  // Create event
  const { data, error } = await supabase
    .from('events')
    .insert({
      ...eventData,
      client_id: profile.id,
      partner_id: profile.partner_id  // Maintain partner link
    });
  
  // Deduct credits
  await supabase
    .from('profiles')
    .update({ 
      credits: profile.credits - eventData.credits_allocated 
    })
    .eq('id', profile.id);
};

const PartnerInfo = ({ profile }) => {
  const [partner, setPartner] = useState(null);
  
  useEffect(() => {
    supabase
      .from('partners')
      .select('company_name, contact_email')
      .eq('id', profile.partner_id)
      .single()
      .then(({ data }) => setPartner(data));
  }, [profile.partner_id]);
  
  return (
    <div className="bg-white/5 p-4 rounded-xl">
      <p className="text-xs text-white/40 mb-1">Proveedor</p>
      <p className="font-bold">{partner?.company_name}</p>
      <a href={`mailto:${partner?.contact_email}`} className="text-xs text-accent">
        Contactar
      </a>
    </div>
  );
};

const ClientDashboard = ({ profile }) => {
  return (
    <div className="max-w-4xl mx-auto">  {/* Narrower than partner dashboard */}
      <CreditBalance credits={profile.credits} />
      <EventsList clientId={profile.id} />
      <QuickCreateEvent />
    </div>
  );
};

event.config = {
  ...partner.config,           // Inherit partner defaults
  ...clientCustomizations     // Override with client prefs
}

const eventStats = {
  generations_count: 142,
  credits_used: 142,
  credits_remaining: 58,
  most_used_style: "John Wick - Baba Yaga",
  peak_hour: "20:00-21:00",
  average_session: "3.5 minutes"
};