chore: Refactoring all import directories to alias and all .js|.jsx renamed to be .ts|.tsx

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from '@/components';
+import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
+import { FormatNumber, TotalLine } from '@/components';
+
+/**
+ * Footer details of expense readonly details.
+ */
+export default function ExpenseDrawerFooter() {
+  const { expense } = useExpenseDrawerContext();
+
+  return (
+    <ExpenseDetailsFooterRoot>
+      <ExpenseTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'expense.details.subtotal'} />}
+          value={<FormatNumber value={expense.total_amount} />}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'expense.details.total'} />}
+          value={<FormatNumber value={expense.formatted_amount} />}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </ExpenseTotalLines>
+    </ExpenseDetailsFooterRoot>
+  );
+}
+
+export const ExpenseDetailsFooterRoot = styled.div``;
+
+export const ExpenseTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;