@ozdao/martyrs 0.2.604 → 0.2.605

package/src/modules/organizations/components/pages/Organization.vue

@@ -1,139 +1,208 @@
 <template>
-	<div v-if="organizationData" class="pd-thin for-transition w-100">
+	<div v-if="organizationData" class="for-transition w-100">
 
-		<!-- <Breadcrumbs class="mn-b-thin pd-medium bg-light radius-medium"/> -->
-		<!-- <pre>{{organization.state.current}}</pre> -->
+		<!-- A. Cover Section -->
+		<section class="pos-relative h-[20rem] mobile:h-[25rem] radius-medium o-hidden mn-b-thin">
+			<!-- Cover image or fallback -->
+			<img loading="lazy"
+				v-if="organization.state.current.profile.cover"
+				:src="(FILE_SERVER_URL || '') + organization.state.current.profile.cover"
+				class="w-100 h-100 object-cover"
+			/>
+			<div v-else class="w-100 h-100 bg-second"></div>
+
+			<!-- Gradient overlay -->
+			<div
+				class="pos-absolute pos-t-0 pos-l-0 w-100 h-100"
+				style="background: linear-gradient(transparent 40%, rgba(0,0,0,0.7))"
+			></div>
 
-		<section class="flex-center flex flex-column t-center pd-medium radius-medium bg-light mn-b-thin">
+			<!-- Edit button (owner) -->
+			<router-link
+				v-if="auth.state.user._id === organization.state.current.owner"
+				:to="{
+					name: routePrefix + 'OrganizationEdit',
+					params: {
+						_id: organization.state.current._id
+					}
+				}"
+				class="
+					z-index-2
+					cursor-pointer
+					pos-absolute pos-t-regular pos-r-regular
+					radius-extra pd-thin bg-black-transp-40
+				"
+			>
+				<IconEdit
+					class="i-medium"
+					classes="fill-white"
+				/>
+			</router-link>
 
-			<Dropdown 
+			<!-- Report dropdown (non-owner) -->
+			<Dropdown
 				v-if="auth.state.user._id !== organization.state.current.owner"
-				:label="{ component: IconEllipsis, class: 'i-medium t-transp' }"
+				:label="{ component: IconEllipsis, class: 'i-medium t-white' }"
 				:align="'right'"
-				class="cursor-pointer pos-absolute pos-r-regular pos-t-regular pd-thin radius-extra "
+				class="cursor-pointer pos-absolute pos-r-regular pos-t-regular pd-thin radius-extra z-index-2"
 			>
-				<section 
-					class="bg-black pd-thin radius-small"
-				>
-					<FormReport 
+				<section class="bg-black pd-thin radius-small">
+					<FormReport
 						:user="auth.state.user._id"
-						:type="'organization'" 
-						:target="organization.state.current._id" 
-						:text="'Report'" 
+						:type="'organization'"
+						:target="organization.state.current._id"
+						:text="'Report'"
 						class="w-100"
 					>
-						<button 
-							class="w-100 bg-black br-1px br-white-transp-20 t-white button-small button"
-						>
+						<button class="w-100 bg-black br-1px br-white-transp-20 t-white button-small button">
 							Report
 						</button>
 					</FormReport>
 
 					<ButtonToggleMembership
 						v-if="auth.state.user._id && auth.state.user._id !== organization.state.current.owner"
-			      :user="auth.state.user._id"
-			      :type="'organization'" 
-	      	:role="'blocked'" 
-			      :target="organization.state.current._id" 
-			      :status="organization.state.current.isBlocked" 
-			      :text="{create: 'Block', remove: 'Unblock'}"
-			      @updateMembership="event => handleMembershipUpdate(event, 'isBlocked')"
-			       class="t-white w-100 mn-t-thin bg-red" 
-	    	/>
+						:user="auth.state.user._id"
+						:type="'organization'"
+						:role="'blocked'"
+						:target="organization.state.current._id"
+						:status="organization.state.current.isBlocked"
+						:text="{create: 'Block', remove: 'Unblock'}"
+						@updateMembership="event => handleMembershipUpdate(event, 'isBlocked')"
+						class="t-white w-100 mn-t-thin bg-red"
+					/>
 				</section>
