change: improve design systems

CHANGELOG.md

@@ -20,6 +20,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - N+1 queries in Notifications API (https://github.com/emoss08/Trenova/issues/196).
 
+## [0.0.3] - 2024-01-19
+
+### Added
+- Add `en-US` translation to `Google API page`.
+
+### Changed
+- Change `inter` font to `geist` font.
+- Change Admin Page Sidebar icons to Font Awesome DuoTone icons.
+
+### Fixed
+- Fix typo on General Ledger Account sub table component.
+
 ## [0.0.2] - 2024-01-18
 
 ### Changed

README.md

@@ -1,53 +1,42 @@
 <div align="center">
 
-<img src="https://github.com/emoss08/Trenova/assets/66630775/33f8def4-1b78-4a96-8b35-c6551d333ed0" alt="image" width="300" height="auto">
+<img src="https://github.com/emoss08/Trenova/assets/66630775/33f8def4-1b78-4a96-8b35-c6551d333ed0" alt="Trenova Suite" width="300" height="auto">
 <h1 align="center"><b>Trenova Suite</b></h1>
 </div>
 <div align="center">
 
-A comprehensive suite of applications tailored for the transportation and logistics sector. Enhancing your business
-performance and operational efficiency.
+**A cutting-edge suite of applications designed specifically for enhancing the efficiency and performance of businesses in the transportation and logistics sector.**
 
-[**Explore the docs »**](https://github.com/emoss08/Trenova/wiki)
+[**Explore the Documentation**](https://github.com/emoss08/Trenova/wiki)
 
-[**Application Change Announcement**](https://github.com/emoss08/Trenova/blob/main/docs/update-announcement.md)
+[**View Application Change Announcements**](https://github.com/emoss08/Trenova/blob/main/docs/update-announcement.md)
 
-[**Trenova Beam: Revolutionizing Logistics with Specialized LLM Technology
-**](https://github.com/emoss08/Trenova/blob/main/beam.md)
+[**Discover Trenova Beam: Revolutionizing Logistics with Specialized LLM Technology**](https://github.com/emoss08/Trenova/blob/main/beam.md)
 </div>
 
-#### Disclaimers:
-
-Please note that Trenova Suite is currently in its development phase. The version available at this time is a prototype
-and is not intended for production deployment. Our team is dedicated to the ongoing development of this project, and we
-will consistently roll out new features and updates.
+### Disclaimers:
 
+- **Development Phase**: Trenova Suite is currently under development. The current version is a prototype and is not suitable for production deployment.
+- **Active Development**: Our team is continuously working to enhance Trenova Suite with new features and updates.
 
 ## Introduction
 
-**Trenova Suite** emerges as a sophisticated web solution, meticulously crafted to meet the complex demands of the modern
-transportation and logistics industry. Built on the robust Django framework and enhanced with the latest frontend
-technologies, Trenova offers unparalleled flexibility and dynamism, tailoring itself to your unique operational needs and
-enhancing your online presence.
+**Trenova Suite** represents an innovative web solution engineered for the complex needs of the modern transportation and logistics industry. Leveraging the robust Django framework and integrating cutting-edge frontend technologies, Trenova Suite offers unmatched adaptability and efficiency, customizing itself to meet the specific operational requirements of your business.
 
 ## Key Highlights
 
-* **Modular Architecture**: Designed to scale with your business, Trenova provides a competitive edge in an ever-changing
-  market.
-* **More Than Software**: A strategic partner in your enterprise's journey towards growth and success, equipped with a
-  plethora of features to revolutionize your workflows.
+- **Modular Design**: Trenova Suite is built to grow with your business, providing a sustainable competitive advantage in a dynamic market.
+- **Beyond Software**: A strategic ally in your company's path to expansion and achievement, offering a wide range of features to transform your operational processes.
 
-## Trenova: A Comprehensive Overview
+## Comprehensive Overview of Trenova
 
-Trenova integrates the power of Machine Learning, specifically in predictive analytics and data-driven decision-making. It
-automates over 20 specialized tasks, increasing operational agility and reducing manual workload.
+Trenova Suite incorporates advanced Machine Learning capabilities, focusing on predictive analytics and data-driven decision-making. It automates over 20 specialized tasks, thereby enhancing operational efficiency and reducing manual efforts.
 
-## Vision and Purpose
+## Vision and Mission
 
-Our goal is to empower your business with a system that manages operational complexities, freeing you to focus on
-strategic goals without the need for additional manpower or resources.
+Our mission is to equip businesses with a sophisticated system that simplifies operational complexities, enabling them to concentrate on strategic objectives without the need for additional manpower or resources.
 
-## Features
+## Core Features
 
 - Order Management System
 - Billing & Invoicing System
@@ -60,41 +49,12 @@ strategic goals without the need for additional manpower or resources.
 - Equipment Management System
 - Custom Reporting System
 - Automated Task Management System
-- AI-powered Natural Language Processing
-  Tool - [Read More](https://github.com/Trenova-Application/Trenova/blob/main/beam.md)
+- AI-powered Natural Language Processing Tool - [Learn More](https://github.com/Trenova-Application/Trenova/blob/main/beam.md)
 - Plugin System
-- ... and more.
-
-[Discover Trenova's future plans in our roadmap](https://github.com/Trenova-Application/Trenova/blob/main/roadmap.md).
-
-## Monorepo Structure
-
-### Frontend Technologies
-
-- [React](https://reactjs.org/)
-- [Tailwind](https://tailwindcss.com/)
-- [React Hook Form](https://react-hook-form.com/)
-- [React Query](https://react-query.tanstack.com/)
-- [React Router](https://reactrouter.com/)
-
-### Backend Technologies
+- ... and many more.
 
-- [Python](https://www.python.org/)
-- [Django](https://wzww.djangoproject.com/)
-- [Django Rest Framework](https://www.django-rest-framework.org/)
-- [GraphQL](https://graphql.org/)
-- [PostgreSQL](https://www.postgresql.org/)
-- [Apache Kafka](https://kafka.apache.org/)
-- [Debezium](https://debezium.io/)
-- [Redis](https://redis.io/)
-- [Celery](https://docs.celeryq.dev/en/stable/getting-started/introduction.html)
-- [RabbitMQ](https://www.rabbitmq.com/)
-- [Apache Arrow](https://arrow.apache.org/)
+[Explore Trenova's Future Development Roadmap](https://github.com/Trenova-Application/Trenova/blob/main/roadmap.md).
 
-### UI/UX Resources
+## Early Preview
 
-- [Radix Icons](https://www.radix-ui.com/icons)
-- [Lucide React](https://lucide.dev/icons/)
-- [Tailwind UI](https://tailwindui.com/)
-- [Shadcn](https://ui.shadcn.com/)
-- [Vercel Avatars](https://github.com/vercel/avatar)
+[Access an Early Design Prototype of Trenova Suite](https://www.figma.com/file/oyjvhbWirBvC2P4NLLeKvk/Trenova?type=design&node-id=0%3A1&mode=design&t=HFQWbOrdoRipGQf7-1)

client/package.json

@@ -10,7 +10,6 @@
     "lint": "eslint --fix --ext .ts,.tsx ."
   },
   "dependencies": {
-    "@fontsource/inter": "^5.0.16",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/pro-duotone-svg-icons": "^6.5.1",
@@ -35,7 +34,6 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tanstack/react-query": "^5.17.10",
-    "@tanstack/react-query-devtools": "^5.17.10",
     "@tanstack/react-table": "^8.11.6",
     "@use-gesture/react": "^10.3.0",
     "@vitejs/plugin-react": "^4.2.1",
@@ -51,6 +49,7 @@
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-http-backend": "^2.4.2",
     "lucide-react": "^0.309.0",
+    "non.geist": "^1.0.2",
     "path-to-regexp": "^6.2.1",
     "react": "^18.2.0",
     "react-big-calendar": "^1.8.6",
@@ -84,6 +83,7 @@
     "@types/howler": "^2.2.11",
     "@types/node": "^20.11.1",
     "@types/react": "^18.2.47",
+    "@tanstack/react-query-devtools": "^5.17.10",
     "@types/react-datepicker": "^4.19.5",
     "@types/react-dom": "^18.2.18",
     "@types/react-lazy-load-image-component": "^1.6.3",

client/src/App.tsx

@@ -24,10 +24,10 @@ import { useVerifyToken } from "@/hooks/useVerifyToken";
 import { ENVIRONMENT, THEME_KEY } from "@/lib/constants";
 import { ProtectedRoutes } from "@/routing/ProtectedRoutes";
 import { useAuthStore } from "@/stores/AuthStore";
-import "@fontsource/inter"; // Defaults to weight 400
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { memo, Suspense } from "react";
+import "non.geist";
+import { Suspense, memo } from "react";
 import "react-datepicker/dist/react-datepicker.css";
 import { BrowserRouter } from "react-router-dom";
 

client/src/assets/App.css

@@ -23,7 +23,7 @@
 
     * {
         @apply border-border;
-        font-family: "Inter", sans-serif;
+        font-family: 'Geist Variable';
     }
 
     body {
@@ -39,6 +39,8 @@
         --foreground: 240 10% 3.9%;
         --card: 0 0% 100%;
         --card-foreground: 240 10% 3.9%;
+        --alert: 240 4.8% 98%;
+        --alert-foreground: 240 5.9% 10%;
         --popover: 0 0% 100%;
         --popover-foreground: 240 10% 3.9%;
         --primary: 240 5.9% 10%;
@@ -64,6 +66,8 @@
         --foreground: 0 0% 98%;
         --card: 240 10% 3.9%;
         --card-foreground: 0 0% 98%;
+        --alert: 240 5.9% 10%;
+        --alert-foreground: 0 0% 98%;
         --popover: 240 10% 3.9%;
         --popover-foreground: 0 0% 98%;
         --primary: 0 0% 98%;
@@ -87,6 +91,8 @@
         --foreground: 210 40% 98%;
         --card: 222.2 84% 4.9%;
         --card-foreground: 210 40% 98%;
+        --alert: 210 100% 5%;
+        --alert-foreground: 210 40% 98%;
         --popover: 222.2 84% 4.9%;
         --popover-foreground: 210 40% 98%;
         --primary: 210 40% 98%;

client/src/components/admin-page/general-page.tsx

@@ -77,6 +77,7 @@ function OrganizationForm({ organization }: { organization: Organization }) {
   const onSubmit = (values: OrganizationFormValues) => {
     setIsSubmitting(true);
     mutation.mutate(values);
+    reset(values);
   };
 
   return (