frontend react website designing

backend/myapp/models.py

@@ -1,11 +1,13 @@
 from django.db import models
 
 class Transaction(models.Model):
-    transaction_type = models.CharField(max_length=10)
-    date = models.DateField()
-    time = models.TimeField()
+    TRANSACTION_TYPES = [('BUY', 'Buy'), ('SELL', 'Sell')]
+
+    transaction_type = models.CharField(max_length=4, choices=TRANSACTION_TYPES)
+    date = models.DateField()  # Storing date as a DateField
+    time = models.TimeField()  # Storing time as a TimeField
     ticker_symbol = models.CharField(max_length=10)
-    number_of_shares = models.DecimalField(max_digits=15, decimal_places=2)
+    number_of_shares = models.DecimalField(max_digits=10, decimal_places=2)
     price_per_share = models.DecimalField(max_digits=15, decimal_places=2)
     image_filename = models.CharField(max_length=100)
     transaction_valuation = models.DecimalField(max_digits=15, decimal_places=2)

frontend/src/App.css

@@ -1,38 +1,74 @@
-.App {
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #121212; /* Dark background */
+  color: #F5F5F5; /* Off-white text color */
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.App-header {
+  background-color: #121212; /* Same as body background */
+  padding: 20px;
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+h1 {
+  color: #F5F5F5; /* Off-white color for the title */
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.App-nav {
+  background-color: #1a1a1a; /* Slightly lighter/different than main background for contrast */
+  padding: 10px 20px;
+  text-align: right;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.nav-links button {
+  background-color: transparent;
+  border: none;
+  color: #F5F5F5;
+  margin: 0 10px;
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 17px; /* Adjust this value as needed */
+}
+
+.nav-links button:hover {
+  color: #4CAF50; /* Change color on hover for visual feedback */
+}
+
+.nav-links button.active {
+  font-weight: bold;
+  color: #F5F5F5; /* You can change the color to make it more noticeable if desired */
+}
+
+.home-button {
+  display: inline-block;
+  position: relative;
+  margin-right: 20px;
+}
+
+.home-button img {
+  width: 50px; /* Adjust size as needed */
+  height: 50px;
+  border-radius: 50%; /* Makes the image circular */
+  cursor: pointer;
+}
+
+.home-text {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  bottom: -20px;
+  left: 0;
+  opacity: 0;
+  transition: opacity 0.3s;
+  color: #F5F5F5;
+}
+
+.home-button:hover .home-text {
+  opacity: 1;
 }

frontend/src/App.js

@@ -1,23 +1,34 @@
-import logo from './logo.svg';
+// App.js or your main component file
+import React, { useState } from 'react';
 import './App.css';
+import homeImage from './menu-con.jpg';
 
 function App() {
+  const [activeTab, setActiveTab] = useState('Overall Portfolio'); // default active tab
+
   return (
     <div className="App">
+      <nav className="App-nav">
+        <div className="home-button">
+          <img src={homeImage} alt="Home" />
+          <span className="home-text">Home</span>
+        </div>
+        <div className="nav-links">
+          <button 
+            className={activeTab === 'Overall Portfolio' ? 'active' : ''} 
+            onClick={() => setActiveTab('Overall Portfolio')}
+          >
+            Overall Portfolio
+          </button>
+          <button>Overall Profits</button>
+          <button>Stock Breakdown</button>
+          <button>News</button>
+        </div>
+      </nav>
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        <h1>Overall Portfolio</h1>
       </header>
+      {/* Other components will go here */}
     </div>
   );
 }