ManInDark/HabitTrove
1
0
Fork 0
mirror of https://github.com/ManInDark/HabitTrove.git synced 2026-01-20 22:24:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

show total coins in header, add pagination on coin transaction (#24)

Browse Source
This commit is contained in:
Doh
2025-01-04 18:35:14 -05:00
committed by GitHub
parent fadf33e8df
commit 86a517a859
4 changed files with 137 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
CHANGELOG.md
View File

@@ -1,5 +1,12 @@
# Changelog
## Version 0.1.12
### Added
- show total coins in header
- pagination for coin transactions history
## Version 0.1.11
### Added

82
components/CoinsManager.tsx
View File

@@ -18,6 +18,8 @@ export default function CoinsManager() {
const [settings] = useAtom(settingsAtom)
const DEFAULT_AMOUNT = '0'
const [amount, setAmount] = useState(DEFAULT_AMOUNT)
const [pageSize, setPageSize] = useState(50)
const [currentPage, setCurrentPage] = useState(1)
const handleAddRemoveCoins = async () => {
const numAmount = Number(amount)
@@ -143,15 +145,32 @@ export default function CoinsManager() {
<Card className="md:col-span-2">
<CardHeader>
<CardTitle className="flex justify-between items-center">
<span>Transaction History</span>
<span className="text-sm font-normal text-muted-foreground">
Total: {transactions.length} transactions
</span>
</CardTitle>
<CardTitle>Transaction History</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex justify-between items-center mb-4">
<div className="flex items-center gap-2">
<span className="text-sm text-muted-foreground">Show:</span>
<select
className="border rounded p-1"
value={pageSize}
onChange={(e) => {
setPageSize(Number(e.target.value))
setCurrentPage(1) // Reset to first page when changing page size
}}
>
<option value={50}>50</option>
<option value={100}>100</option>
<option value={500}>500</option>
</select>
<span className="text-sm text-muted-foreground">entries</span>
</div>
<div className="text-sm text-muted-foreground">
Showing {Math.min((currentPage - 1) * pageSize + 1, transactions.length)} to {Math.min(currentPage * pageSize, transactions.length)} of {transactions.length} entries
</div>
</div>
{transactions.length === 0 ? (
<EmptyState
icon={History}
@@ -159,7 +178,10 @@ export default function CoinsManager() {
description="Your transaction history will appear here once you start earning or spending coins"
/>
) : (
transactions.map((transaction) => {
<>
{transactions
.slice((currentPage - 1) * pageSize, currentPage * pageSize)
.map((transaction) => {
const getBadgeStyles = () => {
switch (transaction.type) {
case 'HABIT_COMPLETION':
@@ -213,7 +235,51 @@ export default function CoinsManager() {
</span>
</div>
)
})
})}
<div className="flex justify-center items-center gap-4 mt-6">
<div className="flex items-center gap-2">
<Button
variant="outline"
size="sm"
onClick={() => setCurrentPage(1)}
disabled={currentPage === 1}
>
«
</Button>
<Button
variant="outline"
size="sm"
onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
disabled={currentPage === 1}
>
‹
</Button>
<div className="flex items-center gap-1 px-4 py-2 rounded-md bg-muted">
<span className="text-sm font-medium">Page</span>
<span className="text-sm font-bold">{currentPage}</span>
<span className="text-sm font-medium">of</span>
<span className="text-sm font-bold">{Math.ceil(transactions.length / pageSize)}</span>
</div>
<Button
variant="outline"
size="sm"
onClick={() => setCurrentPage(prev => Math.min(Math.ceil(transactions.length / pageSize), prev + 1))}
disabled={currentPage >= Math.ceil(transactions.length / pageSize)}
>
›
</Button>
<Button
variant="outline"
size="sm"
onClick={() => setCurrentPage(Math.ceil(transactions.length / pageSize))}
disabled={currentPage >= Math.ceil(transactions.length / pageSize)}
>
»
</Button>
</div>
</div>
</>
)}
</div>
</CardContent>

11
components/Header.tsx
View File

@@ -2,8 +2,8 @@
import { useState } from 'react'
import { useAtom } from 'jotai'
import { settingsAtom } from '@/lib/atoms'
import { Bell, Menu, Settings, User, Info } from 'lucide-react'
import { settingsAtom, coinsAtom } from '@/lib/atoms'
import { Bell, Menu, Settings, User, Info, Coins } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Logo } from '@/components/Logo'
import {
@@ -23,6 +23,7 @@ interface HeaderProps {
export default function Header({ className }: HeaderProps) {
const [showAbout, setShowAbout] = useState(false)
const [settings] = useAtom(settingsAtom)
const [coins] = useAtom(coinsAtom)
return (
<>
<header className={`border-b bg-white dark:bg-gray-800 shadow-sm ${className || ''}`}>
@@ -32,6 +33,12 @@ export default function Header({ className }: HeaderProps) {
<Logo />
</Link>
<div className="flex items-center gap-2">
<Link href="/coins" className="flex items-center gap-1 px-2 py-1 bg-amber-100 hover:bg-amber-200 dark:bg-amber-900 dark:hover:bg-amber-800 rounded-full transition-colors">
<Coins className="text-amber-500 dark:text-amber-300" />
<span className="text-amber-600 dark:text-amber-400 font-medium">
{coins.balance}
</span>
</Link>
<Button variant="ghost" size="icon" aria-label="Notifications">
<Bell className="h-5 w-5" />
</Button>

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "habittrove",
"version": "0.1.11",
"version": "0.1.12",
"private": true,
"scripts": {
"dev": "next dev --turbopack",