feat: Initialize FrontendV2 project with React, Vite, and Tailwind CSS

- Add package.json with dependencies and scripts for development and build
- Include Vite logo and React logo SVGs in public/assets
- Set up Tailwind CSS in App.css and index.css
- Create main App component with routing for Home and Login pages
- Implement LoginPage with authentication logic and error handling
- Add HomePage component as a landing page
- Create MyAlert component for displaying alerts using Chakra UI
- Implement color mode toggle functionality with Chakra UI
- Set up global state management using Jotai for authentication
- Create ProtectedRoutes component to guard routes based on authentication
- Add utility components for Toaster and Tooltip using Chakra UI
- Configure Tailwind CSS and TypeScript settings for the project
- Implement AddLoan component for selecting loan periods and fetching available items

FrontendV2/src/states/README.md

@@ -0,0 +1,36 @@
+# How to use Atoms
+Atoms are the fundamental building blocks of state management in this system. They represent individual pieces of state that can be shared and manipulated across different components.
+
+You can also name it global state.
+
+## Creating an Atom
+to create an atom you have to declare an atom like this:
+
+```ts
+import { atom } from 'jotai';
+
+export const NAME_OF_YOUR_ATOM = atom<type_of_your_atom>(initial_value);
+```
+
+In this project we declare all atoms in the `states/Atoms.tsx`file. Which you can find above this README file.
+
+## Using an Atom
+To use an atom in your component, you can use the `useAtom` hook provided by Jotai. Here's an example of how to use an atom in a React component:
+
+```tsx
+import { useAtom } from 'jotai';
+import { NAME_OF_YOUR_ATOM } from '@/states/Atoms';
+
+const MyComponent = () => {
+  const [value, setValue] = useAtom(NAME_OF_YOUR_ATOM);
+
+  return (
+    <div>
+      <p>Current value: {value}</p>
+      <button onClick={() => setValue(newValue)}>Update Value</button>
+    </div>
+  );
+};
+```
+
+As you can see, you can use `useAtom` like `useState` but the state is global. In this example `value` is the current state of the atom, and `setValue` is a function to update the state, which is also known as the setter function.