@burdenoff/microfe-movethewheels 2026.510.105

package/src/movethewheels/hooks/useCustomers.ts

@@ -0,0 +1,359 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import type { Customer, CustomerFilter } from '../types';
+import { executeGraphQL } from '../utils/graphqlClient';
+
+interface UseCustomersOptions {
+  filters?: CustomerFilter;
+  limit?: number;
+  offset?: number;
+}
+
+interface UseCustomersResult {
+  customers: Customer[];
+  totalCustomers: number;
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => void;
+  createCustomer: (customer: Partial<Customer>) => Promise<Customer>;
+  updateCustomer: (id: string, updates: Partial<Customer>) => Promise<Customer>;
+  deleteCustomer: (id: string) => Promise<void>;
+}
+
+interface ApiCustomer {
+  id: string;
+  name: string;
+  email?: string | null;
+  phone?: string | null;
+  type: string;
+  company?: string | null;
+  address?: Record<string, unknown> | null;
+  businessLicense?: string | null;
+  taxId?: string | null;
+  rating?: number | null;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt?: string | null;
+}
+
+const LIST_CUSTOMERS_QUERY = `
+  query ListCustomers($filter: CustomerFilterInput, $pagination: PaginationInput) {
+    customers(filter: $filter, pagination: $pagination) {
+      id
+      name
+      email
+      phone
+      type
+      company
+      address
+      businessLicense
+      taxId
+      rating
+      createdAt
+      updatedAt
+      deletedAt
+    }
+  }
+`;
+
+const GET_CUSTOMER_QUERY = `
+  query GetCustomer($id: ID!) {
+    customer(id: $id) {
+      id
+      name
+      email
+      phone
+      type
+      company
+      address
+      businessLicense
+      taxId
+      rating
+      createdAt
+      updatedAt
+      deletedAt
+    }
+  }
+`;
+
+const CREATE_CUSTOMER_MUTATION = `
+  mutation CreateCustomer($input: CreateCustomerInput!) {
+    createCustomer(input: $input) {
+      id
+      name
+      email
+      phone
+      type
+      company
+      address
+      businessLicense
+      taxId
+      rating
+      createdAt
+      updatedAt
+      deletedAt
+    }
+  }
+`;
+
+const UPDATE_CUSTOMER_MUTATION = `
+  mutation UpdateCustomer($id: ID!, $input: UpdateCustomerInput!) {
+    updateCustomer(id: $id, input: $input) {
+      id
+      name
+      email
+      phone
+      type
+      company
+      address
+      businessLicense
+      taxId
+      rating
+      createdAt
+      updatedAt
+      deletedAt
+    }
+  }
+`;
+
+const DELETE_CUSTOMER_MUTATION = `
+  mutation DeleteCustomer($id: ID!) {
+    deleteCustomer(id: $id)
+  }
+`;
+
+function mapCustomer(customer: ApiCustomer): Customer {
+  return {
+    id: customer.id,
+    name: customer.name,
+    email: customer.email ?? '',
+    phone: customer.phone ?? '',
+    type: customer.type.toLowerCase() === 'b2b' ? 'b2b' : 'b2c',
+    company: customer.company ?? undefined,
+    address: {
+      street: '',
+      city: '',
+      state: '',
+      postalCode: '',
+      country: '',
+      ...(customer.address ?? {}),
+    },
+    businessLicense: customer.businessLicense ?? undefined,
+    taxId: customer.taxId ?? undefined,
+    preferredContactMethod: 'email',
+    marketingOptIn: false,
+    isActive: !customer.deletedAt,
+    rating: customer.rating ?? 0,
+    createdAt: new Date(customer.createdAt),
+    updatedAt: new Date(customer.updatedAt),
+  };
+}
+
+export function useCustomers(options: UseCustomersOptions = {}): UseCustomersResult {
+  const { filters: rawFilters, limit = 20, offset = 0 } = options;
+  // Stabilize filters by its structural fields so the load callback's inferred
+  // `filters` dependency (React Compiler) matches a stable reference and the
+  // effect does not re-run on every parent render.
+  const filters = useMemo(
+    () => rawFilters,
+    [rawFilters?.isActive, rawFilters?.search, rawFilters?.type]
+  );
+  const { apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser } =
+    useMoveTheWheels();
+
+  const [customers, setCustomers] = useState<Customer[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const graphQLOptions = useMemo(
+    () => ({
+      apiGatewayUrl,
+      authToken,
+      workspaceToken,
+      workspaceId,
+      tenantId,
+      actorId: currentUser?.id,
+    }),
+    [apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser?.id]
+  );
+
+  const loadCustomers = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await executeGraphQL<{
+        customers: ApiCustomer[];
+      }>(graphQLOptions, LIST_CUSTOMERS_QUERY, {
+        filter: {
+          type: filters?.type,
+          search: filters?.search,
+        },
+        pagination: { limit, offset },
+      });
+
+      let mapped = data.customers.map(mapCustomer);
+      if (filters?.isActive !== undefined) {
+        mapped = mapped.filter((item) => item.isActive === filters.isActive);
+      }
+      setCustomers(mapped);
+    } catch (fetchError) {
+      setError(fetchError instanceof Error ? fetchError : new Error('Failed to load customers'));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [filters, graphQLOptions, limit, offset]);
+
+  useEffect(() => {
+    void loadCustomers();
+  }, [loadCustomers]);
+
+  const refetch = useCallback(() => {
+    void loadCustomers();
+  }, [loadCustomers]);
+
+  const createCustomer = useCallback(
+    async (customerData: Partial<Customer>): Promise<Customer> => {
+      const data = await executeGraphQL<{
+        createCustomer: ApiCustomer;
+      }>(graphQLOptions, CREATE_CUSTOMER_MUTATION, {
+        input: {
+          name: customerData.name,
+          email: customerData.email,
+          phone: customerData.phone,
+          type: customerData.type ?? 'b2c',
+          company: customerData.company,
+          address: customerData.address,
+          businessLicense: customerData.businessLicense,
+          taxId: customerData.taxId,
+          rating: customerData.rating,
+        },
+      });
+
+      const created = mapCustomer(data.createCustomer);
+      setCustomers((previous) => [created, ...previous]);
+      return created;
+    },
+    [graphQLOptions]
+  );
+
+  const updateCustomer = useCallback(
+    async (id: string, updates: Partial<Customer>): Promise<Customer> => {
+      const data = await executeGraphQL<{
+        updateCustomer: ApiCustomer;
+      }>(graphQLOptions, UPDATE_CUSTOMER_MUTATION, {
+        id,
+        input: {
+          name: updates.name,
+          email: updates.email,
+          phone: updates.phone,
+          type: updates.type,
+          company: updates.company,
+          address: updates.address,
+          businessLicense: updates.businessLicense,
+          taxId: updates.taxId,
+          rating: updates.rating,
+        },
+      });
+
+      const updated = mapCustomer(data.updateCustomer);
+      setCustomers((previous) => previous.map((item) => (item.id === id ? updated : item)));
+      return updated;
+    },
+    [graphQLOptions]
+  );
+
+  const deleteCustomer = useCallback(
+    async (id: string): Promise<void> => {
+      await executeGraphQL<{ deleteCustomer: boolean }>(graphQLOptions, DELETE_CUSTOMER_MUTATION, {
+        id,
+      });
+      setCustomers((previous) => previous.filter((item) => item.id !== id));
+    },
+    [graphQLOptions]
+  );
+
+  return {
+    customers,
+    totalCustomers: customers.length,
+    isLoading,
+    error,
+    refetch,
+    createCustomer,
+    updateCustomer,
+    deleteCustomer,
+  };
+}
+
+export function useCustomer(customerId: string | undefined) {
+  const { apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser } =
+    useMoveTheWheels();
+  const [customer, setCustomer] = useState<Customer | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const graphQLOptions = useMemo(
+    () => ({
+      apiGatewayUrl,
+      authToken,
+      workspaceToken,
+      workspaceId,
+      tenantId,
+      actorId: currentUser?.id,
+    }),
+    [apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser?.id]
+  );
+
+  const loadCustomer = useCallback(async () => {
+    if (!customerId) {
+      setCustomer(null);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await executeGraphQL<{
+        customer: ApiCustomer | null;
+      }>(graphQLOptions, GET_CUSTOMER_QUERY, { id: customerId });
+
+      setCustomer(data.customer ? mapCustomer(data.customer) : null);
+    } catch (fetchError) {
+      setError(fetchError instanceof Error ? fetchError : new Error('Failed to load customer'));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [customerId, graphQLOptions]);
+
+  useEffect(() => {
+    void loadCustomer();
+  }, [loadCustomer]);
+
+  const refetch = useCallback(() => {
+    void loadCustomer();
+  }, [loadCustomer]);
+
+  return { customer, isLoading, error, refetch };
+}
+
+export function useCustomerStats() {
+  const { customers, isLoading, error } = useCustomers({ limit: 500, offset: 0 });
+
+  const stats = useMemo(() => {
+    const total = customers.length;
+    const b2b = customers.filter((item) => item.type === 'b2b').length;
+    const b2c = total - b2b;
+    const active = customers.filter((item) => item.isActive).length;
+    const totalRating = customers.reduce((sum, item) => sum + item.rating, 0);
+
+    return {
+      total,
+      b2b,
+      b2c,
+      active,
+      inactive: total - active,
+      avgRating: total > 0 ? totalRating / total : 0,
+    };
+  }, [customers]);
+
+  return { stats, isLoading, error };
+}