updating frontend UI

eethansmith · Dec 3, 2023 · ac417de · ac417de
1 parent d0cc4a8
commit ac417de
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 30 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/backend/db.sqlite3 b/backend/db.sqlite3
diff --git a/backend/investmentportfolio/__pycache__/settings.cpython-38.pyc b/backend/investmentportfolio/__pycache__/settings.cpython-38.pyc
diff --git a/backend/investmentportfolio/settings.py b/backend/investmentportfolio/settings.py
@@ -77,12 +77,8 @@
 
 DATABASES = {
     'default': {
-        'ENGINE': 'django.db.backends.postgresql',
-        'NAME': 'eethansmith-investmentportfolio-database',
-        'USER': 'kkupfurluc',
-        'PASSWORD': '1FQ6E653770138EP$',
-        'HOST': 'Azure-DevOps-PostgreSQL-Server.postgres.database.azure.com',
-        'PORT': '5432',  # default postgres port
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': BASE_DIR / 'db.sqlite3',
     }
 }
 

diff --git a/backend/myapp/migrations/0001_initial.py b/backend/myapp/migrations/0001_initial.py
@@ -0,0 +1,32 @@
+# Generated by Django 4.2.7 on 2023-12-03 17:11
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Transaction',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('transaction_type', models.CharField(choices=[('BUY', 'Buy'), ('SELL', 'Sell')], max_length=4)),
+                ('date', models.DateField()),
+                ('time', models.TimeField()),
+                ('ticker_symbol', models.CharField(max_length=10)),
+                ('number_of_shares', models.DecimalField(decimal_places=2, max_digits=10)),
+                ('price_per_share', models.DecimalField(decimal_places=2, max_digits=15)),
+                ('image_filename', models.CharField(max_length=100)),
+                ('transaction_valuation', models.DecimalField(decimal_places=2, max_digits=15)),
+                ('overall_holdings', models.DecimalField(decimal_places=2, max_digits=15)),
+                ('average_cost_per_share', models.DecimalField(decimal_places=2, max_digits=15)),
+                ('realized_gain_loss', models.DecimalField(decimal_places=2, max_digits=15)),
+                ('portfolio_valuation', models.DecimalField(decimal_places=2, max_digits=15)),
+            ],
+        ),
+    ]
diff --git a/backend/myapp/migrations/__pycache__/0001_initial.cpython-38.pyc b/backend/myapp/migrations/__pycache__/0001_initial.cpython-38.pyc
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -44,7 +44,7 @@ h1 {
 
 .nav-links button.active {
   font-weight: bold;
-  color: #F5F5F5; /* You can change the color to make it more noticeable if desired */
+  color: #F5F5F5;
 }
 
 .home-button {
@@ -83,27 +83,61 @@ h1 {
 }
 
 .stock-holdings {
-  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px; /* Increased space between buttons */
 }
 
 .stock-button {
   display: flex;
+  justify-content: space-between; /* This will space out the items within the button */
   align-items: center;
-  padding: 10px;
-  margin: 10px 0;
-  width: 100%; /* Adjust as needed */
-  background-color: #f3f3f3; /* Light background for the button */
-  border: 1px solid #ccc;
+  width: 80%; /* Adjust this as needed */
+  padding: 15px;
+  border: 1px solid #121212;;
+  border-radius: 8px;
+  background-color: #1a1a1a;
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
   cursor: pointer;
+  transition: box-shadow 0.3s ease;
+  color: #F5F5F5;
+}
+
+.stock-button:hover {
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
 }
 
 .stock-image {
-  width: 50px; /* Adjust as needed */
-  height: 50px;
-  margin-right: 15px;
-  border-radius: 50%; /* Circular image */
+  width: 60px; /* Adjust as needed */
+  height: 60px; /* Adjust as needed */
+  border-radius: 50%;
+}
+
+.stock-details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px; /* Added space between info lines */
 }
 
-.stock-info .stock-name {
+.stock-name {
   font-weight: bold;
+  font-size: 1.1em;
+  color: #F5F5F5;
+}
+
+.stock-hold {
+  font-size: 1.1em;
+  color: #F5F5F5;
+}
+
+.stock-value-gain{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.gain-loss {
+  /* Style as needed */
 }
diff --git a/frontend/src/StockHoldings.js b/frontend/src/StockHoldings.js
@@ -1,16 +1,16 @@
-// StockHoldings.js
 import React from 'react';
-import VAUG from './resources/VAUG.png'; // Adjust the path
-import AAPL from './resources/AAPL.png'; // Adjust the path
-import PLTR from './resources/PLTR.png'; // Adjust the path
+// Import images - adjust the path as needed
+import VAUG from './resources/VAUG.png';
+import AAPL from './resources/AAPL.png';
+import PLTR from './resources/PLTR.png';
 
 function StockHoldings() {
   console.log('Rendering StockHoldings');
   const holdings = [
-    // Replace with your actual data and images
-    { name: 'S&P 500', quantity: 10, value: '$1000', imageUrl: VAUG },
-    { name: 'Apple', quantity: 15, value: '$1500', imageUrl: AAPL },
-    { name: 'Palantir', quantity: 15, value: '$1500', imageUrl: PLTR },
+    // Update this with your actual data, images, and gain/loss info
+    { name: 'S&P 500', shares: 10, value: '$1000', gainLoss: '+5%', imageUrl: VAUG },
+    { name: 'Apple', shares: 15, value: '$1500', gainLoss: '+3%', imageUrl: AAPL },
+    { name: 'Palantir', shares: 15, value: '$1500', gainLoss: '-2%', imageUrl: PLTR },
     // ... more stocks
   ];
 
@@ -20,15 +20,19 @@ function StockHoldings() {
       {holdings.map((stock, index) => (
         <button key={index} className="stock-button">
           <img src={stock.imageUrl} alt={stock.name} className="stock-image" />
-          <div className="stock-info">
+          <div className="stock-details">
             <div className="stock-name">{stock.name}</div>
-            <div>{`${stock.quantity} shares`}</div>
-            <div>{`${stock.value}`}</div>
+            <div>{`${stock.shares} shares`}</div>
+          </div>
+          <div className="stock-value-gain">
+            <div>{stock.value}</div>
+            <div className="gain-loss" style={{ color: stock.gainLoss.startsWith('-') ? 'red' : 'green' }}>
+              {stock.gainLoss}
+            </div>
           </div>
         </button>
       ))}
     </div>
   );
 }
-
 export default StockHoldings;