@fayz-ai/plugin-reputation 0.9.0-next.1 → 0.9.1

package/README.md

@@ -1,6 +1,6 @@
 # @fayz-ai/plugin-reputation
 
-> **Status: experimental (incubating).** Not capability-complete — missing some or all of the capability bar (data-provider contract w/ supabase+mock pair, entity registries, settings, migrations; see `docs/PLUGIN-PATTERNS.md`). Fine to explore in dogfoods; NOT ready for fresh installs or generated apps, and its API may change without notice.
+> **Status: experimental (incubating).** Not capability-complete — missing some or all of the capability bar (data-provider contract w/ supabase+mock pair, entity registries, settings, migrations; see `docs/plugins/PLUGIN-PATTERNS.md`). Fine to explore in dogfoods; NOT ready for fresh installs or generated apps, and its API may change without notice.
 
 > Reviews and reputation, in one place — see the stars, reply, ask for more.
 
@@ -25,7 +25,7 @@ Peer deps: `@fayz-ai/core`, `@fayz-ai/ui`, plus `react` / `react-dom`.
 
 ## Usage
 ```tsx
-import { defineSaas } from '@fayz-ai/saas'
+import { defineSaas } from '@fayz-ai/admin'
 import { createReputationPlugin } from '@fayz-ai/plugin-reputation'
 
 export const app = defineSaas({
@@ -40,4 +40,4 @@ export const app = defineSaas({
 The trust layer of the engine. Pairs with `plugin-conversations` (turn a great chat into a review request), `plugin-crm` (know exactly who to ask), and `plugin-marketing` (feed the social proof back into acquisition).
 
 ## Roadmap & contributing
-Early scaffold — built in the open. See the [Fayz SDK roadmap](../../docs/ROADMAP.md#plugin-reputation) for current gaps, missing features, and good first issues.
+Early scaffold — built in the open. See the [Fayz SDK roadmap](../../docs/platform/ROADMAP.md#plugin-reputation) for current gaps, missing features, and good first issues.

package/package.json

@@ -3,7 +3,7 @@
   "fayz": {
     "status": "preview"
   },
-  "version": "0.9.0-next.1",
+  "version": "0.9.1",
   "description": "[experimental] Fayz SDK — reviews & reputation management plugin",
   "type": "module",
   "sideEffects": false,
@@ -12,19 +12,16 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "source": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
     "./public": {
-      "source": "./src/public/index.tsx",
       "types": "./dist/public/index.d.ts",
       "import": "./dist/public/index.js"
     }
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -32,8 +29,8 @@
     "lucide-react": ">=0.400.0 <1.0.0"
   },
   "dependencies": {
-    "@fayz-ai/ui": "^0.9.0-next.1",
-    "@fayz-ai/core": "^0.9.0-next.1"
+    "@fayz-ai/core": "^0.10.0",
+    "@fayz-ai/ui": "^0.10.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.0",

package/src/components/ReviewsList.tsx

@@ -1,69 +0,0 @@
-import { Star } from 'lucide-react'
-import { useReviews } from '../hooks/useReviews'
-import { useReviewSummary } from '../hooks/useReviewSummary'
-
-function Stars({ rating }: { rating: number }) {
-  return (
-    <div className="flex items-center gap-0.5">
-      {[1, 2, 3, 4, 5].map((i) => (
-        <Star
-          key={i}
-          className={`h-4 w-4 ${i <= rating ? 'fill-primary text-primary' : 'text-muted-foreground/30'}`}
-        />
-      ))}
-    </div>
-  )
-}
-
-/**
- * Default reviews list with an aggregate header — token-only so it inherits the
- * host theme. Optional: a host with bespoke review cards can ignore this and map
- * `useReviews()` / `useReviewSummary()` itself (as hempdent does on its home).
- */
-export function ReviewsList({ limit, heading }: { limit?: number; heading?: string }) {
-  const { reviews, loading } = useReviews({ limit })
-  const { summary } = useReviewSummary()
-
-  return (
-    <section className="py-16 bg-background">
-      <div className="container mx-auto px-6">
-        <div className="text-center mb-12">
-          {heading ? (
-            <h1 className="font-heading text-4xl md:text-5xl font-bold text-foreground mb-3">{heading}</h1>
-          ) : null}
-          {summary ? (
-            <div className="flex items-center justify-center gap-2">
-              <Stars rating={Math.round(summary.average)} />
-              <span className="text-foreground font-semibold text-lg">{summary.average}</span>
-              <span className="text-muted-foreground text-sm">· {summary.count} avaliações</span>
-            </div>
-          ) : null}
-        </div>
-
-        {loading ? (
-          <p className="text-center text-muted-foreground">Carregando avaliações…</p>
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            {reviews.map((review) => (
-              <div key={review.id} className="rounded-2xl bg-card border border-border p-6 shadow-sm">
-                <div className="mb-3">
-                  <Stars rating={review.rating} />
-                </div>
-                <p className="text-foreground text-sm leading-relaxed mb-4">"{review.text}"</p>
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <div className="h-8 w-8 rounded-full bg-accent flex items-center justify-center text-primary font-semibold text-sm">
-                      {review.author[0]}
-                    </div>
-                    <span className="text-sm font-medium text-foreground">{review.author}</span>
-                  </div>
-                  <span className="text-xs text-muted-foreground">{review.date}</span>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </section>
-  )
-}

package/src/context.tsx

@@ -1,20 +0,0 @@
-import { createContext, useContext, type ReactNode } from 'react'
-import type { ReputationDataProvider } from './data/types'
-
-export interface ReputationContextValue {
-  provider: ReputationDataProvider
-}
-
-const ReputationContext = createContext<ReputationContextValue | null>(null)
-
-export function ReputationProvider({ value, children }: { value: ReputationContextValue; children: ReactNode }) {
-  return <ReputationContext.Provider value={value}>{children}</ReputationContext.Provider>
-}
-
-export function useReputationContext(): ReputationContextValue {
-  const ctx = useContext(ReputationContext)
-  if (!ctx) {
-    throw new Error('[plugin-reputation] useReputationContext must be used within <ReputationProvider>.')
-  }
-  return ctx
-}

package/src/data/index.ts

@@ -1,4 +0,0 @@
-export type { ReputationDataProvider } from './types'
-export { createMockReputationProvider } from './mock'
-export type { ReputationSeed, MockReputationProviderOptions } from './mock'
-export { createSupabaseReputationProvider } from './supabase'

package/src/data/mock.ts

@@ -1,45 +0,0 @@
-import type { ReputationDataProvider } from './types'
-import type { Review, ReviewSummary, ReviewListQuery } from '../types'
-
-export interface ReputationSeed {
-  reviews: Review[]
-  /** Explicit aggregate. If omitted, it is computed from `reviews`. */
-  summary?: ReviewSummary
-}
-
-export interface MockReputationProviderOptions {
-  seed?: ReputationSeed
-}
-
-const FALLBACK_REVIEWS: Review[] = [
-  { id: 'r1', author: 'Camila R.', source: 'Google', rating: 5, text: 'Excelente atendimento, recomendo!', date: 'Jun 2025' },
-  { id: 'r2', author: 'Tom B.', source: 'Facebook', rating: 5, text: 'Processo simples e resultado ótimo.', date: 'Jun 2025' },
-  { id: 'r3', author: 'Aisha K.', source: 'Google', rating: 4, text: 'Muito bom no geral.', date: 'Jun 2025' },
-]
-
-function computeSummary(reviews: Review[]): ReviewSummary {
-  const count = reviews.length
-  const average = count === 0 ? 0 : Math.round((reviews.reduce((s, r) => s + r.rating, 0) / count) * 10) / 10
-  const distribution = [5, 4, 3, 2, 1].map((stars) => ({
-    stars,
-    count: reviews.filter((r) => Math.round(r.rating) === stars).length,
-  }))
-  return { average, count, distribution }
-}
-
-export function createMockReputationProvider(options?: MockReputationProviderOptions): ReputationDataProvider {
-  const reviews: Review[] = options?.seed?.reviews ?? FALLBACK_REVIEWS
-  const summary: ReviewSummary = options?.seed?.summary ?? computeSummary(reviews)
-
-  return {
-    async listReviews(query?: ReviewListQuery): Promise<Review[]> {
-      let result = reviews
-      if (query?.minRating != null) result = result.filter((r) => r.rating >= query.minRating!)
-      if (query?.limit != null) result = result.slice(0, query.limit)
-      return result
-    },
-    async getSummary(): Promise<ReviewSummary> {
-      return summary
-    },
-  }
-}

package/src/data/supabase.ts

@@ -1,24 +0,0 @@
-import type { ReputationDataProvider } from './types'
-import type { Review, ReviewSummary, ReviewListQuery } from '../types'
-
-// ---------------------------------------------------------------------------
-// Supabase-backed reputation provider — STUB (deferred to Phase 2).
-//
-// Later: read a `reviews` table (tenant-scoped, RLS) and/or synced Google/
-// Facebook reviews. Swapping this in is a pure provider change — hooks and
-// components are untouched. Throws until then so createSafeDataProvider falls
-// back to the mock/seed provider whenever no Supabase client is configured.
-// ---------------------------------------------------------------------------
-
-export function createSupabaseReputationProvider(): ReputationDataProvider {
-  const notImplemented = (): never => {
-    throw new Error(
-      '[plugin-reputation] Supabase provider not implemented yet — deferred to Phase 2. ' +
-        'Run on the mock/seed provider (no Supabase client configured) for now.',
-    )
-  }
-  return {
-    listReviews: (_query?: ReviewListQuery): Promise<Review[]> => notImplemented(),
-    getSummary: (): Promise<ReviewSummary> => notImplemented(),
-  }
-}

package/src/data/types.ts

@@ -1,10 +0,0 @@
-import type { Review, ReviewSummary, ReviewListQuery } from '../types'
-
-/**
- * Data seam for reputation. Mock/seed powers the POC; a Supabase (or
- * Google/Facebook sync) implementation swaps in later with no component change.
- */
-export interface ReputationDataProvider {
-  listReviews(query?: ReviewListQuery): Promise<Review[]>
-  getSummary(): Promise<ReviewSummary>
-}

package/src/hooks/index.ts

@@ -1,4 +0,0 @@
-export { useReviews } from './useReviews'
-export type { UseReviewsResult } from './useReviews'
-export { useReviewSummary } from './useReviewSummary'
-export type { UseReviewSummaryResult } from './useReviewSummary'

package/src/hooks/useReviewSummary.ts

@@ -1,41 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useReputationContext } from '../context'
-import type { ReviewSummary } from '../types'
-
-export interface UseReviewSummaryResult {
-  summary: ReviewSummary | null
-  loading: boolean
-  error: Error | null
-}
-
-/** Fetch the aggregate rating summary (average + count + distribution). */
-export function useReviewSummary(): UseReviewSummaryResult {
-  const { provider } = useReputationContext()
-  const [summary, setSummary] = useState<ReviewSummary | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    let active = true
-    setLoading(true)
-    provider
-      .getSummary()
-      .then((result) => {
-        if (!active) return
-        setSummary(result)
-        setError(null)
-      })
-      .catch((err) => {
-        if (!active) return
-        setError(err instanceof Error ? err : new Error(String(err)))
-      })
-      .finally(() => {
-        if (active) setLoading(false)
-      })
-    return () => {
-      active = false
-    }
-  }, [provider])
-
-  return { summary, loading, error }
-}

package/src/hooks/useReviews.ts

@@ -1,44 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useReputationContext } from '../context'
-import type { Review, ReviewListQuery } from '../types'
-
-export interface UseReviewsResult {
-  reviews: Review[]
-  loading: boolean
-  error: Error | null
-}
-
-/** Fetch the review list from the active reputation provider. */
-export function useReviews(query?: ReviewListQuery): UseReviewsResult {
-  const { provider } = useReputationContext()
-  const [reviews, setReviews] = useState<Review[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  const limit = query?.limit
-  const minRating = query?.minRating
-
-  useEffect(() => {
-    let active = true
-    setLoading(true)
-    provider
-      .listReviews({ limit, minRating })
-      .then((result) => {
-        if (!active) return
-        setReviews(result)
-        setError(null)
-      })
-      .catch((err) => {
-        if (!active) return
-        setError(err instanceof Error ? err : new Error(String(err)))
-      })
-      .finally(() => {
-        if (active) setLoading(false)
-      })
-    return () => {
-      active = false
-    }
-  }, [provider, limit, minRating])
-
-  return { reviews, loading, error }
-}

package/src/index.ts

@@ -1,56 +0,0 @@
-import React from 'react'
-import type { PluginManifest, PluginScope, VerticalId } from '@fayz-ai/core'
-import { ReputationHome } from './views/ReputationHome'
-
-// ---------------------------------------------------------------------------
-// @fayz-ai/plugin-reputation — reviews & reputation (GoHighLevel "Reputation").
-// Universal plugin. M1 ships a rich mock home; Google/Facebook review sync +
-// automated review requests (over connectors + automations) come later.
-//
-// The public/website surface (createReputationWebsite + hooks + ReviewsList)
-// lives in the lean './public' subpath so a marketing-site host imports it
-// WITHOUT pulling the admin view's @fayz-ai/ui graph.
-// ---------------------------------------------------------------------------
-
-export interface ReputationPluginOptions {
-  navPosition?: number
-  navSection?: 'main' | 'secondary' | 'settings'
-  navLabel?: string
-  scope?: PluginScope
-  verticalId?: VerticalId
-}
-
-export function createReputationPlugin(options?: ReputationPluginOptions): PluginManifest {
-  const PageComponent: React.ComponentType<unknown> = () => React.createElement(ReputationHome)
-  PageComponent.displayName = 'ReputationHome'
-
-  return {
-    id: 'reputation',
-    name: options?.navLabel ?? 'Reputation',
-    icon: 'Award',
-    version: '1.0.0',
-    scope: options?.scope ?? 'universal',
-    verticalId: options?.verticalId,
-    defaultEnabled: true,
-    dependencies: [],
-    declaredFeatures: [{ id: 'reputation', label: 'Reputation', group: 'Retain' }],
-    navigation: [
-      {
-        section: options?.navSection ?? 'main',
-        position: options?.navPosition ?? 8,
-        label: options?.navLabel ?? 'Reputation',
-        route: '/reputation',
-        icon: 'Award',
-        permission: { feature: 'reputation', action: 'read' as const },
-      },
-    ],
-    routes: [
-      {
-        path: '/reputation',
-        component: PageComponent,
-        permission: { feature: 'reputation', action: 'read' as const },
-      },
-    ],
-    widgets: [],
-  }
-}

package/src/public/index.tsx

@@ -1,82 +0,0 @@
-import { createElement, type FC, type ReactNode } from 'react'
-import type { PluginManifest, PluginScope, VerticalId } from '@fayz-ai/core'
-import { createSafeDataProvider } from '@fayz-ai/core'
-import { createMockReputationProvider, type ReputationSeed } from '../data/mock'
-import { createSupabaseReputationProvider } from '../data/supabase'
-import { ReputationProvider, type ReputationContextValue } from '../context'
-import { ReviewsList } from '../components/ReviewsList'
-import type { ReputationDataProvider } from '../data/types'
-
-// ---------------------------------------------------------------------------
-// @fayz-ai/plugin-reputation/public — website reviews surface.
-//
-// Lean entry (no admin ReputationHome / @fayz-ai/ui). Returns a { manifest,
-// Provider } bundle the host reads uniformly: the Provider wraps the app root so
-// useReviews()/useReviewSummary() power the host's own review markup, and
-// manifest.routes ships an optional /reviews page.
-// ---------------------------------------------------------------------------
-
-export interface ReputationWebsiteOptions {
-  /** Base path for the optional public "all reviews" page. Default '/reviews'. */
-  basePath?: string
-  /** Seed reviews + summary for the mock provider (used until a real backend is wired). */
-  seed?: ReputationSeed
-  /** Inject a custom provider. Overrides the safe mock/Supabase resolver. */
-  dataProvider?: ReputationDataProvider
-  /** Heading for the optional /reviews screen. */
-  heading?: string
-  scope?: PluginScope
-  verticalId?: VerticalId
-}
-
-export interface ReputationWebsitePlugin {
-  manifest: PluginManifest
-  Provider: FC<{ children: ReactNode }>
-  dataProvider: ReputationDataProvider
-}
-
-export function createReputationWebsite(options?: ReputationWebsiteOptions): ReputationWebsitePlugin {
-  const basePath = options?.basePath ?? '/reviews'
-  const heading = options?.heading ?? 'O que os pacientes dizem'
-  const provider =
-    options?.dataProvider ??
-    createSafeDataProvider(
-      () => createSupabaseReputationProvider(),
-      () => createMockReputationProvider({ seed: options?.seed }),
-    )
-
-  const value: ReputationContextValue = { provider }
-  const Provider: FC<{ children: ReactNode }> = ({ children }) =>
-    createElement(ReputationProvider, { value, children })
-  Provider.displayName = 'ReputationWebsiteProvider'
-
-  const ReviewsScreen: FC<unknown> = () => createElement(ReviewsList, { heading })
-  ReviewsScreen.displayName = 'ReviewsScreen'
-
-  const manifest: PluginManifest = {
-    id: 'reputation',
-    name: 'Reviews',
-    icon: 'Star',
-    version: '0.1.0',
-    scope: options?.scope ?? 'universal',
-    verticalId: options?.verticalId,
-    scaffolds: ['website', 'landing_page'],
-    defaultEnabled: true,
-    dependencies: [],
-    navigation: [],
-    routes: [{ path: basePath, component: ReviewsScreen, guard: 'public' }],
-    widgets: [],
-  }
-
-  return { manifest, Provider, dataProvider: provider }
-}
-
-// Public API — website surface
-export type { Review, ReviewSummary, ReviewSource, ReviewListQuery } from '../types'
-export type { ReputationDataProvider } from '../data/types'
-export { createMockReputationProvider, createSupabaseReputationProvider } from '../data'
-export type { ReputationSeed } from '../data/mock'
-export { ReputationProvider, useReputationContext } from '../context'
-export type { ReputationContextValue } from '../context'
-export { useReviews, useReviewSummary } from '../hooks'
-export { ReviewsList } from '../components/ReviewsList'

package/src/types.ts

@@ -1,34 +0,0 @@
-// ---------------------------------------------------------------------------
-// Reputation domain types (shared by the admin M1 view and the website surface).
-// Presentation-agnostic: a host site maps these into its own review-card markup.
-// ---------------------------------------------------------------------------
-
-export type ReviewSource = 'Google' | 'Facebook' | 'Instagram' | 'Website' | (string & {})
-
-export interface Review {
-  id: string
-  /** Reviewer display name. */
-  author: string
-  rating: number
-  text: string
-  /** Human-readable date (e.g. "Janeiro 2025"). */
-  date: string
-  source?: ReviewSource
-  /** Whether the business has replied (admin surface). */
-  replied?: boolean
-}
-
-export interface ReviewSummary {
-  /** Average rating, e.g. 4.8. */
-  average: number
-  /** Total number of ratings, e.g. 123. */
-  count: number
-  /** Optional star distribution (5→1). */
-  distribution?: Array<{ stars: number; count: number }>
-}
-
-export interface ReviewListQuery {
-  limit?: number
-  /** Minimum rating to include. */
-  minRating?: number
-}

package/src/views/ReputationHome.tsx

@@ -1,102 +0,0 @@
-import React from 'react'
-import { Star, Send, MessageSquare } from 'lucide-react'
-import { Button, PageHeaderActions } from '@fayz-ai/ui'
-
-interface Review {
-  id: string
-  author: string
-  source: 'Google' | 'Facebook'
-  rating: number
-  text: string
-  date: string
-  replied: boolean
-}
-
-const REVIEWS: Review[] = [
-  { id: '1', author: 'Camila R.', source: 'Google', rating: 5, text: 'Absolutely loved the experience. The team is professional and friendly!', date: 'Jun 15', replied: true },
-  { id: '2', author: 'Tom B.', source: 'Facebook', rating: 5, text: 'Booking was effortless and the results were fantastic.', date: 'Jun 13', replied: false },
-  { id: '3', author: 'Aisha K.', source: 'Google', rating: 4, text: 'Great service overall, slightly long wait but worth it.', date: 'Jun 11', replied: false },
-  { id: '4', author: 'Marco P.', source: 'Google', rating: 5, text: 'Best in town. Highly recommend to anyone.', date: 'Jun 9', replied: true },
-  { id: '5', author: 'Lena S.', source: 'Facebook', rating: 3, text: 'Good but the pricing could be clearer up front.', date: 'Jun 6', replied: false },
-]
-
-const DISTRIBUTION = [
-  { stars: 5, count: 182 },
-  { stars: 4, count: 41 },
-  { stars: 3, count: 12 },
-  { stars: 2, count: 4 },
-  { stars: 1, count: 3 },
-]
-
-function Stars({ rating, className }: { rating: number; className?: string }) {
-  return (
-    <div className={`flex items-center gap-0.5 ${className ?? ''}`}>
-      {[1, 2, 3, 4, 5].map((i) => (
-        <Star key={i} className={`h-4 w-4 ${i <= rating ? 'fill-amber-400 text-amber-400' : 'text-muted-foreground/30'}`} />
-      ))}
-    </div>
-  )
-}
-
-export function ReputationHome() {
-  const total = DISTRIBUTION.reduce((s, d) => s + d.count, 0)
-  return (
-    <div className="mx-auto max-w-6xl p-6">
-      <PageHeaderActions>
-        <Button><Send className="mr-1.5 h-4 w-4" /> Request reviews</Button>
-      </PageHeaderActions>
-
-      <div className="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-3">
-        <div className="rounded-card border border-border bg-card p-5 text-center">
-          <p className="text-4xl font-bold text-foreground">4.8</p>
-          <Stars rating={5} className="mt-1 justify-center" />
-          <p className="mt-1 text-xs text-muted-foreground">{total} reviews</p>
-        </div>
-        <div className="rounded-card border border-border bg-card p-5 lg:col-span-2">
-          <div className="space-y-1.5">
-            {DISTRIBUTION.map((d) => (
-              <div key={d.stars} className="flex items-center gap-2 text-xs">
-                <span className="w-6 text-muted-foreground">{d.stars}★</span>
-                <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
-                  <div className="h-full rounded-full bg-amber-400" style={{ width: `${(d.count / total) * 100}%` }} />
-                </div>
-                <span className="w-8 text-right text-muted-foreground">{d.count}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      <div className="mt-6 space-y-3">
-        {REVIEWS.map((r) => (
-          <div key={r.id} className="rounded-card border border-border bg-card p-4">
-            <div className="flex items-start justify-between">
-              <div className="flex items-center gap-3">
-                <div className="flex h-9 w-9 items-center justify-center rounded-full bg-muted text-sm font-semibold text-foreground">
-                  {r.author[0]}
-                </div>
-                <div>
-                  <p className="text-sm font-semibold text-foreground">{r.author}</p>
-                  <p className="text-xs text-muted-foreground">{r.source} · {r.date}</p>
-                </div>
-              </div>
-              <Stars rating={r.rating} />
-            </div>
-            <p className="mt-2 text-sm text-muted-foreground">{r.text}</p>
-            <div className="mt-2">
-              {r.replied ? (
-                <span className="text-xs font-medium text-emerald-600">✓ Replied</span>
-              ) : (
-                <Button variant="outline" size="sm"><MessageSquare className="mr-1.5 h-3.5 w-3.5" /> Reply</Button>
-              )}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <p className="mt-4 text-center text-xs text-muted-foreground">
-        Mock preview · Google/Facebook review sync + automated requests ship in a later milestone.
-      </p>
-    </div>
-  )
-}