🚀 Welcome to Z.ai Code Scaffold

A modern, production-ready web application scaffold powered by cutting-edge technologies, designed to accelerate your development with Z.ai's AI-powered coding assistance.

✨ Technology Stack

This scaffold provides a robust foundation built with:

🎯 Core Framework

• ⚡ Next.js 15 - The React framework for production with App Router
• 📘 TypeScript 5 - Type-safe JavaScript for better developer experience
• 🎨 Tailwind CSS 4 - Utility-first CSS framework for rapid UI development

🧩 UI Components & Styling

• 🧩 shadcn/ui - High-quality, accessible components built on Radix UI
• 🎯 Lucide React - Beautiful & consistent icon library
• 🌈 Framer Motion - Production-ready motion library for React
• 🎨 Next Themes - Perfect dark mode in 2 lines of code

📋 Forms & Validation

• 🎣 React Hook Form - Performant forms with easy validation
• ✅ Zod - TypeScript-first schema validation

🔄 State Management & Data Fetching

• 🐻 Zustand - Simple, scalable state management
• 🔄 TanStack Query - Powerful data synchronization for React
• 🌐 Axios - Promise-based HTTP client

🗄️ Database & Backend

• 🗄️ Prisma - Next-generation Node.js and TypeScript ORM
• 🔐 NextAuth.js - Complete open-source authentication solution

🎨 Advanced UI Features

• 📊 TanStack Table - Headless UI for building tables and datagrids
• 🖱️ DND Kit - Modern drag and drop toolkit for React
• 📊 Recharts - Redefined chart library built with React and D3
• 🖼️ Sharp - High performance image processing

🌍 Internationalization & Utilities

• 🌍 Next Intl - Internationalization library for Next.js
• 📅 Date-fns - Modern JavaScript date utility library
• 🪝 ReactUse - Collection of essential React hooks for modern development

🎯 Why This Scaffold?

• 🏎️ Fast Development - Pre-configured tooling and best practices
• 🎨 Beautiful UI - Complete shadcn/ui component library with advanced interactions
• 🔒 Type Safety - Full TypeScript configuration with Zod validation
• 📱 Responsive - Mobile-first design principles with smooth animations
• 🗄️ Database Ready - Prisma ORM configured for rapid backend development
• 🔐 Auth Included - NextAuth.js for secure authentication flows
• 📊 Data Visualization - Charts, tables, and drag-and-drop functionality
• 🌍 i18n Ready - Multi-language support with Next Intl
• 🚀 Production Ready - Optimized build and deployment settings
• 🤖 AI-Friendly - Structured codebase perfect for AI assistance

🚀 Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

Open http://localhost:3000 to see your application running.

🤖 Powered by Z.ai

This scaffold is optimized for use with Z.ai - your AI assistant for:

• 💻 Code Generation - Generate components, pages, and features instantly
• 🎨 UI Development - Create beautiful interfaces with AI assistance
• 🔧 Bug Fixing - Identify and resolve issues with intelligent suggestions
• 📝 Documentation - Auto-generate comprehensive documentation
• 🚀 Optimization - Performance improvements and best practices

Ready to build something amazing? Start chatting with Z.ai at chat.z.ai and experience the future of AI-powered development!

📁 Project Structure

src/
├── app/                 # Next.js App Router pages
├── components/          # Reusable React components
│   └── ui/             # shadcn/ui components
├── hooks/              # Custom React hooks
└── lib/                # Utility functions and configurations

🎨 Available Features & Components

This scaffold includes a comprehensive set of modern web development tools:

🧩 UI Components (shadcn/ui)

• Layout: Card, Separator, Aspect Ratio, Resizable Panels
• Forms: Input, Textarea, Select, Checkbox, Radio Group, Switch
• Feedback: Alert, Toast (Sonner), Progress, Skeleton
• Navigation: Breadcrumb, Menubar, Navigation Menu, Pagination
• Overlay: Dialog, Sheet, Popover, Tooltip, Hover Card
• Data Display: Badge, Avatar, Calendar

📊 Advanced Data Features

