add function for user

- create house - edit house - delete house - list all member for active house
2026-02-08 13:43:14 +07:00
parent 42435faa7f
commit 1d3e79c546
40 changed files with 1006 additions and 170 deletions
--- a/src/components/house/current-user-house-list.tsx
+++ b/src/components/house/current-user-house-list.tsx
@@ -0,0 +1,132 @@
+import { authClient } from '@lib/auth-client';
+import { cn } from '@lib/utils';
+import { m } from '@paraglide/messages';
+import { CheckIcon, WarehouseIcon } from '@phosphor-icons/react';
+import { housesQueries } from '@service/queries';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@ui/card';
+import parse from 'html-react-parser';
+import { toast } from 'sonner';
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from '../ui/item';
+import { ScrollArea, ScrollBar } from '../ui/scroll-area';
+import { Skeleton } from '../ui/skeleton';
+import CreateNewHouse from './create-house-dialog';
+
+type CurrentUserHouseListProps = {
+  activeHouse: ReturnType<typeof authClient.useActiveOrganization>['data'];
+};
+
+const CurrentUserHouseList = ({ activeHouse }: CurrentUserHouseListProps) => {
+  const { data: houses } = useQuery(housesQueries.currentUser());
+
+  const activeHouseAction = async ({
+    id,
+    slug,
+  }: {
+    id: string;
+    slug: string;
+  }) => {
+    const { data, error } = await authClient.organization.setActive({
+      organizationId: id,
+      organizationSlug: slug,
+    });
+
+    if (error) {
+      toast.error(error.message, { richColors: true });
+    }
+
+    if (data) {
+      toast.success(
+        parse(
+          m.houses_user_page_message_active_house_success({ house: data.name }),
+        ),
+        {
+          richColors: true,
+        },
+      );
+    }
+  };
+
+  if (!activeHouse || !houses) {
+    return <Skeleton className="col-span-2 h-80 w-full rounded-xl" />;
+  }
+
+  return (
+    <Card className="col-span-1 lg:col-span-3">
+      <CardHeader>
+        <CardTitle className="text-xl flex items-center gap-2">
+          <WarehouseIcon size={24} />
+          {m.houses_page_ui_title()}
+          <CreateNewHouse isPersonal className="ml-auto" />
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className="w-full rounded-md border whitespace-nowrap bg-gray-50">
+          <div className="flex w-max p-4 space-x-4">
+            {houses.map((house) => {
+              const isActive = house.id === activeHouse.id;
+
+              return (
+                <Item
+                  variant="outline"
+                  className={cn('w-100 bg-white', {
+                    'bg-linear-to-tr from-white/2 to-green-200': isActive,
+                  })}
+                  key={house.id}
+                >
+                  <ItemContent>
+                    <ItemTitle
+                      className="font-bold text-sm text-(--house-color)"
+                      style={
+                        { '--house-color': house.color } as React.CSSProperties
+                      }
+                    >
+                      {house.name}
+                    </ItemTitle>
+                    <ItemDescription>
+                      <strong>{m.houses_page_ui_table_header_members()}</strong>
+                      :&nbsp;
+                      {house._count.members}
+                    </ItemDescription>
+                  </ItemContent>
+                  <ItemActions>
+                    <Button
+                      variant="outline"
+                      data-active={isActive}
+                      disabled={isActive}
+                      className={cn('rounded-full cursor-pointer', {
+                        'disabled:bg-green-500! disabled:border-green-500!':
+                          isActive,
+                        'bg-amber-50! text-amber-600! border-amber-600!':
+                          !isActive,
+                      })}
+                      size="icon-lg"
+                      onClick={() =>
+                        activeHouseAction({ id: house.id, slug: house.slug })
+                      }
+                    >
+                      <CheckIcon weight="bold" />
+                      <span className="sr-only">
+                        {m.houses_page_house_active_btn()}
+                      </span>
+                    </Button>
+                  </ItemActions>
+                </Item>
+              );
+            })}
+          </div>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default CurrentUserHouseList;