[V0_FILE]typescriptreact:file="app/page.tsx" import { ActivityLogDemo } from "@/components/activity-log-demo" export default function HomePage() { return (

Activity Log System

Comprehensive activity logging and monitoring for your marketplace platform

) } [V0_FILE]typescriptreact:file="components/activity-log-demo.tsx" "use client" import { useState } from "react" import { ActivityLogTable } from "./activity-log/activity-log-table" import { ActivityLogFilters } from "./activity-log/activity-log-filters" import { ActivityLogStats } from "./activity-log/activity-log-stats" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs" export function ActivityLogDemo() { const [filters, setFilters] = useState({ role: "", actionType: "", entityType: "", status: "", dateRange: { from: "", to: "" }, }) return (

Activity Logs Implementation Guide API Routes Activity Logs Monitor all user activities across your platform Implementation Guide How to integrate activity logging across your schema tables

1. Activity Logger Utility

Use the ActivityLogger class to log activities consistently across your application.

2. Integration Examples

User Registration: Log when users sign up
Product Management: Track product creation, updates, deletions
Order Processing: Monitor order placement, status changes
Transaction Monitoring: Log payment events, refunds
Admin Actions: Track administrative operations

3. Best Practices

Always include meaningful descriptions
Store relevant metadata for context
Use consistent action_type naming
Include IP address and user agent for security

API Routes REST endpoints for activity log management

GET /api/activity-logs

Fetch activity logs with filtering and pagination

POST /api/activity-logs

Create new activity log entry

GET /api/activity-logs/stats

