added two transaction panels

web/dashboard.templ

@@ -14,7 +14,7 @@ templ dashboard() {
                     <div class="w-50">
                         <canvas 
                         class="chartjs-chart"  
-                        data-chart-endpoint="/web/dashboard/expenditure_chart"
+                        data-chart-endpoint="/components/data/expenditure_chart"
                         data-chart-type="historical_vs_current"
                         id="IncomeVsExpenditureChart"
                         ></canvas>
@@ -22,7 +22,7 @@ templ dashboard() {
                     <div class="w-50 c-surface1" style="overflow-y: scroll">
                         <div class="m-4 my-5"
                         hx-trigger="load delay:0.25s"
-                        hx-get="web/account_summaries"
+                        hx-get="/components/account_summaries"
                         >
                         </div>
                     </div>
@@ -66,7 +66,7 @@ templ dashboard() {
                 </thead>
                 <tbody 
                 hx-trigger="load delay:0.25s"
-                hx-get="/web/transaction_table_rows"
+                hx-get="/components/data/transaction_table_rows"
                 hx-params=""
                 >
                 </tbody>

web/data_endpoints.go

@@ -39,6 +39,18 @@ func getTransactionsRows(w http.ResponseWriter, req *http.Request) {
     component.Render(context.Background(), w);
 }
 
+func getTransactionQuickAccess(w http.ResponseWriter, req *http.Request) {
+    component := transaction_quick_access();
+    component.Render(context.Background(), w);
+
+}
+
+func getRightPanelQuickAccess(w http.ResponseWriter, req *http.Request) {
+    component := right_panel_quick_access();
+    component.Render(context.Background(), w);
+
+}
+
 func getExpenditureChart(w http.ResponseWriter, req *http.Request) {
     data_package := struct{
         Labels []string `json:"labels"`

web/dataendpoints.templ

@@ -37,7 +37,7 @@ templ account_summary_rows(accounts *[]types.TwoIntsItem){
                 <div class="w-75" style="height:75px">
                     <canvas
                         class="chartjs-chart sparkline-chart"
-                        data-chart-endpoint={"/web/dashboard/account_summary/" + strconv.Itoa(value.Item2)}
+                        data-chart-endpoint={"/components/data/account_summary/" + strconv.Itoa(value.Item2)}
                         data-chart-type="sparkline_summary"
                     ></canvas>
                 </div>
@@ -56,3 +56,14 @@ templ account_summary_rows(accounts *[]types.TwoIntsItem){
         </div>
     }
 }
+
+templ transaction_quick_access() {
+    <div class="c-base h-100">
+    <p> Hello world </p>
+    </div>
+}
+
+templ right_panel_quick_access() {
+    <div class="c-base h-100">
+    </div>
+}

web/router.go

@@ -29,11 +29,15 @@ func WebRouter() http.Handler {
 	r := chi.NewRouter()
 	r.Get("/", getDashboard)
     r.Get("/transactions", getTransactionsPage)
-    r.Get("/web/transaction_table_rows", getTransactionsRows)
-    r.Get("/web/account_summaries", getAccountSummaries)
-    r.Get("/web/dashboard/expenditure_chart", getExpenditureChart)
-    r.Get("/web/dashboard/account_summary/{accountID}", getAccountSummaryChart)
-    r.Handle("/chart.js/*", http.StripPrefix("/chart.js/", http.FileServer(http.Dir("web/node_modules/chart.js/"))))
+
+    r.Get("/components/account_summaries", getAccountSummaries)
+    r.Get("/components/transactions_quick_access", getTransactionQuickAccess)
+    r.Get("/components/right_panel_quick_access", getRightPanelQuickAccess)
+
+    r.Get("/components/data/transaction_table_rows", getTransactionsRows)
+    r.Get("/components/data/expenditure_chart", getExpenditureChart)
+    r.Get("/components/data/account_summary/{accountID}", getAccountSummaryChart)
+
     r.Handle("/static/*", http.StripPrefix("/static/", http.FileServer(http.Dir("web/static/"))))
 	return r
 }

web/sass/nav.scss

@@ -47,3 +47,4 @@ nav {
         background-color: var(--#{$prefix}-nav-hover);
     }
 }
+

web/sass/site.scss

@@ -12,7 +12,7 @@ $border-radius: 8px;
 
 
 body {
-    background-color: var(--#{$prefix}-bg);
+    background-color: var(--#{$prefix}-base);
     height: 97vh;
 }
 
@@ -53,7 +53,7 @@ div#below-header {
 div#left-col {
     width: 15vw;
     padding: 10px;
-    background-color: var(--#{$prefix}-nav-bg);
+    background-color: var(--#{$prefix}-nav-base);
     border-radius: $border-radius;
 }
 
@@ -77,4 +77,18 @@ div#right-col {
     padding: 10px;
     background-color: var(--#{$prefix}-nav-bg);
     border-radius: $border-radius;
+    display: flex;
+    flex-direction: column;
+}
+
+#transactions-quick-access {
+    border-radius: $border-radius;
+    height: 500px;
+}
+
+#right-panel-quick-access {
+    border-radius: $border-radius;
+    margin-top: auto;
+    margin-bottom: 10px;
+    height: 300px;
 }

web/sass/utility-classes.scss

@@ -118,7 +118,7 @@ $w_h_sizes: (
 }
 
 .btn-c-invert {
-    color: var(--#{$prefix}-bg) !important;
+    color: var(--#{$prefix}-base) !important;
 }
 .btn-c-invert:hover {
     color: var(--#{$prefix}-text) !important;
@@ -160,7 +160,7 @@ table.table-striped {
     tbody {
         tr {
             &.row_awaiting_processing {
-                background-color: var(--#{$prefix}-bg) !important;
+                background-color: var(--#{$prefix}-base) !important;
                 max-width: 0px;
                 div {
                     opacity: 0;
@@ -200,7 +200,7 @@ table.table-striped {
     left: 0;
     font-size: 1em;
     background-color: var(--#{$prefix}-overlay0);
-    color: var(--#{$prefix}-bg);
+    color: var(--#{$prefix}-base);
     border-radius: 0px 0px $border-radius $border-radius;
     border-style: solid;
     border-color: var(--#{$prefix}-overlay2);

web/sass/variables.scss

@@ -2,7 +2,7 @@
 
 @each $flavor, $color in catppuccin.$palette {
     body.#{$flavor} {
-        --#{$prefix}-bg: #{map-get($color, 'base')};
+        --#{$prefix}-base: #{map-get($color, 'base')};
         --#{$prefix}-crust: #{map-get($color, 'crust')};
         --#{$prefix}-mantle: #{map-get($color, 'mantle')};
         --#{$prefix}-surface0: #{map-get($color, 'surface0')};

web/templates/index.html

@@ -56,7 +56,22 @@
             {{.InnerHtml}}
         </div>
         <div id="right-col">
+            <div 
+                id="transactions-quick-access"
+                hx-get="/components/transactions_quick_access"
+                hx-swap="innerHtml swap:0.2s settle:0.2s"
+                hx-trigger="load"
+            >
+            </div>
 
+            <div 
+                class=""
+                id="right-panel-quick-access"
+                hx-get="/components/right_panel_quick_access"
+                hx-swap="innerHtml swap:0.2s settle:0.2s"
+                hx-trigger="load"
+            >
+            </div>
         </div>
     </div>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" integrity="sha512-CQBWl4fJHWbryGE+Pc7UAxWMUMNMWzWxF4SQo9CgkJIN1kx6djDQZjh3Y8SZ1d+6I+1zze6Z7kHXO7q3UyZAWw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

web/transactions.templ

@@ -62,7 +62,7 @@ templ transactions_page(userID int, accounts *[]string) {
 
             <button
                 class="borderless-btn ms-auto me-3 c-green ch-teal"
-                style="color: var(--pf-bg);"
+                style="color: var(--pf-base);"
             >
                 <i class="" data-feather="plus"></i>
                 Add New
@@ -99,7 +99,7 @@ templ transactions_page(userID int, accounts *[]string) {
                 </thead>
                 <tbody 
                 hx-trigger="load delay:0.25s"
-                hx-get="/web/transaction_table_rows"
+                hx-get="/components/data/transaction_table_rows"
                 hx-params=""
                 >
                 </tbody>