-	    </Dropdown>
+			</Dropdown>
 
-	   <router-link
-				v-if="auth.state.user._id === organization.state.current.owner"
-	      :to="{
-					name: routePrefix + 'OrganizationEdit',
-					params: {
-						_id: organization.state.current._id
-					}
-				}" 
-	      class="
-	      	z-index-2
-	        cursor-pointer 
-	        pos-absolute pos-t-regular pos-r-regular
-	        radius-extra pd-thin bg-second
-	      "
-	    >
-	      <IconEdit
-	        class="i-medium"
-	        classes="fill-white"
-	      />
-	    </router-link>
-
-
-			<img loading="lazy" 
-				v-if="organization.state.current.profile.photo" 
-				:src="(FILE_SERVER_URL || '') + organization.state.current.profile.photo" 
-				class="radius-medium bg-light flex-center flex mn-b-small w-8r" 
-			/>
+			<!-- Avatar + Name overlay -->
+			<div class="pos-absolute pos-b-regular pos-l-regular z-index-2 d-flex items-end gap-regular mobile:flex-column mobile:flex-v-center mobile:pos-l-0 mobile:w-100">
+				<img loading="lazy"
+					v-if="organization.state.current.profile.photo"
+					:src="(FILE_SERVER_URL || '') + organization.state.current.profile.photo"
+					class="w-[5rem] h-[5rem] radius-medium bg-light object-cover br-2px br-white"
+				/>
+				<PlaceholderOrganizationPic
+					v-else
+					class="radius-medium i-extra br-2px br-white"
+				/>
+				<div class="mobile:t-center">
+					<h1 class="t-white h2 mn-b-regular">{{ organization.state.current.profile.name }}</h1>
+					<Chips
+						v-if="organization.state.current.profile?.tags?.length > 0"
+						:chips="organization.state.current.profile.tags"
+						class="p-small"
+					/>
+				</div>
+			</div>
+		</section>
+
+		<!-- B. Info Bar -->
+		<section class="bg-light radius-medium pd-medium mn-b-thin d-flex flex-v-center flex-justify-between gap-regular flex-wrap mobile:flex-column mobile:justify-center">
+
+			<!-- Left: Subscribers + info -->
+			<div class="d-flex flex-v-center gap-regular flex-wrap mobile:flex-column mobile:flex-center">
+				<!-- Subscribers + follow -->
+				<div class="d-flex bg-white pd-thin radius-thin flex-center gap-thin">
+					<div class="d-flex flex-center gap-micro">
+						<IconFollowing class="i-medium opacity-50"/>
+						<span class="p-regular fw-medium">{{ organization.state.current.numberOfSubscribers }} followers</span>
+					</div>
+
+					<ButtonToggleMembership
+						v-if="
+							auth.state.user._id
+							&& route.params._id
+							&& route.params._id !== auth.state.user._id
+							&& organization.state.current.owner !== auth.state.user._id
+						"
+						:user="auth.state.user._id"
+						:type="'organization'"
+						:role="'subscriber'"
+						:target="organization.state.current._id"
+						:status="organization.state.current.isSubscriber"
+						:text="{create: '+', remove: '-'}"
+						@updateMembership="event => handleMembershipUpdate(event, 'isSubscriber', 'numberOfSubscribers')"
+						class="p-regular fw-medium radius-extra i-medium"
+					/>
+				</div>
+
+				<!-- Open until -->
+				<span v-if="closingTime" class="d-flex flex-v-center gap-micro">
+					<span class="w-[0.4rem] h-[0.4rem] radius-[50%] bg-green"></span>
+					<span class="p-small">Open until {{ closingTime }}</span>
+				</span>
+
+				<!-- Min order -->
+				<span v-if="spot?.minorder" class="p-small opacity-50">{{ returnCurrency() }} {{ spot.minorder }} min order</span>
+			</div>
+
+			<!-- Right: About + Socials -->
+			<div class="d-flex flex-v-center gap-regular flex-wrap mobile:flex-column mobile:flex-center">
+				<!-- Rating -->
+				<!-- <span class="fw-bold t-main">9.0</span> -->
+
+				<!-- Details button -->
+				<button
+					v-if="spot"
+					@click="showDetailsPopup = true"
+					class="p-small t-main fw-medium cursor-pointer bg-transparent"
+				>
+					About spot
+				</button>
+
+				<!-- Socials -->
+				<div v-if="organization.state.current.socials && Object.values(organization.state.current.socials).some(v => v)">
+					<Socials
+						:telegram="organization.state.current.socials.telegram"
+						:facebook="organization.state.current.socials.facebook"
+						:instagram="organization.state.current.socials.instagram"
+						:twitter="organization.state.current.socials.twitter"
+						:youtube="organization.state.current.socials.youtube"
+					/>
+				</div>
+			</div>
 