Get activity statistics and metrics

) } [V0_FILE]typescriptreact:file="components/activity-log/activity-log-table.tsx" "use client" import { useState } from "react" import { Badge } from "../ui/badge" import { Button } from "../ui/button" import { Card, CardContent } from "../ui/card" import { ChevronLeft, ChevronRight, Eye, User, ShoppingCart, CreditCard, Package, Settings, Shield } from "lucide-react" import { cn } from "@/lib/utils" interface ActivityLog { _id: string user_id: string role: "buyer" | "seller" | "admin" action_type: string entity_type: string entity_id: string description: string ip_address: string user_agent: string device_info: { type: string brand: string model: string } location_info: { city: string country: string } status: "success" | "failed" | "pending" metadata: Record created_at: string updated_at: string } interface ActivityLogTableProps { filters: { role: string actionType: string entityType: string status: string dateRange: { from: string; to: string } } } // Mock data for demonstration const mockLogs: ActivityLog[] = [ { _id: "1", user_id: "user_123", role: "buyer", action_type: "purchase", entity_type: "Order", entity_id: "order_456", description: 'User purchased digital product "Premium Template Pack"', ip_address: "192.168.1.1", user_agent: "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)", device_info: { type: "mobile", brand: "Apple", model: "iPhone 14 Pro" }, location_info: { city: "New York", country: "USA" }, status: "success", metadata: { order_total: 49.99, payment_method: "stripe" }, created_at: "2024-01-15T10:30:00Z", updated_at: "2024-01-15T10:30:00Z", }, { _id: "2", user_id: "seller_789", role: "seller", action_type: "create", entity_type: "Product", entity_id: "product_101", description: 'Seller created new product "React Component Library"', ip_address: "203.0.113.1", user_agent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36", device_info: { type: "desktop", brand: "Windows", model: "PC" }, location_info: { city: "London", country: "UK" }, status: "success", metadata: { product_price: 29.99, category: "Web Development" }, created_at: "2024-01-15T09:15:00Z", updated_at: "2024-01-15T09:15:00Z", }, { _id: "3", user_id: "admin_001", role: "admin", action_type: "suspend", entity_type: "User", entity_id: "user_999", description: "Admin suspended user account for policy violation", ip_address: "198.51.100.1", user_agent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36", device_info: { type: "desktop", brand: "Apple", model: "MacBook Pro" }, location_info: { city: "San Francisco", country: "USA" }, status: "success", metadata: { reason: "spam_content", duration_days: 7 }, created_at: "2024-01-15T08:45:00Z", updated_at: "2024-01-15T08:45:00Z", }, { _id: "4", user_id: "buyer_456", role: "buyer", action_type: "login", entity_type: "User", entity_id: "buyer_456", description: "User logged in successfully", ip_address: "192.0.2.1", user_agent: "Mozilla/5.0 (Android 13; Mobile; rv:109.0) Gecko/109.0", device_info: { type: "mobile", brand: "Samsung", model: "Galaxy S23" }, location_info: { city: "Toronto", country: "Canada" }, status: "success", metadata: { login_method: "email_password" }, created_at: "2024-01-15T07:20:00Z", updated_at: "2024-01-15T07:20:00Z", }, { _id: "5", user_id: "seller_321", role: "seller", action_type: "update", entity_type: "Product", entity_id: "product_202", description: "Seller updated product pricing and description", ip_address: "203.0.113.5", user_agent: "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36", device_info: { type: "desktop", brand: "Linux", model: "Ubuntu" }, location_info: { city: "Berlin", country: "Germany" }, status: "success", metadata: { old_price: 19.99, new_price: 24.99, fields_updated: ["price", "description"], }, created_at: "2024-01-15T06:10:00Z", updated_at: "2024-01-15T06:10:00Z", }, ] const getActionIcon = (actionType: string, entityType: string) => { if (actionType === "login" || actionType === "logout") return User if (entityType === "Order" || actionType === "purchase") return ShoppingCart if (entityType === "Transaction" || actionType === "payment") return CreditCard if (entityType === "Product") return Package if (actionType === "suspend" || actionType === "restrict") return Shield return Settings } const getRoleBadgeColor = (role: string) => { switch (role) { case "admin": return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200" case "seller": return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200" case "buyer": return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200" default: return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200" } } const getStatusBadgeColor = (status: string) => { switch (status) { case "success": return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200" case "failed": return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200" case "pending": return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200" default: return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200" } } export function ActivityLogTable({ filters }: ActivityLogTableProps) { const [logs, setLogs] = useState(mockLogs) const [currentPage, setCurrentPage] = useState(1) const [selectedLog, setSelectedLog] = useState(null) const logsPerPage = 10 // Filter logs based on filters const filteredLogs = logs.filter((log) => { if (filters.role && log.role !== filters.role) return false if (filters.actionType && log.action_type !== filters.actionType) return false if (filters.entityType && log.entity_type !== filters.entityType) return false if (filters.status && log.status !== filters.status) return false return true }) const totalPages = Math.ceil(filteredLogs.length / logsPerPage) const startIndex = (currentPage - 1) * logsPerPage const paginatedLogs = filteredLogs.slice(startIndex, startIndex + logsPerPage) const formatDate = (dateString: string) => { return new Date(dateString).toLocaleString() } return (

{/* Activity Log Cards */}

{paginatedLogs.map((log) => { const ActionIcon = getActionIcon(log.action_type, log.entity_type) return (

{log.role} {log.action_type} {log.entity_type} {log.status}

{log.description}

{formatDate(log.created_at)} {log.location_info.city}, {log.location_info.country} {log.device_info.type} • {log.device_info.brand}

) })}

