FT-CRM-APP Front-End of marketplace documentation.

Purpose:

The ft-crm-app appears to be a Customer Relationship Management (CRM) application for a freight or transportation company. It likely manages various aspects of customer interactions, trip planning, and vehicle management.

Frontend Technology:

• Vue.js: The application uses Vue.js as its primary frontend framework.

• Bootstrap Vue: For UI components and responsive design.

Backend Technology:

• phase2DFN: This seems to be the backend service, likely built with a technology stack that's not immediately apparent from our conversation.

• Key Features:

a. Trip Management:

• Trip creation and updates

• Time and date selection for trips

b. Vehicle Management:

• Vehicle type selection

• Vehicle availability tracking.

c. Route Planning:

• Origin and destination selection

• Multiple route handling

d. User Interface:

• Modal dialogs for data entry.

• Time picker component.

• Form validation.

e . Integration:

• Google Places API: Used for location autocomplete in origin and destination fields.

• Mixpanel: Integrated for event tracking and analytics.

f. Data Handling:

• Axios: Used for making HTTP requests to the backend API.

• Moment.js: Likely used for date and time manipulation.

g. Security:

• Hashids: Potentially used for obfuscating IDs in URLs or data transfer.

h. Development Practices:

• Component-based architecture

• Reactive data management with Vue.js

• Form validation using vuelidate

• Custom styling for Bootstrap Vue components

i. Potential Focus Areas:

• Improving user experience in time and location selection.

• Enhancing vehicle and route management capabilities.

• Optimizing performance for handling multiple routes and vehicles.

SETUP AND INSTALLATION

1. Clone the repository:

2. Setup the project:

DESCRIPTION ABOUT MAJOR COMPONENTS:

ADD DEMAND

a. Form Structure:

• Uses Bootstrap Vue components for form layout and inputs

• Includes fields for LSP (Logistics Service Provider), vehicle details, material, rates, and locations

b. Functionality:

• Handles both adding new demands and updating existing ones

• Implements form validation using Vuelidate

• Integrates with external services for data like vehicle types, materials, and locations

c. Dynamic Inputs:

• Uses model-select for searchable dropdown inputs

• Implements debounced search for LSP selection

d. Location Handling:

• Includes fields for origin, destination, and waypoints

• Integrates with a location service to get latitude and longitude

e. Date and Time Handling:

• Uses a custom date and time picker for reporting date

f. Conditional Rendering:

• Shows/hides certain fields based on the selected options (e.g., bulk demand, other material)

g. API Integration:

• Makes multiple API calls to fetch and submit data

• 1. Get Vehicle Types: Endpoint: GET /phase-2/vehicle_types Description: Retrieves a list of available vehicle types. 2. Get Materials: Endpoint: GET /phase-2/materials Description: Fetches a list of available materials. 3. Get LSP Names: Endpoint: GET /phase-2/lsp/names Description: Retrieves a list of LSP (Logistics Service Provider) names for selection. 4. Get PSA (Preferred Service Area): Endpoint: GET /phase-2/psa Description: Fetches a list of PSAs for selection. 5. Get CSM (Customer Service Manager): Endpoint: GET /phase-2/csm Description: Retrieves a list of CSMs for selection. 6. Get Location Details: Endpoint: GET /location-based-service/v1/place/location Description: Fetches latitude and longitude for a given place ID. 7. Get Demand Details: Endpoint: GET /phase-2/demand/${demandId} Description: Retrieves details of a specific demand for editing. 8. Submit Demand: Endpoint: POST /phase-2/demand Description: Creates a new demand with the provided details. 9. Update Demand: Endpoint: PUT /phase-2/demand/${demandId} Description: Updates an existing demand with new details. 10. Get LSP Top Loads: Endpoint: GET /phase-2/lsp/${lspId}/top_loads Description: Retrieves top loads for a specific LSP. 11. Get Shippers: Endpoint: GET /phase-2/shipper Description: Fetches a list of shippers for selection. 12. Get Total Placed Vehicles: Endpoint: GET /phase-2/demand/${demandId}/placed_vehicles Description: Retrieves the total number of placed vehicles for a specific demand. 13. Location Autocomplete: Endpoint: GET /location-based-service/v1/place/autocomplete Description: Provides autocomplete suggestions for location inputs.

h. State Management:

• Manages a complex local state with numerous data points

i. Event Tracking:

• Integrates with Mixpanel for event tracking (e.g., demand submission)

LIST DEMAND

a. Responsive Design:

• Adapts layout for mobile and desktop view

b. Data Display:

• Uses a b-table to display demand information

• Implements custom cell rendering for various data types

c. Filtering and Searching:

• Provides multiple filter options (status, date range, LSP, PSA, CSM, origin, destination, etc.)

• Implements debounced search functionality

d. Pagination:

• Supports both traditional pagination and infinite scrolling (for mobile)

e. Demand Categories:

• Uses tabs to categorize demands (e.g., All, Open, Closed)

f. Status Management:

• Handles demand status updates

• Displays status alerts and tags

g. User Interactions:

• Supports actions like editing, cloning, and canceling demands

• Provides links to related entities (e.g., LSP profiles)

h. Performance Optimization:

• Implements polling for real-time updates

• Uses computed properties for efficient data manipulation

i. Analytics Integration:

• Tracks user interactions using Mixpanel

j. API Integration:

