@burdenoff/microfe-movethewheels 2026.510.105

package/src/movethewheels/utils/cn.ts

@@ -0,0 +1,9 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Utility for merging Tailwind CSS classes with proper conflict resolution.
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/movethewheels/utils/formatters.ts

@@ -0,0 +1,215 @@
+/**
+ * Formatting utilities for the MoveTheWheels microfrontend.
+ */
+
+import type { Address } from '../types';
+
+/**
+ * Format an address object into a readable string.
+ */
+export function formatAddress(address: Address): string {
+  const parts = [
+    address.street,
+    address.city,
+    address.state,
+    address.postalCode,
+    address.country,
+  ].filter(Boolean);
+  return parts.join(', ');
+}
+
+/**
+ * Format a number as currency.
+ */
+export function formatCurrency(amount: number, currency = 'USD'): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(amount);
+}
+
+/**
+ * Format a date for display.
+ * @param date - Date to format
+ * @param format - Format type: 'short' (default), 'full', 'relative', or 'time'
+ */
+export function formatDate(
+  date: Date | string,
+  format: 'short' | 'full' | 'relative' | 'time' = 'short'
+): string {
+  const d = typeof date === 'string' ? new Date(date) : date;
+
+  if (format === 'relative') {
+    return formatRelativeTime(d);
+  }
+
+  if (format === 'time') {
+    return new Intl.DateTimeFormat('en-US', {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true,
+    }).format(d);
+  }
+
+  if (format === 'full') {
+    return new Intl.DateTimeFormat('en-US', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true,
+    }).format(d);
+  }
+
+  // short format (default)
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  }).format(d);
+}
+
+/**
+ * Format a date and time for display.
+ */
+export function formatDateTime(date: Date | string): string {
+  const d = typeof date === 'string' ? new Date(date) : date;
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true,
+  }).format(d);
+}
+
+/**
+ * Format a time for display.
+ */
+export function formatTime(date: Date | string): string {
+  const d = typeof date === 'string' ? new Date(date) : date;
+  return new Intl.DateTimeFormat('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true,
+  }).format(d);
+}
+
+/**
+ * Format a relative time (e.g., "2 hours ago").
+ */
+export function formatRelativeTime(date: Date | string): string {
+  const d = typeof date === 'string' ? new Date(date) : date;
+  const now = new Date();
+  const diffInSeconds = Math.floor((now.getTime() - d.getTime()) / 1000);
+
+  if (diffInSeconds < 60) {
+    return 'Just now';
+  }
+
+  const diffInMinutes = Math.floor(diffInSeconds / 60);
+  if (diffInMinutes < 60) {
+    return `${diffInMinutes} ${diffInMinutes === 1 ? 'minute' : 'minutes'} ago`;
+  }
+
+  const diffInHours = Math.floor(diffInMinutes / 60);
+  if (diffInHours < 24) {
+    return `${diffInHours} ${diffInHours === 1 ? 'hour' : 'hours'} ago`;
+  }
+
+  const diffInDays = Math.floor(diffInHours / 24);
+  if (diffInDays < 7) {
+    return `${diffInDays} ${diffInDays === 1 ? 'day' : 'days'} ago`;
+  }
+
+  return formatDate(d);
+}
+
+/**
+ * Format a number with thousand separators.
+ */
+export function formatNumber(num: number): string {
+  return new Intl.NumberFormat('en-US').format(num);
+}
+
+/**
+ * Format a percentage.
+ */
+export function formatPercentage(value: number, decimals = 1): string {
+  return `${value.toFixed(decimals)}%`;
+}
+
+/**
+ * Format weight with appropriate units.
+ */
+export function formatWeight(kg: number): string {
+  if (kg >= 1000) {
+    return `${(kg / 1000).toFixed(2)} tonnes`;
+  }
+  return `${kg.toFixed(2)} kg`;
+}
+
+/**
+ * Format distance with appropriate units.
+ */
+export function formatDistance(km: number): string {
+  if (km < 1) {
+    return `${Math.round(km * 1000)} m`;
+  }
+  return `${km.toFixed(1)} km`;
+}
+
+/**
+ * Format duration in minutes to human readable.
+ */
+export function formatDuration(minutes: number): string {
+  if (minutes < 60) {
+    return `${minutes} min`;
+  }
+  const hours = Math.floor(minutes / 60);
+  const mins = minutes % 60;
+  if (mins === 0) {
+    return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
+  }
+  return `${hours}h ${mins}m`;
+}
+
+/**
+ * Truncate text with ellipsis.
+ */
+export function truncateText(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength - 3) + '...';
+}
+
+/**
+ * Format a phone number.
+ */
+export function formatPhoneNumber(phone: string): string {
+  // Simple formatting for US phone numbers
+  const cleaned = phone.replace(/\D/g, '');
+  if (cleaned.length === 10) {
+    return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
+  }
+  if (cleaned.length === 11 && cleaned.startsWith('1')) {
+    return `+1 (${cleaned.slice(1, 4)}) ${cleaned.slice(4, 7)}-${cleaned.slice(7)}`;
+  }
+  return phone;
+}
+
+/**
+ * Get initials from a name.
+ */
+export function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .map((part) => part[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2);
+}

