feat: adicionar ícone de gráfico e aprimorar a apresentação dos slides de retrospectiva
parent
ad6edc1094
commit
8f4a42eea8
|
|
@ -4,7 +4,7 @@ import {
|
||||||
} from '@/app/hooks/useMetrics';
|
} from '@/app/hooks/useMetrics';
|
||||||
import logoAImg from '@/assets/images/a-agape.png';
|
import logoAImg from '@/assets/images/a-agape.png';
|
||||||
import logoImg from '@/assets/images/agape-logo.png';
|
import logoImg from '@/assets/images/agape-logo.png';
|
||||||
import { BuildingIcon, ClockIcon, SpinnerIcon } from '@phosphor-icons/react';
|
import { BuildingIcon, ChartLineUpIcon, ClockIcon, SpinnerIcon } from '@phosphor-icons/react';
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useSearchParams } from 'react-router-dom';
|
import { useSearchParams } from 'react-router-dom';
|
||||||
|
|
@ -149,235 +149,263 @@ export function RetrospectiveSlides() {
|
||||||
</StorySlide>
|
</StorySlide>
|
||||||
|
|
||||||
{metricsPortal && metricsPortal.length > 0 && (
|
{metricsPortal && metricsPortal.length > 0 && (
|
||||||
<StorySlide className="bg-linear-to-br from-slate-50 to-blue-50">
|
|
||||||
<div className="flex flex-col items-center justify-center h-full space-y-16">
|
|
||||||
<motion.div
|
|
||||||
initial={{ scale: 0 }}
|
|
||||||
whileInView={{ scale: 1 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
transition={{ type: 'spring', duration: 0.6 }}>
|
|
||||||
<BuildingIcon className="h-20 w-20 text-[#145190]" />
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<div className="text-center space-y-8 max-w-4xl px-6">
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
transition={{ duration: 0.6 }}>
|
|
||||||
<p className="text-2xl md:text-3xl font-light text-[#0e233d]">
|
|
||||||
Você acessou
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
className="space-y-4"
|
|
||||||
initial={{ opacity: 0, scale: 0.8 }}
|
|
||||||
whileInView={{ opacity: 1, scale: 1 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
transition={{
|
|
||||||
type: 'spring',
|
|
||||||
duration: 0.8,
|
|
||||||
delay: 0.2,
|
|
||||||
}}>
|
|
||||||
<div className="text-6xl md:text-8xl font-bold text-[#145190]">
|
|
||||||
{metricsPortal
|
|
||||||
.reduce((acc, p) => acc + p.totalAcessos, 0)
|
|
||||||
.toLocaleString('pt-BR')}
|
|
||||||
</div>
|
|
||||||
<p className="text-3xl md:text-4xl font-semibold text-[#0e233d]">
|
|
||||||
vezes
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
transition={{ duration: 0.6, delay: 0.4 }}>
|
|
||||||
<p className="text-2xl md:text-3xl font-light text-[#0e233d]">
|
|
||||||
o{' '}
|
|
||||||
<span className="font-bold text-[#145190]">
|
|
||||||
{metricsPortal[0]?.nomeSistema || 'Portal'}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
<p className="text-xl md:text-2xl font-light text-[#0e233d] mt-2">
|
|
||||||
durante o ano de {ano}
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
className="pt-8"
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
whileInView={{ opacity: 1 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
transition={{ duration: 0.6, delay: 0.6 }}>
|
|
||||||
<div className="flex items-center justify-center gap-2">
|
|
||||||
{[...Array(3)].map((_, i) => (
|
|
||||||
<motion.span
|
|
||||||
key={i}
|
|
||||||
className="h-2 w-2 bg-[#145190] rounded-full"
|
|
||||||
animate={{ scale: [1, 1.2, 1] }}
|
|
||||||
transition={{
|
|
||||||
duration: 1.5,
|
|
||||||
repeat: Infinity,
|
|
||||||
delay: i * 0.2,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</StorySlide>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{topItems.length > 0 && (
|
|
||||||
<StorySlide className="bg-linear-to-br from-[#0e233d] via-[#173b63] to-[#145190] text-white overflow-hidden">
|
<StorySlide className="bg-linear-to-br from-[#0e233d] via-[#173b63] to-[#145190] text-white overflow-hidden">
|
||||||
<div className="flex flex-col md:flex-row items-center justify-between h-full px-6 py-8 md:py-12 md:px-8">
|
<div className="flex flex-col md:flex-row items-center justify-between h-full px-6 py-8 md:py-12 md:px-8">
|
||||||
{/* Coluna esquerda - Título e informações */}
|
{/* Coluna esquerda - Ícone e números principais */}
|
||||||
<motion.div
|
<motion.div
|
||||||
className="md:w-2/5 flex flex-col items-center md:items-start mb-8 md:mb-0 md:pr-8"
|
className="md:w-2/5 flex flex-col items-center md:items-start mb-8 md:mb-0 md:pr-8"
|
||||||
initial={{ opacity: 0, x: -30 }}
|
initial={{ opacity: 0, x: -30 }}
|
||||||
whileInView={{ opacity: 1, x: 0 }}
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
transition={{ duration: 0.6 }}>
|
transition={{ duration: 0.6 }}>
|
||||||
|
{/* Ícone com efeito */}
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ scale: 0 }}
|
initial={{ scale: 0 }}
|
||||||
whileInView={{ scale: 1 }}
|
whileInView={{ scale: 1 }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
transition={{ type: 'spring', duration: 0.6 }}
|
transition={{ type: 'spring', duration: 0.6 }}
|
||||||
className="mb-6 md:mb-8">
|
className="mb-6 md:mb-8">
|
||||||
<ClockIcon className="h-14 w-14 md:h-16 md:w-16 text-yellow-300" />
|
<div className="relative">
|
||||||
|
<div className="absolute inset-0 bg-white/20 rounded-full blur-lg animate-pulse"></div>
|
||||||
|
<BuildingIcon className="h-14 w-14 md:h-16 md:w-16 text-white drop-shadow-lg relative z-10" />
|
||||||
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Título */}
|
||||||
<motion.h2
|
<motion.h2
|
||||||
className="text-3xl md:text-4xl lg:text-5xl font-bold text-center md:text-left mb-6 md:mb-8"
|
className="text-2xl md:text-3xl lg:text-4xl font-bold text-center md:text-left mb-4"
|
||||||
initial={{ opacity: 0, y: -20 }}
|
initial={{ opacity: 0, y: -20 }}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
transition={{ duration: 0.6, delay: 0.1 }}>
|
transition={{ duration: 0.6, delay: 0.1 }}>
|
||||||
Seus Aplicativos Favoritos
|
Portal Corporativo
|
||||||
</motion.h2>
|
</motion.h2>
|
||||||
|
|
||||||
<motion.p
|
<motion.p
|
||||||
className="text-lg md:text-xl text-white/80 text-center md:text-left mb-6"
|
className="text-base md:text-lg text-white/80 text-center md:text-left mb-6"
|
||||||
initial={{ opacity: 0 }}
|
initial={{ opacity: 0 }}
|
||||||
whileInView={{ opacity: 1 }}
|
whileInView={{ opacity: 1 }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
transition={{ duration: 0.6, delay: 0.2 }}>
|
transition={{ duration: 0.6, delay: 0.2 }}>
|
||||||
Os sistemas mais acessados em {ano}
|
A porta de entrada para todas as aplicações
|
||||||
</motion.p>
|
</motion.p>
|
||||||
|
|
||||||
|
{/* Número principal */}
|
||||||
<motion.div
|
<motion.div
|
||||||
className="mt-6 md:mt-auto p-6 rounded-xl backdrop-blur-sm bg-white/10 border border-white/20 w-full"
|
className="space-y-3 mb-6"
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.4 }}>
|
||||||
|
<div className="text-5xl md:text-6xl lg:text-7xl font-black text-white tracking-tighter">
|
||||||
|
{metricsPortal
|
||||||
|
.reduce((acc, p) => acc + p.totalAcessos, 0)
|
||||||
|
.toLocaleString('pt-BR')}
|
||||||
|
</div>
|
||||||
|
<p className="text-xl md:text-2xl font-semibold text-blue-200">
|
||||||
|
acessos em {ano}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Estatísticas rápidas */}
|
||||||
|
<motion.div
|
||||||
|
className="mt-4 md:mt-auto w-full"
|
||||||
initial={{ opacity: 0 }}
|
initial={{ opacity: 0 }}
|
||||||
whileInView={{ opacity: 1 }}
|
whileInView={{ opacity: 1 }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
transition={{ duration: 0.6, delay: 0.8 }}>
|
transition={{ duration: 0.6, delay: 0.6 }}>
|
||||||
<div className="text-center md:text-left">
|
<div className="grid grid-cols-3 gap-3">
|
||||||
<p className="text-4xl md:text-5xl font-bold text-yellow-300 mb-2">
|
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 border border-white/20 text-center">
|
||||||
{totalAcessos.toLocaleString('pt-BR')}
|
<div className="text-lg font-bold text-white mb-1">
|
||||||
</p>
|
{Math.round(
|
||||||
<p className="text-white/70 text-sm md:text-base">
|
metricsPortal.reduce(
|
||||||
acessos totais no ano
|
(acc, p) => acc + p.totalAcessos,
|
||||||
</p>
|
0,
|
||||||
|
) / 365,
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-blue-100 opacity-90">
|
||||||
|
Por dia
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 border border-white/20 text-center">
|
||||||
|
<div className="text-lg font-bold text-white mb-1">
|
||||||
|
{Math.round(
|
||||||
|
metricsPortal.reduce(
|
||||||
|
(acc, p) => acc + p.totalAcessos,
|
||||||
|
0,
|
||||||
|
) / 12,
|
||||||
|
).toLocaleString('pt-BR')}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-blue-100 opacity-90">
|
||||||
|
Por mês
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 border border-white/20 text-center">
|
||||||
|
<div className="text-lg font-bold text-white mb-1">
|
||||||
|
{Math.round(
|
||||||
|
metricsPortal.reduce(
|
||||||
|
(acc, p) => acc + p.totalAcessos,
|
||||||
|
0,
|
||||||
|
) / 2920,
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-blue-100 opacity-90">
|
||||||
|
Por hora*
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{/* Coluna direita - Lista vertical compacta */}
|
{/* Coluna direita - Sistemas mais acessados (mantendo seu design) */}
|
||||||
<div className="md:w-3/5 h-full flex items-center">
|
<div className="md:w-3/5 h-full flex items-center">
|
||||||
<div className="w-full grid grid-cols-1 gap-3 md:gap-4 max-h-full">
|
<div className="w-full">
|
||||||
{topItems.slice(0, 6).map((item, index) => {
|
<motion.div
|
||||||
const medalColors = [
|
className="mb-6 text-center md:text-left"
|
||||||
'bg-yellow-400 text-yellow-900',
|
initial={{ opacity: 0, y: 20 }}
|
||||||
'bg-gray-300 text-gray-900',
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
'bg-orange-400 text-orange-900',
|
viewport={{ once: true }}
|
||||||
'bg-blue-400/20 text-blue-300',
|
transition={{ duration: 0.6 }}>
|
||||||
'bg-purple-400/20 text-purple-300',
|
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 mb-2">
|
||||||
'bg-green-400/20 text-green-300',
|
<ChartLineUpIcon className="h-4 w-4 text-yellow-300" />
|
||||||
];
|
<span className="text-sm font-semibold text-white">
|
||||||
const isMedal = index < 3;
|
Aplicativos Mais Acessados
|
||||||
const medalColor = medalColors[index] || 'bg-white/20';
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-base text-white/70">
|
||||||
|
Os sistemas que mais acessaram o portal
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
return (
|
{/* Lista de sistemas */}
|
||||||
<motion.div
|
<div className="w-full grid grid-cols-1 gap-3 md:gap-4 max-h-full">
|
||||||
key={index}
|
{topItems.slice(0, 6).map((item, index) => {
|
||||||
className={`flex items-center p-4 md:p-5 rounded-xl backdrop-blur-sm border border-white/20 ${
|
const medalColors = [
|
||||||
isMedal
|
'bg-yellow-400 text-yellow-900',
|
||||||
? 'bg-white/15'
|
'bg-gray-300 text-gray-900',
|
||||||
: 'bg-white/10 hover:bg-white/15'
|
'bg-orange-400 text-orange-900',
|
||||||
} transition-all`}
|
'bg-blue-400/20 text-blue-300',
|
||||||
initial={{ x: 50, opacity: 0 }}
|
'bg-purple-400/20 text-purple-300',
|
||||||
whileInView={{ x: 0, opacity: 1 }}
|
'bg-green-400/20 text-green-300',
|
||||||
viewport={{ once: true }}
|
];
|
||||||
transition={{
|
const isMedal = index < 3;
|
||||||
duration: 0.5,
|
const medalColor =
|
||||||
delay: index * 0.1,
|
medalColors[index] || 'bg-white/20';
|
||||||
}}>
|
|
||||||
<div
|
|
||||||
className={`w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center font-bold text-base md:text-lg mr-4 ${medalColor}`}>
|
|
||||||
{index === 0 && '🥇'}
|
|
||||||
{index === 1 && '🥈'}
|
|
||||||
{index === 2 && '🥉'}
|
|
||||||
{index >= 3 && `#${index + 1}`}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<p className="text-base md:text-lg font-semibold truncate">
|
|
||||||
{item.nomeSistema}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-white/70">
|
|
||||||
{item.totalAcessos.toLocaleString('pt-BR')}{' '}
|
|
||||||
acessos
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
return (
|
||||||
<motion.div
|
<motion.div
|
||||||
className="ml-4 flex flex-col items-end"
|
key={index}
|
||||||
initial={{ scale: 0 }}
|
className={`flex items-center p-4 md:p-5 rounded-xl backdrop-blur-sm border border-white/20 ${
|
||||||
whileInView={{ scale: 1 }}
|
isMedal
|
||||||
|
? 'bg-white/15'
|
||||||
|
: 'bg-white/10 hover:bg-white/15'
|
||||||
|
} transition-all`}
|
||||||
|
initial={{ x: 50, opacity: 0 }}
|
||||||
|
whileInView={{ x: 0, opacity: 1 }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
transition={{
|
transition={{
|
||||||
type: 'spring',
|
duration: 0.5,
|
||||||
delay: index * 0.1 + 0.2,
|
delay: index * 0.1,
|
||||||
}}>
|
}}>
|
||||||
<p className="text-xl md:text-2xl font-bold text-yellow-300 mb-1">
|
<div
|
||||||
{(
|
className={`w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center font-bold text-base md:text-lg mr-4 ${medalColor}`}>
|
||||||
(item.totalAcessos /
|
{index === 0 && '🥇'}
|
||||||
(topItems[0]?.totalAcessos || 1)) *
|
{index === 1 && '🥈'}
|
||||||
100
|
{index === 2 && '🥉'}
|
||||||
).toFixed(0)}
|
{index >= 3 && `#${index + 1}`}
|
||||||
%
|
|
||||||
</p>
|
|
||||||
<div className="w-24 md:w-32 h-1.5 bg-white/20 rounded-full overflow-hidden">
|
|
||||||
<motion.div
|
|
||||||
className="h-full bg-yellow-400 rounded-full"
|
|
||||||
initial={{ width: 0 }}
|
|
||||||
whileInView={{
|
|
||||||
width: `${
|
|
||||||
(item.totalAcessos /
|
|
||||||
(topItems[0]?.totalAcessos || 1)) *
|
|
||||||
100
|
|
||||||
}%`,
|
|
||||||
}}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
transition={{
|
|
||||||
duration: 1,
|
|
||||||
delay: index * 0.1 + 0.3,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-base md:text-lg font-semibold truncate">
|
||||||
|
{item.nomeSistema}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-white/70">
|
||||||
|
{item.totalAcessos.toLocaleString('pt-BR')}{' '}
|
||||||
|
acessos
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
className="ml-4 flex flex-col items-end"
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
whileInView={{ scale: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{
|
||||||
|
type: 'spring',
|
||||||
|
delay: index * 0.1 + 0.2,
|
||||||
|
}}>
|
||||||
|
<p className="text-xl md:text-2xl font-bold text-yellow-300 mb-1">
|
||||||
|
{(
|
||||||
|
(item.totalAcessos /
|
||||||
|
(topItems[0]?.totalAcessos || 1)) *
|
||||||
|
100
|
||||||
|
).toFixed(0)}
|
||||||
|
%
|
||||||
|
</p>
|
||||||
|
<div className="w-24 md:w-32 h-1.5 bg-white/20 rounded-full overflow-hidden">
|
||||||
|
<motion.div
|
||||||
|
className="h-full bg-yellow-400 rounded-full"
|
||||||
|
initial={{ width: 0 }}
|
||||||
|
whileInView={{
|
||||||
|
width: `${
|
||||||
|
(item.totalAcessos /
|
||||||
|
(topItems[0]?.totalAcessos || 1)) *
|
||||||
|
100
|
||||||
|
}%`,
|
||||||
|
}}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{
|
||||||
|
duration: 1,
|
||||||
|
delay: index * 0.1 + 0.3,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</motion.div>
|
);
|
||||||
);
|
})}
|
||||||
})}
|
</div>
|
||||||
|
|
||||||
|
{/* Indicador de progresso */}
|
||||||
|
<motion.div
|
||||||
|
className="pt-4"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
whileInView={{ opacity: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.8 }}>
|
||||||
|
<div className="flex flex-col items-center gap-2">
|
||||||
|
<div className="text-xs text-blue-200 font-medium">
|
||||||
|
Próxima análise
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{[...Array(3)].map((_, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
className="h-1.5 w-1.5 rounded-full bg-white/60"
|
||||||
|
animate={{
|
||||||
|
opacity: [0.3, 1, 0.3],
|
||||||
|
scale: [1, 1.2, 1],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 1.5,
|
||||||
|
repeat: Infinity,
|
||||||
|
delay: i * 0.2,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</StorySlide>
|
</StorySlide>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
<StorySlide className="bg-linear-to-br from-slate-50 to-blue-50">
|
<StorySlide className="bg-linear-to-br from-slate-50 to-blue-50">
|
||||||
<div className="h-full flex flex-col md:flex-row items-center justify-center px-6 gap-12 py-12">
|
<div className="h-full flex flex-col md:flex-row items-center justify-center px-6 gap-12 py-12">
|
||||||
<div className="space-y-8 w-full md:w-1/2 text-center md:text-left">
|
<div className="space-y-8 w-full md:w-1/2 text-center md:text-left">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue