implemented identity, updated session, added 'workings' list

added paginated querying, added 'common'

app/client/pages/index.tsx

@@ -1,46 +1,139 @@
-import { Box, Button, Stack, Text } from '@chakra-ui/react';
+import { gql } from '@apollo/client';
+import { Skeleton, Stack } from '@chakra-ui/react';
+import { WorkingListQuery } from '@generated/types';
 import { createFileRoute } from '@tanstack/react-router';
-
-import { gql, useQuery } from '@apollo/client';
-
-import { BooksManyQuery } from '@generated/types';
+import { useState } from 'react';
+import { Pagination } from '../components/Pagination';
+import { WorkingList } from '../components/WorkingList';
+import { WorkingListSearch } from '../components/WorkingListSearch';
+import { usePaginatedQuery } from '../hooks/usePaginatedQuery';
 
 export const Route = createFileRoute('/')({
-  component: Dashboard
+  component: RouteComponent
 });
 
-function Dashboard() {
-  const { data, refetch } = useQuery<BooksManyQuery>(getBooksQuery);
+function RouteComponent() {
+  const [workingSearchValue, setWorkingSearchValue] = useState<string>('');
+  const [workingsListPage, setWorkingsListPage] = useState<number>(1);
+  const [workingsListPageSize, setWorkingsListPageSize] = useState<number>(2);
+  const startIndex = (workingsListPage - 1) * workingsListPageSize;
+
+  const { data } = usePaginatedQuery<WorkingListQuery>({
+    query,
+    input: {
+      filter: {
+        terms: workingSearchValue,
+        offset: startIndex,
+        size: workingsListPageSize
+      }
+    }
+  });
 
   return (
-    <Stack>
-      <Text>Hello world!</Text>
-      <Text>This is my template!</Text>
-      <Stack>
-        {data && (
+    <Stack justifyContent="center" alignItems="center">
+      <Stack width="90%">
+        <WorkingListSearch
+          value={workingSearchValue}
+          onSubmit={value => {
+            alert(value);
+          }}
+          onChange={value => setWorkingSearchValue(value)}
+        />
+
+        {data != null ? (
           <>
-            {data.booksMany.map((book: any) => (
-              <Stack key={book.id}>
-                <Text>{book.title}</Text>
-                <Text>{book.author}</Text>
-              </Stack>
-            ))}
+            <WorkingList
+              workingsList={data.workingMany.items.map(item => ({
+                ...item,
+                chaptersTotal: item.chapters.total,
+                reviewsTotal: item.reviews.total
+              }))}
+            />
+
+            <Pagination
+              total={data.workingMany.total}
+              page={workingsListPage}
+              setPage={setWorkingsListPage}
+              pageSize={workingsListPageSize}
+            />
           </>
+        ) : (
+          <Skeleton />
         )}
-        <Box>
-          <Button onClick={async () => refetch()}>Refetch</Button>
-        </Box>
       </Stack>
     </Stack>
   );
 }
 
-const getBooksQuery = gql`
-  query BooksMany {
-    booksMany {
-      id
-      author
-      title
+const query = gql`
+  query WorkingList($input: WorkingManyInput!) {
+    workingMany(input: $input) {
+      items {
+        id
+        title
+        description
+        author {
+          id
+          username
+        }
+        progressStatus
+        updatedAt
+        chapters {
+          total
+        }
+        wordsTotal
+        ratingTotal
+        reviews {
+          total
+        }
+      }
+      total
     }
   }
 `;
+
+// const workingData1: WorkingCardProps = {
+//   id: '1',
+//   title: 'Worth the Candle',
+//   description: `A teenager struggling after the death of his best friend finds himself in a fantasy
+//               world - one which seems to be an amalgamation of every Dungeons and Dragons campaign
+//               they ever played together. Now he's stuck trying to find the answers to why he's there
+//               and what this world is trying to say. The most terrifying answer might be that this
+//               world is an expression of the person he was back on Earth.`,
+//   author: {
+//     id: '1',
+//     createdAt: '12.8.2025',
+//     updatedAt: '4.9.2025',
+//     username: 'AlexanderWhales'
+//   },
+//   progressStatus: WorkingProgressStatus.Finished,
+//   updatedAt: '20.10.2025',
+//   chaptersTotal: 10,
+//   wordsTotal: 34000,
+//   ratingTotal: 10,
+//   reviewsTotal: 3
+// };
+//
+// const workingData2: WorkingCardProps = {
+//   id: '2',
+//   title: 'Test',
+//   description: `Description.`,
+//   author: {
+//     id: '1',
+//     createdAt: '12.8.2025',
+//     updatedAt: '4.9.2025',
+//     username: 'JohnSmith'
+//   },
+//   progressStatus: WorkingProgressStatus.InProgress,
+//   updatedAt: '20.10.2025',
+//   chaptersTotal: 10,
+//   wordsTotal: 1200,
+//   ratingTotal: -10,
+//   reviewsTotal: 0
+// };
+//
+// const mockWorkingData = {
+//   total: 4,
+//   items: [workingData1, workingData2, { ...workingData1, id: '3' }, { ...workingData2, id: '4' }]
+// };
+//