package/src/movethewheels/utils/graphqlClient.ts

@@ -0,0 +1,63 @@
+interface GraphQLRequestOptions {
+  apiGatewayUrl?: string;
+  authToken?: string;
+  workspaceToken?: string;
+  workspaceId?: string;
+  tenantId?: string;
+  actorId?: string;
+}
+
+export function resolveGraphqlUrl(apiGatewayUrl?: string): string {
+  if (!apiGatewayUrl) {
+    return '/workspaces/graphql';
+  }
+
+  if (apiGatewayUrl.endsWith('/graphql')) {
+    return apiGatewayUrl;
+  }
+
+  return `${apiGatewayUrl}/workspaces/graphql`;
+}
+
+export async function executeGraphQL<TData>(
+  options: GraphQLRequestOptions,
+  query: string,
+  variables?: Record<string, unknown>
+): Promise<TData> {
+  const response = await fetch(resolveGraphqlUrl(options.apiGatewayUrl), {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json',
+      ...(options.authToken ? { Authorization: `Bearer ${options.authToken}` } : {}),
+      ...(options.workspaceToken
+        ? { 'X-Workspace-Authorization': `Bearer ${options.workspaceToken}` }
+        : {}),
+      ...(options.workspaceId ? { 'x-workspace-id': options.workspaceId } : {}),
+      ...(options.tenantId ? { 'x-tenant-id': options.tenantId } : {}),
+      ...(options.actorId ? { 'x-actor-id': options.actorId } : {}),
+      ...(options.actorId ? { 'x-actor-type': 'user' } : {}),
+    },
+    body: JSON.stringify({ query, variables }),
+  });
+
+  if (!response.ok) {
+    throw new Error(`GraphQL request failed with status ${response.status}`);
+  }
+
+  const payload = (await response.json()) as {
+    data?: TData;
+    errors?: Array<{ message?: string }>;
+  };
+
+  if (payload.errors?.length) {
+    throw new Error(
+      payload.errors.map((item) => item.message ?? 'Unknown GraphQL error').join('; ')
+    );
+  }
+
+  if (!payload.data) {
+    throw new Error('GraphQL response did not include data');
+  }
+
+  return payload.data;
+}

package/src/movethewheels/utils/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Utils barrel export
+ */
+
+export { cn } from './cn';
+export * from './formatters';
+export * from './graphqlClient';
+export * from './navigation';

package/src/movethewheels/utils/navigation.ts