{/* Pagination */} {totalPages > 1 && (

Showing {startIndex + 1} to {Math.min(startIndex + logsPerPage, filteredLogs.length)} of{" "} {filteredLogs.length} results

Page {currentPage} of {totalPages}

)} {/* Log Detail Modal/Panel would go here */} {selectedLog && (

Activity Details

User ID: {selectedLog.user_id}

Entity ID: {selectedLog.entity_id}

IP Address: {selectedLog.ip_address}

User Agent: {selectedLog.user_agent}

Metadata:

{JSON.stringify(selectedLog.metadata, null, 2)}

)}

) } [V0_FILE]typescriptreact:file="components/activity-log/activity-log-filters.tsx" isFixed="true" isQuickEdit="true" "use client" import { Button } from "../ui/button" import { Input } from "../ui/input" import { Label } from "../ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select" import { Card, CardContent } from "../ui/card" import { Filter, X } from "lucide-react" interface ActivityLogFiltersProps { filters: { role: string actionType: string entityType: string status: string dateRange: { from: string; to: string } } onFiltersChange: (filters: any) => void } export function ActivityLogFilters({ filters, onFiltersChange }: ActivityLogFiltersProps) { const updateFilter = (key: string, value: string) => { onFiltersChange({ ...filters, [key]: value }) } const updateDateRange = (key: "from" | "to", value: string) => { onFiltersChange({ ...filters, dateRange: { ...filters.dateRange, [key]: value }, }) } const clearFilters = () => { onFiltersChange({ role: "", actionType: "", entityType: "", status: "", dateRange: { from: "", to: "" }, }) } const hasActiveFilters = Object.values(filters).some((value) => typeof value === "string" ? value : Object.values(value).some((v) => v), ) return (

Filters

{hasActiveFilters && ( )}

Role

Action Type

Entity Type

Status

Date Range

updateDateRange("from", e.target.value)} className="text-sm" /> updateDateRange("to", e.target.value)} className="text-sm" />

) } [V0_FILE]typescriptreact:file="components/activity-log/activity-log-stats.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "../ui/card" import { Activity, Users, ShoppingCart, AlertTriangle } from "lucide-react" export function ActivityLogStats() { const stats = [ { title: "Total Activities", value: "12,543", change: "+12%", icon: Activity, color: "text-blue-600", }, { title: "Active Users", value: "2,847", change: "+8%", icon: Users, color: "text-green-600", }, { title: "Transactions", value: "1,234", change: "+23%", icon: ShoppingCart, color: "text-purple-600", }, { title: "Failed Actions", value: "45", change: "-15%", icon: AlertTriangle, color: "text-red-600", }, ] return (

