From 58e78acbbad81e936bbd9ad84cb1f193ae4ff75d Mon Sep 17 00:00:00 2001
From: Nedim Uka <duplingnedim@gmail.com>
Date: Wed, 23 Apr 2025 07:45:33 +0200
Subject: [PATCH] Added translations to entire app

---
 app/controllers/application_controller.rb     |  12 ++
 .../controllers/main_calendar_controller.js   |  28 ++--
 app/views/companies/_company.html.erb         |  94 ++++++-------
 app/views/companies/_form.html.erb            |  26 ++--
 app/views/companies/edit.html.erb             |   6 +-
 app/views/companies/index.html.erb            |  28 ++--
 app/views/companies/new.html.erb              |   4 +-
 app/views/companies/show.html.erb             |   6 +-
 app/views/layouts/application.html.erb        |   4 +-
 app/views/reservations/_form.html.erb         |  28 ++--
 app/views/reservations/edit.html.erb          |   6 +-
 app/views/reservations/index.html.erb         |  32 ++++-
 app/views/reservations/new.html.erb           |   4 +-
 app/views/teams/_form.html.erb                |  10 +-
 app/views/teams/_team.html.erb                |  12 +-
 app/views/teams/edit.html.erb                 |   6 +-
 app/views/teams/index.html.erb                |  28 ++--
 app/views/teams/new.html.erb                  |   4 +-
 app/views/teams/show.html.erb                 |   6 +-
 config/application.rb                         |   5 +
 config/locales/bs.yml                         | 126 ++++++++++++++++++
 config/locales/en.yml                         | 107 +++++++++++++++
 22 files changed, 450 insertions(+), 132 deletions(-)
 create mode 100644 config/locales/bs.yml

diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index f79f7ea..2199c95 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -1,6 +1,18 @@
 class ApplicationController < ActionController::Base
+  before_action :set_locale
+
   private
 
+  def set_locale
+    I18n.locale = params[:locale] || session[:locale] || I18n.default_locale
+    session[:locale] = I18n.locale
+  end
+
+  # Optional: Make locale persist across requests via URL helpers
+  def default_url_options
+    { locale: I18n.locale }
+  end
+
   def set_company
     company_id = session.fetch(:company_id, Company.first&.id)
     session[:company_id] = company_id