@@ -0,0 +1,70 @@
+/**
+ * Navigation utilities for the MoveTheWheels microfrontend.
+ */
+
+/**
+ * Join path segments correctly, avoiding double slashes.
+ */
+export function joinPath(base: string, path: string): string {
+  const cleanBase = base.endsWith('/') ? base.slice(0, -1) : base;
+  const cleanPath = path.startsWith('/') ? path : `/${path}`;
+  return cleanBase + cleanPath;
+}
+
+/**
+ * Get the relative path from a full path given a base path.
+ */
+export function getRelativePath(fullPath: string, basePath: string): string {
+  const cleanBase = basePath.endsWith('/') ? basePath.slice(0, -1) : basePath;
+  if (fullPath.startsWith(cleanBase)) {
+    const relative = fullPath.slice(cleanBase.length);
+    return relative || '/';
+  }
+  return fullPath;
+}
+
+/**
+ * Check if a path matches a pattern (supports wildcards).
+ */
+export function pathMatches(path: string, pattern: string): boolean {
+  const cleanPath = path.endsWith('/') ? path.slice(0, -1) : path;
+  const cleanPattern = pattern.endsWith('/') ? pattern.slice(0, -1) : pattern;
+
+  if (cleanPattern.endsWith('/*')) {
+    const basePattern = cleanPattern.slice(0, -2);
+    return cleanPath === basePattern || cleanPath.startsWith(basePattern + '/');
+  }
+
+  return cleanPath === cleanPattern;
+}
+
+/**
+ * Build a URL with query parameters.
+ */
+export function buildUrl(base: string, params?: Record<string, string | number | boolean>): string {
+  if (!params || Object.keys(params).length === 0) {
+    return base;
+  }
+
+  const searchParams = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    if (value !== undefined && value !== null && value !== '') {
+      searchParams.set(key, String(value));
+    }
+  }
+
+  const queryString = searchParams.toString();
+  return queryString ? `${base}?${queryString}` : base;
+}
+
+/**
+ * Parse query parameters from a URL.
+ */
+export function parseQueryParams(search: string): Record<string, string> {
+  const params: Record<string, string> = {};
+  const searchParams = new URLSearchParams(search);
+  searchParams.forEach((value, key) => {
+    params[key] = value;
+  });
+  return params;
+}

package/src/operations/wspace/movethewheels/fragments/core.graphql

@@ -0,0 +1,191 @@
+fragment MovethewheelsOrderCore on MovethewheelsOrder {
+  id
+  orderNumber
+  orderType
+  status
+  priority
+  customerId
+  trackingNumber
+  pickupAddress
+  deliveryAddress
+  items
+  pricing
+  scheduledDelivery
+  vehicleId
+  driverId
+  createdAt
+  updatedAt
+}
+
+fragment CustomerCore on Customer {
+  id
+  name
+  email
+  phone
+  type
+  company
+  address
+  rating
+  createdAt
+  updatedAt
+}
+
+fragment ProductCore on Product {
+  id
+  sku
+  name
+  description
+  category
+  brand
+  dimensions
+  weight
+  value
+  hazardous
+  fragile
+  temperatureControlled
+  createdAt
+  updatedAt
+}
+
+fragment VehicleCore on Vehicle {
+  id
+  vehicleNumber
+  make
+  model
+  year
+  licensePlate
+  type
+  ownershipType
+  capacity
+  status
+  currentLocation
+  fuelLevel
+  mileage
+  createdAt
+  updatedAt
+}
+
+fragment DriverCore on Driver {
+  id
+  employeeId
+  firstName
+  lastName
+  phone
+  email
+  licenseNumber
+  licenseClass
+  licenseExpiry
+  status
+  currentLocation
+  rating
+  userId
+  vehicleId
+  createdAt
+  updatedAt
+}
+
+fragment WarehouseCore on Warehouse {
+  id
+  name
+  code
+  type
+  address
+  contactInfo
+  operatingHours
+  capabilities
+  status
+  totalCapacity
+  usedCapacity
+  createdAt
+  updatedAt
+}
+
+fragment InventoryItemCore on InventoryItem {
+  id
+  productId
+  warehouseId
+  locationId
+  onHand
+  available
+  allocated
+  damaged
+  unitCost
+  reorderPoint
+  safetyStock
+  createdAt
+  updatedAt
+}
+
+fragment RouteCore on Route {
+  id
+  name
+  status
+  shipmentId
+  vehicleId
+  driverId
+  waypoints
+  estimatedDistance
+  estimatedDuration
+  actualDistance
+  actualDuration
+  fuelCost
+  createdAt
+  updatedAt
+}
+
+fragment ShipmentCore on Shipment {
+  id
+  shipmentNumber
+  orderId
+  customerId
+  carrierId
+  status
+  origin
+  destination
+  cargoDetails
+  trackingNumber
+  estimatedDelivery
+  actualDelivery
+  createdAt
+  updatedAt
+}
+
+fragment ServiceProviderCore on ServiceProvider {
+  id
+  name
+  type
+  description
+  rating
+  contactInfo
+  services
+  isVerified
+  isActive
+  createdAt
+  updatedAt
+}
+
+fragment ServiceOfferingCore on ServiceOffering {
+  id
+  providerId
+  name
+  description
+  category
+  price
+  currency
+  availability
+  createdAt
+  updatedAt
+}
+
+fragment MovethewheelsReportCore on MovethewheelsReport {
+  id
+  name
+  type
+  description
+  schedule
+  lastGenerated
+  configuration
+  status
+  createdAt
+  updatedAt
+}