-			<PlaceholderOrganizationPic
-				v-else
-				class="radius-medium mn-b-small i-extra"
-			/>
 
-	    <h1
-	    	class="mn-b-thin"
-	    >
-	  		{{ organization.state.current.profile.name }}
-	  	</h1>
-
-	   	<div class="flex-center  pd-r-thin pd-l-thin flex-nowrap flex mn-t-thin bg-white radius-extra w-max">
-	   		<IconFollowing class="i-medium mn-r-micro t-transp"/>
-
-	      <p class="mn-t-thin p-regular fw-medium uppercase mn-b-thin">{{organization.state.current.numberOfSubscribers}} followers</p>
-
-	      <ButtonToggleMembership
-	        v-if="
-		      	auth.state.user._id 
-		      	&& route.params._id 
-		      	&& route.params._id !== auth.state.user._id
-		      	&& organization.state.current.owner !== auth.state.user._id
-		      "
-	        :user="auth.state.user._id"
-	        :type="'organization'" 
-	        :role="'subscriber'" 
-	        :target="organization.state.current._id" 
-	        :status="organization.state.current.isSubscriber" 
-	        :text="{create: '+', remove: '-'}"
-	        @updateMembership="event => handleMembershipUpdate(event, 'isSubscriber', 'numberOfSubscribers')"
-	        class=" mn-l-thin p-regular fw-medium radius-extra i-medium" 
-	      />
-	    </div>
-
-	    <!-- <p class="w-max-50r mn-t-regular mn-b-medium p-medium">
-	   		<Text :text="organization.profile.description || ''" :showToggleText="true" :maxLen="320" />
-	  	</p>   -->
-
-	  	<Chips 
-	    	v-if="organization.state.current.profile?.tags?.length > 0" 
-	    	:chips="organization.state.current.profile.tags"
-	    	class="p-regular"
-	   	/>
-
-
-	    <h4 
-	    	v-if="Object.values(organization.state.current.socials).some(value => value)" 
-	    	class="mn-t-small mn-b-thin"
-	    >
-	  		Find us in socials
-	  	</h4>
-	  	
-	   	<Socials 
-	   		:telegram="organization.state.current.socials.telegram"
-	   		:facebook="organization.state.current.socials.facebook"
-	   		:instagram="organization.state.current.socials.instagram"
-	   		:twitter="organization.state.current.socials.twitter"
-	   		:youtube="organization.state.current.socials.youtube"
-	   	/>
 		</section>
