From 2fc66d1e849770a8a86747148d412a20942a51a1 Mon Sep 17 00:00:00 2001
From: HotelSync <admin@hotelsync.ru>
Date: Tue, 17 Mar 2026 00:27:43 +0300
Subject: [PATCH] Fix mobile responsiveness across all pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PosPage: rooms list becomes horizontal scroll row on mobile instead of w-56 sidebar
- AvailabilityPage: edit panel stacks below grid on mobile (was fixed w-80 side panel)
- UsersPage roles tab: sidebar stacks above permissions on mobile
- All page containers: p-6 → p-4 md:p-6 (TariffsPage, DiscountsPage, MaintenancePage, ReportsPage, DynamicPricingPage, GuestsPage, LoyaltyPage)
- Stats grids: lg:grid-cols-4 → md:grid-cols-4 (GuestsPage, TariffsPage, DiscountsPage, MaintenancePage, ReportsPage, LoyaltyPage)
- Modal form grids: grid-cols-3 → grid-cols-1 sm:grid-cols-3, grid-cols-5 → grid-cols-3 sm:grid-cols-5, grid-cols-4 → grid-cols-2 sm:grid-cols-4
- PosPage modals: fixed w-80/w-96 → responsive w-[calc(100vw-2rem)] sm:w-80/96

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/AvailabilityPage.tsx   |  4 +--
 src/pages/DiscountsPage.tsx      |  8 +++---
 src/pages/DynamicPricingPage.tsx |  2 +-
 src/pages/GuestsPage.tsx         |  6 ++---
 src/pages/LoyaltyPage.tsx        |  6 ++---
 src/pages/MaintenancePage.tsx    |  6 ++---
 src/pages/PosPage.tsx            | 43 ++++++++++++++++++++++++++------
 src/pages/ReportsPage.tsx        |  4 +--
 src/pages/TariffsPage.tsx        | 14 +++++------
 src/pages/UsersPage.tsx          |  4 +--
 10 files changed, 62 insertions(+), 35 deletions(-)