{stats.map((stat, index) => ( {stat.title}

{stat.value}

{stat.change}{" "} from last month

))}

) } [V0_FILE]typescriptreact:file="lib/activity-logger.ts" interface ActivityLogData { user_id: string role: "buyer" | "seller" | "admin" action_type: string entity_type: string entity_id: string description: string ip_address?: string user_agent?: string device_info?: { type: string brand: string model: string } location_info?: { city: string country: string } status: "success" | "failed" | "pending" metadata?: Record } export class ActivityLogger { /** * Log an activity to the database */ static async log(data: ActivityLogData): Promise { try { // In a real implementation, this would make an API call to your backend const response = await fetch("/api/activity-logs", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ ...data, created_at: new Date().toISOString(), updated_at: new Date().toISOString(), }), }) if (!response.ok) { throw new Error("Failed to log activity") } } catch (error) { console.error("Activity logging failed:", error) // In production, you might want to queue failed logs for retry } } /** * Helper methods for common activities */ static async logUserAction( userId: string, role: "buyer" | "seller" | "admin", action: string, description: string, metadata?: Record, ) { await this.log({ user_id: userId, role, action_type: action, entity_type: "User", entity_id: userId, description, status: "success", metadata, }) } static async logProductAction( userId: string, role: "seller" | "admin", action: string, productId: string, description: string, metadata?: Record, ) { await this.log({ user_id: userId, role, action_type: action, entity_type: "Product", entity_id: productId, description, status: "success", metadata, }) } static async logOrderAction( userId: string, role: "buyer" | "seller" | "admin", action: string, orderId: string, description: string, metadata?: Record, ) { await this.log({ user_id: userId, role, action_type: action, entity_type: "Order", entity_id: orderId, description, status: "success", metadata, }) } static async logTransactionAction( userId: string, role: "buyer" | "seller" | "admin", action: string, transactionId: string, description: string, status: "success" | "failed" | "pending" = "success", metadata?: Record, ) { await this.log({ user_id: userId, role, action_type: action, entity_type: "Transaction", entity_id: transactionId, description, status, metadata, }) } } /** * Usage Examples: * * // User registration * await ActivityLogger.logUserAction( * userId, * 'buyer', * 'register', * 'User registered successfully', * { registration_method: 'email' } * ) * * // Product creation * await ActivityLogger.logProductAction( * sellerId, * 'seller', * 'create', * productId, * 'Seller created new product "React Components"', * { category: 'Web Development', price: 29.99 } * ) * * // Order placement * await ActivityLogger.logOrderAction( * buyerId, * 'buyer', * 'create', * orderId, * 'Buyer placed order for digital products', * { total_amount: 149.99, item_count: 3 } * ) * * // Payment processing * await ActivityLogger.logTransactionAction( * buyerId, * 'buyer', * 'payment', * transactionId, * 'Payment processed successfully', * 'success', * { payment_method: 'stripe', amount: 149.99 } * ) */ [V0_FILE]typescriptreact:file="app/api/activity-logs/route.ts" import { type NextRequest, NextResponse } from "next/server" // Mock database - replace with your actual database implementation const activityLogs: any[] = [] export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) // Parse query parameters const page = Number.parseInt(searchParams.get("page") || "1") const limit = Number.parseInt(searchParams.get("limit") || "10") const role = searchParams.get("role") const actionType = searchParams.get("action_type") const entityType = searchParams.get("entity_type") const status = searchParams.get("status") const fromDate = searchParams.get("from_date") const toDate = searchParams.get("to_date") // Filter logs based on query parameters let filteredLogs = [...activityLogs] if (role) { filteredLogs = filteredLogs.filter((log) => log.role === role) } if (actionType) { filteredLogs = filteredLogs.filter((log) => log.action_type === actionType) } if (entityType) { filteredLogs = filteredLogs.filter((log) => log.entity_type === entityType) } if (status) { filteredLogs = filteredLogs.filter((log) => log.status === status) } if (fromDate) { filteredLogs = filteredLogs.filter((log) => new Date(log.created_at) >= new Date(fromDate)) } if (toDate) { filteredLogs = filteredLogs.filter((log) => new Date(log.created_at) <= new Date(toDate)) } // Sort by created_at descending filteredLogs.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()) // Paginate results const startIndex = (page - 1) * limit const paginatedLogs = filteredLogs.slice(startIndex, startIndex + limit) return NextResponse.json({ success: true, data: paginatedLogs, pagination: { page, limit, total: filteredLogs.length, totalPages: Math.ceil(filteredLogs.length / limit), }, }) } catch (error) { console.error("Error fetching activity logs:", error) return NextResponse.json({ success: false, error: "Failed to fetch activity logs" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const body = await request.json() // Validate required fields const requiredFields = ["user_id", "role", "action_type", "entity_type", "entity_id", "description", "status"] for (const field of requiredFields) { if (!body[field]) { return NextResponse.json({ success: false, error: `Missing required field: ${field}` }, { status: 400 }) } } // Create new activity log entry const newLog = { _id: `log_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, ...body, created_at: new Date().toISOString(), updated_at: new Date().toISOString(), } // In a real implementation, save to your database // For demo purposes, we'll just add to our mock array activityLogs.push(newLog) return NextResponse.json( { success: true, data: newLog, }, { status: 201 }, ) } catch (error) { console.error("Error creating activity log:", error) return NextResponse.json({ success: false, error: "Failed to create activity log" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/activity-logs/stats/route.ts" import { NextResponse } from "next/server" export async function GET() { try { // In a real implementation, these would be calculated from your database const stats = { total_activities: 12543, active_users: 2847, transactions: 1234, failed_actions: 45, activities_by_role: { buyer: 8234, seller: 3456, admin: 853, }, activities_by_type: { login: 4567, create: 2345, update: 1876, delete: 234, purchase: 1234, payment: 987, }, activities_by_status: { success: 11987, failed: 345, pending: 211, }, recent_activity_trend: [ { date: "2024-01-10", count: 234 }, { date: "2024-01-11", count: 345 }, { date: "2024-01-12", count: 456 }, { date: "2024-01-13", count: 567 }, { date: "2024-01-14", count: 678 }, { date: "2024-01-15", count: 789 }, ], } return NextResponse.json({ success: true, data: stats, }) } catch (error) { console.error("Error fetching activity stats:", error) return NextResponse.json({ success: false, error: "Failed to fetch activity statistics" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="components/ui/select.tsx" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className, )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="components/ui/input.tsx" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } }