feat(parent): add attention banner, export button, and grade detail

- Add parent-attention-banner for highlighting items needing attention

- Add parent-export-button for data export capability

- Add child-grade-detail component for detailed grade viewing

- Update existing child-card, child-detail-header, child-grade-summary, child-schedule-card

- Update parent-children-data-page and data-access

src/modules/parent/components/child-grade-summary.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo } from "react"
 import Link from "next/link"
-import { BarChart3, Trophy } from "lucide-react"
+import { BarChart3, TrendingDown, TrendingUp, Minus, Trophy } from "lucide-react"
 
 import { ChartCardShell } from "@/shared/components/charts/chart-card-shell"
 import { TrendLineChart } from "@/shared/components/charts/trend-line-chart"
@@ -10,6 +10,30 @@ import { Badge } from "@/shared/components/ui/badge"
 import { formatDate } from "@/shared/lib/utils"
 import type { StudentDashboardGradeProps } from "@/modules/homework/types"
 
+type TrendDirection = "up" | "down" | "flat" | "unknown"
+
+const computeTrend = (trend: { percentage: number }[]): TrendDirection => {
+  if (trend.length < 2) return "unknown"
+  const latest = trend[trend.length - 1].percentage
+  const prev = trend[trend.length - 2].percentage
+  if (latest > prev) return "up"
+  if (latest < prev) return "down"
+  return "flat"
+}
+
+const TrendIcon = ({ direction }: { direction: TrendDirection }) => {
+  if (direction === "up") {
+    return <TrendingUp className="h-4 w-4 text-emerald-600" aria-label="improving" />
+  }
+  if (direction === "down") {
+    return <TrendingDown className="h-4 w-4 text-destructive" aria-label="declining" />
+  }
+  if (direction === "flat") {
+    return <Minus className="h-4 w-4 text-muted-foreground" aria-label="stable" />
+  }
+  return null
+}
+
 export function ChildGradeSummary({
   grades,
   childId,
@@ -22,14 +46,16 @@ export function ChildGradeSummary({
   const hasGradeTrend = grades.trend.length > 0
   const ranking = grades.ranking
   const latestGrade = grades.trend[grades.trend.length - 1]
+  const trendDirection = computeTrend(grades.trend)
 
   const chartData = useMemo(
     () =>
-      grades.trend.map((item) => ({
+      grades.trend.map((item, idx) => ({
         title: item.assignmentTitle,
         score: Math.round(item.percentage),
         fullTitle: item.assignmentTitle,
         date: formatDate(item.submittedAt),
+        index: idx + 1,
         rawScore: item.score,
         maxScore: item.maxScore,
       })),
@@ -47,15 +73,21 @@ export function ChildGradeSummary({
       emptyDescription="Finish and submit assignments to see score trend."
       emptyClassName="h-48"
     >
-      <div className="space-y-4">
+      <div
+        className="space-y-4"
+        aria-label={`Grade trend chart for ${childName}, ${grades.trend.length} records`}
+      >
         <div className="grid grid-cols-2 gap-3">
           <div className="rounded-md bg-muted/50 p-3">
             <div className="text-xs text-muted-foreground flex items-center gap-1">
-              <BarChart3 className="h-3 w-3" />
+              <BarChart3 className="h-3 w-3" aria-hidden />
               Latest Score
             </div>
-            <div className="text-xl font-semibold tabular-nums">
-              {latestGrade ? `${Math.round(latestGrade.percentage)}%` : "-"}
+            <div className="flex items-center gap-2">
+              <div className="text-xl font-semibold tabular-nums">
+                {latestGrade ? `${Math.round(latestGrade.percentage)}%` : "-"}
+              </div>
+              {hasGradeTrend ? <TrendIcon direction={trendDirection} /> : null}
             </div>
             {latestGrade ? (
               <div className="text-xs text-muted-foreground tabular-nums">
@@ -65,13 +97,17 @@ export function ChildGradeSummary({
           </div>
           <div className="rounded-md bg-muted/50 p-3">
             <div className="text-xs text-muted-foreground flex items-center gap-1">
-              <Trophy className="h-3 w-3" />
+              <Trophy className="h-3 w-3" aria-hidden />
               Class Rank
             </div>
             <div className="text-xl font-semibold tabular-nums">
               {ranking ? `${ranking.rank}/${ranking.classSize}` : "-"}
             </div>
-            {ranking ? <div className="text-xs text-muted-foreground">Current position</div> : null}
+            {ranking ? (
+              <div className="text-xs text-muted-foreground">
+                Top {Math.ceil((ranking.rank / ranking.classSize) * 100)}%
+              </div>
+            ) : null}
           </div>
         </div>
 
@@ -87,7 +123,7 @@ export function ChildGradeSummary({
                 activeDotRadius: 5,
               },
             ]}
-            xKey="date"
+            xKey="index"
             xTickFormatter={null}
             heightClassName="h-[160px]"
             margin={{ left: 8, right: 8, top: 8, bottom: 8 }}
@@ -103,7 +139,7 @@ export function ChildGradeSummary({
               <Link
                 key={r.assignmentId}
                 href={`/parent/children/${childId}?tab=grades`}
-                className="flex items-center justify-between rounded-md border bg-card p-2 hover:bg-muted/50 transition-colors"
+                className="flex min-h-[44px] items-center justify-between rounded-md border bg-card p-2 hover:bg-muted/50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
               >
                 <div className="min-w-0 flex-1">
                   <div className="font-medium text-sm truncate">{r.assignmentTitle}</div>