@djangocfg/layouts 2.1.264 → 2.1.266

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -1,26 +1,27 @@
 'use client';
 
-import { Camera, LogOut } from 'lucide-react';
+import { LogOut, MoreHorizontal, Trash2 } from 'lucide-react';
 import moment from 'moment';
-import React, { useEffect, useMemo, useState } from 'react';
-
-import { useAppT } from '@djangocfg/i18n';
-import { toast, useImageLoader } from '@djangocfg/ui-core/hooks';
+import React, { useEffect } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
 import {
-  Avatar,
-  AvatarFallback,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
   Preloader,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
 } from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
 
-import { profileLogger } from '../../utils/logger';
-import { useLogout } from '../../hooks';
 import {
-  ActionButton,
+  AvatarSection,
   DeleteAccountScreen,
-  DeleteAccountSection,
   EditableField,
   Section,
   TwoFactorSection,
@@ -28,174 +29,172 @@ import {
 import { ProfileProvider, useProfileContext } from './context';
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Types
+// Slot + Tab types (public API)
 // ─────────────────────────────────────────────────────────────────────────────
 
-interface ProfileLayoutProps {
+export interface ProfileTab {
+  /** Unique key, used as Tabs value */
+  value: string;
+  /** Trigger label */
+  label: React.ReactNode;
+  /** Tab panel content */
+  content: React.ReactNode;
+}
+
+export interface ProfileSlots {
+  /** Extra items rendered inside the ⋯ dropdown, above the separator before Delete */
+  headerMenuItems?: React.ReactNode;
+  /** Rendered next to the user name (e.g. plan badge, role chip) */
+  headerBadge?: React.ReactNode;
+  /** Rendered below the avatar row, above the tabs */
+  headerAfter?: React.ReactNode;
+  /** Rendered below all tab content */
+  footer?: React.ReactNode;
+}
+
+export interface ProfileLayoutProps {
   onUnauthenticated?: () => void;
   title?: string;
   enable2FA?: boolean;
   enableDeleteAccount?: boolean;
+  /** Extra tabs appended after built-in Profile / Security tabs */
+  tabs?: ProfileTab[];
+  /** Named slots for additional content */
+  slots?: ProfileSlots;
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Avatar with image check
+// Header
 // ─────────────────────────────────────────────────────────────────────────────
 
-function ProfileAvatar({
-  src,
-  initials,
-  isUploading,
-  onChange,
-  label,
-}: {
-  src?: string | null;
-  initials: string;
-  isUploading: boolean;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  label: string;
+function ProfileHeader({ slots, enableDeleteAccount }: {
+  slots?: ProfileSlots;
+  enableDeleteAccount?: boolean;
 }) {
-  const { isLoading, isLoaded } = useImageLoader(src ?? undefined);
+  const { labels, onLogout, setStep } = useProfileContext();
+  const { user } = useAuth();
 
-  return (
-    <div className="relative group mb-4">
-      <Avatar className="w-28 h-28 text-3xl">
-        {/* Skeleton while image is loading */}
-        {src && isLoading && (
-          <div className="w-full h-full rounded-full bg-muted animate-pulse" />
-        )}
+  if (!user) return null;
 
-        {/* Image — show only when loaded successfully */}
-        {src && (
-          <img
-            src={src}
-            alt=""
-            className={cn(
-              'w-full h-full object-cover rounded-full transition-opacity duration-300',
-              isLoaded ? 'opacity-100' : 'opacity-0 absolute inset-0',
-            )}
-          />
-        )}
+  const displayName = user.full_name || user.display_username || user.email;
+  const memberSince = user.date_joined
+    ? moment.utc(user.date_joined).local().format('MMMM YYYY')
+    : null;
 
-        {/* Fallback — show when no src or image failed */}
-        {(!src || (!isLoading && !isLoaded)) && (
-          <AvatarFallback className="bg-muted text-muted-foreground text-2xl font-medium">
-            {initials}
-          </AvatarFallback>
-        )}
-      </Avatar>
+  const badge = slots?.headerBadge ?? null;
+  const menuItems = slots?.headerMenuItems ?? null;
+  const headerAfter = slots?.headerAfter ?? null;
 
-      {/* Upload overlay */}
-      <label
-        className={cn(
-          'absolute inset-0 rounded-full flex items-center justify-center cursor-pointer',
-          'bg-black/0 group-hover:bg-black/40 transition-colors',
-        )}
-        title={label}
-      >
-        <div className="opacity-0 group-hover:opacity-100 transition-opacity">
-          {isUploading ? (
-            <div className="w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin" />
-          ) : (
-            <Camera className="w-6 h-6 text-white drop-shadow" />
+  return (
+    <div className="pb-4 md:pb-6 border-b mb-2">
+      <div className="flex items-center gap-3 md:gap-4">
+        <AvatarSection />
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <h1 className="text-lg md:text-xl font-semibold truncate">{displayName}</h1>
+            {badge}
+          </div>
+          <p className="text-sm text-muted-foreground truncate">{user.email}</p>
+          {memberSince && (
+            <p className="text-xs text-muted-foreground/60 mt-0.5">
+              Member since {memberSince}
+            </p>
           )}
         </div>
-        <input
-          type="file"
-          accept="image/*"
-          onChange={onChange}
-          className="hidden"
-          disabled={isUploading}
-        />
-      </label>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="flex-shrink-0 rounded-full">
+              <MoreHorizontal className="w-4 h-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuItem onClick={onLogout} className="gap-2">
+              <LogOut className="w-4 h-4" />
+              {labels.signOut}
+            </DropdownMenuItem>
+
+            {menuItems && <><DropdownMenuSeparator />{menuItems}</>}
+
+            {enableDeleteAccount && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onClick={() => setStep('delete-account')}
+                  className="gap-2 text-destructive focus:text-destructive"
+                >
+                  <Trash2 className="w-4 h-4" />
+                  {labels.deleteAccount}
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {headerAfter && <div className="mt-4">{headerAfter}</div>}
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Built-in tab: Profile
+// ─────────────────────────────────────────────────────────────────────────────
+
+function TabProfile() {
+  const { labels, onFieldSave } = useProfileContext();
+  const { user } = useAuth();
+  if (!user) return null;
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-6 pt-4">
+      <Section title={labels.personalInfo}>
+        <EditableField label={labels.firstName} value={user.first_name || ''} placeholder={labels.addFirstName} onSave={(v) => onFieldSave('first_name', v)} />
+        <EditableField label={labels.lastName} value={user.last_name || ''} placeholder={labels.addLastName} onSave={(v) => onFieldSave('last_name', v)} />
+        <EditableField label={labels.phone} value={user.phone || ''} placeholder={labels.addPhone} onSave={(v) => onFieldSave('phone', v)} type="phone" />
+      </Section>
+
+      <Section title={labels.work}>
+        <EditableField label={labels.company} value={user.company || ''} placeholder={labels.addCompany} onSave={(v) => onFieldSave('company', v)} />
+        <EditableField label={labels.position} value={user.position || ''} placeholder={labels.addPosition} onSave={(v) => onFieldSave('position', v)} />
+      </Section>
     </div>
   );
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Profile Content
+// Built-in tab: Security
 // ─────────────────────────────────────────────────────────────────────────────
 
-const ProfileContent = ({
+function TabSecurity() {
+  return (
+    <div className="pt-4 space-y-4">
+      <TwoFactorSection />
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main content
+// ─────────────────────────────────────────────────────────────────────────────
+
+function ProfileContent({
   onUnauthenticated,
-  title,
-  enable2FA = false,
+  enable2FA,
   enableDeleteAccount = true,
-}: ProfileLayoutProps) => {
-  const { user, isLoading, uploadAvatar, updateProfile } = useAuth();
-  const [isUploading, setIsUploading] = useState(false);
-  const t = useAppT();
-
-  const labels = useMemo(() => ({
-    title: title || t('layouts.profilePage.title'),
-    personalInfo: t('layouts.profilePage.personalInfo'),
-    work: t('layouts.profilePage.work'),
-    security: t('layouts.profilePage.security'),
-    firstName: t('layouts.profilePage.firstName'),
-    lastName: t('layouts.profilePage.lastName'),
-    email: t('layouts.profilePage.email'),
-    phone: t('layouts.profilePage.phone'),
-    company: t('layouts.profilePage.company'),
-    position: t('layouts.profilePage.position'),
-    notSet: t('layouts.profilePage.notSet'),
-    addFirstName: t('layouts.profilePage.addFirstName') || 'Add first name',
-    addLastName: t('layouts.profilePage.addLastName') || 'Add last name',
-    addPhone: t('layouts.profilePage.addPhone') || 'Add phone number',
-    addCompany: t('layouts.profilePage.addCompany') || 'Add company',
-    addPosition: t('layouts.profilePage.addPosition') || 'Add position',
-    signOut: t('layouts.profilePage.signOut'),
-    changeAvatar: t('layouts.profilePage.changeAvatar'),
-    memberSince: t('layouts.profilePage.memberSince'),
-    profileUpdated: t('layouts.profilePage.profileUpdated'),
-    avatarUpdated: t('layouts.profilePage.avatarUpdated'),
-    failedToUpdate: t('layouts.profilePage.failedToUpdate'),
-    failedToUploadAvatar: t('layouts.profilePage.failedToUploadAvatar'),
-    selectImageFile: t('layouts.profilePage.selectImageFile'),
-    fileTooLarge: t('layouts.profilePage.fileTooLarge'),
-    notAuthenticated: t('layouts.profilePage.notAuthenticated'),
-    pleaseLogIn: t('layouts.profilePage.pleaseLogIn'),
-    loading: t('ui.states.loading'),
-  }), [t, title]);
+  tabs = [],
+  slots,
+}: ProfileLayoutProps) {
+  const { labels } = useProfileContext();
+  const { user, isLoading } = useAuth();
 
   useEffect(() => {
     if (onUnauthenticated && !user && !isLoading) onUnauthenticated();
   }, [onUnauthenticated, user, isLoading]);
 
-  const handleAvatarChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-    if (!file.type.startsWith('image/')) { toast.error(labels.selectImageFile); return; }
-    if (file.size > 5 * 1024 * 1024) { toast.error(labels.fileTooLarge); return; }
-
-    setIsUploading(true);
-    try {
-      await uploadAvatar(file);
-      toast.success(labels.avatarUpdated);
-    } catch (error) {
-      toast.error(labels.failedToUploadAvatar);
-      profileLogger.error('Avatar upload error:', error);
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  const handleFieldSave = async (field: string, value: string) => {
-    try {
-      await updateProfile({ [field]: value });
-      toast.success(labels.profileUpdated);
-    } catch (error: any) {
-      profileLogger.error('Profile update error:', error);
-      toast.error(error?.response?.data?.[field]?.[0] || labels.failedToUpdate);
-      throw error;
-    }
-  };
-
-  const handleLogout = useLogout();
-
   if (isLoading) {
-    return (
-      <Preloader variant="fullscreen" text={labels.loading} size="lg" backdrop backdropOpacity={80} />
-    );
+    return <Preloader variant="fullscreen" text={labels.loading} size="lg" backdrop backdropOpacity={80} />;
   }
 
   if (!user) {
@@ -209,105 +208,66 @@ const ProfileContent = ({
     );
   }
 
-  const getInitials = (name: string) =>
-    name ? name.split(' ').map((w) => w[0]).join('').toUpperCase().slice(0, 2) : 'U';
+  // ── Prepare data before render ──────────────────────────────────────────────
 
-  const displayName = user.full_name || user.display_username || user.email;
-  const memberSinceText = useMemo(
-    () => user.date_joined
-      ? labels.memberSince.replace('{date}', moment.utc(user.date_joined).local().format('MMMM YYYY'))
-      : null,
-    [user.date_joined, labels.memberSince]
-  );
+  const extraTriggers = tabs.map((tab) => (
+    <TabsTrigger key={tab.value} value={tab.value}>
+      {tab.label}
+    </TabsTrigger>
+  ));
 
-  return (
-    <div className="container mx-auto px-4 py-12 max-w-md">
-      {/* Avatar + header */}
-      <div className="flex flex-col items-center mb-12">
-        <ProfileAvatar
-          src={user.avatar}
-          initials={getInitials(user.display_username || user.email || '')}
-          isUploading={isUploading}
-          onChange={handleAvatarChange}
-          label={labels.changeAvatar}
-        />
-
-        <h1 className="text-2xl font-semibold tracking-tight">{displayName}</h1>
-        <p className="text-[15px] text-muted-foreground mt-1">{user.email}</p>
-        {memberSinceText && (
-          <p className="text-[13px] text-muted-foreground/60 mt-2">{memberSinceText}</p>
-        )}
-      </div>
+  const extraPanels = tabs.map((tab) => (
+    <TabsContent key={tab.value} value={tab.value}>
+      {tab.content}
+    </TabsContent>
+  ));
 
-      {/* Personal Info */}
-      <Section title={labels.personalInfo}>
-        <EditableField
-          label={labels.firstName}
-          value={user.first_name || ''}
-          placeholder={labels.addFirstName}
-          onSave={(v) => handleFieldSave('first_name', v)}
-        />
-        <EditableField
-          label={labels.lastName}
-          value={user.last_name || ''}
-          placeholder={labels.addLastName}
-          onSave={(v) => handleFieldSave('last_name', v)}
-        />
-        <EditableField
-          label={labels.phone}
-          value={user.phone || ''}
-          placeholder={labels.addPhone}
-          onSave={(v) => handleFieldSave('phone', v)}
-          type="phone"
-        />
-      </Section>
+  const footer = slots?.footer ?? null;
 
-      {/* Work */}
-      <Section title={labels.work}>
-        <EditableField
-          label={labels.company}
-          value={user.company || ''}
-          placeholder={labels.addCompany}
-          onSave={(v) => handleFieldSave('company', v)}
-        />
-        <EditableField
-          label={labels.position}
-          value={user.position || ''}
-          placeholder={labels.addPosition}
-          onSave={(v) => handleFieldSave('position', v)}
-        />
-      </Section>
+  // ── Render ──────────────────────────────────────────────────────────────────
 
-      {/* Security */}
-      {enable2FA && <TwoFactorSection />}
+  return (
+    <div className="container mx-auto px-4 py-6 md:py-10 max-w-3xl">
+      <ProfileHeader slots={slots} enableDeleteAccount={enableDeleteAccount} />
+
+      <Tabs defaultValue="profile" className="mt-2">
+        {/* Underline-style scrollable tabs — mobile friendly */}
+        <TabsList variant="underline" scrollable>
+          <TabsTrigger value="profile">{labels.personalInfo}</TabsTrigger>
+          {enable2FA && <TabsTrigger value="security">{labels.security}</TabsTrigger>}
+          {extraTriggers}
+        </TabsList>
+
+        <TabsContent value="profile">
+          <TabProfile />
+        </TabsContent>
+
+        {enable2FA && (
+          <TabsContent value="security">
+            <TabSecurity />
+          </TabsContent>
+        )}
 
-      {/* Actions */}
-      <Section>
-        <ActionButton
-          icon={<LogOut className="w-4 h-4" />}
-          label={labels.signOut}
-          onClick={handleLogout}
-        />
-      </Section>
+        {extraPanels}
+      </Tabs>
 
-      {enableDeleteAccount && <DeleteAccountSection />}
+      {footer && <div className="mt-8">{footer}</div>}
     </div>
   );
-};
+}
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Export
+// Router + Export
 // ─────────────────────────────────────────────────────────────────────────────
 
-const ProfileRouter: React.FC<ProfileLayoutProps> = (props) => {
+function ProfileRouter(props: ProfileLayoutProps) {
   const { step } = useProfileContext();
-
   if (step === 'delete-account') return <DeleteAccountScreen />;
   return <ProfileContent {...props} />;
-};
+}
 
-export const ProfileLayout: React.FC<ProfileLayoutProps> = (props) => (
-  <ProfileProvider>
-    <ProfileRouter {...props} />
+export const ProfileLayout: React.FC<ProfileLayoutProps> = ({ title, ...props }) => (
+  <ProfileProvider title={title}>
+    <ProfileRouter title={title} {...props} />
   </ProfileProvider>
 );

package/src/layouts/ProfileLayout/components/AvatarSection.tsx

@@ -72,11 +72,10 @@ export const AvatarSection = () => {
   };
 
   return (
-    <div className="flex flex-col items-center mb-4">
+    <div className="flex flex-col items-center flex-shrink-0">
       <div className="relative group">
         <Avatar
-          className="aspect-square rounded-full overflow-hidden ring-1 ring-foreground/20 transition-transform group-hover:scale-105"
-          style={{ width: '80px', height: '80px' }}
+          className="w-14 h-14 md:w-20 md:h-20 aspect-square rounded-full overflow-hidden ring-1 ring-foreground/20 transition-transform group-hover:scale-105"
         >
           {avatarPreview ? (
             <img

package/src/layouts/ProfileLayout/components/EditableField.tsx

@@ -1,11 +1,22 @@
 'use client';
 
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { parsePhoneNumberFromString } from 'libphonenumber-js';
 
-import { useAppT } from '@djangocfg/i18n';
 import { Button, Input, PhoneInput } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
+import { useProfileContext } from '../context';
+
+function formatPhone(raw: string): string {
+  if (!raw) return '';
+  try {
+    return parsePhoneNumberFromString(raw)?.formatInternational() ?? raw;
+  } catch {
+    return raw;
+  }
+}
+
 interface EditableFieldProps {
   label: string;
   value: string;
@@ -23,17 +34,11 @@ export const EditableField = ({
   disabled,
   type = 'text',
 }: EditableFieldProps) => {
-  const t = useAppT();
+  const { labels } = useProfileContext();
   const [isEditing, setIsEditing] = useState(false);
   const [editValue, setEditValue] = useState(value);
   const [isSaving, setIsSaving] = useState(false);
 
-  const labels = useMemo(() => ({
-    save: t('layouts.profilePage.save'),
-    saving: t('layouts.profilePage.saving'),
-    cancel: t('layouts.profilePage.cancel'),
-  }), [t]);
-
   useEffect(() => {
     setEditValue(value);
   }, [value]);
@@ -112,7 +117,7 @@ export const EditableField = ({
     >
       <div className="text-[13px] text-muted-foreground mb-0.5">{label}</div>
       <div className={cn('text-[15px]', value ? 'text-foreground' : 'text-muted-foreground/60')}>
-        {value || placeholder}
+        {value ? (type === 'phone' ? formatPhone(value) : value) : placeholder}
       </div>
     </button>
   );

package/src/layouts/ProfileLayout/components/Section.tsx

@@ -11,7 +11,7 @@ interface SectionProps {
 }
 
 export const Section = ({ title, children, className }: SectionProps) => (
-  <div className={cn('mb-10', className)}>
+  <div className={cn('mb-4 md:mb-6', className)}>
     {title && (
       <h2 className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-2 px-1">
         {title}