[REPO REFACTOR]: changed to a better git repository structure with branches

src/pages/Balance.jsx

@@ -0,0 +1,44 @@
+import { useConfig } from '../hooks/useConfig';
+import { DataProvider } from '../context/DataContext';
+import { useDataContext } from '../hooks/useDataContext';
+
+import CustomContainer from '../components/CustomContainer';
+import ContentWrapper from '../components/ContentWrapper';
+import LoadingIcon from '../components/LoadingIcon';
+import BalanceReport from '../components/Balance/BalanceReport';
+
+const Balance = () => {
+  const { config, configLoading } = useConfig();
+
+  if (configLoading || !config) return <p className="text-center my-5"><LoadingIcon /></p>;
+
+  const reqConfig = {
+    baseUrl: config.apiConfig.baseUrl + "/v1/balance/with-totals"
+  };
+
+  return (
+    <DataProvider config={reqConfig}>
+      <BalanceContent />
+    </DataProvider>
+  );
+};
+
+const BalanceContent = () => {
+  const { data, dataLoading, dataError } = useDataContext();
+
+  if (dataLoading) return <p className="text-center my-5"><LoadingIcon /></p>;
+  if (dataError) return <p className="text-danger text-center my-5">{dataError}</p>;
+  if (!data || !data.id) return <p className="text-center my-5">No se encontró el balance.</p>;
+
+  return (
+    <CustomContainer>
+      <ContentWrapper>
+        <h1 className="section-title">Resumen del Balance</h1>
+        <hr className="section-divider" />
+        <BalanceReport balance={data} />
+      </ContentWrapper>
+    </CustomContainer>
+  );
+};
+
+export default Balance;