UMWD Components

A comprehensive React component library for e-commerce and logistics applications, built with TypeScript and Material-UI.

Overview

UMWD Components is a feature-rich component library designed for building modern e-commerce platforms with integrated logistics management. It provides ready-to-use components for customer management, product catalogs, order processing, invoicing, vendor management, and logistics operations.

Key Features

🛒 E-commerce Components

• Product Management: Product displays, forms, categories, pricing, and inventory
• Shopping Cart: Cart functionality with add/remove items, quantity updates, and checkout process
• Customer Profiles: Customer registration, authentication, and profile management
• Order Processing: Order placement, tracking, and management (OPO - Outbound Purchase Orders)
• Returns Management: Return merchandise authorization (RMA) and processing (IRO - Inbound Return Orders)
• Invoice Generation: PDF invoice creation and management
• Payment Integration: Mollie payment provider integration

📦 Logistics Components

• Vendor Management: Vendor profiles, business credentials, and contact management
• Inventory Processing: Inbound Purchase Orders (IPO) management
• Dispatcher Profiles: Logistics operator management and tracking
• Shipping & Fulfillment: Order fulfillment and delivery tracking

🏗️ Page Builder Components

• Dynamic Page Building: Flexible page construction with reusable blocks
• Hero Sections: Landing page components with images and CTAs
• Feature Sections: Product and service highlighting components
• Contact Forms: Customizable contact and inquiry forms

🔐 Authentication & Authorization

• User Authentication: Login, registration, and password reset
• Session Management: Secure session handling with context providers
• Role-based Access: Customer, dispatcher, and admin role management

🎨 UI Components

• Layout Components: Headers, footers, navigation, and sidebars
• Common Elements: Forms, buttons, modals, and utility components
• Responsive Design: Mobile-first approach with Material-UI integration
• Theming: Customizable themes and styling with Material-UI

Technology Stack

• Framework: Next.js 14+ with React 18
• Language: TypeScript
• UI Library: Material-UI (MUI) v5
• Styling: CSS-in-JS with Material-UI's sx prop
• State Management: React Context API
• Form Handling: React Hook Form with Zod validation
• Date Handling: Day.js
• PDF Generation: @react-pdf/renderer
• Build Tools: Rollup for library bundling

Installation

npm install umwd-components

Peer Dependencies

Make sure to install the required peer dependencies:

npm install @mui/icons-material @mui/material @mui/x-date-pickers @react-pdf/renderer @types/validator mui-markdown next react react-dom validator zod

Usage

Basic Setup

import { SessionProvider, CartProvider } from "umwd-components";

function App() {
  return (
    <SessionProvider>
      <CartProvider>{/* Your app components */}</CartProvider>
    </SessionProvider>
  );
}

Product Display

import { ProductCard, Price } from "umwd-components";
import { Grid } from "@mui/material";

function ProductGrid({ products }) {
  return (
    <Grid container spacing={2}>
      {products.map((product) => (
        <Grid item xs={12} md={4} key={product.id}>
          <ProductCard data={product} />
        </Grid>
      ))}
    </Grid>
  );
}

Customer Profile Management

import {
  CustomerProfileDisplay,
  CustomerProfileEditForm,
} from "umwd-components";

function CustomerDashboard({ customer }) {
  return (
    <div>
      <CustomerProfileDisplay data={customer} />
      <CustomerProfileEditForm
        data={customer}
        revalidateCallback={() => window.location.reload()}
      />
    </div>
  );
}

Shopping Cart

import { CartWidget, AddToCartButton, useCart } from "umwd-components";

function ProductPage({ product }) {
  const { addItem } = useCart();

  return (
    <div>
      <h1>{product.name}</h1>
      <AddToCartButton product={product} />
      <CartWidget />
    </div>
  );
}

Business Domain Features

Business Credentials Management

• VAT Number Validation: Automatic VAT number verification
• EORI Number Validation: Economic Operators Registration validation
• Chamber of Commerce: Business registration details
• Multi-address Support: Separate billing, delivery, and company addresses

Order Management Workflow

1. OPO (Outbound Purchase Orders): Customer orders placed on the platform
2. IPO (Inbound Purchase Orders): Vendor purchase orders for inventory
3. IRO (Inbound Return Orders): Customer returns and RMA processing
4. Invoice Generation: Automated PDF invoice creation
5. Payment Processing: Integrated payment workflows

Logistics Integration

• Vendor Management: Complete vendor profile and product catalog management
• Dispatcher Coordination: Logistics operator assignment and tracking
• Inventory Tracking: Stock levels and product movement
• Shipping Coordination: Delivery scheduling and tracking

Component Categories

Layout Components

• Footer, Navbar, NavbarV2, SideNav
• WebsitePlaceholder, FluidBackground

Authentication

• AuthWidget, RegisterForm, SigninForm, LogoutButton
• ForgotPasswordForm, PasswordResetForm

E-commerce

• ProductCard, SingleProduct, AddProductForm, EditProductForm
• CartDisplay, AddToCartButton, CheckoutForm
• CustomerProfileDisplay, CustomerProfileEditForm
• CreateInvoiceForm, InvoicePDFViewer

Logistics

• VendorDisplay, AddVendorForm, EditVendorForm
• DispatcherProfileDisplay, ManageIPOForm

Common Utilities

• Address, BusinessCredentials, Pagination
• StrapiImage, ContactForm, ScrollLink

Development

Local Development

# Install dependencies
npm install

# Build library
npm run build-lib

# Type checking
npm run type-check

# Lint code
npm run lint

Building for Production

# Build the component library
npm run build-lib

Configuration

Environment Variables

The library expects certain environment variables for proper functionality:

• NEXT_PUBLIC_STRAPI_API_URL: Backend API URL
• NEXT_PUBLIC_STRAPI_API_TOKEN: API authentication token

Styling

The library uses Material-UI for all styling. Components follow Material Design principles and can be customized using MUI's theming system and sx props.

Contributing

1. Clone the repository
2. Install dependencies: npm install
3. Create a feature branch
4. Make your changes
5. Build the library: npm run build-lib
6. Submit a pull request

License

MIT License - see LICENSE file for details.

Support

For issues, feature requests, or questions, please create an issue in the project repository.

Note: This is a comprehensive component library designed for enterprise e-commerce and logistics applications. It integrates with Strapi CMS for content management and includes sophisticated business logic for European VAT/EORI validation and multi-currency support.