diff --git a/src/pages/AvailabilityPage.tsx b/src/pages/AvailabilityPage.tsx
index 630d01f..d4b794c 100644
--- a/src/pages/AvailabilityPage.tsx
+++ b/src/pages/AvailabilityPage.tsx
@@ -265,7 +265,7 @@ function EditPanel({
   }, [startDate, endDate])
 
   return (
-    <div className="w-80 shrink-0 border-l border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 flex flex-col overflow-y-auto">
+    <div className="w-full sm:w-80 shrink-0 border-t sm:border-t-0 sm:border-l border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 flex flex-col overflow-y-auto max-h-72 sm:max-h-none">
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-3 border-b border-slate-200 dark:border-slate-700">
         <div>
@@ -922,7 +922,7 @@ export function AvailabilityPage() {
       </div>
 
       {/* ── Content ── */}
-      <div className="flex-1 overflow-hidden flex">
+      <div className="flex-1 overflow-hidden flex flex-col sm:flex-row">
 
         {/* Grid tab */}
         {tab === 'grid' && (
diff --git a/src/pages/DiscountsPage.tsx b/src/pages/DiscountsPage.tsx
index b85500a..13e8040 100644
--- a/src/pages/DiscountsPage.tsx
+++ b/src/pages/DiscountsPage.tsx
@@ -140,8 +140,8 @@ function DiscountModal({
       }
     >
       <div className="space-y-4">
-        <div className="grid grid-cols-3 gap-3">
-          <div className="col-span-2">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+          <div className="sm:col-span-2">
             <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Название *</label>
             <input type="text" className="input" placeholder="Корпоративная скидка"
               value={form.name} onChange={e => set('name', e.target.value)} />
@@ -285,7 +285,7 @@ export function DiscountsPage() {
     setDiscounts(prev => prev.map(d => d.id === id ? { ...d, isActive: !d.isActive } : d))
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-4 md:p-6 space-y-6">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
@@ -301,7 +301,7 @@ export function DiscountsPage() {
       </div>
 
       {/* Stats */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
         {[
           { label: 'Всего скидок',  value: discounts.length },
           { label: 'Активных',      value: discounts.filter(d => d.isActive).length },
diff --git a/src/pages/DynamicPricingPage.tsx b/src/pages/DynamicPricingPage.tsx
index b991444..8d75605 100644
--- a/src/pages/DynamicPricingPage.tsx
+++ b/src/pages/DynamicPricingPage.tsx
@@ -772,7 +772,7 @@ export function DynamicPricingPage() {
     setRules(prev => prev.map(r => r.id === id ? { ...r, isActive: !r.isActive } : r))
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-4 md:p-6 space-y-6">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
diff --git a/src/pages/GuestsPage.tsx b/src/pages/GuestsPage.tsx
index c71eec1..6e98009 100644
--- a/src/pages/GuestsPage.tsx
+++ b/src/pages/GuestsPage.tsx
@@ -287,7 +287,7 @@ function GuestModal({ guest, onClose }: { guest: Guest; onClose: () => void }) {
         </div>
 
         {/* Body */}
-        <div className="flex-1 overflow-y-auto p-6">
+        <div className="flex-1 overflow-y-auto p-4 sm:p-6">
           {tab === 'overview' && (
             <div className="space-y-5">
               {/* Tags */}
@@ -556,7 +556,7 @@ export function GuestsPage() {
   const avgRating  = (MOCK_GUESTS.reduce((s, g) => s + g.rating, 0) / MOCK_GUESTS.length).toFixed(1)
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-4 md:p-6 space-y-6">
       {/* Header */}
       <div>
         <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">Гости</h1>
@@ -588,7 +588,7 @@ export function GuestsPage() {
       {pageTab === 'list' && <>
 
       {/* Stats */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+      <div className="grid grid-cols-2 md: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' },
diff --git a/src/pages/LoyaltyPage.tsx b/src/pages/LoyaltyPage.tsx
index 5fb04cf..feca94e 100644
--- a/src/pages/LoyaltyPage.tsx
+++ b/src/pages/LoyaltyPage.tsx
@@ -815,7 +815,7 @@ export function LoyaltyPage() {
   const totalPoints   = MOCK_GUESTS.reduce((s, g) => s + g.points, 0)
 
   return (
-    <div className="p-6 space-y-5">
+    <div className="p-4 md:p-6 space-y-5">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
@@ -837,7 +837,7 @@ export function LoyaltyPage() {
       </div>
 
       {/* Stats */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
         {[
           { label: 'Участников программы',   value: activeGuests,                         icon: User,       color: 'text-brand-600 dark:text-brand-400',   bg: 'bg-brand-50 dark:bg-brand-900/20' },
           { label: 'Всего баллов в обороте', value: totalPoints.toLocaleString('ru-RU'),  icon: TrendingUp, color: 'text-amber-600 dark:text-amber-400',   bg: 'bg-amber-50 dark:bg-amber-900/20' },
@@ -885,7 +885,7 @@ export function LoyaltyPage() {
                   {editSettings ? <><Save size={13} /> Сохранить</> : <><Edit2 size={13} /> Изменить</>}
                 </button>
               </div>
-              <div className="grid grid-cols-3 gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                 {[
                   { label: 'Начисление',   desc: `${settings.pointsPerRuble} балл за 1 ₽`, field: 'pointsPerRuble' as const, unit: 'балл/₽' },
                   { label: 'Ценность',     desc: `1 балл = ${settings.pointValue} ₽`,      field: 'pointValue'     as const, unit: '₽' },
diff --git a/src/pages/MaintenancePage.tsx b/src/pages/MaintenancePage.tsx
index 43315b2..edfc824 100644
--- a/src/pages/MaintenancePage.tsx
+++ b/src/pages/MaintenancePage.tsx
@@ -231,7 +231,7 @@ function MaintenanceModal({
         {/* Type selector */}
         <div>
           <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Тип</label>
-          <div className="grid grid-cols-3 gap-2">
+          <div className="grid grid-cols-3 sm:grid-cols-3 gap-2">
             {([
               { id: 'room' as const,    label: 'Номер',   icon: BedDouble },
               { id: 'service' as const, label: 'Услуга',  icon: Wrench },
@@ -362,7 +362,7 @@ export function MaintenancePage() {
   const active   = records.filter(r => r.status !== 'done' && r.status !== 'cancelled')
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-4 md:p-6 space-y-6">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
@@ -378,7 +378,7 @@ export function MaintenancePage() {
       </div>
 
       {/* Stats */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
         {[
           { label: 'Всего записей',      value: records.length,                                                                                        cls: '' },
           { label: 'Активных',           value: active.length,                                                                                         cls: 'text-amber-600 dark:text-amber-400' },
diff --git a/src/pages/PosPage.tsx b/src/pages/PosPage.tsx
index 320cd55..338bc51 100644
--- a/src/pages/PosPage.tsx
+++ b/src/pages/PosPage.tsx
@@ -270,14 +270,41 @@ export function PosPage() {
         <>
           {/* ══════════════════════ TAB: main ══════════════════════ */}
           {activeTab === 'main' && (
-            <div className="flex flex-1 overflow-hidden">
+            <div className="flex flex-col sm:flex-row flex-1 overflow-hidden">
 
-              {/* ── Left sidebar: Заезды (w-56) ── */}
-              <div className="w-56 flex flex-col border-r border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 shrink-0 overflow-hidden">
-                <div className="px-3 py-2 border-b border-slate-200 dark:border-slate-700">
+              {/* ── Заезды: horizontal scroll on mobile, sidebar on desktop ── */}
+              <div className="sm:w-56 flex-shrink-0 border-b sm:border-b-0 sm:border-r border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50">
+                <div className="px-3 py-2 border-b border-slate-200 dark:border-slate-700 hidden sm:block">
                   <p className="text-[11px] font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide">Заезды</p>
                 </div>
-                <div className="flex-1 overflow-y-auto p-2 space-y-1">
+                {/* Mobile: horizontal scroll row */}
+                <div className="flex sm:hidden gap-2 p-2 overflow-x-auto">
+                  {MOCK_BALANCES.map(rb => {
+                    const debt = Math.max(0, rb.totalAmount - rb.paidAmount)
+                    const paid = debt === 0
+                    const sel  = selectedRoom?.roomId === rb.roomId
+                    return (
+                      <button
+                        key={rb.roomId}
+                        onClick={() => setSelectedRoom(rb)}
+                        className={cn(
+                          'shrink-0 rounded-lg px-3 py-1.5 border transition-all flex items-center gap-1.5',
+                          sel
+                            ? 'border-brand-400 bg-brand-50 dark:bg-brand-900/20 dark:border-brand-600'
+                            : 'border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800',
+                        )}
+                      >
+                        <span className="text-xs font-bold text-slate-900 dark:text-slate-100">№{rb.roomNumber}</span>
+                        {paid
+                          ? <span className="text-[9px] font-semibold px-1 py-0.5 rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300">✓</span>
+                          : <span className="text-[9px] font-semibold px-1 py-0.5 rounded-full bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300 whitespace-nowrap">{formatCurrency(debt)}</span>
+                        }
+                      </button>
+                    )
+                  })}
+                </div>
+                {/* Desktop: vertical list */}
+                <div className="hidden sm:block flex-1 overflow-y-auto p-2 space-y-1">
                   {MOCK_BALANCES.map(rb => {
                     const debt = Math.max(0, rb.totalAmount - rb.paidAmount)
                     const paid = debt === 0
@@ -313,7 +340,7 @@ export function PosPage() {
               </div>
 
               {/* ── Center: payment form ── */}
-              <div className="flex-1 flex flex-col overflow-y-auto p-5 gap-5">
+              <div className="flex-1 flex flex-col overflow-y-auto p-4 sm:p-5 gap-5">
                 {selectedRoom ? (
                   <>
                     {/* Guest info */}
@@ -781,7 +808,7 @@ export function PosPage() {
       {/* ── Receipt success overlay ── */}
       {lastReceipt && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-          <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl p-8 w-80 text-center space-y-4">
+          <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl p-6 sm:p-8 w-[calc(100vw-2rem)] sm:w-80 text-center space-y-4">
             <CheckCircle2 size={56} className="text-emerald-500 mx-auto" />
             <div>
               <p className="text-xl font-bold text-slate-900 dark:text-slate-100">Оплата принята</p>
@@ -815,7 +842,7 @@ export function PosPage() {
       {/* ── Close shift confirmation modal ── */}
       {closeConfirm && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-          <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl p-6 w-96 space-y-4">
+          <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl p-6 w-[calc(100vw-2rem)] sm:w-96 space-y-4">
             <div className="flex items-center gap-3">
               <div className="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
                 <Printer size={18} className="text-red-600" />
diff --git a/src/pages/ReportsPage.tsx b/src/pages/ReportsPage.tsx
index 32f012f..36f888c 100644
--- a/src/pages/ReportsPage.tsx
+++ b/src/pages/ReportsPage.tsx
@@ -21,7 +21,7 @@ const maxOcc = Math.max(...OCC)
 
 export function ReportsPage() {
   return (
-    <div className="p-6 max-w-5xl mx-auto space-y-6">
+    <div className="p-4 md:p-6 max-w-5xl mx-auto space-y-6">
       <div className="flex items-center gap-3">
         <div className="w-10 h-10 rounded-xl bg-cyan-600 flex items-center justify-center shrink-0">
           <BarChart3 size={20} className="text-white" />
@@ -33,7 +33,7 @@ export function ReportsPage() {
       </div>
 
       {/* KPI cards */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
         {KPI.map(k => (
           <div key={k.label} className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4">
             <p className="text-xs text-slate-500 dark:text-slate-400 mb-2">{k.label}</p>
diff --git a/src/pages/TariffsPage.tsx b/src/pages/TariffsPage.tsx
index ced2f09..fb00878 100644
--- a/src/pages/TariffsPage.tsx
+++ b/src/pages/TariffsPage.tsx
@@ -200,8 +200,8 @@ function TariffModal({
     >
       <div className="space-y-5">
         {/* Name + Code */}
-        <div className="grid grid-cols-3 gap-3">
-          <div className="col-span-2">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+          <div className="sm:col-span-2">
             <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
               Название тарифа *
             </label>
@@ -223,7 +223,7 @@ function TariffModal({
           <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
             Тип питания
           </label>
-          <div className="grid grid-cols-5 gap-2">
+          <div className="grid grid-cols-3 sm:grid-cols-5 gap-2">
             {mealPlans.map(mp => (
               <button
                 key={mp.id}
@@ -250,7 +250,7 @@ function TariffModal({
           <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
             Что включено
           </label>
-          <div className="grid grid-cols-4 gap-2">
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
             {allInclusions.map(inc => {
               const active = form.inclusions.includes(inc.id)
               return (
@@ -278,7 +278,7 @@ function TariffModal({
         </div>
 
         {/* Price modifier + min nights + cancellation */}
-        <div className="grid grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
           <div>
             <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
               Надбавка / скидка к базовой цене
@@ -413,7 +413,7 @@ export function TariffsPage() {
   const inactiveTariffs = tariffs.filter(t => !t.isActive)
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-4 md:p-6 space-y-6">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
@@ -429,7 +429,7 @@ export function TariffsPage() {
       </div>
 
       {/* Stats */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
         {[
           { label: 'Всего тарифов',  value: tariffs.length,         color: 'text-slate-900 dark:text-slate-100' },
           { label: 'Активных',       value: activeTariffs.length,   color: 'text-emerald-600 dark:text-emerald-400' },
diff --git a/src/pages/UsersPage.tsx b/src/pages/UsersPage.tsx
index b5c9fac..37309fb 100644
--- a/src/pages/UsersPage.tsx
+++ b/src/pages/UsersPage.tsx
@@ -473,9 +473,9 @@ function RolesTab() {
   const totalCount  = ALL_MODULE_KEYS.length
 
   return (
-    <div className="flex gap-5 items-start">
+    <div className="flex flex-col sm:flex-row gap-5 items-start">
       {/* Role list */}
-      <div className="w-52 shrink-0">
+      <div className="w-full sm:w-52 shrink-0">
         <div className="card overflow-hidden">
           <div className="p-3 border-b border-slate-100 dark:border-slate-700">
             <p className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide">Роли</p>