Добавлен новый компонент TimesheetDemo и соответствующие вкладки в UIKitSection. Обновлены стили и структура кода для улучшения взаимодействия с пользователем. Оптимизированы импорты и форматирование кода в компоненте BusinessDemo.

src/components/admin/ui-kit-section.tsx

@@ -16,6 +16,7 @@ import { StatesDemo } from './ui-kit/states-demo'
 import { MediaDemo } from './ui-kit/media-demo'
 import { InteractiveDemo } from './ui-kit/interactive-demo'
 import { BusinessDemo } from './ui-kit/business-demo'
+import { TimesheetDemo } from './ui-kit/timesheet-demo'
 
 export function UIKitSection() {
   return (
@@ -69,6 +70,9 @@ export function UIKitSection() {
           <TabsTrigger value="business" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
             Бизнес
           </TabsTrigger>
+          <TabsTrigger value="timesheet" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
+            Табель
+          </TabsTrigger>
         </TabsList>
 
         <TabsContent value="buttons" className="space-y-6">
@@ -126,6 +130,10 @@ export function UIKitSection() {
         <TabsContent value="business" className="space-y-6">
           <BusinessDemo />
         </TabsContent>
+
+        <TabsContent value="timesheet" className="space-y-6">
+          <TimesheetDemo />
+        </TabsContent>
       </Tabs>
     </div>
   )