-		
+
+		<!-- C. Details Popup -->
+		<Popup
+			:isPopupOpen="showDetailsPopup"
+			@close-popup="showDetailsPopup = false"
+			class="bg-white radius-medium"
+		>
+			<div class="pd-medium">
+				<!-- Map -->
+				<div v-if="spotLocation" class="h-[14rem] radius-medium o-hidden mn-b-regular">
+					<Map
+						:apiKey="GOOGLE_MAPS_API_KEY"
+						:location="spotLocation"
+					/>
+				</div>
+
+				<!-- Organization name -->
+				<h2 class="mn-b-regular">{{ organization.state.current.profile.name }}</h2>
+
+				<!-- Today's schedule -->
+				<div v-if="todayWorktime" class="mn-b-regular">
+					<h4 class="mn-b-thin">Working hours today</h4>
+					<div v-if="todayWorktime.isOpen && todayWorktime.periods?.length">
+						<p v-for="(period, i) in todayWorktime.periods" :key="i" class="p-regular">
+							{{ period.open }} — {{ period.close }}
+						</p>
+					</div>
+					<p v-else class="p-regular opacity-50">Closed today</p>
+				</div>
+
+				<!-- Address -->
+				<div v-if="spot?.address" class="mn-b-regular">
+					<h4 class="mn-b-thin">Address</h4>
+					<p class="p-regular">{{ spot.address }}</p>
+				</div>
+			</div>
+		</Popup>
+
 		<!-- Backoffice -->
-		<div v-if="MOBILE_APP" @click="() => store.core.state.isOpenSidebar = !store.core.state.isOpenSidebar"  class="pos-relative">
+		<div v-if="MOBILE_APP" @click="() => store.core.state.isOpenSidebar = !store.core.state.isOpenSidebar" class="pos-relative">
 			<div class="bg-light radius-medium pd-medium">
 				<p class="fw-medium t-black-transp-60">
 					Show Menu
@@ -154,7 +223,7 @@
 			</div>
 		</div> -->
 
-		<Products/>
+		<Products :hideHeader="true"/>
 	</div>
 </template>
 
@@ -167,6 +236,8 @@
 	import Dropdown from "@martyrs/src/components/Dropdown/Dropdown.vue";
 	import Text  		from '@martyrs/src/components/Text/Text.vue'
 	import Chips  from '@martyrs/src/components/Chips/Chips.vue'
+	import Popup from '@martyrs/src/components/Popup/Popup.vue'
+	import Map from '@martyrs/src/components/Map/Map.vue'
 	// Mobile Module
 	import Menu from '@martyrs/src/components/Menu/Menu.vue'
 	import MenuItem from '@martyrs/src/components/Menu/MenuItem.vue'
@@ -176,23 +247,27 @@
 	import IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue'
 	import PlaceholderOrganizationPic from '@martyrs/src/modules/icons/placeholders/PlaceholderOrganizationPic.vue'
 	// Organizations
-	import { 
-		DepartmentSub, 
-		ButtonToggleMembership, 
-		Contacts, 
-		Rating, 
-		Socials 
+	import {
+		DepartmentSub,
+		ButtonToggleMembership,
+		Contacts,
+		Rating,
+		Socials
 	} from '@martyrs/src/modules/organizations/organizations.client.js'
-	import User from '@martyrs/src/modules/auth/views/components/blocks/CardUser.vue';
+	import User from '@martyrs/src/modules/core/views/components/blocks/CardUser.vue';
 	// Report Module
 	import FormReport from '@martyrs/src/modules/reports/components/sections/FormReport.vue'
 	// Products modu;e
 	import Products from '@martyrs/src//modules/products/components/pages/Products.vue'
+	// Spots
+	import * as spots from '@martyrs/src/modules/spots/store/spots.js'
 	// Import state
 	import * as auth from '@martyrs/src/modules/auth/views/store/auth.js';
 	import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js'
+	import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js'
 
 const store = useStore();
+const { returnCurrency } = useGlobalMixins();
 
 	import * as organization from '@martyrs/src/modules/organizations/store/organizations.js';
 	import membershipsStore from '@martyrs/src/modules/organizations/store/memberships.store.js';
@@ -209,17 +284,29 @@ const store = useStore();
 	})
 
 	const organizationData = ref(null)