package/src/operations/wspace/movethewheels/mutations/entities.graphql

@@ -0,0 +1,87 @@
+mutation CreateCustomer($input: CreateCustomerInput!) {
+  createCustomer(input: $input) {
+    ...CustomerCore
+  }
+}
+
+mutation UpdateCustomer($id: ID!, $input: UpdateCustomerInput!) {
+  updateCustomer(id: $id, input: $input) {
+    ...CustomerCore
+  }
+}
+
+mutation DeleteCustomer($id: ID!) {
+  deleteCustomer(id: $id)
+}
+
+mutation CreateProduct($input: CreateProductInput!) {
+  createProduct(input: $input) {
+    ...ProductCore
+  }
+}
+
+mutation UpdateProduct($id: ID!, $input: UpdateProductInput!) {
+  updateProduct(id: $id, input: $input) {
+    ...ProductCore
+  }
+}
+
+mutation DeleteProduct($id: ID!) {
+  deleteProduct(id: $id)
+}
+
+mutation CreateVehicle($input: CreateVehicleInput!) {
+  createVehicle(input: $input) {
+    ...VehicleCore
+  }
+}
+
+mutation UpdateVehicle($id: ID!, $input: UpdateVehicleInput!) {
+  updateVehicle(id: $id, input: $input) {
+    ...VehicleCore
+  }
+}
+
+mutation UpdateVehicleStatus($id: ID!, $status: VehicleStatus!) {
+  updateVehicleStatus(id: $id, status: $status) {
+    ...VehicleCore
+  }
+}
+
+mutation UpdateVehicleLocation($id: ID!, $location: JSON!) {
+  updateVehicleLocation(id: $id, location: $location) {
+    ...VehicleCore
+  }
+}
+
+mutation DeleteVehicle($id: ID!) {
+  deleteVehicle(id: $id)
+}
+
+mutation CreateDriver($input: CreateDriverInput!) {
+  createDriver(input: $input) {
+    ...DriverCore
+  }
+}
+
+mutation UpdateDriver($id: ID!, $input: UpdateDriverInput!) {
+  updateDriver(id: $id, input: $input) {
+    ...DriverCore
+  }
+}
+
+mutation UpdateDriverStatus($id: ID!, $status: DriverStatus!) {
+  updateDriverStatus(id: $id, status: $status) {
+    ...DriverCore
+  }
+}
+
+mutation AssignDriverVehicle($id: ID!, $vehicleId: ID) {
+  assignDriverVehicle(id: $id, vehicleId: $vehicleId) {
+    ...DriverCore
+  }
+}
+
+mutation DeleteDriver($id: ID!) {
+  deleteDriver(id: $id)
+}