fix(contacts, orders): replace empty state messages with DataNotFound component for better user feedback

This commit is contained in:
vchikalkin 2025-07-03 13:27:07 +03:00
parent f6354d41f6
commit b9371c34ad
3 changed files with 18 additions and 4 deletions

View File

@ -1,5 +1,6 @@
'use client';
import { DataNotFound } from '../shared/alert';
import { ContactRow } from '../shared/contact-row';
import { useCustomerContacts } from '@/hooks/api/contacts';
import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
@ -9,7 +10,7 @@ export function ContactsList() {
if (isLoading) return <LoadingSpinner />;
if (!contacts.length) return <div>Контакты не найдены</div>;
if (!contacts.length) return <DataNotFound title="Контакты не найдены" />;
return (
<div className="space-y-2">

View File

@ -1,5 +1,6 @@
'use client';
import { DataNotFound } from '@/components/shared/alert';
import { useServicesQuery } from '@/hooks/api/services';
import { useOrderStore } from '@/stores/order';
import { type ServiceFieldsFragment } from '@repo/graphql/types';
@ -18,10 +19,10 @@ export function ServiceSelect() {
},
});
if (!services?.length) return null;
if (!services?.length) return <DataNotFound title="Услуги не найдены" />;
return (
<div>
<div className="space-y-2 px-6">
{services.map((service) => service && <ServiceCard key={service.documentId} {...service} />)}
</div>
);
@ -40,7 +41,7 @@ function ServiceCard({ documentId, name }: Readonly<ServiceFieldsFragment>) {
return (
<label
className={cn(
'flex items-center justify-between border-2 rounded-2xl bg-background p-4 px-6 cursor-pointer dark:bg-primary/5',
'flex items-center justify-between border-2 rounded-2xl bg-background p-4 cursor-pointer dark:bg-primary/5',
selected ? 'border-primary' : 'border-transparent',
)}
>

View File

@ -0,0 +1,12 @@
import { AlertCircleIcon } from 'lucide-react';
export function DataNotFound({ title }: { readonly title: string }) {
return (
<div className="p-4">
<div className="line-clamp-1 flex items-center justify-center text-sm font-medium tracking-tight text-secondary-foreground">
<AlertCircleIcon className="mr-2 size-4" />
<span className="line-clamp-1 font-medium tracking-tight">{title}</span>
</div>
</div>
);
}