refactor: unify all buttons to <Button> component across app
- Replace 82 inline <button> elements with <Button variant/size> in 19 files - UI primitives (SegmentedTabs, ThemeToggle, DatePicker) and ErrorBoundary kept as-is - Consistent styling: primary (accent), secondary (outline), ghost (transparent)
This commit is contained in:
root
parent
d28e00782b
commit
8d3d8dc0fe
|
|
@ -1,6 +1,7 @@
|
|||
import React, { useState, useEffect, useMemo, useCallback } from "react";
|
||||
import { Panel } from "../UI/Panel";
|
||||
import { Badge } from "../UI/Badge";
|
||||
import { Button } from "../UI/Button";
|
||||
import { Skeleton } from "../UI/Loading";
|
||||
import { fetchActionLogs, getActionLabel } from "../../services/supabase/actionLogService";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
|
@ -197,13 +198,13 @@ export const ActionLogPanel = ({ orderGroupId = null }) => {
|
|||
Кто, что и когда делал с доставками
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
onClick={loadLogs}
|
||||
disabled={loading}
|
||||
className="rounded-[14px] bg-[var(--color-accent)] px-3 py-1.5 text-sm font-medium text-white hover:opacity-90 disabled:opacity-50"
|
||||
>
|
||||
{loading ? "Загрузка..." : "Обновить"}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { Panel } from '../UI/Panel';
|
||||
import { Badge } from '../UI/Badge';
|
||||
import { Button } from '../UI/Button';
|
||||
import { Select } from '../UI/Select';
|
||||
import { Skeleton } from '../UI/Loading';
|
||||
import { supabase } from '../../supabaseClient';
|
||||
|
|
@ -235,29 +236,29 @@ export default function ErrorLogPanel() {
|
|||
</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
|
||||
<button onClick={fetchErrors} style={btnBase} title="Обновить">↻</button>
|
||||
<button onClick={handleCopyAll} disabled={errors.length === 0} style={{ ...btnAccent, opacity: errors.length === 0 ? 0.4 : 1 }}>
|
||||
<Button onClick={fetchErrors} style={btnBase} title="Обновить">↻</Button>
|
||||
<Button onClick={handleCopyAll} disabled={errors.length === 0} style={{ ...btnAccent, opacity: errors.length === 0 ? 0.4 : 1 }}>
|
||||
📋 Копировать всё
|
||||
</button>
|
||||
</Button>
|
||||
{selected.size > 0 && (
|
||||
<button onClick={handleCopySelected} style={btnAccent}>
|
||||
<Button onClick={handleCopySelected} style={btnAccent}>
|
||||
📋 Копировать выбр.
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
<button onClick={downloadJSON} disabled={errors.length === 0} style={{ ...btnBase, opacity: errors.length === 0 ? 0.4 : 1 }}>
|
||||
<Button onClick={downloadJSON} disabled={errors.length === 0} style={{ ...btnBase, opacity: errors.length === 0 ? 0.4 : 1 }}>
|
||||
⬇ JSON
|
||||
</button>
|
||||
<button onClick={downloadCSV} disabled={errors.length === 0} style={{ ...btnBase, opacity: errors.length === 0 ? 0.4 : 1 }}>
|
||||
</Button>
|
||||
<Button onClick={downloadCSV} disabled={errors.length === 0} style={{ ...btnBase, opacity: errors.length === 0 ? 0.4 : 1 }}>
|
||||
⬇ CSV
|
||||
</button>
|
||||
</Button>
|
||||
{selected.size > 0 && (
|
||||
<button onClick={handleDeleteSelected} disabled={deleting} style={{ ...btnDanger, opacity: deleting ? 0.5 : 1 }}>
|
||||
<Button onClick={handleDeleteSelected} disabled={deleting} style={{ ...btnDanger, opacity: deleting ? 0.5 : 1 }}>
|
||||
🗑 Удалить выбр.
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
<button onClick={handleDeleteAll} disabled={deleting || errors.length === 0} style={{ ...btnDanger, opacity: deleting || errors.length === 0 ? 0.4 : 1 }}>
|
||||
<Button onClick={handleDeleteAll} disabled={deleting || errors.length === 0} style={{ ...btnDanger, opacity: deleting || errors.length === 0 ? 0.4 : 1 }}>
|
||||
🗑 Удалить все
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -382,9 +383,9 @@ export default function ErrorLogPanel() {
|
|||
{err.user_id && <div style={{ gridColumn: '1 / -1' }}><strong>User ID:</strong> {err.user_id}</div>}
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<button onClick={() => handleDeleteOne(err.id)} disabled={deleting} style={{ ...btnDanger, fontSize: '0.8rem' }}>
|
||||
<Button onClick={() => handleDeleteOne(err.id)} disabled={deleting} style={{ ...btnDanger, fontSize: '0.8rem' }}>
|
||||
Удалить запись
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ export const StopWordsPanel = () => {
|
|||
<div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface-strong)] p-4 space-y-3">
|
||||
<p className="text-sm font-medium text-[var(--color-text)]">Где применять стоп-слова:</p>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
disabled={isSavingScope}
|
||||
onClick={() => handleScopeChange("everywhere")}
|
||||
|
|
@ -120,8 +120,8 @@ export const StopWordsPanel = () => {
|
|||
].join(" ")}
|
||||
>
|
||||
Везде
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
disabled={isSavingScope}
|
||||
onClick={() => handleScopeChange("client_only")}
|
||||
|
|
@ -134,7 +134,7 @@ export const StopWordsPanel = () => {
|
|||
].join(" ")}
|
||||
>
|
||||
Только карточка клиента
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-[var(--color-text-muted)]">
|
||||
{scope === "everywhere"
|
||||
|
|
@ -178,7 +178,7 @@ export const StopWordsPanel = () => {
|
|||
className="inline-flex items-center gap-1.5 rounded-full border border-[var(--color-border)] bg-[var(--color-surface-strong)] px-3 py-1.5 text-sm !text-[var(--color-text)]"
|
||||
>
|
||||
{w.word}
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
disabled={savingId === w.id}
|
||||
onClick={() => handleDelete(w.id)}
|
||||
|
|
@ -186,7 +186,7 @@ export const StopWordsPanel = () => {
|
|||
aria-label={`Удалить ${w.word}`}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</Button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from "react";
|
||||
import { Panel } from "../UI/Panel";
|
||||
import { Button } from "../UI/Button";
|
||||
import { useAuth } from "../../context/AuthContext";
|
||||
|
||||
const CATEGORY_OPTIONS = [
|
||||
|
|
@ -103,7 +104,7 @@ export const SuggestionsPanel = () => {
|
|||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{CATEGORY_OPTIONS.map((cat) => (
|
||||
<button
|
||||
<Button
|
||||
key={cat.value}
|
||||
type="button"
|
||||
onClick={() => setNewCategory(cat.value)}
|
||||
|
|
@ -115,7 +116,7 @@ export const SuggestionsPanel = () => {
|
|||
].join(" ")}
|
||||
>
|
||||
{cat.icon} {cat.label}
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<textarea
|
||||
|
|
@ -126,14 +127,14 @@ export const SuggestionsPanel = () => {
|
|||
className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] px-4 py-3 text-sm text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-accent)] focus:outline-none resize-none"
|
||||
/>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
disabled={!newText.trim() || submitting}
|
||||
onClick={handleSubmit}
|
||||
className="rounded-xl bg-[var(--color-accent)] px-5 py-2.5 text-sm font-semibold text-white transition hover:opacity-90 disabled:opacity-40"
|
||||
>
|
||||
{submitting ? "Отправка..." : "Отправить"}
|
||||
</button>
|
||||
</Button>
|
||||
{message && <span className="text-sm text-[var(--color-text-muted)]">{message}</span>}
|
||||
</div>
|
||||
</Panel>
|
||||
|
|
@ -209,7 +210,7 @@ const SuggestionCard = ({ suggestion: s, category, status, isAdmin, onStatusChan
|
|||
<div className="border-t border-[var(--color-border)] pt-2 mt-2 space-y-2">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{Object.entries(STATUS_MAP).map(([key, val]) => (
|
||||
<button
|
||||
<Button
|
||||
key={key}
|
||||
type="button"
|
||||
onClick={() => onStatusChange(s.id, key)}
|
||||
|
|
@ -223,7 +224,7 @@ const SuggestionCard = ({ suggestion: s, category, status, isAdmin, onStatusChan
|
|||
}}
|
||||
>
|
||||
{val.label}
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
{editing ? (
|
||||
|
|
@ -235,22 +236,22 @@ const SuggestionCard = ({ suggestion: s, category, status, isAdmin, onStatusChan
|
|||
placeholder="Комментарий админа..."
|
||||
className="flex-1 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-1.5 text-xs text-[var(--color-text)]"
|
||||
/>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => { onStatusChange(s.id, s.status, comment); setEditing(false); }}
|
||||
className="rounded-lg bg-[var(--color-accent)] px-3 py-1.5 text-xs font-semibold text-white"
|
||||
>
|
||||
Сохранить
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setEditing(true)}
|
||||
className="text-xs text-[var(--color-accent)] hover:underline"
|
||||
>
|
||||
✏️ Комментарий
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { Panel } from '../UI/Panel';
|
||||
import { Badge } from '../UI/Badge';
|
||||
import { Button } from '../UI/Button';
|
||||
import { Input } from '../UI/Input';
|
||||
import { Skeleton } from '../UI/Loading';
|
||||
|
||||
|
|
@ -68,7 +69,7 @@ function RoleDropdown({ value, onChange }) {
|
|||
|
||||
return (
|
||||
<div ref={ref} className="relative w-full">
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className={[
|
||||
|
|
@ -82,13 +83,13 @@ function RoleDropdown({ value, onChange }) {
|
|||
<span className="text-[var(--color-text-muted)]">Выберите роль</span>
|
||||
)}
|
||||
<span className="text-[var(--color-text-muted)] text-xs">▾</span>
|
||||
</button>
|
||||
</Button>
|
||||
{open && (
|
||||
<div className="absolute left-0 right-0 top-full z-50 mt-1.5 overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-dropdown-surface)] shadow-soft">
|
||||
{ROLES.map((r) => {
|
||||
const sel = r === value;
|
||||
return (
|
||||
<button
|
||||
<Button
|
||||
key={r}
|
||||
type="button"
|
||||
onClick={() => pick(r)}
|
||||
|
|
@ -99,7 +100,7 @@ function RoleDropdown({ value, onChange }) {
|
|||
>
|
||||
<span>{ROLE_LABELS[r]}</span>
|
||||
{sel && <span className="text-[var(--color-accent)]">✓</span>}
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
@ -161,20 +162,20 @@ function AddUserModal({ onSubmit, onClose, submitting, error }) {
|
|||
<div className="rounded-xl bg-[rgba(201,61,61,0.12)] px-4 py-2.5 text-sm text-[var(--color-danger)]">{error}</div>
|
||||
)}
|
||||
<div className="flex gap-3 pt-2">
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="flex-1 rounded-full border border-[var(--color-border)] px-4 py-2.5 text-sm font-semibold text-[var(--color-text-muted)] hover:bg-[var(--color-surface)] transition"
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
className="flex-1 rounded-full bg-[var(--color-accent)] px-4 py-2.5 text-sm font-semibold text-white hover:opacity-90 transition disabled:opacity-50"
|
||||
>
|
||||
{submitting ? 'Добавление…' : 'Добавить'}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -294,12 +295,12 @@ export default function UserManagementPanel() {
|
|||
{/* Toolbar */}
|
||||
<div className="flex items-center justify-between gap-2 flex-wrap mb-4">
|
||||
<span className="text-sm text-[var(--color-text-muted)]">{users.length} пользователей</span>
|
||||
<button
|
||||
<Button
|
||||
onClick={() => { setShowAddForm(true); setAddError(null); }}
|
||||
className="rounded-full bg-[var(--color-accent)] px-4 py-2 text-sm font-semibold text-white hover:opacity-90 transition"
|
||||
>
|
||||
+ Добавить
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Add user modal */}
|
||||
|
|
@ -354,15 +355,15 @@ export default function UserManagementPanel() {
|
|||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
<Button
|
||||
onClick={cancelEdit}
|
||||
className="rounded-lg border border-[var(--color-border)] px-3 py-1.5 text-sm text-[var(--color-text-muted)] hover:bg-[var(--color-surface)] transition"
|
||||
>Отмена</button>
|
||||
<button
|
||||
>Отмена</Button>
|
||||
<Button
|
||||
onClick={saveEdit}
|
||||
disabled={saving}
|
||||
className="rounded-full bg-[var(--color-accent)] px-4 py-1.5 text-sm font-semibold text-white hover:opacity-90 transition disabled:opacity-50"
|
||||
>{saving ? 'Сохранение…' : 'Сохранить'}</button>
|
||||
>{saving ? 'Сохранение…' : 'Сохранить'}</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -379,20 +380,20 @@ export default function UserManagementPanel() {
|
|||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge tone={ROLE_TONES[rn] || 'neutral'}>{ROLE_LABELS[rn] || rn}</Badge>
|
||||
<button
|
||||
<Button
|
||||
onClick={() => startEdit(user)}
|
||||
className="rounded-lg border border-[var(--color-accent)] px-2.5 py-1 text-xs font-semibold text-[var(--color-accent)] hover:bg-[var(--color-accent-soft)] transition"
|
||||
>Изменить</button>
|
||||
>Изменить</Button>
|
||||
{deleteConfirmId === user.id ? (
|
||||
<div className="flex gap-1">
|
||||
<button onClick={() => handleDeleteUser(user.id)} className="rounded-lg bg-[var(--color-danger)] px-2.5 py-1 text-xs font-semibold text-white transition">Да</button>
|
||||
<button onClick={() => setDeleteConfirmId(null)} className="rounded-lg border border-[var(--color-border)] px-2.5 py-1 text-xs text-[var(--color-text-muted)] transition">Нет</button>
|
||||
<Button onClick={() => handleDeleteUser(user.id)} className="rounded-lg bg-[var(--color-danger)] px-2.5 py-1 text-xs font-semibold text-white transition">Да</Button>
|
||||
<Button onClick={() => setDeleteConfirmId(null)} className="rounded-lg border border-[var(--color-border)] px-2.5 py-1 text-xs text-[var(--color-text-muted)] transition">Нет</Button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
<Button
|
||||
onClick={() => setDeleteConfirmId(user.id)}
|
||||
className="rounded-lg border border-[var(--color-danger)] px-2.5 py-1 text-xs font-semibold text-[var(--color-danger)] hover:bg-[rgba(201,61,61,0.08)] transition"
|
||||
>Удалить</button>
|
||||
>Удалить</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from "react";
|
||||
import { Badge } from "../UI/Badge";
|
||||
import { Button } from "../UI/Button";
|
||||
import { Panel } from "../UI/Panel";
|
||||
import { getInvitationReferenceLabel } from "./invitationReference";
|
||||
import { supabase } from "../../supabaseClient";
|
||||
|
|
@ -100,8 +101,8 @@ export const OrderCompositionPanel = ({ invitation = {} }) => {
|
|||
|
||||
return (
|
||||
<Panel className="space-y-3 border shadow-soft p-5 sm:p-6">
|
||||
<button
|
||||
type="button"
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="flex w-full items-center justify-between text-left"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
>
|
||||
|
|
@ -121,7 +122,7 @@ export const OrderCompositionPanel = ({ invitation = {} }) => {
|
|||
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
{isExpanded && (
|
||||
<div className="space-y-2">
|
||||
{products.map((product, idx) => (
|
||||
|
|
|
|||
|
|
@ -19,15 +19,15 @@ const ProblemReasonModal = ({ onSelect, onCancel }) => (
|
|||
<p className="text-sm text-[var(--color-text-muted)]">Укажите причину возникшей проблемы с доставкой.</p>
|
||||
<div className="space-y-2">
|
||||
{PROBLEM_REASONS.map((reason) => (
|
||||
<button
|
||||
<Button
|
||||
key={reason.value}
|
||||
type="button"
|
||||
className="w-full rounded-[16px] border border-[var(--color-border)] bg-[var(--color-surface)] p-3 text-left transition hover:border-[var(--color-accent)] hover:bg-[var(--color-accent-soft)]"
|
||||
variant="secondary"
|
||||
className="w-full rounded-[16px] p-3 text-left"
|
||||
onClick={() => onSelect(reason.value, reason.label)}
|
||||
>
|
||||
<span className="font-medium">{reason.label}</span>
|
||||
<p className="mt-0.5 text-xs text-[var(--color-text-muted)]">{reason.description}</p>
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import {
|
|||
parseGroupDate,
|
||||
} from "../../services/orderGroupViews";
|
||||
import { Badge } from "../UI/Badge";
|
||||
import { Button } from "../UI/Button";
|
||||
import { Input } from "../UI/Input";
|
||||
import { Select } from "../UI/Select";
|
||||
import { Panel } from "../UI/Panel";
|
||||
|
|
@ -247,31 +248,35 @@ export const DriverDeliveryPlanner = ({ orderGroups = [], onOpenOrder, currentUs
|
|||
{/* Date pills */}
|
||||
{sortedDeliveryDates.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 pt-2">
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setFilters((current) => ({ ...current, selectedDate: "" }))}
|
||||
className={[
|
||||
"rounded-full border px-3 py-1.5 text-xs font-medium transition",
|
||||
"rounded-full px-3 py-1.5 text-xs font-medium",
|
||||
!filters.selectedDate
|
||||
? "border-[var(--color-accent)] bg-[var(--color-accent-soft)] text-[var(--color-text)]"
|
||||
: "border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-muted)] hover:border-[var(--color-accent)]",
|
||||
: "text-[var(--color-text-muted)]",
|
||||
].join(" ")}
|
||||
>
|
||||
Все даты
|
||||
</button>
|
||||
</Button>
|
||||
{sortedDeliveryDates.map((date) => {
|
||||
const count = dateDeliveryMap.get(date) || 0;
|
||||
const selected = isDateSelected(date);
|
||||
return (
|
||||
<button
|
||||
<Button
|
||||
key={date}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setFilters((current) => ({ ...current, selectedDate: date }))}
|
||||
className={[
|
||||
"flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition",
|
||||
"flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium",
|
||||
selected
|
||||
? "border-[var(--color-accent)] bg-[var(--color-accent-soft)] text-[var(--color-text)]"
|
||||
: "border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-muted)] hover:border-[var(--color-accent)]",
|
||||
: "text-[var(--color-text-muted)]",
|
||||
].join(" ")}
|
||||
>
|
||||
<span>{parseGroupDate(date)?.toLocaleDateString("ru-RU", { day: "numeric", month: "short" }) || "—"}</span>
|
||||
|
|
@ -280,7 +285,7 @@ export const DriverDeliveryPlanner = ({ orderGroups = [], onOpenOrder, currentUs
|
|||
{count}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
@ -289,31 +294,35 @@ export const DriverDeliveryPlanner = ({ orderGroups = [], onOpenOrder, currentUs
|
|||
{/* City pills */}
|
||||
{sortedCities.length > 1 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setFilters((current) => ({ ...current, selectedCity: "" }))}
|
||||
className={[
|
||||
"rounded-full border px-3 py-1.5 text-xs font-medium transition",
|
||||
"rounded-full px-3 py-1.5 text-xs font-medium",
|
||||
!filters.selectedCity
|
||||
? "border-[var(--color-accent)] bg-[var(--color-accent-soft)] text-[var(--color-text)]"
|
||||
: "border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-muted)] hover:border-[var(--color-accent)]",
|
||||
: "text-[var(--color-text-muted)]",
|
||||
].join(" ")}
|
||||
>
|
||||
Все города
|
||||
</button>
|
||||
</Button>
|
||||
{sortedCities.map((city) => {
|
||||
const count = cityDeliveryMap.get(city) || 0;
|
||||
const selected = filters.selectedCity === city;
|
||||
return (
|
||||
<button
|
||||
<Button
|
||||
key={city}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setFilters((current) => ({ ...current, selectedCity: city }))}
|
||||
className={[
|
||||
"flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition",
|
||||
"flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium",
|
||||
selected
|
||||
? "border-[var(--color-accent)] bg-[var(--color-accent-soft)] text-[var(--color-text)]"
|
||||
: "border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-muted)] hover:border-[var(--color-accent)]",
|
||||
: "text-[var(--color-text-muted)]",
|
||||
].join(" ")}
|
||||
>
|
||||
<span>{city}</span>
|
||||
|
|
@ -322,7 +331,7 @@ export const DriverDeliveryPlanner = ({ orderGroups = [], onOpenOrder, currentUs
|
|||
{count}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
@ -359,8 +368,9 @@ export const DriverDeliveryPlanner = ({ orderGroups = [], onOpenOrder, currentUs
|
|||
|
||||
return (
|
||||
<Panel key={group.date} className="space-y-4 p-5">
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
className="flex w-full items-center gap-3 text-left"
|
||||
onClick={() => toggleDate(group.date)}
|
||||
>
|
||||
|
|
@ -381,7 +391,7 @@ export const DriverDeliveryPlanner = ({ orderGroups = [], onOpenOrder, currentUs
|
|||
<Badge key={status} tone={tone}>{count} {label}</Badge>
|
||||
))}
|
||||
</div>
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
{!isCollapsed && (
|
||||
<div className="space-y-4 pt-1">
|
||||
|
|
@ -393,10 +403,10 @@ export const DriverDeliveryPlanner = ({ orderGroups = [], onOpenOrder, currentUs
|
|||
</div>
|
||||
<div className="grid gap-3">
|
||||
{items.map((item) => (
|
||||
<button
|
||||
<Button
|
||||
key={item.id}
|
||||
type="button"
|
||||
className="rounded-[24px] border border-[var(--color-border)] bg-[var(--color-surface-strong)] p-4 text-left transition hover:bg-[var(--color-accent-soft)]"
|
||||
variant="secondary"
|
||||
className="rounded-[24px] p-4 text-left"
|
||||
onClick={() => onOpenOrder?.(item.id)}
|
||||
>
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
|
|
@ -414,7 +424,7 @@ export const DriverDeliveryPlanner = ({ orderGroups = [], onOpenOrder, currentUs
|
|||
<div className="mt-3 text-sm text-[var(--color-text-muted)]">
|
||||
{item.deliveryAddress || item.delivery_address || "Адрес не указан"}
|
||||
</div>
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -376,13 +376,15 @@ export const DriverShipmentPanel = ({ order, onShipmentChange, onSaveShipment, i
|
|||
{!justSaved && savedShipment.length > 0 && (
|
||||
<div className="rounded-xl border border-[var(--color-accent)] bg-[var(--color-accent-soft)] px-3 py-2 text-xs text-[var(--color-accent)]">
|
||||
✅ Отгрузка ранее сохранена: {savedShipment.filter((i) => i.shipped).length}/{savedShipment.length} позиций
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
className="ml-2 underline text-[var(--color-text-muted)]"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="underline text-[var(--color-text-muted)]"
|
||||
onClick={() => setJustSaved(true)}
|
||||
>
|
||||
Показать
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Panel>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import {
|
|||
ORDER_GROUP_DISPLAY_STATUS_OPTIONS,
|
||||
} from "../../services/orderGroupViews";
|
||||
import { Badge } from "../UI/Badge";
|
||||
import { Button } from "../UI/Button";
|
||||
import { Panel } from "../UI/Panel";
|
||||
import { SkeletonPage } from "../UI/Loading";
|
||||
import { OrderFilters } from "../orders/OrderFilters";
|
||||
|
|
@ -113,9 +114,9 @@ export const LogisticsReadinessBoard = ({ orderGroups = [], onSelectSet, statusO
|
|||
|
||||
return (
|
||||
<Panel key={statusValue} className="overflow-hidden p-0">
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center justify-between px-5 py-3 text-left transition hover:bg-[var(--color-accent-soft)]"
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="flex w-full items-center justify-between px-5 py-3 text-left"
|
||||
onClick={() => {
|
||||
setCollapsedSections((prev) => {
|
||||
const next = new Set(prev);
|
||||
|
|
@ -142,16 +143,16 @@ export const LogisticsReadinessBoard = ({ orderGroups = [], onSelectSet, statusO
|
|||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
{!isCollapsed && (
|
||||
<div className="overflow-x-auto">
|
||||
<TableHeader />
|
||||
{groups.map((group) => (
|
||||
<button
|
||||
<Button
|
||||
key={group.id}
|
||||
type="button"
|
||||
className={`grid ${COLS} gap-0 w-full border-t border-[var(--color-border)] text-left transition hover:bg-[var(--color-accent-soft)]`}
|
||||
variant="ghost"
|
||||
className={`grid ${COLS} gap-0 w-full border-t border-[var(--color-border)] text-left`}
|
||||
onClick={() => { if (onSelectSet) onSelectSet(group.id); }}
|
||||
>
|
||||
<div className="px-4 py-2.5">
|
||||
|
|
@ -176,7 +177,7 @@ export const LogisticsReadinessBoard = ({ orderGroups = [], onSelectSet, statusO
|
|||
<div className="px-4 py-2.5 text-sm text-[var(--color-text-muted)]">
|
||||
{formatDateTime(group.updatedAt)}
|
||||
</div>
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ export function NotificationBell({ notifications, unreadCount, onMarkAsRead, onM
|
|||
|
||||
return (
|
||||
<div className="relative" ref={bellRef}>
|
||||
<button
|
||||
<Button
|
||||
className="relative flex h-9 w-9 items-center justify-center rounded-full transition hover:bg-[var(--color-surface-strong)]"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
aria-label={`Уведомления${unreadCount > 0 ? ` (${unreadCount})` : ""}`}
|
||||
|
|
@ -58,7 +58,7 @@ export function NotificationBell({ notifications, unreadCount, onMarkAsRead, onM
|
|||
{unreadCount > 99 ? "99+" : unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="absolute right-0 top-full z-50 mt-2 w-80 sm:w-96">
|
||||
|
|
@ -67,29 +67,29 @@ export function NotificationBell({ notifications, unreadCount, onMarkAsRead, onM
|
|||
<h3 className="text-sm font-semibold">Уведомления</h3>
|
||||
<div className="flex items-center gap-1">
|
||||
{unreadCount > 0 && (
|
||||
<button
|
||||
<Button
|
||||
className="rounded p-1 text-xs text-[var(--color-accent)] hover:bg-[var(--color-surface-strong)]"
|
||||
onClick={onMarkAllAsRead}
|
||||
title="Прочитать все"
|
||||
>
|
||||
<CheckCheck className="h-4 w-4" />
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
{onOpenSettings && (
|
||||
<button
|
||||
<Button
|
||||
className="rounded p-1 text-xs text-[var(--color-text-muted)] hover:bg-[var(--color-surface-strong)]"
|
||||
onClick={() => { onOpenSettings(); setIsOpen(false); }}
|
||||
title="Настройки"
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
<button
|
||||
<Button
|
||||
className="rounded p-1 text-xs text-[var(--color-text-muted)] hover:bg-[var(--color-surface-strong)]"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import React from "react";
|
|||
import { useNotificationPreferences } from "../../hooks/useNotifications";
|
||||
import { usePushNotifications } from "../../hooks/usePushNotifications";
|
||||
import { Panel } from "../UI/Panel";
|
||||
import { Button } from "../UI/Button";
|
||||
import { Bell, Settings } from "../UI/Icons";
|
||||
import { Skeleton } from "../UI/Loading";
|
||||
|
||||
|
|
@ -27,12 +28,12 @@ export function NotificationSettings({ userId, userRole, onBack }) {
|
|||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{onBack && (
|
||||
<button
|
||||
<Button
|
||||
className="rounded p-1 text-[var(--color-text-muted)] hover:bg-[var(--color-surface-strong)]"
|
||||
onClick={onBack}
|
||||
>
|
||||
← Назад
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
<h2 className="text-lg font-semibold">Настройки уведомлений</h2>
|
||||
</div>
|
||||
|
|
@ -67,12 +68,12 @@ export function NotificationSettings({ userId, userRole, onBack }) {
|
|||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{onBack && (
|
||||
<button
|
||||
<Button
|
||||
className="rounded p-1 text-[var(--color-text-muted)] hover:bg-[var(--color-surface-strong)]"
|
||||
onClick={onBack}
|
||||
>
|
||||
← Назад
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
<h2 className="text-lg font-semibold">Настройки уведомлений</h2>
|
||||
</div>
|
||||
|
|
@ -94,7 +95,7 @@ export function NotificationSettings({ userId, userRole, onBack }) {
|
|||
</div>
|
||||
</div>
|
||||
{isSupported && (
|
||||
<button
|
||||
<Button
|
||||
className={`relative h-6 w-11 rounded-full transition-colors ${
|
||||
isSubscribed ? "bg-[var(--color-accent)]" : "bg-[var(--color-border)]"
|
||||
}`}
|
||||
|
|
@ -106,7 +107,7 @@ export function NotificationSettings({ userId, userRole, onBack }) {
|
|||
isSubscribed ? "translate-x-5" : "translate-x-0"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Panel>
|
||||
|
|
@ -124,7 +125,7 @@ export function NotificationSettings({ userId, userRole, onBack }) {
|
|||
<p className="text-sm font-medium">{label}</p>
|
||||
<p className="text-xs text-[var(--color-text-muted)]">{description}</p>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
className={`relative mt-0.5 h-6 w-11 shrink-0 rounded-full transition-colors ${
|
||||
prefs[key] ? "bg-[var(--color-accent)]" : "bg-[var(--color-border)]"
|
||||
}`}
|
||||
|
|
@ -136,7 +137,7 @@ export function NotificationSettings({ userId, userRole, onBack }) {
|
|||
prefs[key] ? "translate-x-5" : "translate-x-0"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</Button>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import React from "react";
|
||||
import { Button } from "../UI/Button";
|
||||
|
||||
const WEEK_DAY_LABELS = ["ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ", "ВС"];
|
||||
|
||||
|
|
@ -58,8 +59,8 @@ const CalendarWidget = ({
|
|||
return (
|
||||
<div className={layoutClassName}>
|
||||
<div className={calendarClassName}>
|
||||
<button
|
||||
type="button"
|
||||
<Button
|
||||
variant="ghost"
|
||||
aria-label={label}
|
||||
aria-expanded={isCalendarOpen}
|
||||
className="flex min-h-[54px] w-full items-center justify-between rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] px-4 text-left text-sm font-medium !text-[var(--color-text)] transition hover:border-[var(--color-accent)] focus:border-[var(--color-accent)] focus:outline-none"
|
||||
|
|
@ -67,7 +68,7 @@ const CalendarWidget = ({
|
|||
>
|
||||
<span>{selectedDate ? formatDateForDisplay(selectedDate) : "Выберите дату"}</span>
|
||||
<span aria-hidden="true" className="text-[var(--color-text-muted)]">▾</span>
|
||||
</button>
|
||||
</Button>
|
||||
{isCalendarOpen ? (
|
||||
<div className="rounded-[20px] border border-[var(--color-border)] bg-[var(--color-surface-strong)] p-3 shadow-lg absolute left-0 top-full z-50 mt-2 w-[300px]">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
|
|
@ -83,23 +84,23 @@ const CalendarWidget = ({
|
|||
</h4>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
<Button
|
||||
variant="ghost"
|
||||
disabled={!canGoBack}
|
||||
aria-label="Предыдущий месяц"
|
||||
className="flex h-9 w-9 items-center justify-center rounded-full border border-[var(--color-border)] text-sm text-[var(--color-text-muted)] transition hover:border-[var(--color-accent)] hover:!text-[var(--color-text)] disabled:cursor-not-allowed disabled:opacity-40"
|
||||
onClick={() => setCurrentMonth((month) => new Date(month.getFullYear(), month.getMonth() - 1, 1))}
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
aria-label="Следующий месяц"
|
||||
className="flex h-9 w-9 items-center justify-center rounded-full border border-[var(--color-border)] text-sm text-[var(--color-text-muted)] transition hover:border-[var(--color-accent)] hover:!text-[var(--color-text)]"
|
||||
onClick={() => setCurrentMonth((month) => new Date(month.getFullYear(), month.getMonth() + 1, 1))}
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 grid grid-cols-7 gap-1 text-center text-[10px] font-semibold uppercase text-[var(--color-text-muted)]">
|
||||
|
|
@ -123,9 +124,9 @@ const CalendarWidget = ({
|
|||
const dayNumber = String(day.getDate()).padStart(2, "0");
|
||||
|
||||
return (
|
||||
<button
|
||||
<Button
|
||||
key={dateKey}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
disabled={isDisabled}
|
||||
title={isWeekend ? "Выходной, доставки нет" : isSelectable ? "Можно выбрать" : "Недоступно"}
|
||||
className={[
|
||||
|
|
@ -150,7 +151,7 @@ const CalendarWidget = ({
|
|||
className="absolute inset-x-2 top-1/2 h-px -rotate-12 bg-[var(--color-text-muted)] opacity-70"
|
||||
/>
|
||||
) : null}
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
@ -162,9 +163,9 @@ const CalendarWidget = ({
|
|||
</div>
|
||||
<div className={timeClassName}>
|
||||
{timeOptions.map((option) => (
|
||||
<button
|
||||
<Button
|
||||
key={option}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
aria-pressed={selectedTime === option}
|
||||
className={[
|
||||
"min-h-[54px] rounded-2xl border px-4 text-left text-sm font-medium transition",
|
||||
|
|
@ -175,7 +176,7 @@ const CalendarWidget = ({
|
|||
onClick={() => onTimeChange(option)}
|
||||
>
|
||||
{option}
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -67,8 +67,8 @@ const ConfirmModal = ({ open, title, message, onConfirm, onCancel }) => {
|
|||
{title && <h3 className="text-lg font-semibold">{title}</h3>}
|
||||
{message && <p className="mt-2 text-sm text-[var(--color-text-muted)]">{message}</p>}
|
||||
<div className="mt-5 flex justify-end gap-3">
|
||||
<button type="button" className="rounded-xl border border-[var(--color-border)] px-4 py-2 text-sm font-medium text-[var(--color-text-muted)] hover:bg-[var(--color-surface)]" onClick={onCancel}>Отмена</button>
|
||||
<button type="button" className="rounded-xl bg-[var(--color-accent)] px-4 py-2 text-sm font-medium text-white hover:opacity-90" onClick={onConfirm}>Подтвердить</button>
|
||||
<Button variant="secondary" onClick={onCancel}>Отмена</Button>
|
||||
<Button variant="primary" onClick={onConfirm}>Подтвердить</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -84,13 +84,14 @@ const CollapsibleChips = ({ label, items }) => {
|
|||
if (!Array.isArray(items) || items.length === 0) return null;
|
||||
return (
|
||||
<span className="inline">
|
||||
<button
|
||||
type="button"
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="ml-1 cursor-pointer rounded-full bg-[var(--color-surface)] px-2 py-0.5 text-xs font-medium text-[var(--color-text-muted)] transition hover:bg-[var(--color-accent-soft)] hover:text-[var(--color-accent)]"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
{label} {open ? "▲" : "▼"}
|
||||
</button>
|
||||
</Button>
|
||||
{open && (
|
||||
<span className="ml-1 inline-flex flex-wrap gap-1">
|
||||
{items.map((item, idx) => (
|
||||
|
|
@ -342,8 +343,8 @@ const CollapsibleOrderComposition = ({ order }) => {
|
|||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
type="button"
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="flex w-full items-center justify-between text-left"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
>
|
||||
|
|
@ -365,7 +366,7 @@ const CollapsibleOrderComposition = ({ order }) => {
|
|||
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
{isExpanded && (
|
||||
<div className="space-y-3">
|
||||
{!orders.length ? (
|
||||
|
|
@ -516,15 +517,15 @@ const ProblemReasonModal = ({ onSelect, onCancel }) => (
|
|||
<p className="text-sm text-[var(--color-text-muted)]">Укажите причину возникшей проблемы с доставкой.</p>
|
||||
<div className="space-y-2">
|
||||
{PROBLEM_REASONS.map((reason) => (
|
||||
<button
|
||||
<Button
|
||||
key={reason.value}
|
||||
type="button"
|
||||
className="w-full rounded-[16px] border border-[var(--color-border)] bg-[var(--color-surface)] p-3 text-left transition hover:border-[var(--color-accent)] hover:bg-[var(--color-accent-soft)]"
|
||||
variant="secondary"
|
||||
className="w-full rounded-[16px] p-3 text-left"
|
||||
onClick={() => onSelect(reason.value, reason.label)}
|
||||
>
|
||||
<span className="font-medium">{reason.label}</span>
|
||||
<p className="mt-0.5 text-xs text-[var(--color-text-muted)]">{reason.description}</p>
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
|
|
@ -884,28 +885,20 @@ export const OrderDetailPanel = ({
|
|||
</div>
|
||||
{/* Delivery type tabs */}
|
||||
<div className="flex gap-2 rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] p-1">
|
||||
<button
|
||||
type="button"
|
||||
className={`flex-1 rounded-xl px-3 py-2 text-sm font-semibold transition ${
|
||||
deliveryType === "delivery"
|
||||
? "bg-[var(--color-accent)] text-white"
|
||||
: "text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
|
||||
}`}
|
||||
<Button
|
||||
variant={deliveryType === "delivery" ? "primary" : "ghost"}
|
||||
className="flex-1 rounded-xl px-3 py-2 text-sm font-semibold"
|
||||
onClick={() => { setDeliveryType("delivery"); setFormMessage(""); }}
|
||||
>
|
||||
🚚 Доставка
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`flex-1 rounded-xl px-3 py-2 text-sm font-semibold transition ${
|
||||
deliveryType === "pickup"
|
||||
? "bg-[var(--color-accent)] text-white"
|
||||
: "text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
|
||||
}`}
|
||||
</Button>
|
||||
<Button
|
||||
variant={deliveryType === "pickup" ? "primary" : "ghost"}
|
||||
className="flex-1 rounded-xl px-3 py-2 text-sm font-semibold"
|
||||
onClick={() => { setDeliveryType("pickup"); setFormMessage(""); }}
|
||||
>
|
||||
🏪 Самовывоз
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
{deliveryType === "pickup" && (
|
||||
<div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] p-3 text-sm text-[var(--color-text-muted)]">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import React from "react";
|
||||
import { Button } from "../UI/Button";
|
||||
import { Input } from "../UI/Input";
|
||||
import { Panel } from "../UI/Panel";
|
||||
import { DatePicker } from "../UI/DatePicker";
|
||||
|
|
@ -41,12 +42,11 @@ export const OrderFilters = ({ filters, setFilters, statusOptions = [], cities =
|
|||
{/* Row 1: Status + City + Search */}
|
||||
<div className="grid gap-3 md:grid-cols-[minmax(12rem,0.7fr)_minmax(0,0.5fr)_minmax(0,1.6fr)] md:items-end">
|
||||
<div ref={statusMenuRef} className="relative flex min-w-0 flex-col gap-2">
|
||||
<button
|
||||
type="button"
|
||||
<Button
|
||||
variant="ghost"
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={isStatusOpen}
|
||||
className={[
|
||||
"flex h-[46px] w-full items-center justify-between rounded-2xl border px-4 text-left text-sm transition",
|
||||
className={["flex h-[46px] w-full items-center justify-between rounded-2xl border px-4 text-left text-sm transition",
|
||||
isStatusOpen
|
||||
? "border-[var(--color-accent)] bg-[var(--color-accent-soft)] text-[var(--color-text)]"
|
||||
: "border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text)] hover:border-[var(--color-accent)]",
|
||||
|
|
@ -55,7 +55,7 @@ export const OrderFilters = ({ filters, setFilters, statusOptions = [], cities =
|
|||
>
|
||||
<span className="min-w-0 flex-1 truncate">{selectedStatusLabel}</span>
|
||||
<span aria-hidden="true" className="ml-3 text-[var(--color-text-muted)]">▾</span>
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
{isStatusOpen ? (
|
||||
<div
|
||||
|
|
@ -65,13 +65,12 @@ export const OrderFilters = ({ filters, setFilters, statusOptions = [], cities =
|
|||
{statusOptions.map((option) => {
|
||||
const isSelected = option.value === statusValue;
|
||||
return (
|
||||
<button
|
||||
<Button
|
||||
key={option.value}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
role="option"
|
||||
aria-selected={isSelected}
|
||||
className={[
|
||||
"flex w-full items-center justify-between px-4 py-3 text-left text-sm transition",
|
||||
className={["flex w-full items-center justify-between px-4 py-3 text-left text-sm transition",
|
||||
isSelected
|
||||
? "bg-[var(--color-accent-soft)] text-[var(--color-text)]"
|
||||
: "text-[var(--color-text)] hover:bg-[var(--color-surface-strong)]",
|
||||
|
|
@ -86,7 +85,7 @@ export const OrderFilters = ({ filters, setFilters, statusOptions = [], cities =
|
|||
{option.count || 0}
|
||||
</span>
|
||||
{isSelected ? <span className="ml-3 text-[var(--color-accent)]">✓</span> : null}
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
@ -131,13 +130,13 @@ export const OrderFilters = ({ filters, setFilters, statusOptions = [], cities =
|
|||
className="min-w-[140px] flex-1 md:max-w-[200px]"
|
||||
/>
|
||||
{hasDateFilter && (
|
||||
<button
|
||||
type="button"
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={clearDateFilter}
|
||||
className="mb-0.5 flex h-[46px] items-center gap-1.5 rounded-2xl border border-[var(--color-danger)] px-4 text-sm font-semibold text-[var(--color-danger)] hover:bg-[rgba(201,61,61,0.08)] transition"
|
||||
className="mb-0.5 h-[46px] gap-1.5 rounded-2xl border border-[var(--color-danger)] px-4 text-sm font-semibold text-[var(--color-danger)] hover:bg-[rgba(201,61,61,0.08)]"
|
||||
>
|
||||
✕ Сбросить
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -107,15 +107,15 @@ export const OrdersCalendarView = ({ orders, onOpenOrder }) => {
|
|||
</div>
|
||||
<div className="space-y-2">
|
||||
{dayOrders.map((order) => (
|
||||
<button
|
||||
<Button
|
||||
key={order.id}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
className="w-full rounded-[16px] px-3 py-3 text-left text-sm"
|
||||
onClick={() => onOpenOrder(order.id)}
|
||||
className="w-full rounded-[16px] bg-[var(--color-surface)] px-3 py-3 text-left text-sm hover:bg-[var(--color-accent-soft)]"
|
||||
>
|
||||
<div className="font-medium">{order.orderNumber}</div>
|
||||
<div className="mt-1 text-xs text-[var(--color-text-muted)]">{order.customer.name}</div>
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -157,17 +157,17 @@ export const OrdersCalendarView = ({ orders, onOpenOrder }) => {
|
|||
|
||||
<div className="space-y-2">
|
||||
{dayOrders.slice(0, 2).map((order) => (
|
||||
<button
|
||||
<Button
|
||||
key={order.id}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
className="w-full rounded-[16px] px-3 py-2 text-left text-sm"
|
||||
onClick={() => onOpenOrder(order.id)}
|
||||
className="w-full rounded-[16px] bg-[var(--color-surface)] px-3 py-2 text-left text-sm hover:bg-[var(--color-accent-soft)]"
|
||||
>
|
||||
<div className="font-medium">{order.orderNumber}</div>
|
||||
<div className="mt-1 text-xs text-[var(--color-text-muted)]">
|
||||
{order.customer.name}
|
||||
</div>
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
{dayOrders.length > 2 ? (
|
||||
<div className="px-1 text-xs text-[var(--color-text-muted)]">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { formatDateTime } from "../../utils/formatters";
|
||||
import { Badge } from "../UI/Badge";
|
||||
import { Button } from "../UI/Button";
|
||||
import { Panel } from "../UI/Panel";
|
||||
import { SkeletonTable } from "../UI/Loading";
|
||||
import { OrderFilters } from "./OrderFilters";
|
||||
|
|
@ -111,13 +112,12 @@ export const OrdersTable = ({
|
|||
</div>
|
||||
) : null}
|
||||
{orderGroups.map((group) => (
|
||||
<button
|
||||
<Button
|
||||
key={group.id}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => onOpenOrder(group.id)}
|
||||
className={[
|
||||
"w-full rounded-[22px] border border-[var(--color-border)] bg-[var(--color-surface-strong)] p-4 text-left transition",
|
||||
selectedOrderGroupId === group.id ? "bg-[var(--color-accent-soft)]" : "",
|
||||
className={["w-full rounded-[22px] border text-left transition",
|
||||
selectedOrderGroupId === group.id ? "border-[var(--color-accent)] bg-[var(--color-accent-soft)]" : "border-[var(--color-border)] bg-[var(--color-surface-strong)]",
|
||||
].join(" ")}
|
||||
>
|
||||
<div className="space-y-1">
|
||||
|
|
@ -150,7 +150,7 @@ export const OrdersTable = ({
|
|||
<div className="mt-3 text-xs text-[var(--color-text-muted)]">
|
||||
{formatDateTime(group.updatedAt)}
|
||||
</div>
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
|
@ -171,9 +171,9 @@ export const OrdersTable = ({
|
|||
<div className="px-5 py-4 font-medium">Обновлён</div>
|
||||
</div>
|
||||
{orderGroups.map((group) => (
|
||||
<button
|
||||
<Button
|
||||
key={group.id}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
className={`grid grid-cols-[minmax(180px,2.5fr)_minmax(100px,1.2fr)_minmax(100px,1fr)_minmax(80px,1fr)_minmax(120px,1.2fr)_minmax(80px,0.8fr)_minmax(130px,1.2fr)] gap-0 w-full border-t border-[var(--color-border)] text-left transition hover:bg-[var(--color-accent-soft)] ${selectedOrderGroupId === group.id ? "bg-[var(--color-accent-soft)]" : ""}`}
|
||||
onClick={() => onOpenOrder(group.id)}
|
||||
>
|
||||
|
|
@ -219,7 +219,7 @@ export const OrdersTable = ({
|
|||
<div className="px-5 py-4 text-sm text-[var(--color-text-muted)]">
|
||||
{formatDateTime(group.updatedAt)}
|
||||
</div>
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ export const AppShell = ({
|
|||
|
||||
<div className="space-y-1">
|
||||
{navItems.map((item) => (
|
||||
<button
|
||||
<Button
|
||||
key={item.key}
|
||||
className={[
|
||||
"flex w-full items-center justify-between rounded-[18px] px-3 py-3 text-left text-sm transition",
|
||||
|
|
@ -70,7 +70,7 @@ export const AppShell = ({
|
|||
>
|
||||
<span className="font-medium">{item.label}</span>
|
||||
{item.badge ? <Badge tone="accent">{item.badge}</Badge> : null}
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
|
@ -129,7 +129,7 @@ export const AppShell = ({
|
|||
<div className="sticky inset-x-0 top-0 z-40 -mx-3 -mt-4 border-b border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2 backdrop-blur xl:hidden sm:-mx-4 md:-mx-6">
|
||||
<div className="flex gap-1 overflow-x-auto" style={{ WebkitOverflowScrolling: 'touch', scrollbarWidth: 'none' }}>
|
||||
{navItems.map((item) => (
|
||||
<button
|
||||
<Button
|
||||
key={item.key}
|
||||
className={[
|
||||
"flex flex-shrink-0 items-center gap-1.5 rounded-[14px] px-3 py-2 text-sm transition",
|
||||
|
|
@ -144,7 +144,7 @@ export const AppShell = ({
|
|||
{item.badge ? (
|
||||
<Badge tone={activeSection === item.key ? "neutral" : "accent"}>{item.badge}</Badge>
|
||||
) : null}
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { OrderCompositionPanel } from "../components/client/OrderCompositionPane
|
|||
import { getInvitationReferenceLabel } from "../components/client/invitationReference";
|
||||
import { DeliveryStateNotice } from "../components/client/DeliveryStateNotice";
|
||||
import { Panel } from "../components/UI/Panel";
|
||||
import { Button } from "../components/UI/Button";
|
||||
import { Skeleton } from "../components/UI/Loading";
|
||||
import { formatDeliveryDate } from "../components/client/deliveryDateFormatting";
|
||||
import {
|
||||
|
|
@ -392,7 +393,7 @@ export const ClientDeliveryPage = () => {
|
|||
<>
|
||||
{/* Tab switcher */}
|
||||
<div className="flex gap-2 rounded-[28px] border border-[var(--color-border)] bg-[var(--color-surface)] p-1">
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
className={`flex-1 rounded-[24px] px-4 py-2.5 text-sm font-semibold transition ${
|
||||
activeTab === TAB_DELIVERY
|
||||
|
|
@ -407,8 +408,8 @@ export const ClientDeliveryPage = () => {
|
|||
}}
|
||||
>
|
||||
🚚 Доставка
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
className={`flex-1 rounded-[24px] px-4 py-2.5 text-sm font-semibold transition ${
|
||||
activeTab === TAB_PICKUP
|
||||
|
|
@ -423,7 +424,7 @@ export const ClientDeliveryPage = () => {
|
|||
}}
|
||||
>
|
||||
🏪 Самовывоз
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{activeTab === TAB_DELIVERY && !invitation?.deliveryAddress && !invitation?.customerAddress && (
|
||||
|
|
|
|||
Loading…
Reference in New Issue