# UI/UX Design System

## Design Philosophy

**Modern & Professional** - Clean, trustworthy, and premium feel appropriate for high-value real estate transactions.

### Color Palette
```css
/* Primary - Trust & Luxury */
--primary-50: #eff6ff;
--primary-100: #dbeafe;
--primary-500: #3b82f6;
--primary-600: #2563eb;
--primary-700: #1d4ed8;
--primary-900: #1e3a8a;

/* Secondary - Success/Growth */
--success-50: #f0fdf4;
--success-500: #22c55e;
--success-600: #16a34a;

/* Accent - Dubai Gold */
--gold-500: #d4af37;
--gold-600: #b8941f;

/* Semantic Colors */
--status-offplan: #3b82f6;    /* Blue */
--status-ready: #22c55e;      /* Green */
--status-construction: #f59e0b; /* Amber */
--status-featured: #d4af37;     /* Gold */

/* Neutral */
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-400: #9ca3af;
--gray-600: #4b5563;
--gray-900: #111827;
```

### Typography
```css
/* Font Stack */
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-arabic: 'Noto Sans Arabic', 'Inter', sans-serif;

/* Scale */
--text-xs: 0.75rem;    /* 12px */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
--text-2xl: 1.5rem;    /* 24px */
--text-3xl: 1.875rem;  /* 30px */
--text-4xl: 2.25rem;   /* 36px */
```

## Dashboard Layouts by Role

### 1. Super Admin Dashboard
```tsx
// app/admin/dashboard/page.tsx
export default function AdminDashboard() {
  return (
    <DashboardLayout role="admin">
      {/* Stats Overview */}
      <StatCards 
        stats={[
          { label: 'Total Users', value: 12543, trend: '+12%' },
          { label: 'Active Listings', value: 8943, trend: '+8%' },
          { label: 'Agencies', value: 156, trend: '+5%' },
          { label: 'Developers', value: 78, trend: '+3%' },
          { label: 'MRR (AED)', value: 245000, trend: '+15%' },
          { label: 'Pending Verifications', value: 23, alert: true },
        ]}
      />
      
      <div className="grid grid-cols-12 gap-6 mt-6">
        {/* Pending Verifications */}
        <Card className="col-span-8">
          <CardHeader>
            <CardTitle>Pending RERA Verifications</CardTitle>
          </CardHeader>
          <DataTable 
            columns={['Name', 'Type', 'RERA/ORN', 'Submitted', 'Actions']}
            data={pendingVerifications}
          />
        </Card>
        
        {/* Recent Activity */}
        <Card className="col-span-4">
          <CardHeader>
            <CardTitle>Recent Activity</CardTitle>
          </CardHeader>
          <ActivityFeed activities={recentActivities} />
        </Card>
        
        {/* Platform Analytics */}
        <Card className="col-span-12">
          <CardHeader>
            <CardTitle>Platform Growth</CardTitle>
          </CardHeader>
          <LineChart data={growthData} />
        </Card>
      </div>
    </DashboardLayout>
  );
}
```

### 2. Agency Dashboard
```tsx
// app/agency/dashboard/page.tsx
export default function AgencyDashboard() {
  return (
    <DashboardLayout role="agency">
      {/* Agency Stats */}
      <StatCards 
        stats={[
          { label: 'Active Listings', value: 156, icon: 'home' },
          { label: 'Team Agents', value: 12, icon: 'users' },
          { label: 'New Leads', value: 34, trend: '+23%', highlight: true },
          { label: 'Conversion Rate', value: '18%', trend: '+2%' },
        ]}
      />
      
      <div className="grid grid-cols-12 gap-6 mt-6">
        {/* Lead Pipeline */}
        <Card className="col-span-8">
          <CardHeader className="flex justify-between">
            <CardTitle>Lead Pipeline</CardTitle>
            <Button variant="outline">View All Leads</Button>
          </CardHeader>
          <KanbanBoard leads={leads} />
        </Card>
        
        {/* Agent Performance */}
        <Card className="col-span-4">
          <CardHeader>
            <CardTitle>Agent Performance</CardTitle>
          </CardHeader>
          <AgentLeaderboard agents={agents} />
        </Card>
        
        {/* Team Activity */}
        <Card className="col-span-6">
          <CardHeader>
            <CardTitle>Recent Team Activity</CardTitle>
          </CardHeader>
          <ActivityFeed activities={teamActivities} />
        </Card>
        
        {/* Subscription Status */}
        <Card className="col-span-6">
          <CardHeader>
            <CardTitle>Subscription</CardTitle>
          </CardHeader>
          <SubscriptionWidget 
            plan="Growth Agency"
            listingsUsed={156}
            listingsLimit={500}
            expiresAt="2024-12-31"
          />
        </Card>
      </div>
    </DashboardLayout>
  );
}
```

### 3. Agent Dashboard
```tsx
// app/agent/dashboard/page.tsx
export default function AgentDashboard() {
  return (
    <DashboardLayout role="agent">
      <StatCards 
        stats={[
          { label: 'My Listings', value: 18, max: 20 },
          { label: 'Active Leads', value: 12, highlight: true },
          { label: 'This Month Views', value: 2345, trend: '+15%' },
          { label: 'Closed Deals', value: 3, trend: '+1' },
        ]}
      />
      
      <div className="grid grid-cols-12 gap-6 mt-6">
        {/* Priority Leads */}
        <Card className="col-span-8">
          <CardHeader className="flex justify-between">
            <CardTitle>Priority Leads</CardTitle>
            <Badge variant="outline">12 requiring follow-up</Badge>
          </CardHeader>
          <LeadsTable leads={priorityLeads} showActions />
        </Card>
        
        {/* Quick Actions */}
        <Card className="col-span-4">
          <CardHeader>
            <CardTitle>Quick Actions</CardTitle>
          </CardHeader>
          <div className="space-y-2">
            <Button className="w-full" leftIcon="plus">
              Add New Listing
            </Button>
            <Button className="w-full" variant="outline" leftIcon="users">
              View All Leads
            </Button>
            <Button className="w-full" variant="outline" leftIcon="chart">
              My Analytics
            </Button>
          </div>
        </Card>
        
        {/* Recent Listings Performance */}
        <Card className="col-span-12">
          <CardHeader>
            <CardTitle>Listing Performance</CardTitle>
          </CardHeader>
          <ListingsTable listings={myListings} showStats />
        </Card>
      </div>
    </DashboardLayout>
  );
}
```

### 4. Developer Dashboard
```tsx
// app/developer/dashboard/page.tsx
export default function DeveloperDashboard() {
  return (
    <DashboardLayout role="developer">
      <StatCards 
        stats={[
          { label: 'Active Projects', value: 5 },
          { label: 'Total Units', value: 1250 },
          { label: 'Webinars Hosted', value: 12 },
          { label: 'Leads Generated', value: 456, trend: '+34%' },
        ]}
      />
      
      <div className="grid grid-cols-12 gap-6 mt-6">
        {/* Projects Overview */}
        <Card className="col-span-8">
          <CardHeader className="flex justify-between">
            <CardTitle>Projects</CardTitle>
            <Button leftIcon="plus">New Project</Button>
          </CardHeader>
          <ProjectsGrid projects={projects} />
        </Card>
        
        {/* Upcoming Webinars */}
        <Card className="col-span-4">
          <CardHeader className="flex justify-between">
            <CardTitle>Webinars</CardTitle>
            <Button size="sm" variant="ghost">Schedule</Button>
          </CardHeader>
          <WebinarList webinars={upcomingWebinars} />
        </Card>
        
        {/* Lead Sources */}
        <Card className="col-span-6">
          <CardHeader>
            <CardTitle>Lead Sources</CardTitle>
          </CardHeader>
          <PieChart data={leadSourceData} />
        </Card>
        
        {/* Project Performance */}
        <Card className="col-span-6">
          <CardHeader>
            <CardTitle>Project Performance</CardTitle>
          </CardHeader>
          <BarChart data={projectPerformance} />
        </Card>
      </div>
    </DashboardLayout>
  );
}
```

## Key Components

