feat: Integrate

viewer/app/all/substitution-viewer.tsx

@@ -1,9 +1,7 @@
 'use client';
 
-import { useState, useMemo, useTransition, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { format, parseISO } from 'date-fns';
-import { RefreshCw } from 'lucide-react';
-import { useRouter } from 'next/navigation';
 
 import { SubstitutionData, ChangeEntry } from '@/lib/types';
 import { Button } from '@/components/ui/button';
@@ -18,14 +16,13 @@ import {
 import { Label } from '@/components/ui/label';
 import TakesPlace from '@/components/own/takes-place';
 import { TeacherAbsenceItem } from '@/components/own/teacher-absence';
+import UpdateStatus from '@/components/own/update-status';
 
 interface SubstitutionViewerProps {
   initialData: SubstitutionData | null;
 }
 
 export default function SubstitutionViewer({ initialData }: SubstitutionViewerProps) {
-  const router = useRouter();
-  const [isPending, startTransition] = useTransition();
   const data = initialData;
   
   const [selectedDate, setSelectedDate] = useState<string>('');
@@ -43,12 +40,6 @@ export default function SubstitutionViewer({ initialData }: SubstitutionViewerPr
 
   const currentDayData = data?.schedule?.[selectedDate];
 
-  const handleRefresh = () => {
-    startTransition(() => {
-      router.refresh();
-    });
-  };
-
   const dates = data ? Object.keys(data.schedule).sort() : [];
 
   if (!data) {
@@ -63,20 +54,7 @@ export default function SubstitutionViewer({ initialData }: SubstitutionViewerPr
   return (
 
       <main className="flex-1 w-full max-w-[1920px] mx-auto p-4 md:p-6 space-y-6">
-        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 text-sm text-muted-foreground p-4 rounded-lg border">
-          <div>
-            <span className="font-medium">Poslední aktualizace:</span> {data.status.lastUpdated}
-            <span className="mx-2 hidden sm:inline">•</span>
-            <br className="sm:hidden" />
-            <span >
-              Aktualizace každých {data.status.currentUpdateSchedule < 60 ? `${data.status.currentUpdateSchedule} min` : `${data.status.currentUpdateSchedule / 60} hod`}
-            </span>
-          </div>
-          <Button variant="outline" size="sm" onClick={handleRefresh} disabled={isPending} className="w-full sm:w-auto">
-            <RefreshCw className={`h-4 w-4 mr-2 ${isPending ? 'animate-spin' : ''}`} />
-            Aktualizovat
-          </Button>
-        </div>
+        <UpdateStatus data={data} />
 
         <div className="max-w-md">
           <Label htmlFor="date-select" className="mb-2 block">Datum</Label>