@djangocfg/layouts 1.0.1

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

@@ -0,0 +1,146 @@
+'use client';
+
+import { Check, Upload, X } from 'lucide-react';
+import React, { useState } from 'react';
+import { toast } from 'sonner';
+
+import { Avatar, AvatarFallback, Button } from '@djangocfg/ui/components';
+import { useAccountsContext } from '@djangocfg/api/cfg/contexts';
+import { useAuth } from '../../../auth';
+
+export const AvatarSection = () => {
+  const { user } = useAuth();
+  const accounts = useAccountsContext();
+  const [avatarFile, setAvatarFile] = useState<File | null>(null);
+  const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+
+  const getInitials = (name: string) => {
+    if (!name) return 'UN';
+    return name
+      .split(' ')
+      .map((word) => word[0])
+      .join('')
+      .toUpperCase()
+      .slice(0, 2);
+  };
+
+  const handleAvatarChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      if (!file.type.startsWith('image/')) {
+        toast.error('Please select an image file');
+        return;
+      }
+      if (file.size > 5 * 1024 * 1024) {
+        toast.error('File size must be less than 5MB');
+        return;
+      }
+      setAvatarFile(file);
+      const reader = new FileReader();
+      reader.onload = (e) => setAvatarPreview(e.target?.result as string);
+      reader.readAsDataURL(file);
+    } else {
+      setAvatarFile(null);
+      setAvatarPreview(null);
+    }
+  };
+
+  const handleAvatarUpload = async () => {
+    if (!avatarFile) return;
+    setIsUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append('avatar', avatarFile);
+      await accounts.uploadAvatar(formData as any);
+      toast.success('Avatar updated successfully');
+      setAvatarFile(null);
+      setAvatarPreview(null);
+    } catch (error) {
+      toast.error('Failed to upload avatar');
+      console.error('Avatar upload error:', error);
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const resetAvatar = () => {
+    setAvatarFile(null);
+    setAvatarPreview(null);
+  };
+
+  return (
+    <div className="flex flex-col items-center mb-4">
+      <div className="relative group">
+        <Avatar className="w-24 h-24 transition-transform group-hover:scale-105">
+          {avatarPreview ? (
+            <img
+              src={avatarPreview}
+              alt="Avatar preview"
+              className="w-full h-full object-cover rounded-full"
+            />
+          ) : user?.avatar ? (
+            <img
+              src={user.avatar}
+              alt="User avatar"
+              className="w-full h-full object-cover rounded-full"
+            />
+          ) : (
+            <AvatarFallback className="text-2xl font-semibold bg-gradient-to-br from-primary to-primary/80 text-primary-foreground">
+              {getInitials(user?.display_username || user?.email || '')}
+            </AvatarFallback>
+          )}
+        </Avatar>
+
+        {/* Upload overlay - appears on hover */}
+        <label className="absolute inset-0 rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center cursor-pointer">
+          <div className="p-3 rounded-full bg-primary/80 text-primary-foreground hover:bg-primary transition-colors">
+            <Upload className="w-5 h-5" />
+          </div>
+          <input
+            type="file"
+            accept="image/*"
+            onChange={handleAvatarChange}
+            className="hidden"
+          />
+        </label>
+
+        {/* Action buttons - appear when file is selected */}
+        {avatarFile && (
+          <div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 flex items-center space-x-1 bg-card border border-border rounded-full shadow-lg p-1">
+            <Button
+              size="sm"
+              onClick={handleAvatarUpload}
+              disabled={isUploading}
+              className="h-7 px-3 rounded-full"
+            >
+              {isUploading ? (
+                <div className="animate-spin rounded-full h-3 w-3 border-b-2 border-white" />
+              ) : (
+                <Check className="w-3 h-3" />
+              )}
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={resetAvatar}
+              className="h-7 w-7 rounded-full p-0"
+            >
+              <X className="w-3 h-3" />
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* File info - shows when file is selected */}
+      {avatarFile && (
+        <div className="mt-3 text-center">
+          <p className="text-xs text-muted-foreground">
+            {avatarFile.name} ({(avatarFile.size / 1024 / 1024).toFixed(2)} MB)
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+

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

@@ -0,0 +1,208 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from 'sonner';
+import { profileLogger } from '../../../utils/logger';
+
+import {
+  Button,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  Label,
+  PhoneInput,
+} from '@djangocfg/ui/components';
+import { 
+  useAccountsContext,
+  PatchedUserProfileUpdateRequestSchema,
+  type PatchedUserProfileUpdateRequest
+} from '@djangocfg/api/cfg/contexts';
+import { useAuth } from '../../../auth';
+
+export const ProfileForm = () => {
+  const { user } = useAuth();
+  const accounts = useAccountsContext();
+  const [isEditing, setIsEditing] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const form = useForm<PatchedUserProfileUpdateRequest>({
+    resolver: zodResolver(PatchedUserProfileUpdateRequestSchema),
+    defaultValues: {
+      first_name: '',
+      last_name: '',
+      company: '',
+      position: '',
+      phone: '',
+    },
+  });
+
+  // Load user data
+  useEffect(() => {
+    if (user) {
+      form.reset({
+        first_name: user.first_name || '',
+        last_name: user.last_name || '',
+        company: user.company || '',
+        position: user.position || '',
+        phone: user.phone || '',
+      });
+    }
+  }, [user, form]);
+
+  const handleSubmit = async (data: PatchedUserProfileUpdateRequest) => {
+    setIsSaving(true);
+    try {
+      await accounts.partialUpdateProfile(data);
+      toast.success('Profile updated successfully');
+      setIsEditing(false);
+    } catch (error: any) {
+      profileLogger.error('Profile update error:', error);
+      if (error?.response?.data) {
+        const fieldErrors = error.response.data;
+        Object.entries(fieldErrors).forEach(([field, messages]) => {
+          if (Array.isArray(messages) && messages.length > 0) {
+            form.setError(field as keyof PatchedUserProfileUpdateRequest, {
+              type: 'server',
+              message: messages[0],
+            });
+          }
+        });
+        toast.error('Please fix the validation errors');
+      } else {
+        toast.error('Failed to update profile');
+      }
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    form.clearErrors();
+    if (user) {
+      form.reset({
+        first_name: user.first_name || '',
+        last_name: user.last_name || '',
+        company: user.company || '',
+        position: user.position || '',
+        phone: user.phone || '',
+      });
+    }
+  };
+
+  const onSubmit = form.handleSubmit(handleSubmit);
+
+  return (
+    <Form {...form}>
+      <form onSubmit={onSubmit} className="space-y-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-2 md:col-span-2">
+            <Label htmlFor="email">Email</Label>
+            <Input id="email" value={user?.email || ''} disabled className="bg-muted" />
+          </div>
+
+          <FormField
+            control={form.control}
+            name="first_name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>First Name</FormLabel>
+                <FormControl>
+                  <Input {...field} disabled={!isEditing} placeholder="Enter first name" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="last_name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Last Name</FormLabel>
+                <FormControl>
+                  <Input {...field} disabled={!isEditing} placeholder="Enter last name" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="company"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Company</FormLabel>
+                <FormControl>
+                  <Input {...field} disabled={!isEditing} placeholder="Enter company name" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="position"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Position</FormLabel>
+                <FormControl>
+                  <Input {...field} disabled={!isEditing} placeholder="Enter position" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="phone"
+            render={({ field }) => (
+              <FormItem className="md:col-span-2">
+                <FormLabel>Phone</FormLabel>
+                <FormControl>
+                  <PhoneInput
+                    value={field.value}
+                    onChange={field.onChange}
+                    disabled={!isEditing}
+                    placeholder="Enter phone number"
+                    defaultCountry="US"
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex items-center justify-between pt-4">
+          {isEditing ? (
+            <div className="flex items-center gap-2">
+              <Button type="submit" disabled={isSaving}>
+                {isSaving ? 'Saving...' : 'Save Changes'}
+              </Button>
+              <Button type="button" variant="outline" onClick={handleCancel}>
+                Cancel
+              </Button>
+            </div>
+          ) : (
+            <Button type="button" onClick={() => setIsEditing(true)}>
+              Edit Profile
+            </Button>
+          )}
+        </div>
+      </form>
+    </Form>
+  );
+};
+

package/src/layouts/ProfileLayout/components/index.ts

@@ -0,0 +1,3 @@
+export { AvatarSection } from './AvatarSection';
+export { ProfileForm } from './ProfileForm';
+

package/src/layouts/ProfileLayout/index.ts

@@ -0,0 +1,3 @@
+export { ProfileLayout } from './ProfileLayout';
+export type { } from './ProfileLayout';
+

package/src/layouts/SupportLayout/README.md

@@ -0,0 +1,91 @@
+# Support Layout
+
+Modern support ticket system layout with resizable panels and mobile-optimized interface.
+
+## Features
+
+- ✅ **Desktop**: Resizable split-panel view (ticket list | conversation)
+- ✅ **Mobile**: Single-column navigation with back/forward flow
+- ✅ **Real-time**: Auto-refresh messages after sending
+- ✅ **Event-driven**: Dialog management via custom events
+- ✅ **Type-safe**: Full TypeScript support with generated API types
+- ✅ **Smart UI**: Unread counters, status badges, relative timestamps
+
+## Architecture
+
+```
+SupportLayout
+├── SupportLayoutProvider (UI state + events wrapper)
+│   └── SupportProvider (API context from @djangocfg/api)
+│       └── AccountsProvider (for user.id in ticket creation)
+└── Components
+    ├── TicketList (scrollable ticket cards)
+    ├── MessageList (conversation bubbles)
+    ├── MessageInput (with keyboard shortcuts)
+    └── CreateTicketDialog (event-driven)
+```
+
+## Usage
+
+```tsx
+import { SupportLayout } from '@djangocfg/layouts';
+
+export default function SupportPage() {
+  return <SupportLayout />;
+}
+```
+
+## Event-based Dialog Opening
+
+```tsx
+import { openCreateTicketDialog } from '@djangocfg/layouts';
+
+function MyComponent() {
+  return (
+    <Button onClick={openCreateTicketDialog}>
+      Create Ticket
+    </Button>
+  );
+}
+```
+
+## API Integration
+
+Uses generated SWR hooks from `@djangocfg/api/cfg/contexts`:
+- `useSupportContext()` - Tickets CRUD, messages CRUD
+- Automatic cache revalidation after mutations
+- Type-safe request/response handling
+
+## Mobile Optimization
+
+- Auto-detects screen width (≤768px)
+- Single-column navigation when mobile
+- Back button to return to ticket list
+- Optimized touch targets
+
+## Key Components
+
+### TicketCard
+- Status badges with color-coding
+- Unread message counters
+- Relative timestamps
+- Click to select
+
+### MessageList
+- Auto-scroll to latest message
+- User vs. Admin message styling
+- Avatar placeholders
+- Timestamp formatting
+
+### MessageInput
+- Multi-line support (Shift+Enter)
+- Submit on Enter
+- Disabled when ticket closed
+- Loading states
+
+### CreateTicketDialog
+- Subject + initial message
+- Zod validation
+- Auto-selects created ticket
+- Toast notifications
+

package/src/layouts/SupportLayout/SupportLayout.tsx

@@ -0,0 +1,178 @@
+/**
+ * Support Layout
+ * Modern support layout with resizable panels for desktop and mobile-optimized view
+ */
+
+'use client';
+
+import React from 'react';
+import { SupportProvider } from '@djangocfg/api/cfg/contexts';
+import { SupportLayoutProvider, useSupportLayoutContext } from './context';
+import {
+  TicketList,
+  MessageList,
+  MessageInput,
+  CreateTicketDialog,
+} from './components';
+import {
+  Button,
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from '@djangocfg/ui';
+import { Plus, LifeBuoy, ArrowLeft } from 'lucide-react';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Support Layout Content (with context)
+// ─────────────────────────────────────────────────────────────────────────
+
+const SupportLayoutContent: React.FC = () => {
+  const { selectedTicket, selectTicket, openCreateDialog, getUnreadCount } =
+    useSupportLayoutContext();
+  const [isMobile, setIsMobile] = React.useState(false);
+  
+  React.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth <= 768);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  const unreadCount = getUnreadCount();
+
+  if (isMobile) {
+    // Mobile layout - single column with navigation
+    return (
+      <div className="h-screen flex flex-col overflow-hidden">
+        {/* Mobile Header */}
+        <div className="flex items-center justify-between p-4 border-b bg-background flex-shrink-0">
+          <div className="flex items-center gap-2">
+            {selectedTicket ? (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => selectTicket(null)}
+                className="p-1"
+              >
+                <ArrowLeft className="h-5 w-5" />
+              </Button>
+            ) : (
+              <LifeBuoy className="h-6 w-6 text-primary" />
+            )}
+            <h1 className="text-xl font-semibold">
+              {selectedTicket ? selectedTicket.subject : 'Support'}
+            </h1>
+            {unreadCount > 0 && !selectedTicket && (
+              <div className="h-5 w-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
+                {unreadCount}
+              </div>
+            )}
+          </div>
+          {!selectedTicket && (
+            <Button onClick={openCreateDialog} size="sm">
+              <Plus className="h-4 w-4 mr-2" />
+              New Ticket
+            </Button>
+          )}
+        </div>
+
+        {/* Mobile Content */}
+        <div className="flex-1 min-h-0 overflow-hidden">
+          {selectedTicket ? (
+            // Show messages when ticket is selected
+            <div className="h-full flex flex-col">
+              <div className="flex-1 min-h-0 overflow-hidden">
+                <MessageList />
+              </div>
+              <div className="flex-shrink-0">
+                <MessageInput />
+              </div>
+            </div>
+          ) : (
+            // Show ticket list when no ticket is selected
+            <TicketList />
+          )}
+        </div>
+
+        {/* Dialog */}
+        <CreateTicketDialog />
+      </div>
+    );
+  }
+
+  // Desktop layout - resizable panels
+  return (
+    <div className="h-screen flex flex-col overflow-hidden">
+      {/* Desktop Header */}
+      <div className="flex items-center justify-between p-6 border-b bg-background flex-shrink-0">
+        <div className="flex items-center gap-3">
+          <LifeBuoy className="h-7 w-7 text-primary" />
+          <div>
+            <h1 className="text-2xl font-bold">Support Center</h1>
+            <p className="text-sm text-muted-foreground">Get help from our support team</p>
+          </div>
+          {unreadCount > 0 && (
+            <div className="h-6 w-6 bg-red-500 text-white text-sm rounded-full flex items-center justify-center">
+              {unreadCount}
+            </div>
+          )}
+        </div>
+
+        <Button onClick={openCreateDialog}>
+          <Plus className="h-4 w-4 mr-2" />
+          New Ticket
+        </Button>
+      </div>
+
+      {/* Desktop Content */}
+      <div className="flex-1 min-h-0 overflow-hidden">
+        <ResizablePanelGroup direction="horizontal" className="h-full">
+          {/* Ticket List Panel */}
+          <ResizablePanel defaultSize={35} minSize={25} maxSize={50}>
+            <div className="h-full border-r overflow-hidden">
+              <TicketList />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle className="hover:bg-accent transition-colors" />
+
+          {/* Messages Panel */}
+          <ResizablePanel defaultSize={65} minSize={50}>
+            <div className="h-full flex flex-col overflow-hidden">
+              <div className="flex-1 min-h-0 overflow-hidden">
+                <MessageList />
+              </div>
+              <div className="flex-shrink-0">
+                <MessageInput />
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* Dialog */}
+      <CreateTicketDialog />
+    </div>
+  );
+};
+
+// ─────────────────────────────────────────────────────────────────────────
+// Support Layout (with providers)
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface SupportLayoutProps {
+  children?: React.ReactNode;
+}
+
+export const SupportLayout: React.FC<SupportLayoutProps> = () => {
+  return (
+    <div className="h-screen w-full overflow-hidden">
+      <SupportProvider>
+        <SupportLayoutProvider>
+          <SupportLayoutContent />
+        </SupportLayoutProvider>
+      </SupportProvider>
+    </div>
+  );
+};
+