diff --git a/app/javascript/controllers/main_calendar_controller.js b/app/javascript/controllers/main_calendar_controller.js
index 142cf64..475db88 100644
--- a/app/javascript/controllers/main_calendar_controller.js
+++ b/app/javascript/controllers/main_calendar_controller.js
@@ -9,6 +9,15 @@ export default class extends Controller {
     document.getElementById('main-calendar').style.height = '100vh';
     document.getElementById('main-calendar').style.width = '100vw';
     
+    // Get current locale from html lang attribute
+    const currentLocale = document.documentElement.lang || 'bs';
+    
+    // Get translations from data attribute
+    const translations = JSON.parse(document.getElementById('main-calendar').dataset.translations || '{}');
+    
+    // Translation helper
+    const t = (key) => translations[key] || key;
+    
     const calendar = new tui.Calendar(document.getElementById('main-calendar'), {
       defaultView: 'week',
       usageStatistics: false,
@@ -27,9 +36,6 @@ export default class extends Controller {
             displayLabel: 'UTC' // Optional: Label for the timezone
           }
         ]
-        // You might need `primaryTimezone: 'UTC'` here as well, 
-        // depending on the exact library version and desired behavior.
-        // Let's start with just zones.
       },
       // This is important - set the height to 100%
       height: '100%',
@@ -37,7 +43,7 @@ export default class extends Controller {
       width: '100%',
       template: {
         timegridDisplayPrimaryTime({time}) {
-          return `${time.getHours()} sati`;
+          return `${time.getHours()} ${t('hours')}`;
         },
         popupDetailLocation(eventObj) {
           return ''; // Empty location as requested
@@ -50,6 +56,12 @@ export default class extends Controller {
         },
         popupDetailBody(eventObj) {
           return '';
+        },
+        popupEdit() {
+          return t('edit');
+        },
+        popupDelete() {
+          return t('delete');
         }
       },
       calendars: [
@@ -105,7 +117,7 @@ export default class extends Controller {
       const csrfToken = this.getCsrfToken();
       if (!csrfToken) {
         console.error("CSRF token not found.");
-        alert("Error: Could not verify request security token.");
+        alert(t('delete_error'));
         return false;
       }
 
@@ -120,10 +132,10 @@ export default class extends Controller {
 
         if (response.ok) {
           calendar.deleteEvent(reservationId, calendarId);
-          alert('Reservation deleted.');
+          alert(t('delete_success'));
         } else {
           console.error(`Failed to delete reservation ${reservationId}. Status: ${response.status}`);
-          let errorMessage = 'Error deleting reservation.';
+          let errorMessage = t('delete_error');
           try {
             const errorData = await response.json();
             errorMessage += ` Server says: ${errorData.error || JSON.stringify(errorData)}`;
@@ -132,7 +144,7 @@ export default class extends Controller {
         }
       } catch (error) {
         console.error("Network error or exception during delete:", error);
-        alert("Error deleting reservation due to a network or script issue.");
+        alert(t('network_error'));
       }
 
       return false; // Prevent TUI default delete handling
diff --git a/app/views/companies/_company.html.erb b/app/views/companies/_company.html.erb
index c1f327f..fdc81fd 100644
--- a/app/views/companies/_company.html.erb
+++ b/app/views/companies/_company.html.erb
@@ -1,47 +1,51 @@
-<div id="<%= dom_id company %>">
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Name:</strong>
-    <%= company.name %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Id number:</strong>
-    <%= company.id_number %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Vat number:</strong>
-    <%= company.vat_number %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Address line one:</strong>
-    <%= company.address_line_one %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Address line two:</strong>
-    <%= company.address_line_two %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Postal code:</strong>
-    <%= company.postal_code %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">City:</strong>
-    <%= company.city %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Entity:</strong>
-    <%= company.entity %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Country:</strong>
-    <%= company.country %>
-  </p>
+<div id="<%= dom_id company %>" class="bg-white rounded-xl shadow-md overflow-hidden p-6">
+  <div class="flex justify-between items-start mb-4">
+    <h2 class="text-2xl font-bold text-gray-800"><%= company.name %></h2>
+    <div class="flex-shrink-0 bg-blue-100 text-blue-800 rounded-full p-3">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z" />
+      </svg>
+    </div>
+  </div>
 
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <div>
+      <p class="text-sm">
+        <span class="font-medium text-gray-500"><%= t('companies.company.id_number') %></span> 
+        <%= company.id_number %>
+      </p>
+      <p class="text-sm mt-2">
+        <span class="font-medium text-gray-500"><%= t('companies.company.vat_number') %></span> 
+        <%= company.vat_number %>
+      </p>
+      <p class="text-sm mt-2">
+        <span class="font-medium text-gray-500"><%= t('companies.company.entity') %></span> 
+        <%= company.entity %>
+      </p>
+      <p class="text-sm mt-2">
+        <span class="font-medium text-gray-500"><%= t('companies.company.country') %></span> 
+        <%= company.country %>
+      </p>
+    </div>
+    <div>
+      <p class="text-sm">
+        <span class="font-medium text-gray-500"><%= t('companies.company.address_line_one') %></span> 
+        <%= company.address_line_one %>
+      </p>
+      <% if company.address_line_two.present? %>
+        <p class="text-sm mt-2">
+          <span class="font-medium text-gray-500"><%= t('companies.company.address_line_two') %></span> 
+          <%= company.address_line_two %>
+        </p>
+      <% end %>
+      <p class="text-sm mt-2">
+        <span class="font-medium text-gray-500"><%= t('companies.company.postal_code') %></span> 
+        <%= company.postal_code %>
+      </p>
+      <p class="text-sm mt-2">
+        <span class="font-medium text-gray-500"><%= t('companies.company.city') %></span> 
+        <%= company.city %>
+      </p>
+    </div>
+  </div>
 </div>
diff --git a/app/views/companies/_form.html.erb b/app/views/companies/_form.html.erb
index 2f0317d..4a37c07 100644
--- a/app/views/companies/_form.html.erb
+++ b/app/views/companies/_form.html.erb
@@ -1,7 +1,7 @@
 <%= form_with(model: company, class: "contents") do |form| %>
   <% if company.errors.any? %>
     <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
-      <h2><%= pluralize(company.errors.count, "error") %> prohibited this company from being saved:</h2>
+      <h2><%= t('companies.form.errors.header', count: company.errors.count) %></h2>
 
       <ul>
         <% company.errors.each do |error| %>
@@ -12,51 +12,55 @@
   <% end %>
 
   <div class="my-5">
-    <%= form.label :name %>
+    <%= form.label :name, t('companies.form.name') %>
     <%= form.text_field :name, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="my-5">
-    <%= form.label :id_number %>
+    <%= form.label :id_number, t('companies.form.id_number') %>
     <%= form.text_field :id_number, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="my-5">
-    <%= form.label :vat_number %>
+    <%= form.label :vat_number, t('companies.form.vat_number') %>
     <%= form.text_field :vat_number, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="my-5">
-    <%= form.label :address_line_one %>
+    <%= form.label :address_line_one, t('companies.form.address_line_one') %>
     <%= form.text_field :address_line_one, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="my-5">
-    <%= form.label :address_line_two %>
+    <%= form.label :address_line_two, t('companies.form.address_line_two') %>
     <%= form.text_field :address_line_two, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="my-5">
-    <%= form.label :postal_code %>
+    <%= form.label :postal_code, t('companies.form.postal_code') %>
     <%= form.text_field :postal_code, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="my-5">
-    <%= form.label :city %>
+    <%= form.label :city, t('companies.form.city') %>
     <%= form.text_field :city, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="my-5">
-    <%= form.label :entity %>
+    <%= form.label :entity, t('companies.form.entity') %>
     <%= form.text_field :entity, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="my-5">
-    <%= form.label :country %>
+    <%= form.label :country, t('companies.form.country') %>
     <%= form.text_field :country, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="inline">
-    <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+    <% if company.new_record? %>
+      <%= form.submit t('companies.form.create'), class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+    <% else %>
+      <%= form.submit t('companies.form.update'), class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+    <% end %>
   </div>
 <% end %>
diff --git a/app/views/companies/edit.html.erb b/app/views/companies/edit.html.erb
index ad4c38d..94f3878 100644
--- a/app/views/companies/edit.html.erb
+++ b/app/views/companies/edit.html.erb
@@ -1,8 +1,8 @@
 <div class="mx-auto md:w-2/3 w-full">
-  <h1 class="font-bold text-4xl">Editing company</h1>
+  <h1 class="font-bold text-4xl"><%= t('.title') %></h1>
 
   <%= render "form", company: @company %>
 
-  <%= link_to "Show this company", @company, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-  <%= link_to "Back to companies", companies_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <%= link_to t('.show'), @company, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <%= link_to t('.back'), companies_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
 </div>
diff --git a/app/views/companies/index.html.erb b/app/views/companies/index.html.erb
index 82e16c3..b4746db 100644
--- a/app/views/companies/index.html.erb
+++ b/app/views/companies/index.html.erb
@@ -1,21 +1,27 @@
-<div class="w-full">
+<div class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
   <% if notice.present? %>
-    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
+    <div class="mb-8 mt-4">
+      <p class="py-3 px-4 bg-green-50 text-green-700 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
+    </div>
   <% end %>
 
-  <% content_for :title, "Companies" %>
+  <% content_for :title, t('.title') %>
 
-  <div class="flex justify-between items-center">
-    <h1 class="font-bold text-4xl">Companies</h1>
-    <%= link_to "New company", new_company_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
+  <div class="flex justify-between items-center mb-12">
+    <h1 class="font-bold text-4xl text-gray-900"><%= t('.title') %></h1>
+    <%= link_to new_company_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white font-medium hover:bg-blue-700 transition-colors duration-200 flex items-center" do %>
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+      </svg>
+      <%= t('.new_company') %>
+    <% end %>
   </div>
 
-  <div id="companies" class="min-w-full">
+  <div id="companies" class="grid gap-6 mb-8">
     <% @companies.each do |company| %>
-      <%= render company %>
-      <p>
-        <%= link_to "Show this company", company, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-      </p>
+      <%= link_to company, class: "block transition-all duration-200 hover:shadow-lg hover:-translate-y-1" do %>
+        <%= render company %>
+      <% end %>
     <% end %>
   </div>
 </div>
diff --git a/app/views/companies/new.html.erb b/app/views/companies/new.html.erb
index 150e084..6391727 100644
--- a/app/views/companies/new.html.erb
+++ b/app/views/companies/new.html.erb
@@ -1,7 +1,7 @@
 <div class="mx-auto md:w-2/3 w-full">
-  <h1 class="font-bold text-4xl">New company</h1>
+  <h1 class="font-bold text-4xl"><%= t('.title') %></h1>
 
   <%= render "form", company: @company %>
 
-  <%= link_to "Back to companies", companies_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <%= link_to t('.back'), companies_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
 </div>
diff --git a/app/views/companies/show.html.erb b/app/views/companies/show.html.erb
index 1751f75..0768b90 100644
--- a/app/views/companies/show.html.erb
+++ b/app/views/companies/show.html.erb
@@ -6,10 +6,10 @@
 
     <%= render @company %>
 
-    <%= link_to "Edit this company", edit_company_path(@company), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-    <%= link_to "Back to companies", companies_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+    <%= link_to t('.edit'), edit_company_path(@company), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+    <%= link_to t('.back'), companies_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
     <div class="inline-block ml-2">
-      <%= button_to "Destroy this company", @company, method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>
+      <%= button_to t('.destroy'), @company, method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>
     </div>
   </div>
 </div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index ecbddf7..43feb1f 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="<%= I18n.locale %>">
   <head>
-    <title>Terminator</title>
+    <title><%= content_for?(:title) ? yield(:title) : "Terminator" %></title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
diff --git a/app/views/reservations/_form.html.erb b/app/views/reservations/_form.html.erb
index c4c8f86..7e4e573 100644
--- a/app/views/reservations/_form.html.erb
+++ b/app/views/reservations/_form.html.erb
@@ -6,7 +6,7 @@
                 }) do |form| %>
     <% if reservation.errors.any? %>
       <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
-        <h2><%= pluralize(reservation.errors.count, "error") %> prohibited this reservation from being saved:</h2>
+        <h2><%= t('reservations.form.errors.header', count: reservation.errors.count) %></h2>
 
         <ul>
           <% reservation.errors.each do |error| %>
@@ -17,10 +17,10 @@
     <% end %>
 
     <div class="my-5">
-      <%= form.label :customer %>
+      <%= form.label :customer, t('reservations.form.customer') %>
       <%= form.select :customer_composite_key,
                     [],  # Start with empty options
-                    { prompt: "Type to search customers..." },
+                    { prompt: t('reservations.form.search_prompt') },
                     {
                       selected: (reservation.persisted? && reservation.customer ? reservation.customer.to_param : nil),
                       class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full",
@@ -29,7 +29,7 @@
     </div>
 
     <div class="my-5">
-      <%= form.label :phone_number %>
+      <%= form.label :phone_number, t('reservations.form.phone_number') %>
       <%= form.telephone_field :customer_original_phone,
                             class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full",
                             data: { customer_search_target: "phoneField" } %>
@@ -37,21 +37,21 @@
 
     <div data-customer-search-target="newCustomerFields" class="hidden">
       <div class="my-5">
-        <%= form.label :first_name %>
+        <%= form.label :first_name, t('reservations.form.first_name') %>
         <%= form.text_field :customer_first_name,
                           class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full",
                           data: { customer_search_target: "firstNameField" } %>
       </div>
 
       <div class="my-5">
-        <%= form.label :surname %>
+        <%= form.label :surname, t('reservations.form.surname') %>
         <%= form.text_field :customer_surname,
                           class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full",
                           data: { customer_search_target: "surnameField" } %>
       </div>
 
       <div class="my-5">
-        <%= form.label :birth_year %>
+        <%= form.label :birth_year, t('reservations.form.birth_year') %>
         <%= form.number_field :customer_birth_year,
                             class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full",
                             data: { customer_search_target: "birthYearField" } %>
@@ -59,30 +59,34 @@
     </div>
 
     <div class="my-5">
-      <%= form.label :team_id %>
+      <%= form.label :team_id, t('reservations.form.team') %>
       <%= form.collection_select :team_id,
                               @company.teams,
                               :id,
                               :name,
-                              { prompt: "Select a team" },
+                              { prompt: t('reservations.form.select_team') },
                               class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
     </div>
 
     <div class="my-5">
-      <%= form.label :start_time %>
+      <%= form.label :start_time, t('reservations.form.start_time') %>
       <%= form.datetime_field :start_time, 
                              class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full",
                              id: "start_time_field" %>
     </div>
 
     <div class="my-5">
-      <%= form.label :end_time %>
+      <%= form.label :end_time, t('reservations.form.end_time') %>
       <%= form.datetime_field :end_time, 
                              class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full",
                              id: "end_time_field" %>
     </div>
 
     <div class="inline">
-      <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+      <% if reservation.new_record? %>
+        <%= form.submit t('reservations.form.create'), class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+      <% else %>
+        <%= form.submit t('reservations.form.update'), class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+      <% end %>
     </div>
   <% end %>
diff --git a/app/views/reservations/edit.html.erb b/app/views/reservations/edit.html.erb
index 05edde3..5ec6d44 100644
--- a/app/views/reservations/edit.html.erb
+++ b/app/views/reservations/edit.html.erb
@@ -1,8 +1,8 @@
 <div class="mx-auto md:w-2/3 w-full">
-  <h1 class="font-bold text-4xl">Editing reservation</h1>
+  <h1 class="font-bold text-4xl"><%= t('.title') %></h1>
 
   <%= render "form", reservation: @reservation %>
 
-  <%= link_to "Show this reservation", @reservation, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-  <%= link_to "Back to reservations", reservations_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <%= link_to t('.show'), @reservation, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <%= link_to t('.back'), reservations_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
 </div>
diff --git a/app/views/reservations/index.html.erb b/app/views/reservations/index.html.erb
index d957cef..f595860 100644
--- a/app/views/reservations/index.html.erb
+++ b/app/views/reservations/index.html.erb
@@ -2,35 +2,53 @@
 <div class="reservation-page" data-controller="main-calendar" style="display: block; width: 100%; height: 100vh; overflow: hidden;">
   <!-- Fixed height header -->
   <header style="height: 80px; padding: 15px; background-color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: relative; z-index: 100;">
-    <% content_for :title, "Reservations" %>
+    <% content_for :title, t('.title') %>
 
     <div class="flex justify-between items-center-calendar">
       <div class="flex items-center space-x-4">
-        <h1 class="font-bold text-4xl px-5">Reservations</h1>
+        <h1 class="font-bold text-4xl px-5"><%= t('.title') %></h1>
         <% if notice.present? %>
           <p class="py-1 px-3 ml-4 bg-green-100 text-green-700 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
         <% end %>
         <div class="flex items-center space-x-2 ml-6" data-main-calendar-target="navigation">
           <button data-action="main-calendar#prev" class="px-3 py-1 bg-gray-100 rounded-md hover:bg-gray-200">
-            &laquo; Prev
+            <%= t('.prev') %>
           </button>
           <button data-action="main-calendar#today" class="px-3 py-1 bg-gray-100 rounded-md hover:bg-gray-200">
-            Today
+            <%= t('.today') %>
           </button>
           <button data-action="main-calendar#next" class="px-3 py-1 bg-gray-100 rounded-md hover:bg-gray-200">
-            Next &raquo;
+            <%= t('.next') %>
           </button>
           <span data-main-calendar-target="dateDisplay" class="ml-3 font-medium"></span>
         </div>
       </div>
-      <%= link_to "New reservation", new_reservation_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium ml-auto" %>
+      <%= link_to t('.new_reservation'), new_reservation_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium ml-auto" %>
     </div>
   </header>
   
   <!-- Calendar container - with fixed top position and precise height calculation -->
   <div class="calendar-container" style="height: calc(100vh - 80px); width: 100%; position: relative; top: 0; left: 0;">
     <div style="height: 100%; width: 100%;">
-      <%= tag.div nil, data: {reservations: @reservations.to_json}, id: "main-calendar", style: "height: 100%; width: 100%;" %>
+      <% 
+        calendar_translations = {
+          hours: t('reservations.calendar.hours'),
+          delete_confirm: t('reservations.calendar.delete_confirm'),
+          delete_success: t('reservations.calendar.delete_success'),
+          delete_error: t('reservations.calendar.delete_error'),
+          network_error: t('reservations.calendar.network_error'),
+          edit: t('reservations.calendar.edit'),
+          delete: t('reservations.calendar.delete')
+        }.to_json 
+      %>
+      <%= tag.div nil, 
+          data: {
+            reservations: @reservations.to_json, 
+            translations: calendar_translations
+          }, 
+          id: "main-calendar", 
+          style: "height: 100%; width: 100%;" 
+      %>
     </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/views/reservations/new.html.erb b/app/views/reservations/new.html.erb
index 9c7b7c5..c64d719 100644
--- a/app/views/reservations/new.html.erb
+++ b/app/views/reservations/new.html.erb
@@ -1,7 +1,7 @@
 <div class="mx-auto md:w-2/3 w-full">
-  <h1 class="font-bold text-4xl">New reservation</h1>
+  <h1 class="font-bold text-4xl"><%= t('.title') %></h1>
 
   <%= render "form", reservation: @reservation %>
 
-  <%= link_to "Back to reservations", reservations_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <%= link_to t('.back'), reservations_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
 </div>
diff --git a/app/views/teams/_form.html.erb b/app/views/teams/_form.html.erb
index 6bd390e..d215d07 100644
--- a/app/views/teams/_form.html.erb
+++ b/app/views/teams/_form.html.erb
@@ -1,7 +1,7 @@
 <%= form_with(model: team, class: "contents") do |form| %>
   <% if team.errors.any? %>
     <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
-      <h2><%= pluralize(team.errors.count, "error") %> prohibited this team from being saved:</h2>
+      <h2><%= t('teams.form.errors.header', count: team.errors.count) %></h2>
       <ul>
         <% team.errors.each do |error| %>
           <li><%= error.full_message %></li>
@@ -11,11 +11,15 @@
   <% end %>
 
   <div class="my-5">
-    <%= form.label :name %>
+    <%= form.label :name, t('teams.form.name') %>
     <%= form.text_field :name, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="inline">
-    <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+    <% if team.new_record? %>
+      <%= form.submit t('teams.form.create'), class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+    <% else %>
+      <%= form.submit t('teams.form.update'), class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+    <% end %>
   </div>
 <% end %>
diff --git a/app/views/teams/_team.html.erb b/app/views/teams/_team.html.erb
index 086c2a2..3cdf5d3 100644
--- a/app/views/teams/_team.html.erb
+++ b/app/views/teams/_team.html.erb
@@ -1,2 +1,12 @@
-<div id="<%= dom_id team %>">
+<div id="<%= dom_id team %>" class="bg-white rounded-xl shadow-md overflow-hidden mb-6 hover:shadow-lg transition-shadow duration-300">
+  <div class="p-6 flex items-center justify-between">
+    <div>
+      <h2 class="text-2xl font-bold text-gray-800"><%= team.name %></h2>
+    </div>
+    <div class="flex-shrink-0 bg-blue-100 text-blue-800 rounded-full p-3">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
+      </svg>
+    </div>
+  </div>
 </div>
diff --git a/app/views/teams/edit.html.erb b/app/views/teams/edit.html.erb
index b28f46a..95e7bdc 100644
--- a/app/views/teams/edit.html.erb
+++ b/app/views/teams/edit.html.erb
@@ -1,8 +1,8 @@
 <div class="mx-auto md:w-2/3 w-full">
-  <h1 class="font-bold text-4xl">Editing team</h1>
+  <h1 class="font-bold text-4xl"><%= t('.title') %></h1>
 
   <%= render "form", team: @team %>
 
-  <%= link_to "Show this team", @team, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-  <%= link_to "Back to teams", teams_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <%= link_to t('.show'), @team, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <%= link_to t('.back'), teams_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
 </div>
diff --git a/app/views/teams/index.html.erb b/app/views/teams/index.html.erb
index 61bbffa..2e032e3 100644
--- a/app/views/teams/index.html.erb
+++ b/app/views/teams/index.html.erb
@@ -1,21 +1,27 @@
-<div class="w-full">
+<div class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
   <% if notice.present? %>
-    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
+    <div class="mb-8 mt-4">
+      <p class="py-3 px-4 bg-green-50 text-green-700 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
+    </div>
   <% end %>
 
-  <% content_for :title, "Teams" %>
+  <% content_for :title, t('.title') %>
 
-  <div class="flex justify-between items-center">
-    <h1 class="font-bold text-4xl">Teams</h1>
-    <%= link_to "New team", new_team_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
+  <div class="flex justify-between items-center mb-12">
+    <h1 class="font-bold text-4xl text-gray-900"><%= t('.title') %></h1>
+    <%= link_to new_team_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white font-medium hover:bg-blue-700 transition-colors duration-200 flex items-center" do %>
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+      </svg>
+      <%= t('.new_team') %>
+    <% end %>
   </div>
 
-  <div id="teams" class="min-w-full">
+  <div id="teams" class="grid gap-6 mb-8">
     <% @teams.each do |team| %>
-      <%= render team %>
-      <p>
-        <%= link_to "Show this team", team, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-      </p>
+      <%= link_to team, class: "block transition-all duration-200 hover:shadow-lg hover:-translate-y-1" do %>
+        <%= render team %>
+      <% end %>
     <% end %>
   </div>
 </div>
diff --git a/app/views/teams/new.html.erb b/app/views/teams/new.html.erb
index de77350..bee8d73 100644
--- a/app/views/teams/new.html.erb
+++ b/app/views/teams/new.html.erb
@@ -1,7 +1,7 @@
 <div class="mx-auto md:w-2/3 w-full">
-  <h1 class="font-bold text-4xl">New team</h1>
+  <h1 class="font-bold text-4xl"><%= t('.title') %></h1>
 
   <%= render "form", team: @team %>
 
-  <%= link_to "Back to teams", teams_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <%= link_to t('.back'), teams_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
 </div>
diff --git a/app/views/teams/show.html.erb b/app/views/teams/show.html.erb
index 2f12a4f..8390aa7 100644
--- a/app/views/teams/show.html.erb
+++ b/app/views/teams/show.html.erb
@@ -6,10 +6,10 @@
 
     <%= render @team %>
 
-    <%= link_to "Edit this team", edit_team_path(@team), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-    <%= link_to "Back to teams", teams_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+    <%= link_to t('.edit'), edit_team_path(@team), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+    <%= link_to t('.back'), teams_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
     <div class="inline-block ml-2">
-      <%= button_to "Destroy this team", @team, method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>
+      <%= button_to t('.destroy'), @team, method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>
     </div>
   </div>
 </div>
diff --git a/config/application.rb b/config/application.rb
index 90e949d..ca63fcb 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -16,6 +16,11 @@ module Terminator
     # Common ones are `templates`, `generators`, or `middleware`, for example.
     config.autoload_lib(ignore: %w(assets tasks))
 
+    # Set available locales and default locale
+    config.i18n.available_locales = [:en, :bs]
+    config.i18n.default_locale = :bs
+    config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}')]
+
     # Configuration for the application, engines, and railties goes here.
     #
     # These settings can be overridden in specific environments using the files
diff --git a/config/locales/bs.yml b/config/locales/bs.yml
new file mode 100644
index 0000000..7cde88c
--- /dev/null
+++ b/config/locales/bs.yml
@@ -0,0 +1,126 @@
+bs:
+  # Add Bosnian translations here
+  reservations:
+    index:
+      title: "Rezervacije"
+      prev: "« Prethodna"
+      today: "Danas"
+      next: "Sljedeća »"
+      new_reservation: "Nova rezervacija" # TODO: Translate to Bosnian 
+    calendar:
+      hours: "sati"
+      delete_confirm: "Jeste li sigurni da želite izbrisati ovu rezervaciju?"
+      delete_success: "Rezervacija je izbrisana."
+      delete_error: "Greška prilikom brisanja rezervacije."
+      network_error: "Greška prilikom brisanja rezervacije zbog problema s mrežom ili skriptom."
+      edit: "Uredi"
+      delete: "Obriši"
+    # Keys for form and edit/new pages
+    edit:
+      title: "Uređivanje rezervacije"
+      show: "Prikaži ovu rezervaciju"
+      back: "Nazad na rezervacije"
+    new:
+      title: "Nova rezervacija"
+      back: "Nazad na rezervacije"
+    form:
+      customer: "Klijent"
+      search_prompt: "Unesite za pretragu klijenata..."
+      phone_number: "Broj telefona"
+      first_name: "Ime"
+      surname: "Prezime"
+      birth_year: "Godina rođenja"
+      team: "Tim"
+      select_team: "Odaberite tim"
+      start_time: "Vrijeme početka"
+      end_time: "Vrijeme završetka"
+      submit: "Pošalji"
+      update: "Ažuriraj rezervaciju"
+      create: "Kreiraj rezervaciju"
+      errors:
+        header: "%{count} greška/e spriječila/e je da se ova rezervacija sačuva:"
+    create:
+      reservation_created: "Rezervacija je uspješno kreirana."
+    update:
+      reservation_updated: "Rezervacija je uspješno ažurirana."
+    destroy:
+      reservation_destroyed: "Rezervacija je uspješno izbrisana."
+
+  teams:
+    create:
+      team_created: "Tim je uspješno kreiran."
+    update:
+      team_updated: "Tim je uspješno ažuriran."
+    destroy:
+      team_destroyed: "Tim je uspješno izbrisan."
+    index:
+      title: "Timovi"
+      new_team: "Novi tim"
+      show_team: "Prikaži ovaj tim"
+    new:
+      title: "Novi tim"
+      back: "Nazad na timove"
+    edit:
+      title: "Uređivanje tima"
+      show: "Prikaži ovaj tim"
+      back: "Nazad na timove"
+    show:
+      edit: "Uredi ovaj tim"
+      back: "Nazad na timove"
+      destroy: "Izbriši ovaj tim"
+    form:
+      name: "Naziv"
+      submit: "Pošalji"
+      update: "Ažuriraj tim"
+      create: "Kreiraj tim"
+      errors:
+        header: "%{count} greška/e spriječila/e je da se ovaj tim sačuva:"
+
+  companies:
+    create:
+      company_created: "Kompanija je uspješno kreirana."
+    update:
+      company_updated: "Kompanija je uspješno ažurirana."
+    destroy:
+      company_destroyed: "Kompanija je uspješno izbrisana."
+    index:
+      title: "Kompanije"
+      new_company: "Nova kompanija"
+      show_company: "Prikaži ovu kompaniju"
+    new:
+      title: "Nova kompanija"
+      back: "Nazad na kompanije"
+    edit:
+      title: "Uređivanje kompanije"
+      show: "Prikaži ovu kompaniju"
+      back: "Nazad na kompanije"
+    show:
+      edit: "Uredi ovu kompaniju"
+      back: "Nazad na kompanije"
+      destroy: "Izbriši ovu kompaniju"
+    form:
+      name: "Naziv"
+      id_number: "ID broj"
+      vat_number: "PDV broj"
+      address_line_one: "Adresa (prva linija)"
+      address_line_two: "Adresa (druga linija)"
+      postal_code: "Poštanski broj"
+      city: "Grad"
+      entity: "Entitet"
+      country: "Država"
+      submit: "Pošalji"
+      update: "Ažuriraj kompaniju"
+      create: "Kreiraj kompaniju"
+      errors:
+        header: "%{count} greška/e spriječila/e je da se ova kompanija sačuva:"
+    company:
+      name: "Naziv:"
+      id_number: "ID broj:"
+      vat_number: "PDV broj:"
+      address_line_one: "Adresa (prva linija):"
+      address_line_two: "Adresa (druga linija):"
+      postal_code: "Poštanski broj:"
+      city: "Grad:"
+      entity: "Entitet:"
+      country: "Država:"
+ 
\ No newline at end of file
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 173cbbc..28b7ce0 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -28,6 +28,7 @@
 #       enabled: "ON"
 
 en:
+  # Add English translations here
   hello: "Hello world"
   customers:
     create:
@@ -45,6 +46,43 @@ en:
       reservation_updated: "Reservation was successfully updated."
     destroy:
       reservation_destroyed: "Reservation was successfully destroyed."
+    index:
+      title: "Reservations"
+      prev: "« Prev"
+      today: "Today"
+      next: "Next »"
+      new_reservation: "New reservation"
+    calendar:
+      hours: "hours"
+      delete_confirm: "Are you sure you want to delete this reservation?"
+      delete_success: "Reservation deleted."
+      delete_error: "Error deleting reservation."
+      network_error: "Error deleting reservation due to a network or script issue."
+      edit: "Edit"
+      delete: "Delete"
+    edit:
+      title: "Editing reservation"
+      show: "Show this reservation"
+      back: "Back to reservations"
+    new:
+      title: "New reservation"
+      back: "Back to reservations"
+    form:
+      customer: "Customer"
+      search_prompt: "Type to search customers..."
+      phone_number: "Phone number"
+      first_name: "First name"
+      surname: "Surname"
+      birth_year: "Birth year"
+      team: "Team"
+      select_team: "Select a team"
+      start_time: "Start time"
+      end_time: "End time"
+      submit: "Submit"
+      update: "Update Reservation"
+      create: "Create Reservation"
+      errors:
+        header: "%{count} prohibited this reservation from being saved:"
   teams:
     create:
       team_created: "Team was successfully created."
@@ -52,3 +90,72 @@ en:
       team_updated: "Team was successfully updated."
     destroy:
       team_destroyed: "Team was successfully destroyed."
+    index:
+      title: "Teams"
+      new_team: "New team"
+      show_team: "Show this team"
+    new:
+      title: "New team"
+      back: "Back to teams"
+    edit:
+      title: "Editing team"
+      show: "Show this team"
+      back: "Back to teams"
+    show:
+      edit: "Edit this team"
+      back: "Back to teams"
+      destroy: "Destroy this team"
+    form:
+      name: "Name"
+      submit: "Submit"
+      update: "Update Team"
+      create: "Create Team"
+      errors:
+        header: "%{count} prohibited this team from being saved:"
+  companies:
+    create:
+      company_created: "Company was successfully created."
+    update:
+      company_updated: "Company was successfully updated."
+    destroy:
+      company_destroyed: "Company was successfully destroyed."
+    index:
+      title: "Companies"
+      new_company: "New company"
+      show_company: "Show this company"
+    new:
+      title: "New company"
+      back: "Back to companies"
+    edit:
+      title: "Editing company"
+      show: "Show this company"
+      back: "Back to companies"
+    show:
+      edit: "Edit this company"
+      back: "Back to companies"
+      destroy: "Destroy this company"
+    form:
+      name: "Name"
+      id_number: "ID number"
+      vat_number: "VAT number"
+      address_line_one: "Address line one"
+      address_line_two: "Address line two"
+      postal_code: "Postal code"
+      city: "City"
+      entity: "Entity"
+      country: "Country"
+      submit: "Submit"
+      update: "Update Company"
+      create: "Create Company"
+      errors:
+        header: "%{count} prohibited this company from being saved:"
+    company:
+      name: "Name:"
+      id_number: "ID number:"
+      vat_number: "VAT number:"
+      address_line_one: "Address line one:"
+      address_line_two: "Address line two:"
+      postal_code: "Postal code:"
+      city: "City:"
+      entity: "Entity:"
+      country: "Country:"