golomazov/hotelsync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile responsiveness across all pages

Browse Source 
- BookingsPage: hide Номер/Выезд/Источник columns on small screens, show nights inline on mobile
- GuestsPage: stats grid 2→4 cols (grid-cols-2 lg:grid-cols-4), table columns hidden on mobile (md/lg breakpoints), GuestModal stats 2→4 cols on sm+
- BookingDetailPanel: full-width on mobile (w-full sm:w-[400px])
- Topbar: notifications panel full-width on mobile (w-[calc(100vw-1rem)] sm:w-96)
- LoyaltyPage, MaintenancePage, DiscountsPage, TariffsPage: stats grids grid-cols-2 lg:grid-cols-4

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HotelSync
2026-03-16 20:51:56 +03:00
parent e81de90855
commit 15c3471e7f
8 changed files with 28 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/pages/GuestsPage.tsx
View File

@@ -250,7 +250,7 @@ function GuestModal({ guest, onClose }: { guest: Guest; onClose: () => void }) {
</div>
{/* Stats strip */}
<div className="grid grid-cols-4 divide-x divide-slate-200 dark:divide-slate-700 border-b border-slate-200 dark:border-slate-700">
<div className="grid grid-cols-2 sm:grid-cols-4 divide-x divide-slate-200 dark:divide-slate-700 border-b border-slate-200 dark:border-slate-700">
{[
{ label: 'Визитов', value: guest.totalStays },
{ label: 'Потрачено', value: `${guest.totalSpent.toLocaleString('ru-RU')} ₽` },
@@ -588,14 +588,14 @@ export function GuestsPage() {
{pageTab === 'list' && <>
{/* Stats */}
<div className="grid grid-cols-4 gap-4">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
{[
{ icon: Users, label: 'Всего гостей', value: MOCK_GUESTS.length, color: 'text-brand-600 dark:text-brand-400', bg: 'bg-brand-50 dark:bg-brand-900/20' },
{ icon: Award, label: 'VIP гостей', value: vipCount, color: 'text-amber-600 dark:text-amber-400', bg: 'bg-amber-50 dark:bg-amber-900/20' },
{ icon: Repeat2, label: 'Постоянных', value: repeatCount, color: 'text-blue-600 dark:text-blue-400', bg: 'bg-blue-50 dark:bg-blue-900/20' },
{ icon: Star, label: 'Средний рейтинг',value: avgRating, color: 'text-emerald-600 dark:text-emerald-400', bg: 'bg-emerald-50 dark:bg-emerald-900/20' },
].map(s => (
<div key={s.label} className="card p-4 flex items-center gap-4">
<div key={s.label} className="card p-4 flex items-center gap-3">
<div className={cn('w-10 h-10 rounded-xl flex items-center justify-center shrink-0', s.bg)}>
<s.icon size={20} className={s.color} />
</div>
@@ -646,12 +646,12 @@ export function GuestsPage() {
<thead>
<tr className="border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-700/50">
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Гость</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Контакты</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Визиты</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Потрачено</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide hidden md:table-cell">Контакты</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide hidden sm:table-cell">Визиты</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide hidden lg:table-cell">Потрачено</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Рейтинг</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Последний визит</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Метки</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide hidden lg:table-cell">Последний визит</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide hidden sm:table-cell">Метки</th>
<th className="px-4 py-3" />
</tr>
</thead>
@@ -679,7 +679,7 @@ export function GuestsPage() {
<span className="text-sm font-medium text-slate-900 dark:text-slate-100">{guest.name}</span>
</div>
</td>
<td className="px-4 py-3">
<td className="px-4 py-3 hidden md:table-cell">
<div className="space-y-0.5">
{guest.phone && (
<div className="flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400">
@@ -693,13 +693,13 @@ export function GuestsPage() {
)}
</div>
</td>
<td className="px-4 py-3">
<td className="px-4 py-3 hidden sm:table-cell">
<div className="flex items-center gap-1.5">
<TrendingUp size={14} className="text-slate-400" />
<span className="text-sm font-medium text-slate-900 dark:text-slate-100">{guest.totalStays}</span>
</div>
</td>
<td className="px-4 py-3">
<td className="px-4 py-3 hidden lg:table-cell">
<span className="text-sm font-medium text-slate-900 dark:text-slate-100">
{guest.totalSpent.toLocaleString('ru-RU')} ₽
</span>
@@ -707,10 +707,10 @@ export function GuestsPage() {
<td className="px-4 py-3">
<StarRating value={guest.rating} />
</td>
<td className="px-4 py-3">
<td className="px-4 py-3 hidden lg:table-cell">
<span className="text-sm text-slate-600 dark:text-slate-400">{formatDate(guest.lastVisit)}</span>
</td>
<td className="px-4 py-3">
<td className="px-4 py-3 hidden sm:table-cell">
<div className="flex flex-wrap gap-1">
{guest.tags.map(tag => (
<span