• Tables: Powerful data tables with sorting, filtering, pagination (TanStack Table)
• Charts: Beautiful visualizations with Recharts
• Forms: Type-safe forms with React Hook Form + Zod validation

🎨 Interactive Features

• Animations: Smooth micro-interactions with Framer Motion
• Drag & Drop: Modern drag-and-drop functionality with DND Kit
• Theme Switching: Built-in dark/light mode support

🔐 Backend Integration

• Authentication: Ready-to-use auth flows with NextAuth.js
• Database: Type-safe database operations with Prisma
• API Client: HTTP requests with Axios + TanStack Query
• State Management: Simple and scalable with Zustand

🌍 Production Features

• Internationalization: Multi-language support with Next Intl
• Image Optimization: Automatic image processing with Sharp
• Type Safety: End-to-end TypeScript with Zod validation
• Essential Hooks: 100+ useful React hooks with ReactUse for common patterns

📊 Google Sheets Analytics Dashboard

This project includes a comprehensive analytics dashboard that connects to Google Sheets to display token usage and cost analysis. The dashboard features:

🎯 Dashboard Features

• Real-time Metrics: Total tokens, costs, executions, and active models
• Interactive Charts:
  • Pie chart showing token distribution by LLM model
  • Bar chart comparing tokens vs costs
  • Line chart displaying trends over time
• Data Table: Detailed execution records with sorting and filtering
• Auto-refresh: Automatically syncs with Google Sheets every 15 minutes
• Responsive Design: Works seamlessly on desktop and mobile devices

📋 Data Source

The dashboard reads from a Google Sheet with the following columns:

• execution_id
• timestamp
• workflow_id
• workflow_name
• llm_model
• input_tokens
• completion_tokens
• input_price
• output_price
• input_cost
• output_cost
• total_cost
• user_id

🔧 Setup Instructions

🎉 No API Key Required!

The dashboard now uses Google Sheets' built-in CSV export feature, which means:

1. Make your Google Sheet public:

   • Open your Google Sheet
   • Click "Share" in the top right corner
   • Under "General access", select "Anyone with the link"
   • Set the role to "Viewer"
   • Click "Done"

2. Update Sheet ID (if needed):

   • The default sheet ID is configured for: 1Mzb4S2hI4nWQn8I7ysU4E-C6V8Uz2zF1R2j2bWe0F0k
   • To use a different sheet, update the ID in src/app/api/google-sheets/route.ts

3. That's it! The dashboard will automatically:

   • Fetch data from your public Google Sheet
   • Parse the CSV data
   • Display real-time analytics
   • Auto-refresh every 15 minutes

🔧 Alternative: Using API Key (Optional)

If you prefer to use the Google Sheets API instead of CSV export:

1. Get Google API Key:

   • Go to Google Cloud Console
   • Create a new project or select an existing one
   • Enable the "Google Sheets API"
   • Create an API key in the credentials section
   • Copy the API key

2. Configure Environment Variables:

   • Open .env.local file in the project root
   • Add your Google API key:

     GOOGLE_API_KEY=your_actual_api_key_here
     

3. Update the API route to use the Google Sheets API method (see comments in the code)

🚀 Running the Dashboard

# Start development server
npm run dev

# Open http://localhost:3000 to view the dashboard

🔒 Security Notes

• The CSV export method is secure and doesn't require API keys
• Make sure your Google Sheet only contains public data
• For sensitive data, consider using the API key method with proper authentication
• Never commit sensitive API keys to version control
• Consider implementing rate limiting and caching for better performance

🎨 Customization

• Modify the chart colors in src/app/page.tsx by updating the COLORS array
• Add new metrics by extending the data processing logic
• Customize the UI by modifying the shadcn/ui components
• Add additional tabs or charts as needed

🤝 Get Started with Z.ai

1. Clone this scaffold to jumpstart your project
2. Visit chat.z.ai to access your AI coding assistant
3. Start building with intelligent code generation and assistance
4. Deploy with confidence using the production-ready setup

---

Built with ❤️ for the developer community. Supercharged by Z.ai 🚀