Fix #75 CSV format documentation

afadil · Sep 10, 2024 · 0f29c65 · 0f29c65
1 parent 7b40a26
commit 0f29c65
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 19 deletions.
diff --git a/src/pages/activity/import/activity-import-page.tsx b/src/pages/activity/import/activity-import-page.tsx
@@ -11,7 +11,7 @@ import ImportedActivitiesTable from './imported-activity-table';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { createActivities } from '@/commands/activity';
 import { syncHistoryQuotes } from '@/commands/symbol';
-import { ImportHelpHoverCard } from './import-help';
+import { ImportHelpPopover } from './import-help';
 
 const ActivityImportPage = () => {
   const navigate = useNavigate();
@@ -86,7 +86,7 @@ const ActivityImportPage = () => {
   return (
     <div className="flex flex-col p-6">
       <ApplicationHeader heading="Import Activities">
-        <ImportHelpHoverCard />
+        <ImportHelpPopover />
       </ApplicationHeader>
       <Separator className="my-6" />
       <ErrorBoundary>

diff --git a/src/pages/activity/import/import-help.tsx b/src/pages/activity/import/import-help.tsx
@@ -1,27 +1,28 @@
 import { Icons } from '@/components/icons';
 
-import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Button } from '@/components/ui/button';
 
-export function ImportHelpHoverCard() {
+export function ImportHelpPopover() {
   return (
-    <HoverCard>
-      <HoverCardTrigger asChild>
+    <Popover>
+      <PopoverTrigger asChild>
         <Button type="button" variant="link" className="flex items-center">
           <Icons.HelpCircle className="mr-1 h-5 w-5" />
-          How to Import CSV
+          How to Import CSV?
         </Button>
-      </HoverCardTrigger>
-      <HoverCardContent className="m-4 w-full p-6 text-sm">
+      </PopoverTrigger>
+      <PopoverContent className="m-4 w-full p-6 text-sm">
         <h4 className="text-lg font-semibold">Importing Account Activities</h4>
-        <p className="mt-2 ">
+        <p className="mt-2">
           Follow these steps to import your account activities from a CSV file:
         </p>
-        <ul className="mt-2 list-inside list-disc space-y-1 ">
+        <ul className="mt-2 list-inside list-disc space-y-1">
           <li>Ensure your CSV file is in the correct format.</li>
           <li>
-            Columns should include Date, Symbol, Quantity, Activity Type, Unit Price, Currency, and
-            Fee.
+            Columns should include <strong>date</strong>, <strong>symbol</strong>,{' '}
+            <strong>quantity</strong>, <strong>activityType</strong>, <strong>unitPrice</strong>,{' '}
+            <strong>currency</strong>, <strong>fee</strong>
           </li>
           <li>Click the 'Import' button and select your CSV file.</li>
           <li>Review the imported activities before confirming.</li>
@@ -35,10 +36,10 @@ export function ImportHelpHoverCard() {
             <li>INTEREST</li>
             <li>DEPOSIT</li>
             <li>WITHDRAWAL</li>
-            <li>TRANSFER_IN</li>
-            <li>TRANSFER_OUT</li>
-            <li>CONVERSION_IN</li>
-            <li>CONVERSION_OUT</li>
+            <li>TRANSFER_IN (same as deposit)</li>
+            <li>TRANSFER_OUT (same as withdrawal)</li>
+            <li>CONVERSION_IN (same as deposit)</li>
+            <li>CONVERSION_OUT (same as withdrawal)</li>
             <li>FEE</li>
             <li>TAX</li>
           </ul>
@@ -52,8 +53,14 @@ export function ImportHelpHoverCard() {
           2023-12-15T15:02:36.329Z,MSFT,30,BUY,368.6046511627907,USD,0
           <br />
           2023-08-11T14:55:30.863Z,$CASH-USD,600.03,DEPOSIT,1,USD,0
+          <br />
+          2023-06-05T09:15:22.456Z,$CASH-USD,1,INTEREST,180.5,USD,0
+          <br />
+          2023-05-18T13:45:30.789Z,GOOGL,5,SELL,2500.75,USD,10
+          <br />
+          2023-04-02T11:20:15.321Z,$CASH-USD,1000,WITHDRAWAL,1,USD,0
         </pre>
-      </HoverCardContent>
-    </HoverCard>
+      </PopoverContent>
+    </Popover>
   );
 }