Merge branch 'main' of https://github.com/PoeStack/poestack-sage

src/echo-app/src/renderer/src/assets/app.css

@@ -23,7 +23,7 @@
     --input: 218 50% 16.8%;
 
     --primary: 218 100% 56%;
-    --primary-foreground: 218 10% 5.6000000000000005%;
+    --primary-foreground: 218 10% 97.8%;
 
     --secondary: 218 50% 16.8%;
     --secondary-foreground: 218 10% 97.8%;
@@ -90,4 +90,8 @@
   display: none;
 }
 
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
 .bg-gradient { background: var(--gradient) }

src/echo-plugins/networth-plugin/package.json

@@ -23,7 +23,7 @@
     "@libsql/client": "^0.4.0-pre.2",
     "@react-rxjs/core": "^0.10.7",
     "@react-rxjs/utils": "^0.9.7",
-    "@tanstack/react-table": "^8.10.7",
+    "@tanstack/react-table": "^8.11.2",
     "dayjs": "1.11.10",
     "drizzle-orm": "^0.29.0",
     "echo-common": "file:../../echo-common",

src/echo-plugins/networth-plugin/src/components/Cards/IncomeSummaryCard.tsx

@@ -2,45 +2,54 @@ import { Button, Card } from 'echo-common/components-v1'
 import { observer } from 'mobx-react'
 import { useStore } from '../../hooks/useStore'
 import { TrendingUp, XCircle } from 'lucide-react'
-import { convertToCurrency } from '../../utils/currency.utils'
 import dayjs from 'dayjs'
 import { useTranslation } from 'react-i18next'
+import CurrencyDisplay from '../CurrencyDisplay/CurrencyDisplay'
 
-function IncomeSummaryCard() {
+interface IncomeSummaryCardProps {
+  className?: string
+}
+
+const IncomeSummaryCard: React.FC<IncomeSummaryCardProps> = ({ className }) => {
   const { t } = useTranslation()
   const { accountStore, priceStore, settingStore } = useStore()
+  const activeProfile = accountStore.activeAccount.activeProfile
   const incomeStartDate =
-    dayjs(accountStore.activeAccount.activeProfile?.incomeResetAt).utc() ??
-    dayjs().subtract(1, 'hour').utc()
-  const latestNetWorthChange = convertToCurrency({
-    value: accountStore.activeAccount.activeProfile?.netWorthChange(incomeStartDate.valueOf()) ?? 0,
-    toCurrency: settingStore.currency,
-    divinePrice: priceStore.divinePrice
-  }).toFixed(2)
+    dayjs.utc(accountStore.activeAccount.activeProfile?.incomeResetAt) ??
+    dayjs.utc().subtract(1, 'hour')
 
   // TODO i18n for message
   const incomeTimeFrameMessage = incomeStartDate.fromNow()
 
   const handleResetIncome = () => {
-    accountStore.activeAccount.activeProfile?.setIncomeResetAt(dayjs().utc().valueOf())
+    accountStore.activeAccount.activeProfile?.setIncomeResetAt(dayjs.utc().valueOf())
   }
 
   return (
-    <Card className="min-w-[300px] grow">
-      <Card.Content className="p-2 py-1">
-        <div className="flex flex-row items-center justify-between min-h-[64px]">
+    <Card className={className}>
+      <Card.Content className="p-3 py-0">
+        <div className="flex flex-row items-center justify-between min-h-[60px]">
           <div className="flex flex-row items-center justify-center">
             <TrendingUp className="w-6 h-6" />
           </div>
-          <div className="flex flex-row items-center justify-center gap-2">
-            <span>{`${latestNetWorthChange} ${settingStore.activeCurrency.short} / hr`}</span>
+          <div className="flex flex-row items-center justify-center gap-1">
+            <span className="flex flex-row items-center justify-center gap-1">
+              <CurrencyDisplay
+                value={activeProfile?.income}
+                valueShort={false}
+                toCurrency={settingStore.currency}
+                divinePrice={priceStore.divinePrice}
+                iconHeight={1.5}
+              />
+              {'/ hr'}
+            </span>
             <Button size="icon" variant="ghost" onClick={handleResetIncome}>
               <XCircle className="w-4 h-4" />
             </Button>
           </div>
         </div>
       </Card.Content>
-      <Card.Footer className="border-t p-3">
+      <Card.Footer className="border-t p-3 py-2">
         <div className="text-sm flex flex-row grow items-center justify-between">
           <span>{t('label.income')}</span>
           <span>{`Since ${incomeTimeFrameMessage}`}</span>

src/echo-plugins/networth-plugin/src/components/Cards/ItemTableCard.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { Accordion, Card } from 'echo-common/components-v1'
+import { observer } from 'mobx-react'
+import { ListIcon } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import ItemTableContainer from '../ItemTable/ItemTableContainer'
+
+interface ItemTableCardProps {
+  className?: string
+}
+
+const ItemTableCard: React.FC<ItemTableCardProps> = ({ className }) => {
+  const { t } = useTranslation()
+
+  return (
+    <Accordion type="single" collapsible className={className}>
+      <Card className="w-full">
+        <Accordion.Item value="item-1" className="border-b-0">
+          <Accordion.Trigger className="pr-2 py-0">
+            <Card.Header className="flex flex-row justify-between items-center p-3 space-y-0">
+              <ListIcon className="h-5 w-5" />
+              <div className="pl-2 uppercase">{t('title.itemsCard')}</div>
+            </Card.Header>
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <Card.Content className="p-2 pt-4 border-t">
+              <ItemTableContainer />
+            </Card.Content>
+          </Accordion.Content>
+        </Accordion.Item>
+      </Card>
+    </Accordion>
+  )
+}
+
+export default observer(ItemTableCard)