صفحه تحلیل

import { useAsync } from '@partodata/ui'
import { DetailPage, DetailSection, pageState } from '@partodata/ui/templates'

function AnalysisPage({ id }: { id: string }) {
  const { data: profile, isLoading, error, run } = useAsync<Influencer>()
  // … load = () => run(() => getInfluencer(id)) در یک effect

  return (
    <DetailPage
      title={profile?.name ?? 'اینفلوئنسر'}
      description="تحلیل عملکرد و محتوای اینفلوئنسر در شبکه‌های اجتماعی"
      back={{ href: '/influencers', label: 'اینفلوئنسرها' }}
      aside={<ProfileAside />}
      state={pageState({ data: profile, isLoading, error, onRetry: load })}
    >
      <DetailSection title="نرخ تعامل">{/* EngagementRate */}</DetailSection>
      <DetailSection title="احساسات مخاطبان">{/* SentimentDistribution */}</DetailSection>
      <DetailSection title="محتوای اخیر">{/* گرید پست‌ها */}</DetailSection>
      <DetailSection title="معیارها و آمار">{/* MetricCardها */}</DetailSection>
    </DetailPage>
  )
}

'use client'

import { PlatformMark } from '@partodata/ui/social'
import { Account, type SocialAccount } from '@partodata/ui/social'

const account: SocialAccount = {
  id: 'sara_ahmadi',
  source: { key: 'instagram' },
  name: 'سارا احمدی',
  handle: 'sara.ahmadi',
  avatarUrl: '/avatars/sara-ahmadi.jpg',
  metrics: { followers: 245_000, following: 380, posts: 612 },
}

export function ProfileAside({ onOpenProfile }: { onOpenProfile: (account: SocialAccount) => void }) {
  return (
    <div className="space-y-4">
      <Account account={account} layout="card" onOpen={onOpenProfile} />

      <div className="flex flex-wrap gap-2">
        <PlatformMark source="instagram" variant="badge" showLabel />
        <PlatformMark source="twitter" variant="badge" showLabel />
        <PlatformMark source="youtube" variant="badge" showLabel />
      </div>
    </div>
  )
}

'use client'

import { Account, type SocialAccount } from '@partodata/ui/social'

export function ProfileRow({ account }: { account: SocialAccount }) {
  return (
    <Account
      account={account}
      layout="row"
      aside={<span className="text-meta">آخرین به‌روزرسانی: 15 فروردین 1405</span>}
    />
  )
}

import { EngagementRate } from '@partodata/ui'
;<EngagementRate currentRate={0.0342} followers={245000} locale="fa" showCategoryCard={true} />

import { EngagementRate } from '@partodata/ui'
;<EngagementRate display="bar" currentRate={0.0342} followers={245000} locale="fa" />

import { Distribution } from '@partodata/ui'
;<Distribution kind="sentiment" data={{ positive: 3420, negative: 890, neutral: 1540 }} variant="bars" showCounts />

import { SentimentBadge } from '@partodata/ui'
;<div className="flex flex-wrap gap-2">
  <SentimentBadge sentiment="positive" count={3420} />
  <SentimentBadge sentiment="negative" count={890} />
  <SentimentBadge sentiment="neutral" count={1540} />
  <SentimentBadge sentiment="mixed" count={230} />
</div>

import { PartoBarChart } from '@partodata/ui'

const sentimentByTopic = [
  { موضوع: 'کیفیت محصول', مثبت: 820, منفی: 120, خنثی: 340 },
  { موضوع: 'خدمات پشتیبانی', مثبت: 540, منفی: 380, خنثی: 210 },
  { موضوع: 'قیمت‌گذاری', مثبت: 310, منفی: 490, خنثی: 180 },
  { موضوع: 'تجربه کاربری', مثبت: 670, منفی: 95, خنثی: 420 },
]

;<div className="h-[400px]">
  <PartoBarChart
    data={sentimentByTopic}
    keys={['مثبت', 'منفی', 'خنثی']}
    indexBy="موضوع"
    margin={{ top: 20, right: 20, bottom: 50, left: 80 }}
    padding={0.3}
    groupMode="stacked"
  />
</div>

import { PartoPieChart } from '@partodata/ui'

const sentimentData = [
  { id: 'مثبت', label: 'مثبت', value: 3420 },
  { id: 'منفی', label: 'منفی', value: 890 },
  { id: 'خنثی', label: 'خنثی', value: 1540 },
]

;<div className="h-[300px]">
  <PartoPieChart
    data={sentimentData}
    innerRadius={0.5}
    padAngle={0.7}
    cornerRadius={3}
    activeOuterRadiusOffset={8}
    enableArcLinkLabels={false}
  />