+	const spot = ref(null)
+	const showDetailsPopup = ref(false)
 
 	onMounted(async () => {
-		
+
 		organizationData.value = await organization.actions.read({
-			_id: route.params._id, 
+			_id: route.params._id,
 			user: auth.state.user._id,
 			lookup: ['memberships']
 		})
 
  		await membershipsStore.read({target: route.params._id})
 
+		// Load spots for this organization
+		try {
+			const spotsData = await spots.actions.read({ organization: route.params._id })
+			if (spotsData && spotsData.length > 0) {
+				spot.value = spotsData[0]
+			}
+		} catch (e) {
+			console.error('Failed to load spots:', e)
+		}
+
  		if (typeof gtag === 'function') {
 			gtag('event', 'view_organization', {
 				organization_id: route.params._id,
@@ -231,6 +318,27 @@ const store = useStore();
 		}
 	})
 
+	// Computed: today's worktime from spot
+	const todayWorktime = computed(() => {
+		if (!spot.value?.worktime?.regular?.length) return null
+		const today = new Date().getDay()
+		return spot.value.worktime.regular.find(w => w.dayOfWeek === today) || null
+	})
+
+	// Computed: closing time string
+	const closingTime = computed(() => {
+		if (!todayWorktime.value?.isOpen || !todayWorktime.value?.periods?.length) return null
+		const lastPeriod = todayWorktime.value.periods[todayWorktime.value.periods.length - 1]
+		return lastPeriod?.close || null
+	})
+
+	// Computed: spot location for Map
+	const spotLocation = computed(() => {
+		const coords = spot.value?.location?.coordinates
+		if (!coords || coords.length < 2) return null
+		return { lat: coords[1], lng: coords[0] }
+	})
+
 	// Methods
 	const handleMembershipUpdate = ({ membership, status, target }, statusName, statusNumber) => {
 	  membershipsStore.handleMembershipUpdate(organization.state.current, membership, status, target, statusName, statusNumber)

package/src/modules/organizations/components/pages/OrganizationCreate.vue

@@ -4,15 +4,15 @@
 				
 			<section class="radius-medium pd-big t-white bg-second">
 				<ul class="flex-nowrap flex">
-					<li :class="{'t-transp': route.path !== '/app/organization/create/details'}" class="w-100 mn-r-medium">
+					<li :class="{'opacity-50': route.path !== '/app/organization/create/details'}" class="w-100 mn-r-medium">
 						<span class="h1 d-block">1</span>
 						<span>Fill the data</span>
 					</li>
-					<li :class="{'t-transp': route.path !== '/app/organization/create/documents'}" class="w-100  mn-r-medium">
+					<li :class="{'opacity-50': route.path !== '/app/organization/create/documents'}" class="w-100  mn-r-medium">
 						<span class="h1 d-block">2</span>
 						<span>Add locations</span>
 					</li>
-					<li :class="{'t-transp': route.path !== '/app/organization/create/people'}" class="w-100">
+					<li :class="{'opacity-50': route.path !== '/app/organization/create/people'}" class="w-100">
 						<span class="h1 d-block">3</span>
 						<span>Invite people</span>
 					</li>

package/src/modules/organizations/components/pages/OrganizationDocuments.vue

@@ -6,7 +6,7 @@
 	    <div v-for="(doc, index) in documents" :key="index" @click="openPopup(index)">
 	      <div class="pd-medium bg-white radius-small">
 	      	<h3 class="mn-b-small">{{ doc.name }}</h3>
-	      	<p class="fw-semi t-transp radius-small">{{ doc.status }}</p>
+	      	<p class="fw-semi opacity-50 radius-small">{{ doc.status }}</p>
 	      </div>
 	    </div>
 	  </div>

package/src/modules/organizations/components/pages/OrganizationEdit.vue

@@ -3,23 +3,23 @@
   
   <h3 class="mn-b-small">Access & Privacy</h3>
 
-  <div class="d-grid cols-1 tablet:cols-3 gap-regular mn-b-semi">
+  <div class="d-grid cols-1 tablet:cols-3 gap-thin mn-b-semi">
     <button
       v-for="option in typeOptions"
       :key="option.value"
       @click="organization.state.current.types = [option.value]"
       :class="[
-        'd-flex items-start gap-regular pd-regular radius-semi br-1px t-left transition-timing-2',
+        'd-flex items-start gap-regular pd-regular radius-medium  t-left transition-timing-2',
         isTypeSelected(option.value)
           ? 'br-main bg-main-transp-10'
-          : 'br-light dark:br-dark-thin hover:br-grey bg-white dark:bg-dark'
+          : 'bg-light hover:br-grey'
       ]"
     >
       <div :class="[
         'pd-thin radius-[50%]',
         isTypeSelected(option.value)
           ? 'bg-main t-white'
-          : 'bg-light dark:bg-dark-thin t-dark'
+          : 'bg-white t-dark'
       ]">
         <component :is="option.icon" class="i-medium" />
       </div>
@@ -36,11 +36,20 @@
 
   <h3 class="mn-b-small">Profile</h3>
 
+  <div class="mn-b-thin radius-small w-100 bg-light flex-center flex-column flex">
+    <UploadImage
+      v-model:photo="organization.state.current.profile.cover"
+      :uploadPath="'organizations/' + organization.state.current._id + '/covers'"
+      class="w-100 h-[12rem] o-hidden mn-b-thin radius-small"
+    />
+    <h4 class="mn-b-thin">Upload cover</h4>
+  </div>
+
   <div class="mn-b-thin radius-small w-100 h-10r bg-light flex-center flex-column flex">
-    <UploadImage 
+    <UploadImage
       v-model:photo="organization.state.current.profile.photo"
       :uploadPath="'organizations/' + organization.state.current._id + '/avatars'"
-      class="h-4r w-4r aspect-1x1 o-hidden mn-b-thin radius-extra" 
+      class="h-4r w-4r aspect-1x1 o-hidden mn-b-thin radius-extra"
     />
     <h4>Upload photo</h4>
   </div>

package/src/modules/organizations/components/pages/Organizations.vue

@@ -3,7 +3,7 @@
 		<SectionPageTitle
 			v-if="!MOBILE_APP"
 			title="Groups"
-			:actions="[{ method: () => $router.push({ name: 'CreateOrganization' }), label: '+', class: 'radius-extra i-big hover:scale-[1.05] cursor-pointer t-white bg-second' }]"
+			:actions="[{ method: () => $router.push({ name: 'CreateOrganization' }), label: '+ Add Group' }]"
 			:tabs="route.meta.context !== 'backoffice'
 				? [
 					{ name: 'Owner', value: 'owner' },
@@ -51,8 +51,9 @@
 					    :organization="organization"
 					    :showRating="true"
 					    :showFollowers="true"
+						:showTags="false"
 					    :showProducts="false"
-					    class="bg-light mn-b-thin w-100 o-hidden radius-medium pd-medium"
+					    class="bg-light mn-b-thin w-100 o-hidden radius-medium pd-regular"
 					  />
 		      </Feed>
 			</transition>

package/src/modules/organizations/components/sections/Documents.vue

@@ -8,7 +8,7 @@
 	      	@click="openPopup(index)" 
 	      	class="h-100 pd-medium bg-white radius-small">
 	      	<h3 class="mn-b-small">{{ doc.name }}</h3>
-	      	<p class="fw-semi t-transp radius-small">{{ doc.status }}</p>
+	      	<p class="fw-semi opacity-50 radius-small">{{ doc.status }}</p>
 	      </div>
 	  </div>
 

package/src/modules/organizations/components/sections/MembersAdd.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p class="mn-b-thin t-transp p-regular">{{text}}</p> 
+    <p class="mn-b-thin opacity-50 p-regular">{{text}}</p> 
 
     <div class="mn-b-thin pos-relative">
       <BlockSearch 
@@ -112,7 +112,7 @@
 
   import BlockSearch from '@martyrs/src/modules/core/views/components/blocks/BlockSearch.vue'
 
-  import CardUser from '@martyrs/src/modules/auth/views/components/blocks/CardUser.vue'
+  import CardUser from '@martyrs/src/modules/core/views/components/blocks/CardUser.vue'
 
   import IconDelete from '@martyrs/src/modules/icons/navigation/IconDelete.vue';
   import IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue';