Import payload config

astro/src/components/AddRetailerForm.tsx

@@ -49,7 +49,7 @@ export function AddRetailerForm() {
               <FormItem>
                 <FormLabel>Username</FormLabel>
                 <FormControl>
-                  <Input placeholder="shadcn" {...field} />
+                  <Input placeholder="" {...field} />
                 </FormControl>
                 <FormDescription>
                   This is your public display name.

astro/src/types.ts

@@ -11,6 +11,11 @@ export interface Config {
     posts: Post;
     users: User;
     media: Media;
+    couriers: Courier;
+    dispatches: Dispatch;
+    makers: Maker;
+    products: Product;
+    retailers: Retailer;
   };
   globals: {};
 }
@@ -52,3 +57,58 @@ export interface Media {
   width?: number;
   height?: number;
 }
+export interface Courier {
+  id: string;
+  name: string;
+  startingPoint?: string;
+  destination?: string;
+  departureDate?: string;
+  arrivalDate?: string;
+  weightAllowance?: number;
+  updatedAt: string;
+  createdAt: string;
+}
+export interface Dispatch {
+  id: string;
+  dispatchesCode: string;
+  products?: string[] | Product[];
+  startingPoint?: string | Maker;
+  endPoint?: string | Retailer;
+  typeOfTransportation?: ('air' | 'car' | 'train' | 'boat')[];
+  courier: string | Courier;
+  timeSensitive?: boolean;
+  status?: ('routeRequested' | 'inTransit' | 'completed')[];
+  updatedAt: string;
+  createdAt: string;
+}
+export interface Product {
+  id: string;
+  productTitle: string;
+  updatedAt: string;
+  createdAt: string;
+}
+export interface Maker {
+  id: string;
+  name: string;
+  /**
+   * @minItems 2
+   * @maxItems 2
+   */
+  location?: [number, number];
+  products?: string[] | Product[];
+  updatedAt: string;
+  createdAt: string;
+}
+export interface Retailer {
+  id: string;
+  name: string;
+  /**
+   * @minItems 2
+   * @maxItems 2
+   */
+  location?: [number, number];
+  products?: string[] | Product[];
+  salesPoint?: string;
+  updatedAt: string;
+  createdAt: string;
+}

payload/src/collections/Couriers.ts

@@ -0,0 +1,45 @@
+import { CollectionConfig } from 'payload/types';
+
+const Couriers: CollectionConfig = {
+  slug: 'couriers',
+  admin: {
+    useAsTitle: 'name',
+  },
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: 'name',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'startingPoint',
+      label: 'Traveling from',
+      type: 'text', // TODO use geopicker here
+    },
+    {
+      name: 'destination',
+      label: 'Traveling to',
+      type: 'text' // TODO user geopicker here
+    },
+    {
+      name: 'departureDate',
+      label: 'Departure date',
+      type: 'date'
+    },
+    {
+      name: 'arrivalDate',
+      label: 'Arrival date',
+      type: 'date'
+    },
+    {
+      name: 'weightAllowance',
+      label: 'Weight Allowance (KG)',
+      type: 'number'
+    }
+  ],
+};
+
+export default Couriers;

payload/src/collections/Dispatches.ts

@@ -0,0 +1,95 @@
+import { CollectionConfig } from 'payload/types';
+
+const Dispatches: CollectionConfig = {
+  slug: 'dispatches',
+  admin: {
+    useAsTitle: 'dispatchesCode',
+  },
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+        name: 'dispatchesCode',
+        type: 'text', 
+        required: true,
+      },
+      {
+        name: 'products', 
+        type: 'relationship', 
+        relationTo: 'products', 
+        hasMany: true,
+      },
+      {
+        name: 'startingPoint', 
+        type: 'relationship', 
+        relationTo: 'makers', 
+        hasMany: false,
+      },
+      {
+        name: 'endPoint', 
+        type: 'relationship', 
+        relationTo: 'retailers', 
+        hasMany: false,
+      },
+      {
+        name: 'typeOfTransportation',
+        type: 'select',
+        hasMany: true,
+        options: [
+          {
+            label: 'Air',
+            value: 'air'
+          },
+          {
+            label: 'Car',
+            value: 'car'
+          },
+          {
+            label: 'Train',
+            value: 'train'
+          },
+          {
+            label: 'Boat',
+            value: 'boat'
+          }
+        ]
+      },
+      {
+        name: 'courier', 
+        type: 'relationship', 
+        relationTo: 'couriers', 
+        hasMany: false,
+        required: true
+      },
+      {
+        name: 'timeSensitive', 
+        type: 'checkbox', 
+      },
+      {
+        name: 'status', // required
+        type: 'select', // required
+        hasMany: true,
+        // admin: {
+        //   isClearable: true,
+        //   isSortable: true, // use mouse to drag and drop different values, and sort them according to your choice
+        // },
+        options: [
+          {
+            label: 'Route requested',
+            value: 'routeRequested',
+          },
+          {
+            label: 'In transit',
+            value: 'inTransit',
+          },
+          {
+            label: 'Completed',
+            value: 'completed',
+          },
+        ],
+      }
+  ],
+};
+
+export default Dispatches;

payload/src/collections/Makers.ts