</div>

'use client'

import { useRouter } from 'next/navigation'
import { EntityCollection, Post, type SocialPost } from '@partodata/ui/social'

export function RecentPosts({ posts, loading }: { posts: SocialPost[]; loading: boolean }) {
  const router = useRouter()
  return (
    <EntityCollection
      entity="post"
      items={posts}
      getId={(post) => post.id}
      loading={loading}
      label="پست‌های اخیر"
      renderItem={(post, item) => <Post post={post} {...item} onOpen={(p) => router.push(`/posts/${p.id}`)} />}
    />
  )
}

'use client'

import { Comment, EntityCollection, type SocialComment } from '@partodata/ui/social'

const comments: SocialComment[] = [
  {
    id: 'c1',
    author: { handle: 'user_1' },
    text: 'محتوای خیلی خوبی بود. کیفیت تصاویر و نوع ارائه واقعاً حرفه‌ای است. منتظر محتوای بیشتر هستم.',
    labels: [
      { title: 'رضایت از کیفیت', confidence: 0.94 },
      { title: 'درخواست محتوای بیشتر', confidence: 0.87 },
    ],
    signals: { sentiment: 'positive' },
  },
  {
    id: 'c2',
    author: { handle: 'user_2' },
    text: 'متاسفانه اطلاعات ارائه‌شده دقیق نبود و منابع معتبری ذکر نشده بود. لطفاً بیشتر تحقیق کنید.',
    labels: [
      { title: 'عدم دقت اطلاعات', confidence: 0.91 },
      { title: 'نبود منبع معتبر', confidence: 0.85 },
    ],
    signals: { sentiment: 'negative' },
  },
  {
    id: 'c3',
    author: { handle: 'user_3' },
    text: 'موضوع جالبی بود ولی کاش بیشتر توضیح می‌دادید. نه خیلی خوب بود نه خیلی بد.',
    labels: [{ title: 'نظر ترکیبی', confidence: 0.78 }],
    signals: { sentiment: 'neutral' },
  },
]

export function CommentAnalysis() {
  return (
    <EntityCollection
      entity="comment"
      items={comments}
      getId={(comment) => comment.id}
      layouts={['card', 'row']}
      label="نظرهای تحلیل‌شده"
      renderItem={(comment, item) => <Comment comment={comment} {...item} />}
    />
  )
}

import {
  MetricCard,
  MetricCardHeader,
  MetricCardLabel,
  MetricCardContent,
  MetricCardValue,
  MetricCardDifferential,
  MetricCardSparkline,
} from '@partodata/ui'
import { Users, Heart, FileText } from 'lucide-react'

const followerData = [
  { value: 238000, timestamp: '1404-12-01' },
  { value: 239200, timestamp: '1404-12-08' },
  { value: 240100, timestamp: '1404-12-15' },
  { value: 241800, timestamp: '1404-12-22' },
  { value: 243500, timestamp: '1404-12-29' },
  { value: 245000, timestamp: '1405-01-07' },
]

const engagementData = [
  { value: 3.1, timestamp: '1404-12-01' },
  { value: 3.3, timestamp: '1404-12-08' },
  { value: 3.0, timestamp: '1404-12-15' },
  { value: 3.5, timestamp: '1404-12-22' },
  { value: 3.4, timestamp: '1404-12-29' },
  { value: 3.42, timestamp: '1405-01-07' },
]

const postFrequencyData = [
  { value: 12, timestamp: '1404-12-01' },
  { value: 15, timestamp: '1404-12-08' },
  { value: 10, timestamp: '1404-12-15' },
  { value: 14, timestamp: '1404-12-22' },
  { value: 18, timestamp: '1404-12-29' },
  { value: 16, timestamp: '1405-01-07' },
]

;<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <MetricCard>
    <MetricCardHeader>
      <MetricCardLabel icon={<Users className="h-3.5 w-3.5" />}>تعداد دنبال‌کننده‌ها</MetricCardLabel>
    </MetricCardHeader>
    <MetricCardContent>
      <MetricCardValue>245,000</MetricCardValue>
      <MetricCardDifferential direction="up" tone="positive">
        +2.9٪
      </MetricCardDifferential>
    </MetricCardContent>
    <MetricCardSparkline data={followerData} dataKey="value" />
  </MetricCard>

  <MetricCard>
    <MetricCardHeader>
      <MetricCardLabel icon={<Heart className="h-3.5 w-3.5" />}>نرخ تعامل</MetricCardLabel>
    </MetricCardHeader>
    <MetricCardContent>
      <MetricCardValue>3.42٪</MetricCardValue>
      <MetricCardDifferential direction="up" tone="positive">
        +0.12٪
      </MetricCardDifferential>
    </MetricCardContent>
    <MetricCardSparkline data={engagementData} dataKey="value" />
  </MetricCard>

  <MetricCard>
    <MetricCardHeader>
      <MetricCardLabel icon={<FileText className="h-3.5 w-3.5" />}>تعداد پست ماهانه</MetricCardLabel>
    </MetricCardHeader>
    <MetricCardContent>
      <MetricCardValue>16</MetricCardValue>
      <MetricCardDifferential direction="down" tone="negative">
        -1.2٪
      </MetricCardDifferential>
    </MetricCardContent>
    <MetricCardSparkline data={postFrequencyData} dataKey="value" />
  </MetricCard>
</div>

import { StatDisplay, TrendIndicator } from '@partodata/ui'
import { Eye, MessageCircle, Share2 } from 'lucide-react'
;<div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
  <StatDisplay value={245000} label="دنبال‌کننده‌ها" icon={<Users />} trend={<TrendIndicator value={2.9} />} />

  <StatDisplay value={52300} label="میانگین بازدید" icon={<Eye />} trend={<TrendIndicator value={5.2} />} />

  <StatDisplay value={342} label="میانگین نظرات" icon={<MessageCircle />} trend={<TrendIndicator value={-1.3} />} />

  <StatDisplay value={128} label="میانگین اشتراک‌گذاری" icon={<Share2 />} trend={<TrendIndicator value={8.7} />} />
</div>

import { useAsync } from '@partodata/ui'
import { DetailSection, pageState } from '@partodata/ui/templates'

const posts = useAsync<Post[]>()

;<DetailSection
  title="محتوای اخیر"
  skeleton="cards"
  state={pageState({
    data: posts.data,
    isLoading: posts.isLoading,
    error: posts.error,
    onRetry: loadPosts,
    emptyCopy: { title: 'هنوز پستی از این اینفلوئنسر ثبت نشده است' },
  })}
>
  {/* گرید پست‌ها */}
</DetailSection>

// ❌ غلط — در چیدمان RTL فاصله و خط جداکننده به سمت اشتباه می‌روند
<div className="ml-4 border-l pl-6 text-left">{/* بخش‌های تحلیل */}</div>

// ✅ درست — Logical Properties در RTL و LTR هر دو درست عمل می‌کنند
<div className="ms-4 border-s ps-6 text-start">{/* بخش‌های تحلیل */}</div>

// ❌ غلط — فقط در یکی از دو تم درست دیده می‌شود
<span style={{ color: '#22c55e' }}>مثبت</span>

// ✅ درست — نشان احساس رنگ و برچسبش را از توکن‌های معنایی می‌گیرد و در هر دو تم درست است
<SentimentBadge sentiment="positive" />

// ❌ غلط — کل داده به کلاینت منتقل می‌شود
const all = await fetchComments(influencerId) // ده‌ها هزار ردیف
const page = all.slice((currentPage - 1) * 20, currentPage * 20)

// ✅ درست — سرور یک صفحه برمی‌گرداند؛ حالت‌ها state بخش‌اند و جدول صفحه‌بندی سرور-محور خودش را دارد
<DetailSection
  title="نظرها"
  state={pageState({ data: pageData, isLoading, error, onRetry: load, emptyCopy: { title: 'هنوز نظری ثبت نشده است' } })}
>
  <DataTable
    columns={columns}
    data={pageData ?? []} // فقط ردیف‌های صفحه جاری
    pagination={{
      currentPage,
      totalPages,
      onPageChange: setCurrentPage,
      pageSize,
      onPageSizeChange: setPageSize,
      totalRows, // تعداد کل ردیف‌ها طبق گزارش سرور
    }}
  />
</DetailSection>

// ❌ غلط — نمودار با ارتفاع صفر رندر می‌شود و بدون هیچ خطایی خالی می‌ماند
<div>
  <PartoBarChart data={sentimentByTopic} keys={['مثبت', 'منفی', 'خنثی']} indexBy="موضوع" />
</div>

// ✅ درست — والد ارتفاع صریح دارد
<div className="h-[400px]">
  <PartoBarChart data={sentimentByTopic} keys={['مثبت', 'منفی', 'خنثی']} indexBy="موضوع" />
</div>

// ❌ غلط — لحن غیررسمی و ارقام لاتین
<PageHeaderDescription>عملکرد سارا رو ببین — 245000 دنبال‌کننده</PageHeaderDescription>

// ✅ درست — فارسی رسمی و ارقام فارسی هماهنگ با بقیه صفحه
<PageHeaderDescription>بررسی عملکرد و تحلیل محتوای سارا احمدی — 245,000 دنبال‌کننده</PageHeaderDescription>