fix: tax rates API and UI improvements

- Add @ToNumber() decorator to rate field for proper validation
- Fix getTaxRates to return { data: taxRates } response
- Fix useTaxRate URL typo and response handling
- Fix activate/inactivate endpoint methods and paths
- Apply TEXT_MUTED class to description and compound tax
- Add dark mode support for rate number display

packages/webapp/src/containers/TaxRates/containers/_utils.tsx

@@ -1,8 +1,8 @@
 // @ts-nocheck
 import React from 'react';
-import { Intent, Tag } from '@blueprintjs/core';
+import { Intent, Tag, Classes } from '@blueprintjs/core';
 import { Align } from '@/constants';
-import styled from 'styled-components';
+import clsx from 'classnames';
 
 const codeAccessor = (taxRate) => {
   return (
@@ -28,13 +28,17 @@ const nameAccessor = (taxRate) => {
   return (
     <>
       <span>{taxRate.name}</span>
-      {!!taxRate.is_compound && <CompoundText>(Compound tax)</CompoundText>}
+      {!!taxRate.is_compound && (
+        <span className={clsx(Classes.TEXT_MUTED)}>(Compound tax)</span>
+      )}
     </>
   );
 };
 
 const DescriptionAccessor = (taxRate) => {
-  return <DescriptionText>{taxRate.description}</DescriptionText>;
+  return (
+    <span className={clsx(Classes.TEXT_MUTED)}>{taxRate.description}</span>
+  );
 };
 
 /**
@@ -72,11 +76,3 @@ export const useTaxRatesTableColumns = () => {
   ];
 };
 
-const CompoundText = styled('span')`
-  color: #738091;
-  margin-left: 5px;
-`;
-
-const DescriptionText = styled('span')`
-  color: #5f6b7c;
-`;

packages/webapp/src/containers/TaxRates/drawers/TaxRateDetailsDrawer/TaxRateDetailsContentDetails.tsx

@@ -74,9 +74,13 @@ const TaxRateHeader = styled(`div`)`
 const TaxRateAmount = styled('div')`
   line-height: 1;
   font-size: 30px;
-  color: #565b71;
   font-weight: 600;
   display: inline-block;
+  color: var(--x-color-amount-text, #565b71);
+
+  .bp4-dark & {
+    color: rgba(255, 255, 255, 0.9);
+  }
 `;
 
 const TaxRateActiveTag = styled(Tag)`

packages/webapp/src/hooks/query/taxRates.ts

@@ -37,10 +37,10 @@ export function useTaxRate(taxRateId: string, props) {
     [QUERY_TYPES.TAX_RATES, taxRateId],
     {
       method: 'get',
-      url: `tax-rates/${taxRateId}}`,
+      url: `tax-rates/${taxRateId}`,
     },
     {
-      select: (res) => res.data.data,
+      select: (res) => res.data,
       ...props,
     },
   );
@@ -106,7 +106,7 @@ export function useActivateTaxRate(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
-  return useMutation((id) => apiRequest.post(`tax-rates/${id}/active`), {
+  return useMutation((id) => apiRequest.put(`tax-rates/${id}/activate`), {
     onSuccess: (res, id) => {
       commonInvalidateQueries(queryClient);
       queryClient.invalidateQueries([QUERY_TYPES.TAX_RATES, id]);
@@ -122,7 +122,7 @@ export function useInactivateTaxRate(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
-  return useMutation((id) => apiRequest.post(`tax-rates/${id}/inactive`), {
+  return useMutation((id) => apiRequest.put(`tax-rates/${id}/inactivate`), {
     onSuccess: (res, id) => {
       commonInvalidateQueries(queryClient);
       queryClient.invalidateQueries([QUERY_TYPES.TAX_RATES, id]);