diff --git a/lib/stories/layout/tile/Tile.stories.ts b/lib/stories/layout/tile/Tile.stories.tsx similarity index 100% rename from lib/stories/layout/tile/Tile.stories.ts rename to lib/stories/layout/tile/Tile.stories.tsx diff --git a/tasks/components/layout/OrganizationDetails.tsx b/tasks/components/layout/OrganizationDetails.tsx index 1d4975c05..13ecd9f8f 100644 --- a/tasks/components/layout/OrganizationDetails.tsx +++ b/tasks/components/layout/OrganizationDetails.tsx @@ -5,6 +5,7 @@ import { useContext, useEffect, useState } from 'react' import { Button } from '@helpwave/common/components/Button' import { ConfirmDialog } from '@helpwave/common/components/modals/ConfirmDialog' import { Span } from '@helpwave/common/components/Span' +import Link from 'next/link' import { useInviteMemberMutation, useOrganizationCreateMutation, @@ -14,6 +15,8 @@ import { } from '@helpwave/api-services/mutations/users/organization_mutations' import type { OrganizationMinimalDTO } from '@helpwave/api-services/types/users/organizations' import { useAuth } from '@helpwave/api-services/authentication/useAuth' +import { DescriptionWithAction } from '@helpwave/common/components/DescriptionWithAction' +import { usePropertyListQuery } from '@helpwave/api-services/mutations/properties/property_mutations' import { emptyOrganizationForm, OrganizationForm, type OrganizationFormType } from '../OrganizationForm' import { OrganizationMemberList } from '../OrganizationMemberList' import { ColumnTitle } from '../ColumnTitle' @@ -28,7 +31,10 @@ type OrganizationDetailTranslation = { deleteConfirmText: string, deleteOrganization: string, create: string, - update: string + update: string, + properties: string, + propertiesDescription: string, + manageProperties: string } const defaultOrganizationDetailTranslations: Record<Languages, OrganizationDetailTranslation> = { @@ -39,7 +45,10 @@ const defaultOrganizationDetailTranslations: Record<Languages, OrganizationDetai deleteConfirmText: 'Do you really want to delete this organization?', deleteOrganization: 'Delete Organization', create: 'Create', - update: 'Update' + update: 'Update', + properties: 'Properties', + propertiesDescription: 'With properties you can add custom fields to different entities you patients or beds.', + manageProperties: 'Manage Properties' }, de: { organizationDetail: 'Organisations Details', @@ -48,7 +57,10 @@ const defaultOrganizationDetailTranslations: Record<Languages, OrganizationDetai deleteConfirmText: 'Wollen Sie wirklich diese Organisation löschen?', deleteOrganization: 'Organisation löschen', create: 'Erstellen', - update: 'Ändern' + update: 'Ändern', + properties: 'Eigenschaften', + propertiesDescription: 'Mit Eigenschaften können Sie verschiedenen Entitäten wie Patienten oder Betten benutzerdefinierte Felder hinzufügen.', + manageProperties: 'Eigenschaften Verwalten' } } @@ -72,6 +84,7 @@ export const OrganizationDetail = ({ const { signOut } = useAuth() const isCreatingNewOrganization = contextState.organizationId === '' const { data } = useOrganizationQuery(contextState.organizationId) + const { data: propertyData } = usePropertyListQuery() const [isShowingConfirmDialog, setIsShowingConfirmDialog] = useState(false) const [isShowingReSignInDialog, setIsShowingReSignInDialog] = useState<string>() const [organizationForm, setOrganizationForm] = useState<OrganizationFormType>(emptyOrganizationForm) @@ -192,6 +205,20 @@ export const OrganizationDetail = ({ invitations={isCreatingNewOrganization ? organizationInvites : undefined} organizationId={contextState.organizationId} /> + {propertyData && !isCreatingNewOrganization && ( + <DescriptionWithAction + title={`${translation.properties} (${propertyData.length})`} + description={translation.propertiesDescription} + trailing={( + <div className={tw('flex flex-row justify-end items-center')}> + <Link href="/properties"> + <Button className="h-fit">{translation.manageProperties}</Button> + </Link> + </div> + )} + leadingIcon="label" + /> + )} <div className={tw('flex flex-row justify-end')}> <Button className={tw('w-auto')}