poprawienie customowego tooltipa. wydzielenie części importów danych z backendu do composable. Poprawienie szablonu nazw kluczy redis. Wyciągnięcie Accordion populacji raportu do oddzielnego komponentu. Dodanie toLocaleString() do wyświetlania liczb z przecinkami po trzech cyfrach.

.eslintrc-auto-import.json

@@ -507,6 +507,7 @@
     "PaginationListItem": true,
     "PaginationNext": true,
     "PaginationPrev": true,
-    "useFetchPopulationReport": true
+    "useFetchPopulationReport": true,
+    "useFetchAdministrationReport": true
   }
 }

src/auto-types/auto-imports.d.ts

@@ -207,7 +207,6 @@ declare global {
   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
   const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
   const onDeactivated: typeof import('vue')['onDeactivated']
-  const onElementRemoval: typeof import('@vueuse/core')['onElementRemoval']
   const onErrorCaptured: typeof import('vue')['onErrorCaptured']
   const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
   const onLongPress: typeof import('@vueuse/core')['onLongPress']
@@ -333,7 +332,8 @@ declare global {
   const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
   const useFavicon: typeof import('@vueuse/core')['useFavicon']
   const useFetch: typeof import('@vueuse/core')['useFetch']
-  const useFetchPopulationReport: typeof import('../composables/useFetchPopulationReport')['default']
+  const useFetchAdministrationReport: typeof import('../composables/report/useFetchAdministrationReport')['default']
+  const useFetchPopulationReport: typeof import('../composables/report/useFetchPopulationReport')['default']
   const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
   const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
   const useFocus: typeof import('@vueuse/core')['useFocus']
@@ -388,7 +388,6 @@ declare global {
   const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
-  const usePreferredReducedTransparency: typeof import('@vueuse/core')['usePreferredReducedTransparency']
   const usePrevious: typeof import('@vueuse/core')['usePrevious']
   const useProcessEndTurnCollectionsData: typeof import('../composables/useProcessEndTurnCollectionsData')['default']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
@@ -397,7 +396,6 @@ declare global {
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
-  const useSSRWidth: typeof import('@vueuse/core')['useSSRWidth']
   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
@@ -813,7 +811,8 @@ declare module 'vue' {
     readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
     readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
     readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
-    readonly useFetchPopulationReport: UnwrapRef<typeof import('../composables/useFetchPopulationReport')['default']>
+    readonly useFetchAdministrationReport: UnwrapRef<typeof import('../composables/report/useFetchAdministrationReport')['default']>
+    readonly useFetchPopulationReport: UnwrapRef<typeof import('../composables/report/useFetchPopulationReport')['default']>
     readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']>
     readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']>
     readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']>

src/auto-types/components.d.ts

@@ -87,6 +87,7 @@ declare module 'vue' {
     Popover: typeof import('./../components/ui/popover/Popover.vue')['default']
     PopoverContent: typeof import('./../components/ui/popover/PopoverContent.vue')['default']
     PopoverTrigger: typeof import('./../components/ui/popover/PopoverTrigger.vue')['default']
+    PopulationAccordion: typeof import('./../components/report/population/populationAccordion.vue')['default']
     PopulationReport: typeof import('./../components/report/populationReport.vue')['default']
     PreviewReportTab: typeof import('./../components/admin-panel/previewReportTab.vue')['default']
     Progress: typeof import('./../components/ui/progress/Progress.vue')['default']

src/components/charts-and-stats/customChartTooltip.vue

@@ -10,13 +10,13 @@ defineProps<{
 </script>
 
 <template>
-	<Card class="text-sm opacity-90">
-		<CardHeader v-if="title" class="border-b p-3">
+	<Card class="text-sm opacity-75">
+		<CardHeader v-if="title" class="border-b p-3 opacity-100">
 			<CardTitle>
 				Tura: <span class="text-primary"> {{ title }} </span>
 			</CardTitle>
 		</CardHeader>
-		<CardContent class="flex min-w-[180px] flex-col gap-1 p-3">
+		<CardContent class="flex min-w-[180px] flex-col gap-1 p-3 opacity-100">
 			<div v-for="(item, key) in data" :key="key" class="flex justify-between">
 				<div class="flex items-center">
 					<span class="mr-2 h-2.5 w-2.5">
@@ -31,7 +31,7 @@ defineProps<{
 					</span>
 					<span>{{ item.name }}</span>
 				</div>
-				<span class="ml-4 font-semibold">{{ item.value }}</span>
+				<span class="ml-4 font-semibold">{{ item.value.toLocaleString('en-US') }}</span>
 			</div>
 		</CardContent>
 	</Card>

src/components/report/administration/administrationAccordion.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { TurnsResponse } from '@/types/pb-types';
+import type { StatesResponse, TurnsResponse } from '@/types/pb-types';
 
 interface AccordionItem {
 	title: string;
@@ -10,31 +10,14 @@ interface AccordionItem {
 
 const props = defineProps<{
 	turn: TurnsResponse<unknown>;
+	state: StatesResponse<unknown, unknown, unknown, unknown, unknown>;
 	accordionItems: AccordionItem[];
 }>();
 
 const provinces = props.accordionItems.find(item => item.type === 'provinces')?.content ?? [];
 const burgs = props.accordionItems.find(item => item.type === 'burgs')?.content ?? [];
 
-const cultureNames = await useCachedData({
-	key: `cultureNames-${props.turn.value + 1}`,
-	collection: 'cultures',
-	ttl: 1800,
-	requestArgs: {
-		filter: `turn = "${props.turn.id}"`,
-		fields: ['id,name']
-	}
-});
-
-const religionNames = await useCachedData({
-	key: `religionNames-${props.turn.value + 1}`,
-	collection: 'religions',
-	ttl: 1800,
-	requestArgs: {
-		filter: `turn = "${props.turn.id}"`,
-		fields: ['id,name']
-	}
-});
+const { cultureNames, religionNames } = await useFetchAdministrationReport(props.turn, props.state);
 </script>
 
 <template>

src/components/report/administration/administrationBurgCard.vue

@@ -25,7 +25,7 @@ const props = defineProps<{
 			<div class="mr-3 mt-[-0.6rem] flex w-full flex-col">
 				<p class="text-base">
 					Populacja:
-					<span class="text-primary">{{ props.burg.population }}</span>
+					<span class="text-primary">{{ props.burg.population.toLocaleString('en-US') }}</span>
 				</p>
 
 				<p class="text-base">

src/components/report/administration/administrationProvincesCard.vue

@@ -36,22 +36,26 @@ const props = defineProps<{ province: ProvincesResponse<unknown> }>();
 
 				<p class="text-base">
 					Populacja wiejska:
-					<span class="text-primary">{{ props.province.ruralPopulation }}</span>
+					<span class="text-primary">{{
+						props.province.ruralPopulation.toLocaleString('en-US')
+					}}</span>
 				</p>
 
 				<p class="text-base">
 					Populacja miejska:
-					<span class="text-primary">{{ props.province.urbanPopulation }}</span>
+					<span class="text-primary">{{
+						props.province.urbanPopulation.toLocaleString('en-US')
+					}}</span>
 				</p>
 
 				<p class="text-base">
 					Ilość miast:
-					<span class="text-primary">{{ props.province.burgs }}</span>
+					<span class="text-primary">{{ props.province.burgs.toLocaleString('en-US') }}</span>
 				</p>
 
 				<p class="text-base">
 					Ilość kratek:
-					<span class="text-primary">{{ props.province.cells }}</span>
+					<span class="text-primary">{{ props.province.cells.toLocaleString('en-US') }}</span>
 				</p>
 			</div>
 		</div>

src/components/report/administrationReport.vue

@@ -6,7 +6,6 @@ import type {
 	StatesResponse,
 	TurnsResponse
 } from '@/types/pb-types';
-import type { AuthModel } from 'pocketbase';
 
 const props = defineProps<{
 	turn: TurnsResponse<unknown>;
@@ -15,36 +14,11 @@ const props = defineProps<{
 
 const { currentUser } = storeToRefs(listenCurrentUserStore());
 
-const user = computed<AuthModel | null>(() =>
-	currentUser.value ? `"${currentUser.value?.id}"` : null
-);
-const isUserNotAdmin =
-	currentUser.value?.role === 'moderator' || currentUser.value?.role === 'admin'
-		? null
-		: user.value;
-
-const provincesData = ref<ProvincesResponse<unknown>[]>(
-	await useCachedData({
-		key: `reportProvinces-${props.turn.value + 1}-${props.state.name}-${isUserNotAdmin ? user.value : 'Administration'}`,
-		collection: 'provinces',
-		ttl: 1800,
-		requestArgs: {
-			filter: `turn = "${props.turn.id}" && state = "${props.state.id}"`
-			// fields: ['id,name']
-		}
-	})
-);
-
-const burgsData = ref<BurgsResponse<unknown>[]>(
-	await useCachedData({
-		key: `reportBurgs-${props.turn.value + 1}-${props.state.name}-${isUserNotAdmin ? user.value : 'Administration'}`,
-		collection: 'burgs',
-		ttl: 1800,
-		requestArgs: {
-			filter: `turn = "${props.turn.id}" && state = "${props.state.id}"`
-			// fields: ['id,name,population']
-		}
-	})
+const { provincesData, burgsData } = await useFetchAdministrationReport(
+	props.turn,
+	props.state,
+	!['moderator', 'admin'].includes(currentUser.value?.role),
+	currentUser.value?.id ? `"${currentUser.value.id}"` : null
 );
 
 const biomesChartData = prepareChartData(props.state.biomesCells as object);
@@ -95,7 +69,11 @@ function prepareChartData(content: object) {
 <template>
 	<div class="grid grid-cols-12 gap-3">
 		<div class="col-span-4 rounded-md border p-2">
-			<AdministrationAccordion :accordionItems="accordionItems" :turn="props.turn" />
+			<AdministrationAccordion
+				:accordionItems="accordionItems"
+				:turn="props.turn"
+				:state="props.state"
+			/>
 		</div>
 
 		<div class="col-span-8 rounded-md border p-2">Zawartość</div>

src/components/report/diplomacyReport.vue

@@ -25,8 +25,10 @@ const props = defineProps<{
 	state: StatesResponse<unknown, unknown, unknown, unknown, unknown>;
 }>();
 
+const { currentUser } = storeToRefs(listenCurrentUserStore());
+
 const flags: Flag[] = await useCachedData({
-	key: `reportFlags-${props.turn.value + 1}-${props.state.name}`,
+	key: `${props.state.name}-${props.turn.value + 1}-${!['moderator', 'admin'].includes(currentUser.value?.role) ? currentUser.value?.id : 'Administration'} -- reportDiplomacyFlags`,
 	collection: 'states',
 	ttl: 1800,
 	requestArgs: {

src/components/report/population/populationAccordion.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+defineProps<{
+	sections: {
+		value: string;
+		title: string;
+		count: number;
+		type: string;
+	}[];
+	tabs: {
+		name: string;
+		value: string;
+		tab: {
+			turn: number;
+		}[];
+	}[];
+	provincesCategories: string[];
+	provincesColors: string[];
+	burgsTabCategories: string[];
+	burgsTab: {
+		turn: number;
+	}[];
+}>();
+</script>
+
+<template>
+	<Accordion type="single" class="w-full" collapsible>
+		<AccordionItem v-for="section in sections" :key="section.value" :value="section.value">
+			<AccordionTrigger class="items-center justify-center space-x-1">
+				<h3 class="text-lg font-bold text-primary"> {{ section.title }} </h3>
+
+				<p>({{ section.count }})</p>
+			</AccordionTrigger>
+
+			<AccordionContent>
+				<div
+					class="m-2 p-2"
+					:class="{
+						'flex flex-col items-center justify-center': section.type === 'provinces'
+					}"
+				>
+					<template v-if="section.type === 'provinces'">
+						<Tabs
+							default-value="ruralPopulation"
+							class="flex w-full flex-col items-center justify-center"
+						>
+							<TabsList class="mb-2">
+								<TabsTrigger v-for="tab in tabs" :key="tab.value" :value="tab.value">
+									{{ tab.name }}
+								</TabsTrigger>
+							</TabsList>
+
+							<TabsContent v-for="tab in tabs" :key="tab.value" :value="tab.value" class="w-full">
+								<ChartLineWithPagination
+									:categories="provincesCategories"
+									:index="'turn'"
+									:colors="provincesColors"
+									:data="tab.tab"
+								/>
+							</TabsContent>
+						</Tabs>
+					</template>
+
+					<template v-else>
+						<ChartLineWithPagination
+							:categories="burgsTabCategories"
+							:data="burgsTab"
+							:index="'turn'"
+						/>
+					</template>
+				</div>
+			</AccordionContent>
+		</AccordionItem>
+	</Accordion>
+</template>

src/components/report/populationReport.vue

@@ -9,14 +9,11 @@ const props = defineProps<{
 
 const { currentUser } = storeToRefs(listenCurrentUserStore());
 
-const user = currentUser.value?.id ? `"${currentUser.value.id}"` : null;
-const isUserNotAdmin = !['moderator', 'admin'].includes(currentUser.value?.role) ? user : null;
-
 const { turnRecords, burgs, provinces } = await useFetchPopulationReport(
 	props.turn,
 	props.state,
-	isUserNotAdmin,
-	user
+	!['moderator', 'admin'].includes(currentUser.value?.role),
+	currentUser.value?.id ? `"${currentUser.value.id}"` : null
 );
 
 const createDataTab = (data: any[], field: string) =>
@@ -44,7 +41,9 @@ const provincesUrbanPopulationsTab = createDataTab(provinces.value, 'urbanPopula
 
 const lastRecord = provincesColorsTab[provincesColorsTab.length - 1];
 const provincesCategories = Object.keys(lastRecord).filter(key => key !== 'turn');
-const provincesColors = Object.values(lastRecord).filter(value => typeof value !== 'number');
+const provincesColors: string[] = Object.values(lastRecord).filter(
+	value => typeof value !== 'number'
+);
 
 const tabs = [
 	{
@@ -79,53 +78,15 @@ const sections = [
 	<div>
 		<div class="h-[500px]">placeholder content</div>
 
-		<Accordion type="single" class="w-full" collapsible>
-			<AccordionItem v-for="section in sections" :key="section.value" :value="section.value">
-				<AccordionTrigger class="items-center justify-center space-x-1">
-					<h3 class="text-lg font-bold text-primary"> {{ section.title }} </h3>
+		<Separator class="my-2" />
 
-					<p>({{ section.count }})</p>
-				</AccordionTrigger>
-
-				<AccordionContent>
-					<div
-						class="m-2 p-2"
-						:class="{
-							'flex flex-col items-center justify-center': section.type === 'provinces'
-						}"
-					>
-						<template v-if="section.type === 'provinces'">
-							<Tabs
-								default-value="ruralPopulation"
-								class="flex w-full flex-col items-center justify-center"
-							>
-								<TabsList class="mb-2">
-									<TabsTrigger v-for="tab in tabs" :key="tab.value" :value="tab.value">
-										{{ tab.name }}
-									</TabsTrigger>
-								</TabsList>
-
-								<TabsContent v-for="tab in tabs" :key="tab.value" :value="tab.value" class="w-full">
-									<ChartLineWithPagination
-										:categories="provincesCategories"
-										:index="'turn'"
-										:colors="provincesColors"
-										:data="tab.tab"
-									/>
-								</TabsContent>
-							</Tabs>
-						</template>
-
-						<template v-else>
-							<ChartLineWithPagination
-								:categories="burgsTabCategories"
-								:data="burgsTab"
-								:index="'turn'"
-							/>
-						</template>
-					</div>
-				</AccordionContent>
-			</AccordionItem>
-		</Accordion>
+		<PopulationAccordion
+			:sections="sections"
+			:tabs="tabs"
+			:provincesCategories="provincesCategories"
+			:provincesColors="provincesColors"
+			:burgsTabCategories="burgsTabCategories"
+			:burgsTab="burgsTab"
+		/>
 	</div>
 </template>

src/composables/report/useFetchAdministrationReport.ts

@@ -0,0 +1,68 @@
+import type {
+	BurgsResponse,
+	ProvincesResponse,
+	StatesResponse,
+	TurnsResponse
+} from '@/types/pb-types';
+
+export default async function (
+	turn: TurnsResponse<unknown>,
+	state: StatesResponse<unknown, unknown, unknown, unknown, unknown>,
+	isUserNotAdmin?: boolean,
+	user?: string | null
+) {
+	const provincesData = ref<ProvincesResponse<unknown>[]>(
+		await useCachedData({
+			key: `${state.name}-${turn.value + 1}-${isUserNotAdmin ? user : 'Administration'} -- reportAdministrationProvinces`,
+			collection: 'provinces',
+			ttl: 1800,
+			requestArgs: {
+				filter: `turn = "${turn.id}" && state = "${state.id}"`,
+				fields: [
+					'color,name,nameFull,emblemSVG,capital,ruralPopulation,urbanPopulation,burgs,cells'
+				]
+			}
+		})
+	);
+
+	const burgsData = ref<BurgsResponse<unknown>[]>(
+		await useCachedData({
+			key: `${state.name}-${turn.value + 1}-${isUserNotAdmin ? user : 'Administration'} -- reportAdministrationBurgs`,
+			collection: 'burgs',
+			ttl: 1800,
+			requestArgs: {
+				filter: `turn = "${turn.id}" && state = "${state.id}"`,
+				fields: [
+					'name,cityGeneratorLink,emblemSVG,culture,religion,population,isCapital,isPort,isCitadel,isWalls,isPlaza,isTemple,isShantyTown'
+				]
+			}
+		})
+	);
+
+	const cultureNames = await useCachedData({
+		key: `${turn.value + 1} -- cultureNames`,
+		collection: 'cultures',
+		ttl: 1800,
+		requestArgs: {
+			filter: `turn = "${turn.id}"`,
+			fields: ['id,name']
+		}
+	});
+
+	const religionNames = await useCachedData({
+		key: `${turn.value + 1} -- religionNames`,
+		collection: 'religions',
+		ttl: 1800,
+		requestArgs: {
+			filter: `turn = "${turn.id}"`,
+			fields: ['id,name']
+		}
+	});
+
+	return {
+		provincesData,
+		burgsData,
+		cultureNames,
+		religionNames
+	};
+}

src/composables/report/useFetchPopulationReport.ts

@@ -8,12 +8,12 @@ import type {
 export default async function useFetchPopulationReport(
 	turn: TurnsResponse<unknown>,
 	state: StatesResponse<unknown, unknown, unknown, unknown, unknown>,
-	isUserNotAdmin: string | null,
+	isUserNotAdmin: boolean,
 	user: string | null
 ) {
 	const stateRecords = ref<StatesResponse<unknown, unknown, unknown, unknown, unknown>[]>(
 		await useCachedData({
-			key: `reportPopulationStateRecordsIDs-${turn.value + 1}-${state.name}-${isUserNotAdmin ? user : 'Administration'}`,
+			key: `${state.name}-${turn.value + 1}-${isUserNotAdmin ? user : 'Administration'} -- reportPopulationStateRecordsIDs`,
 			collection: 'states',
 			ttl: 1800,
 			requestArgs: {
@@ -25,7 +25,7 @@ export default async function useFetchPopulationReport(
 
 	const turnRecords = ref<TurnsResponse<unknown>[]>(
 		await useCachedData({
-			key: `reportPopulationTurnRecords-${turn.value + 1}-${state.name}-${isUserNotAdmin ? user : 'Administration'}`,
+			key: `${state.name}-${turn.value + 1}-${isUserNotAdmin ? user : 'Administration'} -- reportPopulationTurnRecords`,
 			collection: 'turns',
 			ttl: 1800,
 			requestArgs: {
@@ -37,7 +37,7 @@ export default async function useFetchPopulationReport(
 
 	const burgs = ref<BurgsResponse<unknown>[]>(
 		await useCachedData({
-			key: `reportPopulationBurgs-${turn.value + 1}-${state.name}-${isUserNotAdmin ? user : 'Administration'}`,
+			key: `${state.name}-${turn.value + 1}-${isUserNotAdmin ? user : 'Administration'} -- reportPopulationBurgs`,
 			collection: 'burgs',
 			ttl: 1800,
 			requestArgs: {
@@ -49,7 +49,7 @@ export default async function useFetchPopulationReport(
 
 	const provinces = ref<ProvincesResponse<unknown>[]>(
 		await useCachedData({
-			key: `reportPopulationProvinces-${turn.value + 1}-${state.name}-${isUserNotAdmin ? user : 'Administration'}`,
+			key: `${state.name}-${turn.value + 1}-${isUserNotAdmin ? user : 'Administration'} -- reportPopulationProvinces`,
 			collection: 'provinces',
 			ttl: 1800,
 			requestArgs: {