Refactor admin vendors page to use client-side fetching and pagination

Migrates the admin vendors page to use client-side data fetching with pagination, search, and improved loading states. Updates the vendor table to show last login, status, and admin badges. Also, optimizes the broadcast dialog by lazy-loading the ReactMarkdown component for preview rendering.
This commit is contained in:
g
2025-12-31 06:54:37 +00:00
parent 18ac2224ca
commit 66e95438fe
4 changed files with 248 additions and 92 deletions

View File

@@ -1,15 +1,16 @@
"use client";
import { useState, useRef } from "react";
import { useState, useRef, lazy, Suspense } from "react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Send, Bold, Italic, Code, Link as LinkIcon, Image as ImageIcon, X, Eye, EyeOff, Package } from "lucide-react";
import { toast } from "sonner";
import { clientFetch } from "@/lib/api";
import { Textarea } from "@/components/ui/textarea";
import ReactMarkdown from 'react-markdown';
import ProductSelector from "./product-selector";
const ReactMarkdown = lazy(() => import('react-markdown'));
interface BroadcastDialogProps {
open: boolean;
setOpen: (open: boolean) => void;
@@ -265,7 +266,9 @@ __italic text__
{showPreview && broadcastMessage.trim() && (
<div className="border rounded-lg p-4 bg-background/50">
<div className="prose prose-sm dark:prose-invert max-w-none">
<ReactMarkdown>{broadcastMessage}</ReactMarkdown>
<Suspense fallback={<div className="text-sm text-muted-foreground">Loading preview...</div>}>
<ReactMarkdown>{broadcastMessage}</ReactMarkdown>
</Suspense>
</div>
</div>
)}