Inventory Manager

A powerful, full-stack inventory management system built with Next.js Server Actions and AxionsJS components. Features real-time stock tracking, advanced filtering, sorting, pagination, and comprehensive CRUD operations with a modern, responsive interface.

Installation

npx axionjs-ui add inventory-manager

model InventoryItem {
  id        String   @id @default(cuid())
  name      String
  category  String
  price     Float
  stock     Int
  sku       String   @unique
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
 
  @@index([name])
  @@index([category])
  @@index([sku])
}

DATABASE_URL="your_postgresql_connection_string"

npx prisma db push

Features

Core Functionality

• SKU Management - Unique SKU validation and tracking
• Category Organization - Organize items by predefined categories

Data Management

• Server-Side Pagination - Efficient handling of large datasets
• Advanced Filtering - Filter by name, category, and stock levels
• Multi-column Sorting - Sort by any column with visual indicators
• Optimistic Updates - Smooth UI interactions with server validation

User Experience

• Responsive Design - Works seamlessly across all device sizes
• Loading States - Skeleton loaders and progress indicators
• Toast Notifications - User feedback for all operations
• Modal Dialogs - Intuitive forms for creating and editing items
• Low Stock Alerts - Visual warnings for items running low

Data Integrity

• Form Validation - Comprehensive client and server-side validation
• Duplicate Prevention - SKU uniqueness enforcement
• Error Handling - Graceful error management and user feedback
• Data Consistency - Automatic revalidation after mutations

Usage

Basic Implementation

import { InventoryDataTable } from "@/components/inventory-data-table";
import { CreateInventoryItem } from "@/components/inventory-form";
 
export default function InventoryPage() {
  return (
    <div className="container mx-auto p-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-3xl font-bold">Inventory Management</h1>
        <CreateInventoryItem />
      </div>
      <InventoryDataTable />
    </div>
  );
}

Advanced Configuration

// Custom category filters
const categories = [
  "Electronics",
  "Clothing", 
  "Food",
  "Books",
  "Sports",
  "Other"
];
 
// Implement in your select component
<Select onValueChange={handleCategoryChange}>
  <SelectTrigger>
    <SelectValue placeholder="Select category" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="all">All Categories</SelectItem>
    {categories.map(category => (
      <SelectItem key={category} value={category}>
        {category}
      </SelectItem>
    ))}
  </SelectContent>
</Select>

API Reference

Server Actions

Hook Parameters (useInventoryDataTable)

interface UseInventoryDataTableOptions {
  initialPageSize?: number;
  initialSortBy?: string;
  initialSortOrder?: "asc" | "desc";
  initialFilters?: {
    name?: string;
    category?: string;
    lowStockOnly?: boolean;
  };
}

Form Schema (Zod)

const inventoryFormSchema = z.object({
  name: z.string().min(2, "Name must be at least 2 characters"),
  category: z.string().min(1, "Please select a category"),
  price: z.number().positive("Price must be positive"),
  stock: z.number().int().nonnegative("Stock must be non-negative"),
  sku: z.string().min(3, "SKU must be at least 3 characters")
});

Component Features

Smart Data Table

The inventory data table provides enterprise-grade functionality:

• Dynamic Sorting: Click any column header to sort data
• Advanced Filtering: Filter by name, category, or stock status
• Pagination Controls: Navigate through large datasets efficiently
• Bulk Operations: Select multiple items for batch operations
• Export Capabilities: Download data in various formats
• Responsive Design: Adapts to different screen sizes

Intelligent Stock Management

• Real-time Monitoring: Stock levels update immediately after transactions
• Visual Indicators: Color-coded stock status (green: good, yellow: low, red: critical)
• Alert System: Prominent notifications for low-stock items
• Quick Actions: One-click access to restock or edit items
• Stock History: Track stock level changes over time

Seamless Form Experience

• Smart Validation: Real-time form validation with helpful error messages
• Auto-completion: Intelligent suggestions for categories and SKUs
• Duplicate Detection: Prevents duplicate SKU entries
• Modal Interface: Clean, focused editing experience
• Keyboard Navigation: Full keyboard accessibility support

Customization

// Custom theme configuration
const customTheme = {
colors: {
primary: "hsl(222, 84%, 5%)",
secondary: "hsl(210, 40%, 94%)",
accent: "hsl(210, 40%, 94%)",
muted: "hsl(210, 40%, 94%)"
}
};

Performance Optimization

Server-Side Features

• Pagination: Only loads necessary data chunks
• Indexing: Database indexes on searchable fields
• Caching: Intelligent caching with revalidation
• Optimistic Updates: Immediate UI feedback

Client-Side Optimizations

• Virtual Scrolling: Handles large datasets efficiently
• Debounced Search: Reduces API calls during typing
• Memoization: Prevents unnecessary re-renders
• Code Splitting: Lazy loads components when needed

Best Practices

Data Management

1. Unique SKUs: Ensure every item has a unique SKU
2. Consistent Categories: Use predefined categories for better organization
3. Regular Audits: Periodically review and clean up inventory data
4. Backup Strategy: Implement regular database backups

User Experience

1. Clear Navigation: Provide intuitive navigation between views
2. Helpful Feedback: Show loading states and success/error messages
3. Keyboard Shortcuts: Implement common keyboard shortcuts
4. Mobile First: Design for mobile devices first

Performance

1. Pagination: Always use pagination for large datasets
2. Indexing: Add database indexes on frequently queried fields
3. Caching: Implement appropriate caching strategies
4. Error Boundaries: Use React error boundaries for graceful degradation

Troubleshooting

# Check your database URL
echo $DATABASE_URL
 
# Test connection
npx prisma db pull

Examples

import { Suspense } from "react";
import { InventoryDataTable } from "@/components/inventory-data-table";
import { CreateInventoryItem } from "@/components/inventory-form";
import { Skeleton } from "@/components/ui/skeleton";
 
export default function InventoryPage() {
return (
<div className="container mx-auto px-4 py-8">
  <div className="flex justify-between items-center mb-8">
    <div>
      <h1 className="text-3xl font-bold">Inventory Management</h1>
      <p className="text-muted-foreground">
        Manage your inventory items and stock levels
      </p>
    </div>
    <CreateInventoryItem />
  </div>
  
  <Suspense fallback={<InventoryTableSkeleton />}>
    <InventoryDataTable />
  </Suspense>
</div>
);
}
 
function InventoryTableSkeleton() {
return (
<div className="space-y-4">
  <Skeleton className="h-12 w-full" />
  {Array.from({ length: 8 }).map((_, i) => (
    <Skeleton key={i} className="h-16 w-full" />
  ))}
</div>
);
}

Conclusion

The AxionsJS Inventory Manager is a robust, full-stack solution for managing inventory with real-time data handling and a user-friendly interface. It leverages the power of Next.js Server Actions and AxionsJS components to deliver a seamless experience for both developers and end-users.