{children}
+
+
+ )
+}
diff --git a/src/app/globals.css b/src/app/globals.css
new file mode 100644
index 0000000..c1abea2
--- /dev/null
+++ b/src/app/globals.css
@@ -0,0 +1,130 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --font-sans: var(--font-sans);
+ --font-mono: var(--font-geist-mono);
+ --font-heading: var(--font-sans);
+ --color-sidebar-ring: var(--sidebar-ring);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar: var(--sidebar);
+ --color-chart-5: var(--chart-5);
+ --color-chart-4: var(--chart-4);
+ --color-chart-3: var(--chart-3);
+ --color-chart-2: var(--chart-2);
+ --color-chart-1: var(--chart-1);
+ --color-ring: var(--ring);
+ --color-input: var(--input);
+ --color-border: var(--border);
+ --color-destructive: var(--destructive);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-accent: var(--accent);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-muted: var(--muted);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-secondary: var(--secondary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-primary: var(--primary);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-popover: var(--popover);
+ --color-card-foreground: var(--card-foreground);
+ --color-card: var(--card);
+ --radius-sm: calc(var(--radius) * 0.6);
+ --radius-md: calc(var(--radius) * 0.8);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) * 1.4);
+ --radius-2xl: calc(var(--radius) * 1.8);
+ --radius-3xl: calc(var(--radius) * 2.2);
+ --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+ --background: oklch(0.984 0.003 17);
+ --foreground: oklch(0.2 0.01 17);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.2 0.01 17);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.2 0.01 17);
+ --primary: oklch(0.586 0.216 17);
+ --primary-foreground: oklch(0.99 0 0);
+ --secondary: oklch(0.965 0.004 17);
+ --secondary-foreground: oklch(0.2 0.01 17);
+ --muted: oklch(0.965 0.004 17);
+ --muted-foreground: oklch(0.54 0.01 17);
+ --accent: oklch(0.955 0.03 17);
+ --accent-foreground: oklch(0.586 0.216 17);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.92 0.006 17);
+ --input: oklch(0.92 0.006 17);
+ --ring: oklch(0.586 0.216 17 / 40%);
+ --chart-1: oklch(0.586 0.216 17);
+ --chart-2: oklch(0.65 0.15 220);
+ --chart-3: oklch(0.72 0.15 150);
+ --chart-4: oklch(0.75 0.15 70);
+ --chart-5: oklch(0.6 0.18 290);
+ --radius: 0.75rem;
+ --sidebar: oklch(1 0 0);
+ --sidebar-foreground: oklch(0.2 0.01 17);
+ --sidebar-primary: oklch(0.586 0.216 17);
+ --sidebar-primary-foreground: oklch(0.99 0 0);
+ --sidebar-accent: oklch(0.955 0.03 17);
+ --sidebar-accent-foreground: oklch(0.586 0.216 17);
+ --sidebar-border: oklch(0.94 0.005 17);
+ --sidebar-ring: oklch(0.586 0.216 17 / 40%);
+}
+
+.dark {
+ --background: oklch(0.17 0.006 17);
+ --foreground: oklch(0.96 0 0);
+ --card: oklch(0.215 0.008 17);
+ --card-foreground: oklch(0.96 0 0);
+ --popover: oklch(0.215 0.008 17);
+ --popover-foreground: oklch(0.96 0 0);
+ --primary: oklch(0.645 0.211 17);
+ --primary-foreground: oklch(0.99 0 0);
+ --secondary: oklch(0.28 0.008 17);
+ --secondary-foreground: oklch(0.96 0 0);
+ --muted: oklch(0.28 0.008 17);
+ --muted-foreground: oklch(0.68 0.01 17);
+ --accent: oklch(0.32 0.05 17);
+ --accent-foreground: oklch(0.9 0.06 17);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.645 0.211 17 / 45%);
+ --chart-1: oklch(0.645 0.211 17);
+ --chart-2: oklch(0.65 0.15 220);
+ --chart-3: oklch(0.72 0.15 150);
+ --chart-4: oklch(0.75 0.15 70);
+ --chart-5: oklch(0.6 0.18 290);
+ --sidebar: oklch(0.19 0.008 17);
+ --sidebar-foreground: oklch(0.96 0 0);
+ --sidebar-primary: oklch(0.645 0.211 17);
+ --sidebar-primary-foreground: oklch(0.99 0 0);
+ --sidebar-accent: oklch(0.28 0.05 17);
+ --sidebar-accent-foreground: oklch(0.9 0.06 17);
+ --sidebar-border: oklch(1 0 0 / 8%);
+ --sidebar-ring: oklch(0.645 0.211 17 / 45%);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+ html {
+ @apply font-sans;
+ }
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..6cd5a80
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,61 @@
+import type { Metadata, Viewport } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { ThemeProvider } from "@/components/theme-provider";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { Toaster } from "@/components/ui/sonner";
+import { ModalStackProvider } from "@/components/modal-stack";
+
+const geistSans = Geist({
+ variable: "--font-sans",
+ subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+ variable: "--font-geist-mono",
+ subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+ title: "HexaFitness | Fitness Automation Simplified",
+ description: "Gym management dashboard for HexaFitness.",
+};
+
+export const viewport: Viewport = {
+ width: "device-width",
+ initialScale: 1,
+ maximumScale: 1,
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ Reset password
++ {step === "identifier" && "Forgot your password?"} + {step === "otp" && "Enter the code"} + {step === "password" && "Choose a new password"} +
++ {step === "identifier" && "Enter your email or mobile and we'll send you a verification code."} + {step === "otp" && `We sent a 6-digit code to ${identifier}.`} + {step === "password" && "Pick a strong password you haven't used before."} +
+ + {step === "identifier" && ( + + )} + + {step === "otp" && ( + + )} + + {step === "password" && ( + + )} +
+
+ )
+}
+
+export default function LoginPage() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ Sign in
+Welcome back
+Enter your details to access your gym.
+ + +
+
+ )}
+
+ {step === "error" && (
+ <>
+ Loading your invoice…
+Link unavailable
+{errorMessage}
+ + )} + + {(step === "form" || step === "paying") && invoice && ( + <> ++ {invoice.gymName ?? "Pay your invoice"} +
++ {invoice.planName ? `${invoice.planName} — ` : ""} + Outstanding balance: {formatCurrency(invoice.balance)} +
+ +
+
+ )}
+ Payment received
++ Thanks{invoice?.memberName ? `, ${invoice.memberName}` : ""} — your payment has been recorded. +
+
+
+ )
+}
+
+export default function ResetPasswordPage() {
+ return (
+
+
+
+
+
+
+
+
+
+ Set password
+ + {!token ? ( + <> +Invalid link
++ This link is missing its token. Request a new password reset email and try again. +
+ } + > + Request a new link + + + ) : done ? ( + <> +
+
+ + Your password has been updated. Sign in with your new password to continue. +
+ + + ) : ( + <> +Choose a new password
++ Pick a strong password you haven't used before. +
+ + + + )} + ++ + Back to sign in + +
+
+ onChange(e.target.value)}
+ onFocus={() => suggestions.length > 0 && setOpen(true)}
+ autoComplete="off"
+ />
+ {loading && (
+
+ )
+}
+
+export { AddressAutocomplete }
diff --git a/src/components/hexa/app-sidebar.tsx b/src/components/hexa/app-sidebar.tsx
new file mode 100644
index 0000000..cc20b65
--- /dev/null
+++ b/src/components/hexa/app-sidebar.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { MapPinIcon } from "lucide-react"
+
+import { NAV_ITEMS, isNavItemActive } from "@/lib/nav"
+import { useNavItems } from "@/hooks/use-nav-items"
+import { useClientProfile } from "@/components/hexa/client-profile-context"
+import {
+ Sidebar,
+ SidebarContent,
+ SidebarFooter,
+ SidebarGroup,
+ SidebarGroupContent,
+ SidebarHeader,
+ SidebarMenu,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ useSidebar,
+} from "@/components/ui/sidebar"
+
+interface AppSidebarProps {
+ /** Sandbox demo mode: navigate by key with local state instead of route links. */
+ activeKey?: string
+ onNavigate?: (key: string) => void
+}
+
+function AppSidebar({ activeKey, onNavigate }: AppSidebarProps) {
+ const pathname = usePathname()
+ const { setOpenMobile } = useSidebar()
+ const profile = useClientProfile()
+ // Sandbox demo mode (onNavigate present, no backend to call) keeps the static list;
+ // real dashboard usage fetches the live, permission-filtered nav.
+ const { items: liveItems } = useNavItems(!onNavigate)
+ const items = onNavigate ? NAV_ITEMS : liveItems
+
+ const gymName = profile.gymName ?? "HexaFitness Gym"
+ const location = [profile.city, profile.address && profile.city ? null : profile.address]
+ .filter(Boolean)
+ .join(", ") || "Sri Lanka"
+ const gymInitials = gymName
+ .split(/\s+/)
+ .filter(Boolean)
+ .slice(0, 2)
+ .map((w) => w[0]?.toUpperCase())
+ .join("")
+
+ return (
+
+ {suggestions.map((s, i) => (
+
+ ))}
+
+ )}
+
+
+
+ {profile.logoUrl ? (
+ // eslint-disable-next-line @next/next/no-img-element -- base64 data URL, not an optimizable remote asset
+ 
+ ) : (
+ {gymInitials || "GY"}
+ )}
+
+
+
+ {gymName}
+
+
+ Professionally developed by Hexdive +
+
+ No attendance recorded for this period.
+
+ ) : (
+
+
+ ))
+ ) : !entries || entries.length === 0 ? (
+
+
+
+
+ ) : (
+ entries.map((entry, i) => (
+ {emptyMessage}
+
+
+
+ {initials(entry.name)}
+
+
+
+ ))
+ )}
+
+
+ {entry.eventType && (
+
+ {entry.eventType}
+
+ )}
+ {entry.name}
+{formatTime(entry.time)}
+
+
+ )
+ }
+
+ return (
+ {emptyMessage}
+
+
+ )
+}
+
+export { DataTable }
+export type { DataTableColumn }
diff --git a/src/components/hexa/detail-panel.tsx b/src/components/hexa/detail-panel.tsx
new file mode 100644
index 0000000..459ccec
--- /dev/null
+++ b/src/components/hexa/detail-panel.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+
+import { useMediaQuery } from "@/lib/use-media-query"
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog"
+import {
+ Sheet,
+ SheetContent,
+ SheetDescription,
+ SheetHeader,
+ SheetTitle,
+} from "@/components/ui/sheet"
+
+interface DetailPanelProps {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ title: React.ReactNode
+ description?: React.ReactNode
+ children: React.ReactNode
+}
+
+/** Responsive detail container: bottom sheet on phones, dialog at md+. */
+function DetailPanel({ open, onOpenChange, title, description, children }: DetailPanelProps) {
+ const isDesktop = useMediaQuery("(min-width: 768px)")
+
+ if (isDesktop) {
+ return (
+
+ )
+ }
+
+ return (
+
+ {rows.map((row) => (
+
+
+ onRowClick(row) : undefined}
+ >
+ {renderMobileCard(row)}
+
+ ))}
+
+
+
+
+ {children}
+
+ {claimedDevices.map((d, i) => (
+
+
+
+ {d.deviceName ?? d.deviceId ?? "Device"}
+
+ ))}
+
+
+ )
+}
+
+export { FilterBar }
+export type { FilterSelectConfig }
diff --git a/src/components/hexa/global-customer-search.tsx b/src/components/hexa/global-customer-search.tsx
new file mode 100644
index 0000000..891f51d
--- /dev/null
+++ b/src/components/hexa/global-customer-search.tsx
@@ -0,0 +1,154 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import { SearchIcon } from "lucide-react"
+
+import { getMembers } from "@/lib/api/customers"
+import type { MemberSubscription } from "@/lib/models/customer"
+import { useFetch } from "@/lib/use-fetch"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Input } from "@/components/ui/input"
+
+function initialsFor(name: string | null | undefined) {
+ return (name ?? "?").slice(0, 2).toUpperCase()
+}
+
+function normalizePhone(value: string) {
+ return value.replace(/[^\d]/g, "")
+}
+
+interface GlobalCustomerSearchProps {
+ /** Sandbox demo mode: no backend to query, so the search is disabled. */
+ demo?: boolean
+}
+
+function GlobalCustomerSearch({ demo = false }: GlobalCustomerSearchProps) {
+ const router = useRouter()
+ const members = useFetch(demo ? async () => [] as MemberSubscription[] : getMembers)
+
+ const containerRef = React.useRef
+
+
+ {(resultsShowing !== undefined || onClear) && (
+
+
+
+
+ {filters.map((filter) => (
+
+
+
+
+
+
+ ))}
+
+ {onFiltersClick && (
+
+ )}
+
+
+ )}
+ + Showing {resultsShowing} of{" "} + {resultsTotal} results +
+ {onClear && ( + + )} +
+
+ )
+}
+
+export { GlobalCustomerSearch }
diff --git a/src/components/hexa/info-banner.tsx b/src/components/hexa/info-banner.tsx
new file mode 100644
index 0000000..5602c5d
--- /dev/null
+++ b/src/components/hexa/info-banner.tsx
@@ -0,0 +1,25 @@
+import { InfoIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+interface InfoBannerProps {
+ children: React.ReactNode
+ className?: string
+}
+
+function InfoBanner({ children, className }: InfoBannerProps) {
+ return (
+
+ {results.length === 0 ? (
+
+ )}
+ No members found.
+ ) : ( +-
+ {results.map((row, index) => (
+
- + + + ))} +
+
+ )
+}
+
+export { InfoBanner }
diff --git a/src/components/hexa/invoice/gym-invoice.tsx b/src/components/hexa/invoice/gym-invoice.tsx
new file mode 100644
index 0000000..a67883c
--- /dev/null
+++ b/src/components/hexa/invoice/gym-invoice.tsx
@@ -0,0 +1,358 @@
+import * as React from "react"
+
+interface InvoiceAddress {
+ name: string
+ address: string[]
+ phone: string
+ email: string
+}
+
+interface InvoicePaymentRow {
+ label: string
+ amount: number
+}
+
+interface InvoicePayment {
+ subtotal: number
+ /**
+ * Empty when the plan is not split into installments.
+ * If populated, split-payment rows will be shown.
+ */
+ payments: InvoicePaymentRow[]
+ totalPaid: number
+ balanceDue: number
+}
+
+interface GymInvoiceProps {
+ invoiceNo: string
+ invoiceDate: string
+ dueDate: string
+ /** Retained for API compatibility; the invoice no longer renders a logo. */
+ logoSrc?: string
+ logoAlt?: string
+ from: InvoiceAddress
+ billTo: InvoiceAddress
+ plan: {
+ gymPlanName: string
+ type: string
+ memberName: string
+ validityPeriod: string
+ }
+ payment: InvoicePayment
+ paymentMethod: string
+ preparedBy: string
+ notes: string[]
+ footerItems: string[]
+ className?: string
+ formatAmount: (amount: number) => string
+
+ /**
+ * This ref now captures the full A4 invoice page.
+ * The PDF download uses this exact node.
+ */
+ bodyRef?: React.Ref{children}
+
+
+ )
+}
+
+function Divider({ className = "" }: { className?: string }) {
+ return (
+
+ )
+}
+
+function MetaRow({ label, value }: { label: string; value: string }) {
+ return (
+
+
+
+
+
+ {/* Header */}
+
+
+
+
+ {/* Invoice meta */}
+ + Invoice +
+
+
+
+
+
+
+ {/* Membership / Service Details */}
+
+
+
+ {/* Notes / Terms + Payment Summary */}
+
+
+
+ Gym Plan Name
+ Type
+ Name of Member(s)
+ Expiry Date / Validity Period
+
+
+
+ {plan.gymPlanName}
+ {plan.type}
+ {plan.memberName}
+ {plan.validityPeriod}
+
+
+
+
+ {/* Payment Method / Prepared By */}
+
+
+
+
+ {notes.map((note, i) => (
+
+ + {note} +
+ ))} +
+
+
+ {/* Footer stays inside the same one-page A4 receipt */}
+
+
+
+ {paymentMethod || "-"}
+
+
+ {preparedBy || "-"}
+
+
+
+ {footerItems.map((item, i) => (
+
+ {i > 0 && |}
+ {item}
+
+ ))}
+
+
+ {label}
+ :
+
+ )
+}
+
+function SectionTitle({ title }: { title: string }) {
+ return (
+ {value}
+
+
+ )
+}
+
+function InfoBlock({ title, data }: { title: string; data: InvoiceAddress }) {
+ return (
+ + {title} +
+ +
+
+ )
+}
+
+function TableHeadCell({ children }: { children: React.ReactNode }) {
+ return (
+
+
+ + {data.name} +
+ + {data.address.map((line, i) => ( ++ {line} +
+ ))} + +
+
+ + {data.phone} +
++ {data.email} +
+
+ {children}
+
+ )
+}
+
+function TableCell({ children }: { children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ )
+}
+
+function PaymentSummary({
+ payment,
+ formatAmount,
+}: {
+ payment: InvoicePayment
+ formatAmount: (amount: number) => string
+}) {
+ const hasBreakdown = payment.payments.length > 0
+
+ return (
+
+
+ )
+}
+
+function SummaryRow({
+ label,
+ amount,
+ highlight = false,
+}: {
+ label: string
+ amount: string
+ highlight?: boolean
+}) {
+ return (
+
+
+ {label}
+
+
+
+ {amount}
+
+
+ )
+}
+
+export { GymInvoice }
+export type {
+ GymInvoiceProps,
+ InvoiceAddress,
+ InvoicePayment,
+ InvoicePaymentRow,
+}
\ No newline at end of file
diff --git a/src/components/hexa/member-trend-chart-card.tsx b/src/components/hexa/member-trend-chart-card.tsx
new file mode 100644
index 0000000..2391ff5
--- /dev/null
+++ b/src/components/hexa/member-trend-chart-card.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
+
+import type { MonthlyRevenueStat } from "@/lib/models/stats"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+ ChartContainer,
+ ChartTooltip,
+ ChartTooltipContent,
+ type ChartConfig,
+} from "@/components/ui/chart"
+import { Skeleton } from "@/components/ui/skeleton"
+
+const chartConfig = {
+ newMemberCount: {
+ label: "New members",
+ color: "var(--primary)",
+ },
+} satisfies ChartConfig
+
+interface MemberTrendChartCardProps {
+ data: MonthlyRevenueStat[] | null
+ loading?: boolean
+ title?: string
+}
+
+/** Non-revenue analog of RevenueChartCard, for staff who can't see revenue figures. */
+function MemberTrendChartCard({ data, loading, title = "New members" }: MemberTrendChartCardProps) {
+ return (
+
+ No new members recorded yet.
+
+ ) : (
+
+
+ )
+}
+
+export { PageHeader }
diff --git a/src/components/hexa/page-skeleton.tsx b/src/components/hexa/page-skeleton.tsx
new file mode 100644
index 0000000..1bfd060
--- /dev/null
+++ b/src/components/hexa/page-skeleton.tsx
@@ -0,0 +1,57 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+type PageSkeletonVariant = "stats-table" | "stats-cards" | "chart-list"
+
+interface PageSkeletonProps {
+ variant?: PageSkeletonVariant
+}
+
+function PageSkeleton({ variant = "stats-table" }: PageSkeletonProps) {
+ return (
+
+
+ {action && {title}
+ {description && ( +{description}
+ )} +{action}
}
+
+
+ )
+}
+
+function TableSkeleton({ rows = 5 }: { rows?: number }) {
+ return (
+
+
+
+
+ {Array.from({ length: 4 }).map((_, i) => (
+
+
+ {variant === "stats-table" &&
+ {Array.from({ length: 3 }).map((_, i) => (
+
+ )}
+
+ {variant === "chart-list" && (
+ <>
+
+
+ )
+}
+
+export { PageSkeleton, TableSkeleton }
diff --git a/src/components/hexa/pagination-bar.tsx b/src/components/hexa/pagination-bar.tsx
new file mode 100644
index 0000000..4343511
--- /dev/null
+++ b/src/components/hexa/pagination-bar.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import {
+ Pagination,
+ PaginationContent,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious,
+} from "@/components/ui/pagination"
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select"
+
+interface PaginationBarProps {
+ page: number
+ pageCount: number
+ pageSize: number
+ onPageSizeChange: (size: number) => void
+ rangeStart: number
+ rangeEnd: number
+ total: number
+ onPageChange: (page: number) => void
+ pageSizeOptions?: number[]
+}
+
+function PaginationBar({
+ page,
+ pageCount,
+ pageSize,
+ onPageSizeChange,
+ rangeStart,
+ rangeEnd,
+ total,
+ onPageChange,
+ pageSizeOptions = [10, 25, 50, 100],
+}: PaginationBarProps) {
+ const pages = Array.from({ length: Math.max(pageCount, 1) }, (_, i) => i + 1)
+
+ return (
+
+
+ {Array.from({ length: rows }).map((_, i) => (
+
+
+ )
+}
+
+export { PaginationBar }
diff --git a/src/components/hexa/post-card.tsx b/src/components/hexa/post-card.tsx
new file mode 100644
index 0000000..66a261a
--- /dev/null
+++ b/src/components/hexa/post-card.tsx
@@ -0,0 +1,139 @@
+import { EyeIcon, HeartIcon, PencilIcon, Trash2Icon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { StatusBadge } from "@/components/hexa/status-badge"
+
+interface PostCardAuthor {
+ name: string
+ role?: string
+ avatarUrl?: string
+}
+
+interface PostCardProps {
+ imageUrl?: string
+ title: string
+ description: string
+ tag?: string
+ author: PostCardAuthor
+ published: boolean
+ likes: number
+ createdAt: string
+ liked?: boolean
+ onToggleLike?: () => void
+ onView?: () => void
+ onEdit?: () => void
+ onDelete?: () => void
+ className?: string
+}
+
+function PostCard({
+ imageUrl,
+ title,
+ description,
+ tag,
+ author,
+ published,
+ likes,
+ createdAt,
+ liked,
+ onToggleLike,
+ onView,
+ onEdit,
+ onDelete,
+ className,
+}: PostCardProps) {
+ return (
+
+ Show
+
+ entries
+
+
+
+
+
+
+ {
+ e.preventDefault()
+ if (page > 1) onPageChange(page - 1)
+ }}
+ href="#"
+ />
+
+ {pages.map((p) => (
+
+ {
+ e.preventDefault()
+ onPageChange(p)
+ }}
+ >
+ {p}
+
+
+ ))}
+
+ {
+ e.preventDefault()
+ if (page < pageCount) onPageChange(page + 1)
+ }}
+ href="#"
+ />
+
+
+
+
+ + {rangeStart} - {rangeEnd} of {total} +
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+
+ )}
+
+
+
+ {tag}
+
+ )}
+
+
+
+
+ {published ? "Published" : "Draft"}
+
+
+
+ {title}
+{description}
+ + {tag && ( +
+
+
+ {(onView || onEdit || onDelete) && (
+
+
+ {author.name.slice(0, 1)}
+
+
+
+
+
+ {author.name}
+ {author.role && ( +{author.role}
+ )} +
+ {onToggleLike ? (
+
+ ) : (
+
+
+
+ {onView && (
+
+ )}
+ {onEdit && (
+
+ )}
+ {onDelete && (
+
+ )}
+
+ )}
+
+ No revenue recorded yet.
+
+ ) : (
+
+ {fullDate}
+ {compactDate}
+
+
+
+
+
+
+
+
+
+ {notificationCount}
+
+ )}
+
+ }
+ />
+
+
+ Notifications
+
+ New membership payment received
+ 2 minutes ago
+
+
+ Staff member added
+ 1 hour ago
+
+
+ Gym plan updated
+ Yesterday
+
+
+
+
+
+
+
+
+
+ {initials}
+
+
+
+ }
+ />
+
+
+ {displayName}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {label}
+ {value}
+ {hint && {hint}}
+
+