Compare commits
2 Commits
9dd5c33c51
...
106c1fd8bb
| Author | SHA1 | Date | |
|---|---|---|---|
| 106c1fd8bb | |||
| ef2d207ee4 |
70
package-lock.json
generated
70
package-lock.json
generated
@ -18,6 +18,7 @@
|
|||||||
"@radix-ui/react-avatar": "^1.1.10",
|
"@radix-ui/react-avatar": "^1.1.10",
|
||||||
"@radix-ui/react-checkbox": "^1.3.2",
|
"@radix-ui/react-checkbox": "^1.3.2",
|
||||||
"@radix-ui/react-dialog": "^1.1.14",
|
"@radix-ui/react-dialog": "^1.1.14",
|
||||||
|
"@radix-ui/react-dropdown-menu": "^2.1.15",
|
||||||
"@radix-ui/react-label": "^2.1.7",
|
"@radix-ui/react-label": "^2.1.7",
|
||||||
"@radix-ui/react-popover": "^1.1.14",
|
"@radix-ui/react-popover": "^1.1.14",
|
||||||
"@radix-ui/react-progress": "^1.1.7",
|
"@radix-ui/react-progress": "^1.1.7",
|
||||||
@ -3033,6 +3034,35 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@radix-ui/react-dropdown-menu": {
|
||||||
|
"version": "2.1.15",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.15.tgz",
|
||||||
|
"integrity": "sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/primitive": "1.1.2",
|
||||||
|
"@radix-ui/react-compose-refs": "1.1.2",
|
||||||
|
"@radix-ui/react-context": "1.1.2",
|
||||||
|
"@radix-ui/react-id": "1.1.1",
|
||||||
|
"@radix-ui/react-menu": "2.1.15",
|
||||||
|
"@radix-ui/react-primitive": "2.1.3",
|
||||||
|
"@radix-ui/react-use-controllable-state": "1.2.2"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "*",
|
||||||
|
"@types/react-dom": "*",
|
||||||
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||||
|
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@types/react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@radix-ui/react-focus-guards": {
|
"node_modules/@radix-ui/react-focus-guards": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz",
|
||||||
@ -3114,6 +3144,46 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@radix-ui/react-menu": {
|
||||||
|
"version": "2.1.15",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.15.tgz",
|
||||||
|
"integrity": "sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/primitive": "1.1.2",
|
||||||
|
"@radix-ui/react-collection": "1.1.7",
|
||||||
|
"@radix-ui/react-compose-refs": "1.1.2",
|
||||||
|
"@radix-ui/react-context": "1.1.2",
|
||||||
|
"@radix-ui/react-direction": "1.1.1",
|
||||||
|
"@radix-ui/react-dismissable-layer": "1.1.10",
|
||||||
|
"@radix-ui/react-focus-guards": "1.1.2",
|
||||||
|
"@radix-ui/react-focus-scope": "1.1.7",
|
||||||
|
"@radix-ui/react-id": "1.1.1",
|
||||||
|
"@radix-ui/react-popper": "1.2.7",
|
||||||
|
"@radix-ui/react-portal": "1.1.9",
|
||||||
|
"@radix-ui/react-presence": "1.1.4",
|
||||||
|
"@radix-ui/react-primitive": "2.1.3",
|
||||||
|
"@radix-ui/react-roving-focus": "1.1.10",
|
||||||
|
"@radix-ui/react-slot": "1.2.3",
|
||||||
|
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||||
|
"aria-hidden": "^1.2.4",
|
||||||
|
"react-remove-scroll": "^2.6.3"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "*",
|
||||||
|
"@types/react-dom": "*",
|
||||||
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||||
|
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@types/react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@radix-ui/react-popover": {
|
"node_modules/@radix-ui/react-popover": {
|
||||||
"version": "1.1.14",
|
"version": "1.1.14",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.14.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.14.tgz",
|
||||||
|
|||||||
@ -19,6 +19,7 @@
|
|||||||
"@radix-ui/react-avatar": "^1.1.10",
|
"@radix-ui/react-avatar": "^1.1.10",
|
||||||
"@radix-ui/react-checkbox": "^1.3.2",
|
"@radix-ui/react-checkbox": "^1.3.2",
|
||||||
"@radix-ui/react-dialog": "^1.1.14",
|
"@radix-ui/react-dialog": "^1.1.14",
|
||||||
|
"@radix-ui/react-dropdown-menu": "^2.1.15",
|
||||||
"@radix-ui/react-label": "^2.1.7",
|
"@radix-ui/react-label": "^2.1.7",
|
||||||
"@radix-ui/react-popover": "^1.1.14",
|
"@radix-ui/react-popover": "^1.1.14",
|
||||||
"@radix-ui/react-progress": "^1.1.7",
|
"@radix-ui/react-progress": "^1.1.7",
|
||||||
|
|||||||
10
src/app/supplies/create-consumables/page.tsx
Normal file
10
src/app/supplies/create-consumables/page.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { AuthGuard } from "@/components/auth-guard";
|
||||||
|
import { CreateConsumablesSupplyPage } from "@/components/supplies/create-consumables-supply-page";
|
||||||
|
|
||||||
|
export default function CreateConsumablesSupplyPageRoute() {
|
||||||
|
return (
|
||||||
|
<AuthGuard>
|
||||||
|
<CreateConsumablesSupplyPage />
|
||||||
|
</AuthGuard>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -379,17 +379,17 @@ export function FulfillmentDetailedSuppliesTab() {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<StatsCard
|
<StatsCard
|
||||||
title="С браком"
|
title="Активные поставки"
|
||||||
value={
|
value={
|
||||||
mockFulfillmentConsumablesDetailed.filter(
|
mockFulfillmentConsumablesDetailed.filter(
|
||||||
(supply) => supply.defectTotal > 0
|
(supply) => supply.status === "delivered"
|
||||||
).length
|
).length
|
||||||
}
|
}
|
||||||
icon={AlertTriangle}
|
icon={Calendar}
|
||||||
iconColor="text-red-400"
|
iconColor="text-blue-400"
|
||||||
iconBg="bg-red-500/20"
|
iconBg="bg-blue-500/20"
|
||||||
trend={{ value: 2, isPositive: false }}
|
trend={{ value: 3, isPositive: true }}
|
||||||
subtitle="Дефектные материалы ФФ"
|
subtitle="Завершенные поставки"
|
||||||
/>
|
/>
|
||||||
</StatsGrid>
|
</StatsGrid>
|
||||||
|
|
||||||
@ -408,7 +408,6 @@ export function FulfillmentDetailedSuppliesTab() {
|
|||||||
</th>
|
</th>
|
||||||
<th className="text-left p-4 text-white font-semibold">План</th>
|
<th className="text-left p-4 text-white font-semibold">План</th>
|
||||||
<th className="text-left p-4 text-white font-semibold">Факт</th>
|
<th className="text-left p-4 text-white font-semibold">Факт</th>
|
||||||
<th className="text-left p-4 text-white font-semibold">Брак</th>
|
|
||||||
<th className="text-left p-4 text-white font-semibold">
|
<th className="text-left p-4 text-white font-semibold">
|
||||||
Цена расходников
|
Цена расходников
|
||||||
</th>
|
</th>
|
||||||
@ -473,17 +472,6 @@ export function FulfillmentDetailedSuppliesTab() {
|
|||||||
{supply.actualTotal}
|
{supply.actualTotal}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td className="p-4">
|
|
||||||
<span
|
|
||||||
className={`font-semibold ${
|
|
||||||
supply.defectTotal > 0
|
|
||||||
? "text-red-400"
|
|
||||||
: "text-white"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{supply.defectTotal}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td className="p-4">
|
<td className="p-4">
|
||||||
<span className="text-green-400 font-semibold">
|
<span className="text-green-400 font-semibold">
|
||||||
{formatCurrency(supply.totalConsumablesPrice)}
|
{formatCurrency(supply.totalConsumablesPrice)}
|
||||||
|
|||||||
@ -371,12 +371,8 @@ export function SuppliesConsumablesTab() {
|
|||||||
return consumable.actualQty * consumable.unitPrice;
|
return consumable.actualQty * consumable.unitPrice;
|
||||||
};
|
};
|
||||||
|
|
||||||
const getEfficiencyBadge = (
|
const getEfficiencyBadge = (planned: number, actual: number) => {
|
||||||
planned: number,
|
const efficiency = (actual / planned) * 100;
|
||||||
actual: number,
|
|
||||||
defect: number
|
|
||||||
) => {
|
|
||||||
const efficiency = ((actual - defect) / planned) * 100;
|
|
||||||
if (efficiency >= 95) {
|
if (efficiency >= 95) {
|
||||||
return (
|
return (
|
||||||
<Badge className="bg-green-500/20 text-green-300 border-green-500/30 border">
|
<Badge className="bg-green-500/20 text-green-300 border-green-500/30 border">
|
||||||
@ -455,15 +451,15 @@ export function SuppliesConsumablesTab() {
|
|||||||
|
|
||||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-4">
|
<Card className="bg-white/10 backdrop-blur border-white/20 p-4">
|
||||||
<div className="flex items-center space-x-3">
|
<div className="flex items-center space-x-3">
|
||||||
<div className="p-2 bg-red-500/20 rounded-lg">
|
<div className="p-2 bg-blue-500/20 rounded-lg">
|
||||||
<AlertTriangle className="h-5 w-5 text-red-400" />
|
<Calendar className="h-5 w-5 text-blue-400" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-white/60 text-xs">С браком</p>
|
<p className="text-white/60 text-xs">Завершено</p>
|
||||||
<p className="text-xl font-bold text-white">
|
<p className="text-xl font-bold text-white">
|
||||||
{
|
{
|
||||||
mockConsumableSupplies.filter(
|
mockConsumableSupplies.filter(
|
||||||
(supply) => supply.defectTotal > 0
|
(supply) => supply.status === "completed"
|
||||||
).length
|
).length
|
||||||
}
|
}
|
||||||
</p>
|
</p>
|
||||||
@ -487,7 +483,6 @@ export function SuppliesConsumablesTab() {
|
|||||||
</th>
|
</th>
|
||||||
<th className="text-left p-4 text-white font-semibold">План</th>
|
<th className="text-left p-4 text-white font-semibold">План</th>
|
||||||
<th className="text-left p-4 text-white font-semibold">Факт</th>
|
<th className="text-left p-4 text-white font-semibold">Факт</th>
|
||||||
<th className="text-left p-4 text-white font-semibold">Брак</th>
|
|
||||||
<th className="text-left p-4 text-white font-semibold">
|
<th className="text-left p-4 text-white font-semibold">
|
||||||
Цена расходников
|
Цена расходников
|
||||||
</th>
|
</th>
|
||||||
@ -543,17 +538,6 @@ export function SuppliesConsumablesTab() {
|
|||||||
{supply.actualTotal}
|
{supply.actualTotal}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td className="p-4">
|
|
||||||
<span
|
|
||||||
className={`font-semibold ${
|
|
||||||
supply.defectTotal > 0
|
|
||||||
? "text-red-400"
|
|
||||||
: "text-white"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{supply.defectTotal}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td className="p-4">
|
<td className="p-4">
|
||||||
<span className="text-green-400 font-semibold">
|
<span className="text-green-400 font-semibold">
|
||||||
{formatCurrency(supply.totalConsumablesPrice)}
|
{formatCurrency(supply.totalConsumablesPrice)}
|
||||||
@ -646,19 +630,6 @@ export function SuppliesConsumablesTab() {
|
|||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td className="p-4">
|
|
||||||
<span className="text-white/80">
|
|
||||||
{route.suppliers.reduce(
|
|
||||||
(sum, s) =>
|
|
||||||
sum +
|
|
||||||
s.consumables.reduce(
|
|
||||||
(cSum, c) => cSum + c.defectQty,
|
|
||||||
0
|
|
||||||
),
|
|
||||||
0
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td className="p-4">
|
<td className="p-4">
|
||||||
<span className="text-green-400 font-medium">
|
<span className="text-green-400 font-medium">
|
||||||
{formatCurrency(route.totalConsumablesPrice)}
|
{formatCurrency(route.totalConsumablesPrice)}
|
||||||
@ -741,14 +712,6 @@ export function SuppliesConsumablesTab() {
|
|||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td className="p-4">
|
|
||||||
<span className="text-white/80">
|
|
||||||
{supplier.consumables.reduce(
|
|
||||||
(sum, c) => sum + c.defectQty,
|
|
||||||
0
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td className="p-4">
|
<td className="p-4">
|
||||||
<span className="text-green-400 font-medium">
|
<span className="text-green-400 font-medium">
|
||||||
{formatCurrency(
|
{formatCurrency(
|
||||||
@ -832,17 +795,6 @@ export function SuppliesConsumablesTab() {
|
|||||||
{consumable.actualQty}
|
{consumable.actualQty}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td className="p-4">
|
|
||||||
<span
|
|
||||||
className={`font-semibold ${
|
|
||||||
consumable.defectQty > 0
|
|
||||||
? "text-red-400"
|
|
||||||
: "text-white"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{consumable.defectQty}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td className="p-4">
|
<td className="p-4">
|
||||||
<div className="text-white">
|
<div className="text-white">
|
||||||
<div className="font-medium">
|
<div className="font-medium">
|
||||||
@ -863,8 +815,7 @@ export function SuppliesConsumablesTab() {
|
|||||||
<td className="p-4">
|
<td className="p-4">
|
||||||
{getEfficiencyBadge(
|
{getEfficiencyBadge(
|
||||||
consumable.plannedQty,
|
consumable.plannedQty,
|
||||||
consumable.actualQty,
|
consumable.actualQty
|
||||||
consumable.defectQty
|
|
||||||
)}
|
)}
|
||||||
</td>
|
</td>
|
||||||
<td className="p-4">
|
<td className="p-4">
|
||||||
@ -883,7 +834,7 @@ export function SuppliesConsumablesTab() {
|
|||||||
{isConsumableExpanded && (
|
{isConsumableExpanded && (
|
||||||
<tr>
|
<tr>
|
||||||
<td
|
<td
|
||||||
colSpan={10}
|
colSpan={9}
|
||||||
className="p-0"
|
className="p-0"
|
||||||
>
|
>
|
||||||
<div className="bg-white/5 border-t border-white/10">
|
<div className="bg-white/5 border-t border-white/10">
|
||||||
|
|||||||
645
src/components/supplies/create-consumables-supply-page.tsx
Normal file
645
src/components/supplies/create-consumables-supply-page.tsx
Normal file
@ -0,0 +1,645 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useQuery, useMutation } from "@apollo/client";
|
||||||
|
import { Sidebar } from "@/components/dashboard/sidebar";
|
||||||
|
import { useSidebar } from "@/hooks/useSidebar";
|
||||||
|
import { Card } from "@/components/ui/card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
ArrowLeft,
|
||||||
|
Building2,
|
||||||
|
MapPin,
|
||||||
|
Phone,
|
||||||
|
Mail,
|
||||||
|
Star,
|
||||||
|
Search,
|
||||||
|
Package,
|
||||||
|
Plus,
|
||||||
|
Minus,
|
||||||
|
ShoppingCart,
|
||||||
|
Wrench,
|
||||||
|
Box,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { GET_MY_COUNTERPARTIES, GET_ALL_PRODUCTS } from "@/graphql/queries";
|
||||||
|
import { CREATE_SUPPLY_ORDER } from "@/graphql/mutations";
|
||||||
|
import { OrganizationAvatar } from "@/components/market/organization-avatar";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
interface ConsumableSupplier {
|
||||||
|
id: string;
|
||||||
|
inn: string;
|
||||||
|
name?: string;
|
||||||
|
fullName?: string;
|
||||||
|
type: "FULFILLMENT" | "SELLER" | "LOGIST" | "WHOLESALE";
|
||||||
|
address?: string;
|
||||||
|
phones?: Array<{ value: string }>;
|
||||||
|
emails?: Array<{ value: string }>;
|
||||||
|
users?: Array<{ id: string; avatar?: string; managerName?: string }>;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ConsumableProduct {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description?: string;
|
||||||
|
price: number;
|
||||||
|
category?: { name: string };
|
||||||
|
images?: Array<{ url: string }>;
|
||||||
|
organization: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
stock?: number;
|
||||||
|
unit?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SelectedConsumable {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
price: number;
|
||||||
|
selectedQuantity: number;
|
||||||
|
unit?: string;
|
||||||
|
category?: string;
|
||||||
|
supplierId: string;
|
||||||
|
supplierName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CreateConsumablesSupplyPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const { getSidebarMargin } = useSidebar();
|
||||||
|
const [selectedSupplier, setSelectedSupplier] =
|
||||||
|
useState<ConsumableSupplier | null>(null);
|
||||||
|
const [selectedConsumables, setSelectedConsumables] = useState<
|
||||||
|
SelectedConsumable[]
|
||||||
|
>([]);
|
||||||
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
const [productSearchQuery, setProductSearchQuery] = useState("");
|
||||||
|
const [deliveryDate, setDeliveryDate] = useState("");
|
||||||
|
const [isCreatingSupply, setIsCreatingSupply] = useState(false);
|
||||||
|
|
||||||
|
// Загружаем контрагентов-поставщиков расходников
|
||||||
|
const { data: counterpartiesData, loading: counterpartiesLoading } = useQuery(
|
||||||
|
GET_MY_COUNTERPARTIES
|
||||||
|
);
|
||||||
|
|
||||||
|
// Загружаем товары для выбранного поставщика
|
||||||
|
const { data: productsData, loading: productsLoading } = useQuery(
|
||||||
|
GET_ALL_PRODUCTS,
|
||||||
|
{
|
||||||
|
skip: !selectedSupplier,
|
||||||
|
variables: { search: productSearchQuery || null, category: null },
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Мутация для создания заказа поставки расходников
|
||||||
|
const [createSupplyOrder] = useMutation(CREATE_SUPPLY_ORDER);
|
||||||
|
|
||||||
|
// Фильтруем только поставщиков расходников (оптовиков)
|
||||||
|
const consumableSuppliers = (
|
||||||
|
counterpartiesData?.myCounterparties || []
|
||||||
|
).filter((org: ConsumableSupplier) => org.type === "WHOLESALE");
|
||||||
|
|
||||||
|
// Фильтруем поставщиков по поисковому запросу
|
||||||
|
const filteredSuppliers = consumableSuppliers.filter(
|
||||||
|
(supplier: ConsumableSupplier) =>
|
||||||
|
supplier.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
supplier.fullName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
supplier.inn?.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
// Фильтруем товары по выбранному поставщику
|
||||||
|
const supplierProducts = selectedSupplier
|
||||||
|
? (productsData?.allProducts || []).filter(
|
||||||
|
(product: ConsumableProduct) =>
|
||||||
|
product.organization.id === selectedSupplier.id
|
||||||
|
)
|
||||||
|
: [];
|
||||||
|
|
||||||
|
const formatCurrency = (amount: number) => {
|
||||||
|
return new Intl.NumberFormat("ru-RU", {
|
||||||
|
style: "currency",
|
||||||
|
currency: "RUB",
|
||||||
|
minimumFractionDigits: 0,
|
||||||
|
}).format(amount);
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderStars = (rating: number = 4.5) => {
|
||||||
|
return Array.from({ length: 5 }, (_, i) => (
|
||||||
|
<Star
|
||||||
|
key={i}
|
||||||
|
className={`h-3 w-3 ${
|
||||||
|
i < Math.floor(rating)
|
||||||
|
? "text-yellow-400 fill-current"
|
||||||
|
: "text-gray-400"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateConsumableQuantity = (productId: string, quantity: number) => {
|
||||||
|
const product = supplierProducts.find(
|
||||||
|
(p: ConsumableProduct) => p.id === productId
|
||||||
|
);
|
||||||
|
if (!product || !selectedSupplier) return;
|
||||||
|
|
||||||
|
setSelectedConsumables((prev) => {
|
||||||
|
const existing = prev.find((p) => p.id === productId);
|
||||||
|
|
||||||
|
if (quantity === 0) {
|
||||||
|
// Удаляем расходник если количество 0
|
||||||
|
return prev.filter((p) => p.id !== productId);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (existing) {
|
||||||
|
// Обновляем количество существующего расходника
|
||||||
|
return prev.map((p) =>
|
||||||
|
p.id === productId ? { ...p, selectedQuantity: quantity } : p
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
// Добавляем новый расходник
|
||||||
|
return [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
id: product.id,
|
||||||
|
name: product.name,
|
||||||
|
price: product.price,
|
||||||
|
selectedQuantity: quantity,
|
||||||
|
unit: product.unit || "шт",
|
||||||
|
category: product.category?.name || "Расходники",
|
||||||
|
supplierId: selectedSupplier.id,
|
||||||
|
supplierName:
|
||||||
|
selectedSupplier.name || selectedSupplier.fullName || "Поставщик",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSelectedQuantity = (productId: string): number => {
|
||||||
|
const selected = selectedConsumables.find((p) => p.id === productId);
|
||||||
|
return selected ? selected.selectedQuantity : 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getTotalAmount = () => {
|
||||||
|
return selectedConsumables.reduce(
|
||||||
|
(sum, consumable) => sum + consumable.price * consumable.selectedQuantity,
|
||||||
|
0
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getTotalItems = () => {
|
||||||
|
return selectedConsumables.reduce(
|
||||||
|
(sum, consumable) => sum + consumable.selectedQuantity,
|
||||||
|
0
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreateSupply = async () => {
|
||||||
|
if (!selectedSupplier || selectedConsumables.length === 0 || !deliveryDate) {
|
||||||
|
toast.error("Заполните все обязательные поля");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsCreatingSupply(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await createSupplyOrder({
|
||||||
|
variables: {
|
||||||
|
input: {
|
||||||
|
partnerId: selectedSupplier.id,
|
||||||
|
deliveryDate: deliveryDate,
|
||||||
|
items: selectedConsumables.map((consumable) => ({
|
||||||
|
productId: consumable.id,
|
||||||
|
quantity: consumable.selectedQuantity,
|
||||||
|
})),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (result.data?.createSupplyOrder?.success) {
|
||||||
|
toast.success("Поставка расходников создана успешно!");
|
||||||
|
router.push("/supplies");
|
||||||
|
} else {
|
||||||
|
toast.error(
|
||||||
|
result.data?.createSupplyOrder?.message || "Ошибка при создании поставки"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error creating consumables supply:", error);
|
||||||
|
toast.error("Ошибка при создании поставки расходников");
|
||||||
|
} finally {
|
||||||
|
setIsCreatingSupply(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Если выбран поставщик, показываем его товары
|
||||||
|
if (selectedSupplier) {
|
||||||
|
return (
|
||||||
|
<div className="h-screen flex overflow-hidden">
|
||||||
|
<Sidebar />
|
||||||
|
<main
|
||||||
|
className={`flex-1 ${getSidebarMargin()} px-4 py-3 overflow-hidden transition-all duration-300`}
|
||||||
|
>
|
||||||
|
<div className="h-full w-full flex flex-col">
|
||||||
|
{/* Заголовок с навигацией */}
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setSelectedSupplier(null)}
|
||||||
|
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||||
|
Назад к поставщикам
|
||||||
|
</Button>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-white mb-1">
|
||||||
|
Расходники поставщика
|
||||||
|
</h1>
|
||||||
|
<p className="text-white/60">
|
||||||
|
{selectedSupplier.name || selectedSupplier.fullName}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => router.push("/supplies")}
|
||||||
|
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
Отмена
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Поиск по товарам */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40 h-4 w-4" />
|
||||||
|
<Input
|
||||||
|
placeholder="Поиск расходников..."
|
||||||
|
value={productSearchQuery}
|
||||||
|
onChange={(e) => setProductSearchQuery(e.target.value)}
|
||||||
|
className="bg-white/10 border-white/20 text-white placeholder-white/40 pl-10"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Основной контент */}
|
||||||
|
<div className="flex-1 overflow-hidden flex gap-4">
|
||||||
|
{/* Список товаров */}
|
||||||
|
<div className="flex-1 overflow-y-auto">
|
||||||
|
{productsLoading ? (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<p className="text-white/60">Загрузка расходников...</p>
|
||||||
|
</div>
|
||||||
|
) : supplierProducts.length === 0 ? (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<Package className="h-12 w-12 text-white/40 mx-auto mb-4" />
|
||||||
|
<p className="text-white/60">
|
||||||
|
У данного поставщика нет доступных расходников
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{supplierProducts.map((product: ConsumableProduct) => {
|
||||||
|
const selectedQuantity = getSelectedQuantity(product.id);
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
key={product.id}
|
||||||
|
className="bg-white/10 backdrop-blur border-white/20 p-4"
|
||||||
|
>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{/* Изображение товара */}
|
||||||
|
<div className="aspect-square bg-white/5 rounded-lg overflow-hidden">
|
||||||
|
{product.images && product.images.length > 0 ? (
|
||||||
|
<Image
|
||||||
|
src={product.images[0].url}
|
||||||
|
alt={product.name}
|
||||||
|
width={200}
|
||||||
|
height={200}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full flex items-center justify-center">
|
||||||
|
<Wrench className="h-12 w-12 text-white/40" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Информация о товаре */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-white font-medium mb-1 line-clamp-2">
|
||||||
|
{product.name}
|
||||||
|
</h3>
|
||||||
|
{product.category && (
|
||||||
|
<Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs mb-2">
|
||||||
|
{product.category.name}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
<p className="text-white/60 text-sm mb-2 line-clamp-2">
|
||||||
|
{product.description || "Описание отсутствует"}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-green-400 font-semibold">
|
||||||
|
{formatCurrency(product.price)}
|
||||||
|
{product.unit && (
|
||||||
|
<span className="text-white/60 text-sm ml-1">
|
||||||
|
/ {product.unit}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
{product.stock && (
|
||||||
|
<span className="text-white/60 text-sm">
|
||||||
|
В наличии: {product.stock}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Управление количеством */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() =>
|
||||||
|
updateConsumableQuantity(
|
||||||
|
product.id,
|
||||||
|
Math.max(0, selectedQuantity - 1)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||||
|
disabled={selectedQuantity === 0}
|
||||||
|
>
|
||||||
|
<Minus className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<span className="text-white font-medium w-8 text-center">
|
||||||
|
{selectedQuantity}
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() =>
|
||||||
|
updateConsumableQuantity(
|
||||||
|
product.id,
|
||||||
|
selectedQuantity + 1
|
||||||
|
)
|
||||||
|
}
|
||||||
|
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{selectedQuantity > 0 && (
|
||||||
|
<span className="text-green-400 font-medium text-sm">
|
||||||
|
{formatCurrency(
|
||||||
|
product.price * selectedQuantity
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Корзина */}
|
||||||
|
{selectedConsumables.length > 0 && (
|
||||||
|
<div className="w-80 flex-shrink-0">
|
||||||
|
<Card className="bg-white/10 backdrop-blur border-white/20 p-4 sticky top-0">
|
||||||
|
<h3 className="text-white font-semibold mb-4 flex items-center">
|
||||||
|
<ShoppingCart className="h-4 w-4 mr-2" />
|
||||||
|
Корзина ({getTotalItems()} шт)
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="space-y-3 mb-4 max-h-60 overflow-y-auto">
|
||||||
|
{selectedConsumables.map((consumable) => (
|
||||||
|
<div
|
||||||
|
key={consumable.id}
|
||||||
|
className="flex items-center justify-between p-2 bg-white/5 rounded-lg"
|
||||||
|
>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-white text-sm font-medium truncate">
|
||||||
|
{consumable.name}
|
||||||
|
</p>
|
||||||
|
<p className="text-white/60 text-xs">
|
||||||
|
{formatCurrency(consumable.price)} ×{" "}
|
||||||
|
{consumable.selectedQuantity}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<span className="text-green-400 font-medium text-sm">
|
||||||
|
{formatCurrency(
|
||||||
|
consumable.price * consumable.selectedQuantity
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() =>
|
||||||
|
updateConsumableQuantity(consumable.id, 0)
|
||||||
|
}
|
||||||
|
className="h-6 w-6 p-0 text-red-400 hover:text-red-300 hover:bg-red-500/10"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border-t border-white/20 pt-4">
|
||||||
|
<div className="mb-4">
|
||||||
|
<label className="text-white/60 text-sm mb-2 block">
|
||||||
|
Дата поставки:
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="date"
|
||||||
|
value={deliveryDate}
|
||||||
|
onChange={(e) => setDeliveryDate(e.target.value)}
|
||||||
|
className="bg-white/10 border-white/20 text-white"
|
||||||
|
min={new Date().toISOString().split('T')[0]}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<span className="text-white font-semibold">Итого:</span>
|
||||||
|
<span className="text-green-400 font-bold text-lg">
|
||||||
|
{formatCurrency(getTotalAmount())}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
onClick={handleCreateSupply}
|
||||||
|
disabled={isCreatingSupply || !deliveryDate}
|
||||||
|
className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{isCreatingSupply ? "Создание..." : "Создать поставку расходников"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Показываем список поставщиков
|
||||||
|
return (
|
||||||
|
<div className="h-screen flex overflow-hidden">
|
||||||
|
<Sidebar />
|
||||||
|
<main
|
||||||
|
className={`flex-1 ${getSidebarMargin()} px-4 py-3 overflow-hidden transition-all duration-300`}
|
||||||
|
>
|
||||||
|
<div className="h-full w-full flex flex-col">
|
||||||
|
{/* Заголовок */}
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-white mb-2">
|
||||||
|
Создание поставки расходников
|
||||||
|
</h1>
|
||||||
|
<p className="text-white/60">
|
||||||
|
Выберите поставщика расходников для создания поставки
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => router.push("/supplies")}
|
||||||
|
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||||
|
Назад к поставкам
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Поиск */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40 h-4 w-4" />
|
||||||
|
<Input
|
||||||
|
placeholder="Поиск поставщиков по названию, ИНН..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
className="bg-white/10 border-white/20 text-white placeholder-white/40 pl-10 max-w-md"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Список поставщиков */}
|
||||||
|
<div className="flex-1 overflow-y-auto">
|
||||||
|
{counterpartiesLoading ? (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<p className="text-white/60">Загрузка поставщиков...</p>
|
||||||
|
</div>
|
||||||
|
) : filteredSuppliers.length === 0 ? (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<Building2 className="h-12 w-12 text-white/40 mx-auto mb-4" />
|
||||||
|
<p className="text-white/60">
|
||||||
|
{searchQuery
|
||||||
|
? "Поставщики не найдены"
|
||||||
|
: "У вас пока нет партнеров-поставщиков расходников"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{filteredSuppliers.map((supplier: ConsumableSupplier) => (
|
||||||
|
<Card
|
||||||
|
key={supplier.id}
|
||||||
|
className="bg-white/10 backdrop-blur border-white/20 p-6 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30"
|
||||||
|
onClick={() => setSelectedSupplier(supplier)}
|
||||||
|
>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Аватар и основная информация */}
|
||||||
|
<div className="flex items-start space-x-3">
|
||||||
|
<OrganizationAvatar
|
||||||
|
organization={{
|
||||||
|
id: supplier.id,
|
||||||
|
name:
|
||||||
|
supplier.name || supplier.fullName || "Поставщик",
|
||||||
|
users: supplier.users || [],
|
||||||
|
}}
|
||||||
|
size="md"
|
||||||
|
/>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h3 className="text-white font-semibold text-lg mb-1 truncate">
|
||||||
|
{supplier.name || supplier.fullName || "Поставщик"}
|
||||||
|
</h3>
|
||||||
|
<div className="flex items-center space-x-1 mb-2">
|
||||||
|
{renderStars()}
|
||||||
|
<span className="text-white/60 text-sm ml-2">
|
||||||
|
4.5
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30">
|
||||||
|
<Wrench className="h-3 w-3 mr-1" />
|
||||||
|
Поставщик расходников
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Контактная информация */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
{supplier.address && (
|
||||||
|
<div className="flex items-center space-x-2 text-white/60 text-sm">
|
||||||
|
<MapPin className="h-4 w-4" />
|
||||||
|
<span className="truncate">{supplier.address}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{supplier.phones && supplier.phones.length > 0 && (
|
||||||
|
<div className="flex items-center space-x-2 text-white/60 text-sm">
|
||||||
|
<Phone className="h-4 w-4" />
|
||||||
|
<span>{supplier.phones[0].value}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{supplier.emails && supplier.emails.length > 0 && (
|
||||||
|
<div className="flex items-center space-x-2 text-white/60 text-sm">
|
||||||
|
<Mail className="h-4 w-4" />
|
||||||
|
<span className="truncate">
|
||||||
|
{supplier.emails[0].value}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Дополнительная информация */}
|
||||||
|
<div className="pt-2 border-t border-white/10">
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-white/60">ИНН:</span>
|
||||||
|
<span className="text-white">{supplier.inn}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Кнопка выбора */}
|
||||||
|
<Button
|
||||||
|
className="w-full bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setSelectedSupplier(supplier);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box className="h-4 w-4 mr-2" />
|
||||||
|
Выбрать поставщика
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -310,17 +310,17 @@ export function FulfillmentSuppliesTab() {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<StatsCard
|
<StatsCard
|
||||||
title="С браком"
|
title="Активные поставки"
|
||||||
value={
|
value={
|
||||||
mockFulfillmentConsumables.filter(
|
mockFulfillmentConsumables.filter(
|
||||||
(supply) => supply.defectTotal > 0
|
(supply) => supply.status === "delivered"
|
||||||
).length
|
).length
|
||||||
}
|
}
|
||||||
icon={AlertTriangle}
|
icon={Calendar}
|
||||||
iconColor="text-red-400"
|
iconColor="text-blue-400"
|
||||||
iconBg="bg-red-500/20"
|
iconBg="bg-blue-500/20"
|
||||||
trend={{ value: 2, isPositive: false }}
|
trend={{ value: 3, isPositive: true }}
|
||||||
subtitle="Дефектные материалы"
|
subtitle="Завершенные поставки"
|
||||||
/>
|
/>
|
||||||
</StatsGrid>
|
</StatsGrid>
|
||||||
|
|
||||||
@ -339,7 +339,6 @@ export function FulfillmentSuppliesTab() {
|
|||||||
</th>
|
</th>
|
||||||
<th className="text-left p-4 text-white font-semibold">План</th>
|
<th className="text-left p-4 text-white font-semibold">План</th>
|
||||||
<th className="text-left p-4 text-white font-semibold">Факт</th>
|
<th className="text-left p-4 text-white font-semibold">Факт</th>
|
||||||
<th className="text-left p-4 text-white font-semibold">Брак</th>
|
|
||||||
<th className="text-left p-4 text-white font-semibold">
|
<th className="text-left p-4 text-white font-semibold">
|
||||||
Цена расходников
|
Цена расходников
|
||||||
</th>
|
</th>
|
||||||
@ -395,17 +394,6 @@ export function FulfillmentSuppliesTab() {
|
|||||||
{supply.actualTotal}
|
{supply.actualTotal}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td className="p-4">
|
|
||||||
<span
|
|
||||||
className={`font-semibold ${
|
|
||||||
supply.defectTotal > 0
|
|
||||||
? "text-red-400"
|
|
||||||
: "text-white"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{supply.defectTotal}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td className="p-4">
|
<td className="p-4">
|
||||||
<span className="text-green-400 font-semibold">
|
<span className="text-green-400 font-semibold">
|
||||||
{formatCurrency(supply.totalConsumablesPrice)}
|
{formatCurrency(supply.totalConsumablesPrice)}
|
||||||
|
|||||||
@ -5,9 +5,15 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Sidebar } from "@/components/dashboard/sidebar";
|
import { Sidebar } from "@/components/dashboard/sidebar";
|
||||||
import { useSidebar } from "@/hooks/useSidebar";
|
import { useSidebar } from "@/hooks/useSidebar";
|
||||||
import { Plus } from "lucide-react";
|
import { Plus, Package, Wrench, ChevronDown } from "lucide-react";
|
||||||
import { FulfillmentSuppliesTab } from "./fulfillment-supplies/fulfillment-supplies-tab";
|
import { FulfillmentSuppliesTab } from "./fulfillment-supplies/fulfillment-supplies-tab";
|
||||||
import { MarketplaceSuppliesTab } from "./marketplace-supplies/marketplace-supplies-tab";
|
import { MarketplaceSuppliesTab } from "./marketplace-supplies/marketplace-supplies-tab";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
|
||||||
export function SuppliesDashboard() {
|
export function SuppliesDashboard() {
|
||||||
const { getSidebarMargin } = useSidebar();
|
const { getSidebarMargin } = useSidebar();
|
||||||
@ -42,15 +48,38 @@ export function SuppliesDashboard() {
|
|||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
|
|
||||||
<Button
|
<DropdownMenu>
|
||||||
className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg"
|
<DropdownMenuTrigger asChild>
|
||||||
onClick={() => {
|
<Button className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg">
|
||||||
window.location.href = "/supplies/create";
|
<Plus className="h-4 w-4 mr-2" />
|
||||||
}}
|
Создать поставку
|
||||||
>
|
<ChevronDown className="h-4 w-4 ml-2" />
|
||||||
<Plus className="h-4 w-4 mr-2" />
|
</Button>
|
||||||
Создать поставку
|
</DropdownMenuTrigger>
|
||||||
</Button>
|
<DropdownMenuContent
|
||||||
|
align="end"
|
||||||
|
className="bg-white/10 backdrop-blur border-white/20"
|
||||||
|
>
|
||||||
|
<DropdownMenuItem
|
||||||
|
onClick={() => {
|
||||||
|
window.location.href = "/supplies/create";
|
||||||
|
}}
|
||||||
|
className="text-white hover:bg-white/10 cursor-pointer"
|
||||||
|
>
|
||||||
|
<Package className="h-4 w-4 mr-2" />
|
||||||
|
Поставка товаров
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem
|
||||||
|
onClick={() => {
|
||||||
|
window.location.href = "/supplies/create-consumables";
|
||||||
|
}}
|
||||||
|
className="text-white hover:bg-white/10 cursor-pointer"
|
||||||
|
>
|
||||||
|
<Wrench className="h-4 w-4 mr-2" />
|
||||||
|
Поставка расходников
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<TabsContent value="fulfillment" className="mt-0 flex-1">
|
<TabsContent value="fulfillment" className="mt-0 flex-1">
|
||||||
|
|||||||
200
src/components/ui/dropdown-menu.tsx
Normal file
200
src/components/ui/dropdown-menu.tsx
Normal file
@ -0,0 +1,200 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
||||||
|
import { Check, ChevronRight, Circle } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const DropdownMenu = DropdownMenuPrimitive.Root;
|
||||||
|
|
||||||
|
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
|
||||||
|
|
||||||
|
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
|
||||||
|
|
||||||
|
const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
|
||||||
|
|
||||||
|
const DropdownMenuSub = DropdownMenuPrimitive.Sub;
|
||||||
|
|
||||||
|
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
|
||||||
|
|
||||||
|
const DropdownMenuSubTrigger = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}
|
||||||
|
>(({ className, inset, children, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.SubTrigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
|
||||||
|
inset && "pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronRight className="ml-auto h-4 w-4" />
|
||||||
|
</DropdownMenuPrimitive.SubTrigger>
|
||||||
|
));
|
||||||
|
DropdownMenuSubTrigger.displayName =
|
||||||
|
DropdownMenuPrimitive.SubTrigger.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuSubContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.SubContent
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DropdownMenuSubContent.displayName =
|
||||||
|
DropdownMenuPrimitive.SubContent.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||||
|
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Portal>
|
||||||
|
<DropdownMenuPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</DropdownMenuPrimitive.Portal>
|
||||||
|
));
|
||||||
|
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}
|
||||||
|
>(({ className, inset, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||||
|
inset && "pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuCheckboxItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
||||||
|
>(({ className, children, checked, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.CheckboxItem
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
checked={checked}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.CheckboxItem>
|
||||||
|
));
|
||||||
|
DropdownMenuCheckboxItem.displayName =
|
||||||
|
DropdownMenuPrimitive.CheckboxItem.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuRadioItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.RadioItem
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<Circle className="h-2 w-2 fill-current" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.RadioItem>
|
||||||
|
));
|
||||||
|
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuLabel = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}
|
||||||
|
>(({ className, inset, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Label
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"px-2 py-1.5 text-sm font-semibold",
|
||||||
|
inset && "pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuSeparator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Separator
|
||||||
|
ref={ref}
|
||||||
|
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuShortcut = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
|
||||||
|
|
||||||
|
export {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuCheckboxItem,
|
||||||
|
DropdownMenuRadioItem,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuShortcut,
|
||||||
|
DropdownMenuGroup,
|
||||||
|
DropdownMenuPortal,
|
||||||
|
DropdownMenuSub,
|
||||||
|
DropdownMenuSubContent,
|
||||||
|
DropdownMenuSubTrigger,
|
||||||
|
DropdownMenuRadioGroup,
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user