add customer name, service info, second pickup location, and structured address fields to deliveries

2026-04-16 20:16:21 +06:00
parent 7f775abf6a
commit ce6ea377ce
16 changed files with 852 additions and 77 deletions
@@ -1,10 +1,12 @@
 import { memo } from 'react';
-import { MapPin, Phone, Package, Store, Calendar, MessageSquare, CheckCircle2, Circle, CheckSquare } from 'lucide-react';
+import { MapPin, Phone, Package, Store, Calendar, MessageSquare, CheckCircle2, Circle, CheckSquare, User, Wrench } from 'lucide-react';
 import type { Delivery } from '../../types';
 import { pickupLocationLabels } from '../../types';
 import { StatusBadge } from './StatusBadge';
 import { Card } from '../ui/Card';

+const CITY = 'kokshetau';
+
 interface DeliveryCardProps {
  delivery: Delivery;
  onStatusChange: (id: string) => void;
@@ -15,7 +17,7 @@ interface DeliveryCardProps {
 export const DeliveryCard = memo(({ delivery, onStatusChange, onEdit, onDelete }: DeliveryCardProps) => {
  const handleAddressClick = () => {
    const encodedAddress = encodeURIComponent(delivery.address);
-    window.open(`https://maps.google.com/?q=${encodedAddress}`, '_blank');
+    window.open(`https://2gis.kz/${CITY}/search/${encodedAddress}`, '_blank');
  };

  const handlePhoneClick = () => {
@@ -56,10 +58,20 @@ export const DeliveryCard = memo(({ delivery, onStatusChange, onEdit, onDelete }
          <span className="text-[#1b1b1d] font-medium">{delivery.date}</span>
        </div>

+        {/* Pickup locations */}
        <div className="flex items-center gap-2 text-sm">
          <Store size={16} className="text-[#75777d]" />
-          <span className="text-[#1b1b1d]">{pickupLocationLabels[delivery.pickupLocation]}</span>
+          <span className="text-[#1b1b1d]">
+            {delivery.pickupLocation2
+              ? `${pickupLocationLabels[delivery.pickupLocation]} + ${pickupLocationLabels[delivery.pickupLocation2]}`
+              : pickupLocationLabels[delivery.pickupLocation]}
+          </span>
        </div>
+        {delivery.pickupLocation2 && delivery.productName2 && (
+          <div className="flex items-start gap-2 text-sm pl-6">
+            <span className="text-[#75777d] text-xs">Со 2-й точки: {delivery.productName2}</span>
+          </div>
+        )}

        <div className="flex items-center gap-2 text-sm">
          <Package size={16} className="text-[#75777d]" />
@@ -71,11 +83,25 @@ export const DeliveryCard = memo(({ delivery, onStatusChange, onEdit, onDelete }
          className="flex items-start gap-2 text-sm w-full text-left hover:bg-[#f5f3f5] -mx-1 px-1 py-0.5 rounded transition-colors"
        >
          <MapPin size={16} className="text-[#F28C28] mt-0.5 shrink-0" />
-          <span className="text-[#1B263B] underline decoration-[#F28C28]/30 underline-offset-2">
-            {delivery.address}
-          </span>
+          <div className="flex flex-col">
+            <span className="text-[#1B263B] underline decoration-[#F28C28]/30 underline-offset-2">
+              ул. {delivery.street}, д. {delivery.house}{delivery.apartment ? `, кв. ${delivery.apartment}` : ''}
+            </span>
+            {(delivery.entrance || delivery.floor) && (
+              <span className="text-[#75777d] text-xs">
+                {delivery.entrance && `Подъезд ${delivery.entrance}`}
+                {delivery.entrance && delivery.floor && ', '}
+                {delivery.floor && `этаж ${delivery.floor}`}
+              </span>
+            )}
+          </div>
        </button>

+        <div className="flex items-center gap-2 text-sm">
+          <User size={16} className="text-[#75777d]" />
+          <span className="text-[#1b1b1d]">{delivery.customerName}</span>
+        </div>
+
        <button
          onClick={handlePhoneClick}
          className="flex items-center gap-2 text-sm w-full text-left hover:bg-[#f5f3f5] -mx-1 px-1 py-0.5 rounded transition-colors"
@@ -105,6 +131,13 @@ export const DeliveryCard = memo(({ delivery, onStatusChange, onEdit, onDelete }
          </span>
        </div>

+        {delivery.serviceInfo && (
+          <div className="flex items-start gap-2 text-sm">
+            <Wrench size={16} className="text-[#F28C28] mt-0.5 shrink-0" />
+            <span className="text-[#45474d]">{delivery.serviceInfo}</span>
+          </div>
+        )}
+
        {delivery.comment && (
          <div className="flex items-start gap-2 text-sm">
            <MessageSquare size={16} className="text-[#75777d] mt-0.5 shrink-0" />
@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { Button, Input, Select, Modal } from '../ui';
 import { pickupOptions } from '../../constants/pickup';
 import { formatDateForInput, parseDateFromInput, getTodayFrontend } from '../../utils/date';
+import { parseAddress } from '../../utils/addressParser';
 import type { Delivery, PickupLocation, DeliveryStatus } from '../../types';

 interface DeliveryFormProps {
@@ -20,28 +21,49 @@ export const DeliveryForm = ({ isOpen, onClose, onSubmit, initialData, defaultDa
  const [formData, setFormData] = useState({
    date: defaultDate || getTodayFrontend(),
    pickupLocation: 'warehouse' as PickupLocation,
+    pickupLocation2: null as PickupLocation | null,
    productName: '',
+    productName2: '',
+    customerName: '',
    address: '',
+    street: '',
+    house: '',
+    apartment: '',
+    entrance: '',
+    floor: '',
    phone: '',
    additionalPhone: '',
    hasElevator: false,
+    serviceInfo: '',
    comment: '',
    status: 'new' as DeliveryStatus,
  });
+  const [showSecondPickup, setShowSecondPickup] = useState(false);
+  const [showAddressDetails, setShowAddressDetails] = useState(false);

  useEffect(() => {
    if (initialData) {
      setFormData({
        date: initialData.date,
        pickupLocation: initialData.pickupLocation,
+        pickupLocation2: initialData.pickupLocation2 || null,
        productName: initialData.productName,
+        productName2: initialData.productName2 || '',
+        customerName: initialData.customerName,
        address: initialData.address,
+        street: initialData.street,
+        house: initialData.house,
+        apartment: initialData.apartment || '',
+        entrance: initialData.entrance || '',
+        floor: initialData.floor || '',
        phone: initialData.phone,
        additionalPhone: initialData.additionalPhone || '',
        hasElevator: initialData.hasElevator,
+        serviceInfo: initialData.serviceInfo || '',
        comment: initialData.comment,
        status: initialData.status,
      });
+      setShowSecondPickup(!!initialData.pickupLocation2);
    } else if (defaultDate) {
      setFormData(prev => ({ ...prev, date: defaultDate }));
    }
@@ -54,7 +76,7 @@ export const DeliveryForm = ({ isOpen, onClose, onSubmit, initialData, defaultDa

  const isPhoneValid = !formData.phone || validatePhone(formData.phone);
  const isAdditionalPhoneValid = !formData.additionalPhone || validatePhone(formData.additionalPhone);
-  const isFormValid = formData.productName && formData.address && formData.phone && isPhoneValid;
+  const isFormValid = formData.productName && formData.address && formData.phone && isPhoneValid && formData.customerName && formData.street && formData.house;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
@@ -65,14 +87,25 @@ export const DeliveryForm = ({ isOpen, onClose, onSubmit, initialData, defaultDa
        setFormData({
          date: defaultDate || getTodayFrontend(),
          pickupLocation: 'warehouse',
+          pickupLocation2: null,
          productName: '',
+          productName2: '',
+          customerName: '',
          address: '',
+          street: '',
+          house: '',
+          apartment: '',
+          entrance: '',
+          floor: '',
          phone: '',
          additionalPhone: '',
          hasElevator: false,
+          serviceInfo: '',
          comment: '',
          status: 'new',
        });
+        setShowSecondPickup(false);
+        setShowAddressDetails(false);
      }
      onClose();
    } catch {
@@ -126,16 +159,106 @@ export const DeliveryForm = ({ isOpen, onClose, onSubmit, initialData, defaultDa
          required
        />

+        {/* Address with auto-parse */}
+        <div>
+          <label className="block text-sm font-medium text-[#1b1b1d] mb-1">
+            Адрес доставки
+          </label>
+          <input
+            type="text"
+            value={formData.address}
+            onChange={(e) => {
+              const newAddress = e.target.value;
+              const parsed = parseAddress(newAddress);
+              setFormData({
+                ...formData,
+                address: newAddress,
+                street: parsed.street || formData.street,
+                house: parsed.house || formData.house,
+                apartment: parsed.apartment || formData.apartment,
+                entrance: parsed.entrance || formData.entrance,
+                floor: parsed.floor || formData.floor,
+              });
+              if (parsed.street || parsed.house) {
+                setShowAddressDetails(true);
+              }
+            }}
+            onBlur={() => setShowAddressDetails(true)}
+            placeholder="ул. Абая, д. 15, кв. 45, подъезд 3, этаж 5"
+            className="w-full px-3 py-2 bg-[#f5f3f5] border border-[#c5c6cd] rounded-md text-[#1b1b1d] focus:outline-none focus:ring-2 focus:ring-[#1B263B] focus:border-transparent transition-colors"
+            required
+          />
+          <p className="text-xs text-[#75777d] mt-1">
+            Улица, дом, квартира, подъезд, этаж
+          </p>
+        </div>
+
+        {/* Parsed address details */}
+        {showAddressDetails && (
+          <div className="bg-[#f5f3f5] rounded-lg p-4 space-y-3">
+            <p className="text-sm font-medium text-[#1b1b1d]">Проверьте распознанные данные:</p>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs text-[#75777d] mb-1">Улица *</label>
+                <input
+                  type="text"
+                  value={formData.street}
+                  onChange={(e) => setFormData({ ...formData, street: e.target.value })}
+                  className="w-full px-2 py-1.5 bg-white border border-[#c5c6cd] rounded text-sm"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-xs text-[#75777d] mb-1">Дом *</label>
+                <input
+                  type="text"
+                  value={formData.house}
+                  onChange={(e) => setFormData({ ...formData, house: e.target.value })}
+                  className="w-full px-2 py-1.5 bg-white border border-[#c5c6cd] rounded text-sm"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-xs text-[#75777d] mb-1">Квартира</label>
+                <input
+                  type="text"
+                  value={formData.apartment}
+                  onChange={(e) => setFormData({ ...formData, apartment: e.target.value })}
+                  className="w-full px-2 py-1.5 bg-white border border-[#c5c6cd] rounded text-sm"
+                />
+              </div>
+              <div>
+                <label className="block text-xs text-[#75777d] mb-1">Подъезд</label>
+                <input
+                  type="text"
+                  value={formData.entrance}
+                  onChange={(e) => setFormData({ ...formData, entrance: e.target.value })}
+                  className="w-full px-2 py-1.5 bg-white border border-[#c5c6cd] rounded text-sm"
+                />
+              </div>
+              <div>
+                <label className="block text-xs text-[#75777d] mb-1">Этаж</label>
+                <input
+                  type="text"
+                  value={formData.floor}
+                  onChange={(e) => setFormData({ ...formData, floor: e.target.value })}
+                  className="w-full px-2 py-1.5 bg-white border border-[#c5c6cd] rounded text-sm"
+                />
+              </div>
+            </div>
+          </div>
+        )}
+
        <Input
-          label="Адрес разгрузки"
-          value={formData.address}
-          onChange={(e) => setFormData({ ...formData, address: e.target.value })}
-          placeholder="ул. Примерная, д. 1"
+          label="ФИО клиента *"
+          value={formData.customerName}
+          onChange={(e) => setFormData({ ...formData, customerName: e.target.value })}
+          placeholder="Иванов Иван Иванович"
          required
        />

        <Input
-          label="Телефон покупателя"
+          label="Телефон покупателя *"
          type="tel"
          value={formData.phone}
          onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
@@ -175,6 +298,43 @@ export const DeliveryForm = ({ isOpen, onClose, onSubmit, initialData, defaultDa
          </p>
        )}

+        {/* Second pickup location */}
+        <div className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            id="hasSecondPickup"
+            checked={showSecondPickup}
+            onChange={(e) => {
+              setShowSecondPickup(e.target.checked);
+              if (!e.target.checked) {
+                setFormData({ ...formData, pickupLocation2: null, productName2: '' });
+              }
+            }}
+            className="w-4 h-4 text-[#1B263B] border-[#c5c6cd] rounded focus:ring-[#1B263B]"
+          />
+          <label htmlFor="hasSecondPickup" className="text-sm text-[#1b1b1d]">
+            Добавить вторую точку загрузки
+          </label>
+        </div>
+
+        {showSecondPickup && (
+          <div className="bg-[#f5f3f5] rounded-lg p-4 space-y-3">
+            <p className="text-sm font-medium text-[#1b1b1d]">Вторая точка загрузки</p>
+            <Select
+              label="Место загрузки 2"
+              value={formData.pickupLocation2 || ''}
+              onChange={(e) => setFormData({ ...formData, pickupLocation2: e.target.value as PickupLocation })}
+              options={pickupOptions}
+            />
+            <Input
+              label="Что забрать со второй точки"
+              value={formData.productName2}
+              onChange={(e) => setFormData({ ...formData, productName2: e.target.value })}
+              placeholder="Название товара со второй точки"
+            />
+          </div>
+        )}
+
        <div className="flex items-center gap-2">
          <input
            type="checkbox"
@@ -188,6 +348,13 @@ export const DeliveryForm = ({ isOpen, onClose, onSubmit, initialData, defaultDa
          </label>
        </div>

+        <Input
+          label="Услуги (сборка, подъём)"
+          value={formData.serviceInfo}
+          onChange={(e) => setFormData({ ...formData, serviceInfo: e.target.value })}
+          placeholder="Сборка 5000 тг, подъём на этаж 3000 тг"
+        />
+
        <Input
          label="Комментарий"
          value={formData.comment}
@@ -114,6 +114,7 @@ export const DeliveryList = ({ deliveries, onStatusChange, onEdit, onDelete, onA
                <th className="px-4 py-3">Дата</th>
                <th className="px-4 py-3">Загрузка</th>
                <th className="px-4 py-3">Товар</th>
+                <th className="px-4 py-3">Клиент</th>
                <th className="px-4 py-3">Адрес</th>
                <th className="px-4 py-3">Телефон</th>
                <th className="px-4 py-3">Комментарий</th>
@@ -4,6 +4,8 @@ import type { Delivery } from '../../types';
 import { pickupLocationLabels } from '../../types';
 import { StatusBadge } from './StatusBadge';

+const CITY = 'kokshetau';
+
 interface DeliveryRowProps {
  delivery: Delivery;
  onStatusChange: (id: string) => void;
@@ -15,7 +17,7 @@ export const DeliveryRow = memo(({ delivery, onStatusChange, onEdit, onDelete }:
  const handleAddressClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    const encodedAddress = encodeURIComponent(delivery.address);
-    window.open(`https://maps.google.com/?q=${encodedAddress}`, '_blank');
+    window.open(`https://2gis.kz/${CITY}/search/${encodedAddress}`, '_blank');
  };

  const handlePhoneClick = (e: React.MouseEvent) => {
@@ -33,15 +35,25 @@ export const DeliveryRow = memo(({ delivery, onStatusChange, onEdit, onDelete }:
        />
      </td>
      <td className="px-4 py-3 text-sm text-[#1b1b1d]">{delivery.date}</td>
-      <td className="px-4 py-3 text-sm text-[#1b1b1d]">{pickupLocationLabels[delivery.pickupLocation]}</td>
-      <td className="px-4 py-3 text-sm text-[#1b1b1d]">{delivery.productName}</td>
+      <td className="px-4 py-3 text-sm text-[#1b1b1d]">
+        {delivery.pickupLocation2
+          ? `${pickupLocationLabels[delivery.pickupLocation]} + ${pickupLocationLabels[delivery.pickupLocation2]}`
+          : pickupLocationLabels[delivery.pickupLocation]}
+      </td>
+      <td className="px-4 py-3 text-sm text-[#1b1b1d]">
+        {delivery.productName}
+        {delivery.productName2 && <span className="block text-xs text-[#75777d]">+ {delivery.productName2}</span>}
+      </td>
+      <td className="px-4 py-3 text-sm text-[#1b1b1d]">{delivery.customerName}</td>
      <td className="px-4 py-3">
        <button
          onClick={handleAddressClick}
          className="flex items-center gap-1.5 text-sm text-[#1B263B] hover:text-[#F28C28] transition-colors text-left"
        >
          <MapPin size={14} />
-          <span className="max-w-[200px] truncate">{delivery.address}</span>
+          <span className="max-w-[200px] truncate">
+            ул. {delivery.street}, д. {delivery.house}{delivery.apartment ? `, кв. ${delivery.apartment}` : ''}
+          </span>
        </button>
      </td>
      <td className="px-4 py-3">