• Makes multiple API calls to fetch and update demand data

  1. Fetch Demands: Endpoint: GET /phase-2/demands Description: Retrieves a list of demands based on various filter parameters. 2. Get Demand Summary: Endpoint: GET /phase-2/demands/summary Description: Fetches summary counts for different demand categories. 3. Get LSP Names: Endpoint: GET /phase-2/lsp/names Description: Retrieves a list of LSP (Logistics Service Provider) names for filtering. 4. Get Suppliers: Endpoint: GET /phase-2/supplier Description: Fetches a list of suppliers (Fleet Owners) for filtering. 5. Get Shippers: Endpoint: GET /phase-2/shipper Description: Retrieves a list of shippers for filtering. 6. Get Clusters: Endpoint: GET /phase-2/clusters Description: Fetches a list of clusters for location filtering. 7. Get Super Clusters: Endpoint: GET /phase-2/supper_clusters Description: Retrieves a list of super clusters for location filtering. 8. Get Zones: Endpoint: GET /phase-2/zones Description: Fetches a list of zones for location filtering. 9. Get Pricing Margin: Endpoint: GET /demand/pricing_margin

TRIPS

a. Data Display:

• Uses a b-table to show trip details including Trip ID, Demand ID, Trip Date, LSP Name, FO Details, Vehicle Details, Route, and Status.

• Implements expandable rows for more detailed information.

b. Filtering and Pagination:

• Supports various filters like origin, destination, date range, payment type, etc.

• Implements pagination for the trips list.

c. User Interactions:

• Allows users to initiate calls to suppliers and drivers.

• Provides links to LSP and FO profiles.

• Supports document uploads and management.

d. Payment Processing:

• Handles payment details for LSPs and FOs.

• Manages manual payments and charge updates.

e. Document Management:

• Includes sections for various documents like loading memo, order summary, and POD details.

f. API integrations

1. Fetch Shipments (Trips): Endpoint: GET /phase-2/shipment Description: Retrieves a list of shipments (trips) based on various filter parameters. Initiate Call: Endpoint: POST /phase-2/shipment/${shipmentId}/call/${party} Description: Initiates a call to either the supplier or driver. Get Supplier Details: Endpoint: GET /phase-2/supplier/${supplierId}/details Description: Fetches details of a specific supplier, including bank and KYC information. Get Charges Details: Endpoint: GET /phase-2/shipment/${itemId}/charge Description: Retrieves charge details for a specific shipment. Get Placement Info Details: Endpoint: GET /phase-2/demand/${demandId}/demand_status Description: Fetches placement information for a specific demand. Get Order Summary Details: Endpoint: GET /phase-2/shipment/${itemId}/order_summary Description: Retrieves order summary details for a specific shipment. Get POD Details: Endpoint: GET /phase-2/shipment/${itemId}/pod Description: Fetches Proof of Delivery (POD) details for a specific shipment.

g. Component Composition:

• Uses several child components for specific functionalities (e.g., Documents, TripUpdate, ShipmentHistory).

PAYMENTS

a. Filtering Interface:

• Provides various filters for trip type, status, LSP (Logistics Service Provider), FO (Fleet Owner), date range, and more.

• Implements search functionality for specific trip details.

b. Geographical Filtering:

• Allows filtering by clusters, super-clusters, and zones for both origin and destination.

c. Payment Type Management:

• Handles different payment types and statuses.

• Includes options for showing reconciled payments.

d. Debounced Search:

• Implements debounced search for LSP and supplier selection to optimize API calls.

e. State Management:

• Manages a complex local state with numerous data points for filters and options.

• Implements watchers for various filter changes to update the component state.

f. API Integration:

LIVE VEHICLES

a. Filtering Interface:

• Provides filters for destination, vehicle type, vehicle number, origin, and fleet owner (FO).

• Implements search functionality for locations and suppliers.

b. Tabbed Interface:

• Uses tabs to categorize vehicles: Recently Added, Vehicle Moving (with nested tabs for Open Trips and Closed Trips).

c. Data Display:

• Uses b-table to display vehicle information.

• Shows details like vehicle number, type, location, origin, destination, and associated parties (PSA, FO).

d. Geolocation:

• Integrates with a location service to get latitude and longitude for origins and destinations.

• Supports filtering by super-clusters for both origin and destination.

e. API Integration:

• 1. Get Available Trips: Endpoint: GET /phase-2/trips/available_trips Description: Retrieves a list of available trips based on various filter parameters. Used in: getAvailableTripsData method 2. Location Autocomplete: Endpoint: GET /location-based-service/v1/place/autocomplete Description: Provides autocomplete suggestions for location inputs. Used in: searchUnLoading method 3. Get Location Details: Endpoint: GET /location-based-service/v1/place/location Description: Fetches latitude and longitude for a given place ID. Used in: getLatLng method 4. Get Vehicle Types: Endpoint: GET /phase-2/vehicle_types Description: Retrieves a list of available vehicle types. Used in: getVehicleTypes method 5. View Vehicle Documents: Endpoint: GET ${window.uiConfig.VUE_APP_FO_SERVICE_BASE_URL}/public/vehicle/${vehicleNumber}/records Description: Fetches vehicle documents for viewing. Used in: getConfigForDocuments method 6. Get Suppliers (Fleet Owners): Endpoint: Not directly visible in the provided code, but referenced as this.getAllSuppliers Description: Likely retrieves a list of suppliers or fleet owners for filtering. 7. Mixpanel Tracking: Function: MX_TRACK Description: Tracks various user interactions and events. Used in: mixPanelEvents and handleShowSupplyClick methods .