@@ -0,0 +1,34 @@
+import { CollectionConfig } from 'payload/types';
+import { geoPickerField } from "../customFields/geoPicker/field";
+
+const Makers: CollectionConfig = {
+  slug: 'makers',
+  admin: {
+    useAsTitle: 'name',
+  },
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+        name: 'name', // required
+        type: 'text', // required
+        required: true,
+      },
+  //geoPickerField, is a bit broken right now
+      {
+        name: 'location',
+        type: 'point',
+        label: 'Location',
+      },
+      {
+        name: 'products', // required
+        type: 'relationship', // required
+        relationTo: 'products', // required
+        hasMany: true,
+        // TODO: make the name of the product visible in the dropdown
+      }
+  ],
+};
+
+export default Makers;

payload/src/collections/Products.ts

@@ -0,0 +1,20 @@
+import { CollectionConfig } from 'payload/types';
+
+const Products: CollectionConfig = {
+  slug: 'products',
+  admin: {
+    useAsTitle: 'productTitle',
+  },
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+        name: 'productTitle', // required
+        type: 'text', // required
+        required: true,
+      },
+  ],
+};
+
+export default Products;

payload/src/collections/Retailers.ts

@@ -0,0 +1,36 @@
+import { CollectionConfig } from 'payload/types';
+
+const Retailers: CollectionConfig = {
+  slug: 'retailers',
+  admin: {
+    useAsTitle: 'name',
+  },
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+        name: 'name', // required
+        type: 'text', // required
+        required: true,
+      },
+      {
+        name: 'location',
+        type: 'point',
+        label: 'Location',
+      },
+      {
+        name: 'products', // required
+        type: 'relationship', // required
+        relationTo: 'products', // required
+        hasMany: true,
+      },
+      {
+        name: 'salesPoint',
+        type: 'text',
+        label: 'Where do you plan to sell/exhibit products?'
+      }
+  ],
+};
+
+export default Retailers;

payload/src/customFields/geoPicker/GeoPicker.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { useField } from 'payload/components/forms';
+
+export const GeoPicker: React.FC<{ path: string }> = ({ path }) => {
+  const { value, setValue } = useField<string>({ path });
+  const [longitude, setLongitude] = React.useState(value[0] || 0);
+  const [latitude, setLatitude] = React.useState(value[1] || 0);
+  const [error, setError] = React.useState("")
+
+  const handleCityEnter = async (e) => {
+    if (e.key === 'Enter') {
+      try {
+        const response = await fetch(
+          `https://nominatim.openstreetmap.org/search?format=json&q=${e.target.value}`
+        );
+        const data = await response.json();
+        if (data && data.length > 0) {
+          const { lat, lon } = data[0];
+          setLatitude(lat);
+          setLongitude(lon);
+          setValue([lon, lat]);
+        }
+      } catch (err) {
+        setError(e)
+        console.error('Error fetching geolocation:', e);
+      }
+    }
+  };
+
+  const handleLatitudeChange = (e) => {
+    setLatitude(e.target.value);
+  };
+
+  const handleLongitudeChange = (e) => {
+    setLongitude(e.target.value);
+  };
+
+  return (
+    <div>
+      <div className='field-type text'>
+        <label className='field-label'>
+          City
+        </label>
+        <input
+          type="text"
+          className='field-name'
+          onKeyDown={handleCityEnter}
+          placeholder="Enter city to get coordinates"
+        />
+      </div>
+      {error != "" && 
+        <p>{error}</p>
+      }
+      <div className="field-type point">
+        <ul className='point__wrap'>
+          <li>
+            <label className='field-label'>Location - Longitude</label>
+            <input id="field-longitude-location" type="number" name="location.longitude" value={longitude} onChange={handleLongitudeChange}></input>
+          </li>
+          <li>
+            <label className='field-label'>Location - Latitude</label>
+            <input id="field-latitude-latitude" type="number" name="location.latitude" value={latitude} onChange={handleLatitudeChange}></input>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};

payload/src/customFields/geoPicker/field.ts

@@ -0,0 +1,12 @@
+import { PointField } from 'payload/types';
+import { GeoPicker } from './GeoPicker';
+
+export const geoPickerField: PointField = {
+  name: 'Location',
+  type: 'point',
+  admin: {
+    components: {
+      Field: GeoPicker,
+    },
+  },
+}

payload/src/payload.config.ts

@@ -3,6 +3,11 @@ import path from "path";
 import Posts from "@/collections/Posts";
 import Users from "@/collections/Users";
 import Media from "@/collections/Media";
+import Couriers from "./collections/Couriers";
+import Dispatches from "./collections/Dispatches";
+import Makers from "./collections/Makers";
+import Products from "./collections/Products";
+import Retailers from "./collections/Retailers";
 
 export default buildConfig({
   serverURL: process.env.PAYLOAD_URL,
@@ -19,7 +24,16 @@ export default buildConfig({
       },
     }),
   },
-  collections: [Posts, Users, Media],
+  collections: [
+    Posts,
+    Users,
+    Media,
+    Couriers,
+    Dispatches,
+    Makers,
+    Products,
+    Retailers,
+  ],
   typescript: {
     outputFile: path.resolve("/", "types.ts"),
   },