idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-26 02:09:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): link Dashboard stats to Releases page (#1281)

Browse source 
* feat(web): link stats to release table

- added Errored Pushes
- Made Recent Activity same color as Stats

* feat(releasetable): made links a separate row

https://i.imgur.com/ZoAOrXP.png

remove comment

* added LinkIcon to StatsItem

- Changed grid-cols to 2, as we now have 4 for narrow widths

* fix linting

* move some text modifier to parent element

* feat: add scale on hover with transition

deduplicated some classes

* adapt gap between StatsItems for mobile
remove border and title on stats divs

---------

Co-authored-by: Fabricio Silva <hi@fabricio.dev>
Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>
This commit is contained in:
soup 2023-12-25 14:03:29 +01:00 • committed by GitHub
parent 937d62fb82
commit 3b60365483
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 79 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

47
web/src/screens/dashboard/Stats.tsx
View file

@ -6,33 +6,49 @@
import { useQuery } from "@tanstack/react-query";
import { APIClient } from "@api/APIClient";
import { classNames } from "@utils";
import { useNavigate } from "react-router-dom";
import { LinkIcon } from "@heroicons/react/24/solid";
interface StatsItemProps {
name: string;
value?: number;
placeholder?: string;
onClick?: () => void;
}
const StatsItem = ({ name, placeholder, value }: StatsItemProps) => (
const StatsItem = ({ name, placeholder, value, onClick }: StatsItemProps) => (
<div
className="relative px-4 py-3 overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 border border-gray-150 dark:border-gray-775"
title="All time"
className="group relative px-4 py-3 cursor-pointer overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 hover:scale-110 hover:shadow-xl transition-all duration-200 ease-in-out"
onClick={onClick}
>
<dt>
<p className="pb-0.5 text-sm font-medium text-gray-500 truncate">{name}</p>
<div className="flex items-center text-sm font-medium text-gray-500 group-hover:dark:text-gray-475 group-hover:text-gray-600 transition-colors duration-200 ease-in-out">
<p className="pb-0.5 truncate">{name}</p>
<LinkIcon className="h-3 w-3 ml-2" aria-hidden="true" />
</div>
</dt>
<dd className="flex items-baseline">
<p className="text-3xl font-extrabold text-gray-900 dark:text-gray-200">{placeholder}</p>
</dd>
<dd className="flex items-baseline">
<p className="text-3xl font-extrabold text-gray-900 dark:text-gray-200">{value}</p>
</dd>
<div className="flex items-baseline text-3xl font-extrabold text-gray-900 dark:text-gray-200">
<dd>
<p>{placeholder}</p>
</dd>
<dd>
<p>{value}</p>
</dd>
</div>
</div>
);
export const Stats = () => {
const navigate = useNavigate();
const handleStatClick = (filterType: string) => {
if (filterType) {
navigate(`/releases?filter=${filterType}`);
} else {
navigate("/releases");
}
};
const { isLoading, data } = useQuery({
queryKey: ["dash_release_stats"],
queryFn: APIClient.release.stats,
@ -45,11 +61,12 @@ export const Stats = () => {
Stats
</h1>
<dl className={classNames("grid grid-cols-1 gap-5 mt-5 sm:grid-cols-2 lg:grid-cols-3", isLoading ? "animate-pulse" : "")}>
<StatsItem name="Filtered Releases" value={data?.filtered_count ?? 0} />
<dl className={classNames("grid grid-cols-2 gap-2 sm:gap-5 mt-5 sm:grid-cols-2 lg:grid-cols-4", isLoading ? "animate-pulse" : "")}>
<StatsItem name="Filtered Releases" onClick={() => handleStatClick("")} value={data?.filtered_count ?? 0} />
{/* <StatsItem name="Filter Rejected Releases" stat={data?.filter_rejected_count} /> */}
<StatsItem name="Rejected Pushes" value={data?.push_rejected_count ?? 0 } />
<StatsItem name="Approved Pushes" value={data?.push_approved_count ?? 0} />
<StatsItem name="Approved Pushes" onClick={() => handleStatClick("PUSH_APPROVED")} value={data?.push_approved_count ?? 0} />
<StatsItem name="Rejected Pushes" onClick={() => handleStatClick("PUSH_REJECTED")} value={data?.push_rejected_count ?? 0 } />
<StatsItem name="Errored Pushes" onClick={() => handleStatClick("PUSH_ERROR")} value={data?.push_error_count ?? 0} />
</dl>
</div>
);