### Property Card
```tsx
// components/property/PropertyCard.tsx
interface PropertyCardProps {
  property: Unit;
  variant?: 'default' | 'compact' | 'featured';
}

export function PropertyCard({ property, variant = 'default' }: PropertyCardProps) {
  return (
    <Card className={cn(
      "group overflow-hidden transition-all hover:shadow-lg",
      variant === 'featured' && "border-gold-500 ring-1 ring-gold-500"
    )}>
      {/* Image */}
      <div className="relative aspect-[4/3]">
        <Image 
          src={property.images[0]} 
          alt={property.title}
          fill
          className="object-cover"
        />
        
        {/* Badges */}
        <div className="absolute top-2 left-2 flex gap-1">
          <CompletionBadge status={property.completion_status} />
          {property.is_featured && <FeaturedBadge />}
          {property.listing_type === 'rent' && <RentBadge />}
        </div>
        
        {/* Price Overlay */}
        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
          <span className="text-white text-xl font-bold">
            {formatAED(property.price)}
          </span>
          {property.price_per_sqft && (
            <span className="text-white/80 text-sm ml-2">
              ({formatAED(property.price_per_sqft)}/sqft)
            </span>
          )}
        </div>
      </div>
      
      {/* Content */}
      <CardContent className="p-4">
        <h3 className="font-semibold text-gray-900 line-clamp-1">
          {property.title}
        </h3>
        
        <p className="text-gray-500 text-sm flex items-center mt-1">
          <MapPin className="w-4 h-4 mr-1" />
          {property.location.name}
        </p>
        
        {/* Property Details */}
        <div className="flex items-center gap-4 mt-3 text-sm text-gray-600">
          {property.bedrooms && (
            <span className="flex items-center">
              <Bed className="w-4 h-4 mr-1" />
              {property.bedrooms} BR
            </span>
          )}
          <span className="flex items-center">
            <Bath className="w-4 h-4 mr-1" />
            {property.bathrooms} Bath
          </span>
          <span className="flex items-center">
            <Maximize className="w-4 h-4 mr-1" />
            {property.area_sqft} sqft
          </span>
        </div>
        
        {/* Agent Info */}
        <div className="flex items-center justify-between mt-4 pt-4 border-t">
          <div className="flex items-center gap-2">
            <Avatar src={property.agent.avatar} size="sm" />
            <div className="text-sm">
              <p className="font-medium">{property.agent.name}</p>
              <p className="text-gray-500 text-xs">{property.agent.agency}</p>
            </div>
          </div>
          
          {property.rera_verified && (
            <RERABadge permitNumber={property.rera_permit_number} size="sm" />
          )}
        </div>
      </CardContent>
    </Card>
  );
}
```

### Completion Status Badge
```tsx
// components/property/CompletionBadge.tsx
const statusConfig = {
  off_plan: {
    label: 'Off-Plan',
    color: 'bg-blue-100 text-blue-700',
    icon: Building,
  },
  under_construction: {
    label: 'Under Construction',
    color: 'bg-amber-100 text-amber-700',
    icon: Construction,
  },
  ready: {
    label: 'Ready',
    color: 'bg-green-100 text-green-700',
    icon: CheckCircle,
  },
  handed_over: {
    label: 'Handed Over',
    color: 'bg-gray-100 text-gray-700',
    icon: Key,
  },
};

export function CompletionBadge({ 
  status, 
  progress,
  handoverDate,
}: CompletionBadgeProps) {
  const config = statusConfig[status];
  
  return (
    <Badge className={cn("flex items-center gap-1", config.color)}>
      <config.icon className="w-3 h-3" />
      {config.label}
      {progress && status === 'under_construction' && (
        <span className="ml-1">{progress}%</span>
      )}
    </Badge>
  );
}
```

### Price Display
```tsx
// components/ui/PriceDisplay.tsx
export function PriceDisplay({ 
  amount, 
  currency = 'AED',
  showPerSqft,
  area,
  size = 'default',
}: PriceDisplayProps) {
  const formatted = formatCurrency(amount, currency);
  
  return (
    <div className={cn(
      "font-semibold",
      size === 'lg' && "text-2xl",
      size === 'default' && "text-lg",
      size === 'sm' && "text-base"
    )}>
      <span className="text-gray-900">{formatted}</span>
      
      {showPerSqft && area && (
        <span className="text-gray-500 text-sm ml-2">
          ({formatCurrency(amount / area, currency)}/sqft)
        </span>
      )}
    </div>
  );
}
```

### Lead Pipeline Kanban
```tsx
// components/leads/KanbanBoard.tsx
const columns = [
  { id: 'new', label: 'New', color: 'bg-blue-50' },
  { id: 'contacted', label: 'Contacted', color: 'bg-yellow-50' },
  { id: 'qualified', label: 'Qualified', color: 'bg-purple-50' },
  { id: 'negotiating', label: 'Negotiating', color: 'bg-orange-50' },
  { id: 'closed_won', label: 'Closed Won', color: 'bg-green-50' },
  { id: 'closed_lost', label: 'Closed Lost', color: 'bg-gray-50' },
];

export function KanbanBoard({ leads }: { leads: Lead[] }) {
  return (
    <div className="flex gap-4 overflow-x-auto pb-4">
      {columns.map(column => (
        <div 
          key={column.id}
          className={cn(
            "min-w-[250px] rounded-lg p-3",
            column.color
          )}
        >
          <div className="flex items-center justify-between mb-3">
            <h4 className="font-medium">{column.label}</h4>
            <Badge variant="secondary">
              {leads.filter(l => l.status === column.id).length}
            </Badge>
          </div>
          
          <div className="space-y-2">
            {leads
              .filter(l => l.status === column.id)
              .map(lead => (
                <LeadCard key={lead.id} lead={lead} compact />
              ))}
          </div>
        </div>
      ))}
    </div>
  );
}
```

## Responsive Layout

### Breakpoints
```css
/* Tailwind Config */
screens: {
  'sm': '640px',
  'md': '768px',
  'lg': '1024px',
  'xl': '1280px',
  '2xl': '1536px',
}
```

### Dashboard Grid
```tsx
// Responsive grid pattern
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-4 lg:gap-6">
  <Card className="lg:col-span-8">
    {/* Main content */}
  </Card>
  <Card className="lg:col-span-4">
    {/* Sidebar content */}
  </Card>
</div>
```

### Mobile Navigation
```tsx
// components/layout/MobileNav.tsx
export function MobileNav() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="ghost" size="icon">
          <Menu className="h-6 w-6" />
        </Button>
      </SheetTrigger>
      <SheetContent side="left" className="w-64">
        <SidebarContent />
      </SheetContent>
    </Sheet>
  );
}
```

## Form Components

### Property Form (Agent/Agency)
```tsx
// forms/PropertyForm.tsx
export function PropertyForm({ initialData }: PropertyFormProps) {
  return (
    <Form {...form}>
      <div className="space-y-6">
        {/* Basic Info */}
        <Card>
          <CardHeader>
            <CardTitle>Basic Information</CardTitle>
          </CardHeader>
          <CardContent className="grid grid-cols-2 gap-4">
            <FormField
              control={form.control}
              name="title"
              render={({ field }) => (
                <FormItem className="col-span-2">
                  <FormLabel>Property Title</FormLabel>
                  <FormControl>
                    <Input {...field} placeholder="e.g., Luxury 3BR Apartment with Marina View" />
                  </FormControl>
                </FormItem>
              )}
            />
            
            <FormField
              control={form.control}
              name="listing_type"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Listing Type</FormLabel>
                  <Select {...field}>
                    <option value="sale">For Sale</option>
                    <option value="rent">For Rent</option>
                  </Select>
                </FormItem>
              )}
            />
            
            <FormField
              control={form.control}
              name="completion_status"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Completion Status</FormLabel>
                  <Select {...field}>
                    <option value="ready">Ready</option>
                    <option value="off_plan">Off-Plan</option>
                    <option value="under_construction">Under Construction</option>
                  </Select>
                  <FormDescription>
                    Required for Dubai market compliance
                  </FormDescription>
                </FormItem>
              )}
            />
          </CardContent>
        </Card>
        
        {/* Dubai-Specific: RERA */}
        <Card>
          <CardHeader>
            <CardTitle>RERA Compliance</CardTitle>
          </CardHeader>
          <CardContent className="grid grid-cols-2 gap-4">
            <FormField
              control={form.control}
              name="rera_permit_number"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>RERA Permit Number</FormLabel>
                  <FormControl>
                    <Input {...field} placeholder="12345" />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </CardContent>
        </Card>
        
        {/* Pricing (AED) */}
        <Card>
          <CardHeader>
            <CardTitle>Pricing</CardTitle>
          </CardHeader>
          <CardContent className="grid grid-cols-2 gap-4">
            <FormField
              control={form.control}
              name="price"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Price (AED)</FormLabel>
                  <FormControl>
                    <Input 
                      {...field} 
                      type="number"
                      placeholder="2500000"
                    />
                  </FormControl>
                </FormItem>
              )}
            />
          </CardContent>
        </Card>
      </div>
    </Form>
  );
}
```

## Toast Notifications
```tsx
// hooks/useToast.ts
export function useNotification() {
  const notify = useCallback((options: NotificationOptions) => {
    toast({
      title: options.title,
      description: options.message,
      variant: options.type === 'error' ? 'destructive' : 'default',
    });
  }, []);
  
  return {
    success: (message: string) => notify({ type: 'success', title: 'Success', message }),
    error: (message: string) => notify({ type: 'error', title: 'Error', message }),
    info: (message: string) => notify({ type: 'info', title: 'Info', message }),
  };
}
```